Editlink improvement

2 files changed, 18 insertions, 8 deletions

diff --git a/tpl/default/css/shaarli.css b/tpl/default/css/shaarli.css
index 339ba300..0c70d630 100644
--- a/tpl/default/css/shaarli.css
+++ b/tpl/default/css/shaarli.css
@@ -605,6 +605,7 @@ pre {
     background: url(../img/noise.png) #1fa67a;
     border-radius: 5px;
     box-shadow: 1px 1px 2px #797979;
+    color: #b0ddce;
 }
 
 .page-form h2 {
@@ -618,7 +619,9 @@ pre {
     border-bottom: 1px solid #797979;
 }
 
-.page-form input[type="text"], .page-form input[type="password"] {
+.page-form input[type="text"],
+.page-form input[type="password"],
+.page-form textarea {
     margin: 10px 0;
     padding: 5px 5px 3px 15px;
     height: 30px;
@@ -630,6 +633,13 @@ pre {
     color: #b0ddce;
 }
 
+.page-form textarea {
+    height: 240px;
+    resize: vertical;
+    overflow-y: auto;
+    word-wrap:break-word
+}
+
 /* because chrome */
 .page-form input[type="text"]::-webkit-input-placeholder,
 .page-form input[type="password"]::-webkit-input-placeholder {
@@ -659,10 +669,6 @@ pre {
     text-align: center;
 }
 
-.page-form-light p {
-    color: #b0ddce;
-}
-
 /**
  * PAGE FORM - COMPLETE
  */
@@ -791,7 +797,6 @@ pre {
     color: #fff;
 }
 
-
 .linklist-item-title .label-private {
     border: solid 1px #d0fff0;
     font-family: Arial, sans-serif;
diff --git a/tpl/default/editlink.html b/tpl/default/editlink.html
index a0ea91b2..95e60cc1 100644
--- a/tpl/default/editlink.html
+++ b/tpl/default/editlink.html
@@ -9,7 +9,7 @@
   {/if}
   <div id="editlinkform" class="pure-g">
     <div class="pure-u-lg-1-5 pure-u-1-8"></div>
-    <form method="post" name="linkform" class="page-form pure-u-lg-3-5 pure-u-3-4" >
+    <form method="post" name="linkform" class="page-form pure-u-lg-3-5 pure-u-3-4 page-form page-form-light">
       <h2>{'Shaare'|t}</h2>
       <input type="hidden" name="lf_linkdate" value="{$link.linkdate}">
       <div>
@@ -28,7 +28,8 @@
         <label for="lf_description">{'Description'|t}</label>
       </div>
       <div>
-        <textarea name="lf_description" id="lf_description">{$link.description}</textarea>
+        <textarea name="lf_description" id="lf_description" onkeyup="textAreaAdjust(this)"
+        >{$link.description}</textarea>
       </div>
       <div>
         <label for="lf_tags">{'Tags'|t}</label>
@@ -77,6 +78,10 @@
   } else {
     document.linkform.lf_tags.focus();
   }
+
+  function textAreaAdjust(el) {
+      el.style.height = (el.scrollHeight > el.clientHeight) ? (el.scrollHeight)+"px" :  (el.clientHeight-8)+"px";
+  }
 </script>
 </body>
 </html>