Multiple minor improvements and bugfixes regarding the new templates:

* Add API settings in `configure.html`
  * Fix textarea autoresize
  * Load user.css from data folder
  * Move fold/expand all button to the right and fix an issue with already folded items
  * Reset datetime display to international datetime
  * Temporarilly remove JS login panel (need improvement and integration with the plugin system)
  * Body background is slightly lighter
  * Fix an issue where thumbnails were hidden by description
  * Fix an issue where private orange bar wasn't displayed with thumbnails
  * Remove the gradient bar behind titles
  * Fix empty bookmarklet name in Firefox

tpl/default/configure.html

@@ -183,6 +183,36 @@
           </div>
         </div>
       </div>
+      <div class="pure-g">
+        <div class="pure-u-lg-{$ratioLabel} pure-u-{$ratioLabelMobile}">
+          <div class="form-label">
+            <label for="apiEnabled">
+              <span class="label-name">{'Enable REST API'|t}</span><br>
+              <span class="label-desc">{'Allow third party software to use Shaarli such as mobile application'|t}</span>
+            </label>
+          </div>
+        </div>
+        <div class="pure-u-lg-{$ratioInput} pure-u-{$ratioInputMobile}">
+          <div class="form-input">
+            <input type="checkbox" name="apiEnabled" id="apiEnabled"
+                 {if="$api_enabled"}checked{/if}/>
+          </div>
+        </div>
+      </div>
+      <div class="pure-g">
+        <div class="pure-u-lg-{$ratioLabel} pure-u-1">
+          <div class="form-label">
+            <label for="apiSecret">
+              <span class="label-name">{'API secret'|t}</span><br>
+            </label>
+          </div>
+        </div>
+        <div class="pure-u-lg-{$ratioLabel} pure-u-1">
+          <div class="form-input">
+            <input type="text" name="apiSecret" id="apiSecret" size="50" value="{$api_secret}">
+          </div>
+        </div>
+      </div>
       <div class="center">
         <input type="submit" value="{'Save'|t}" name="save">
       </div>

tpl/default/css/shaarli.css

@@ -2,7 +2,7 @@
  * General
  */
 body {
-    background: #c5c5c5;
+    background: #d0d0d0;
 }
 
 .strong {
@@ -268,6 +268,12 @@ pre {
     width: 200px;
 }
 
+/* because chrome */
+#header-login-form input[type="text"]::-webkit-input-placeholder,
+#header-login-form input[type="password"]::-webkit-input-placeholder {
+    color: #777777;
+}
+
 .subheader-form {
     visibility: hidden;
     position: fixed;
@@ -384,6 +390,10 @@ pre {
     color: #252525;
 }
 
+.toolbar-plugin input[type="submit"]:hover {
+    background: #fff;
+}
+
 @media screen and (max-width: 64em) {
     .toolbar-plugin input[type="text"] {
         width: 70%;
@@ -484,19 +494,6 @@ pre {
     background: #f5f5f5;
 }
 
-.linklist-item.private .linklist-item-title::before {
-    position: absolute;
-    left: 3px;
-    top: 0;
-    display: block;
-    content:"";
-    background: #F89406;
-    height: 95%;
-    width: 2px;
-    margin-top: 3px;
-    z-index: 1;
-}
-
 .linklist-item-title h2 {
     padding: 3px 10px 0 10px;
     line-height: 30px;
@@ -563,14 +560,13 @@ pre {
 .linklist-item-description {
     position: relative;
     padding: 10px;
-    background: #f5f5f5;
     font-family: Roboto Slab, Arial, sans-serif;
     word-wrap: break-word;
     color: #252525;
     line-height: 1.3em;
 }
 
-.linklist-item.private .linklist-item-description::before {
+ {
     position: absolute;
     left: 3px;
     top: 0;
@@ -596,9 +592,29 @@ pre {
 }
 
 .linklist-item-thumbnail {
+    position: relative;
     margin-top: 10px;
     padding: 10px;
     float: left;
+    z-index: 50;
+}
+
+.linklist-item.private .linklist-item-title::before,
+.linklist-item.private .linklist-item-description::before,
+.linklist-item.private .linklist-item-thumbnail::before {
+    position: absolute;
+    left: 3px;
+    top: 0;
+    display: block;
+    content:"";
+    background: #F89406;
+    height: 95%;
+    width: 2px;
+    z-index: 1;
+}
+
+.linklist-item.private .linklist-item-title::before {
+    margin-top: 3px;
 }
 
 .linklist-item-infos {
@@ -702,15 +718,6 @@ pre {
     text-align: center;
 }
 
-.page-form .window-title:after {
-    display: block;
-    content:"";
-    background: linear-gradient(to right, #f5f5f5, #1b926c, #f5f5f5);
-    height: 1px;
-    width: 80%;
-    margin: auto;
-}
-
 .page-form .window-subtitle {
     text-align: center;
 }
@@ -740,7 +747,7 @@ pre {
 }
 
 .page-form textarea {
-    height: 240px;
+    min-height: 240px;
     padding: 15px 5px 3px 15px;
     resize: vertical;
     overflow-y: auto;
@@ -1163,7 +1170,7 @@ div.awesomplete > ul {
 
 .daily-entry-thumbnail {
     float: left;
-    margin: 15px 5px 5px 5px;
+    margin: 15px 5px 5px 15px;
 }
 
 .daily-entry-description a {
@@ -1178,3 +1185,10 @@ div.awesomplete > ul {
 .daily-entry-description a:visited {
     color: #20b988;
 }
+
+/*
+ * Fix empty bookmarklet name in Firefox
+ */
+.pure-button {
+    -moz-user-select: auto;
+}

tpl/default/editlink.html

@@ -33,8 +33,7 @@
         <label for="lf_description">{'Description'|t}</label>
       </div>
       <div>
-        <textarea name="lf_description" id="lf_description" onkeyup="textAreaAdjust(this)"
-        >{$link.description}</textarea>
+        <textarea name="lf_description" id="lf_description">{$link.description}</textarea>
       </div>
       <div>
         <label for="lf_tags">{'Tags'|t}</label>
@@ -46,7 +45,7 @@
 
       <div>
         <input type="checkbox"  name="lf_private" id="lf_private"
-        {if="($link_is_new && $default_private_links) || $link.private == true"}
+        {if="($link_is_new && $default_private_links || $link.private == true)"}
           checked="checked"
         {/if}>
         &nbsp;<label for="lf_private">{'Private'|t}</label>
@@ -62,7 +61,7 @@
       <div class="submit-buttons center">
         <input type="submit" value="{'Save'|t}" name="save_edit" class="">
         {if="!$link_is_new"}
-        <a href="?delete_link&amp;lf_linkdate={$value.id}&amp;token={$token}"
+        <a href="?delete_link&amp;lf_linkdate={$link.id}&amp;token={$token}"
            title="" name="delete_link" class="button button-red confirm-delete">
           {'Delete'|t}
         </a>
@@ -75,7 +74,7 @@
       {/if}
     </form>
   </div>
-  {if="$source !== 'firefoxsocialapi'"}
+  {if="$source !== 'firefoxsocialapi' && $source !== 'bookmarklet'"}
     {include="page.footer"}
   {/if}
 <script>
@@ -87,12 +86,6 @@
   } else {
     document.linkform.lf_tags.focus();
   }
-  function textAreaAdjust(el) {
-    el.style.height = (el.scrollHeight > el.clientHeight) ? (el.scrollHeight) + "px" : (el.clientHeight - 18) + "px";
-  }
-  (function (window, document) {
-    textAreaAdjust(document.linkform.lf_description)
-  })(this, this.document);
 </script>
 </body>
 </html>

tpl/default/includes.html

@@ -12,7 +12,7 @@
 <link type="text/css" rel="stylesheet" href="inc/awesomplete.css#" />
 <link type="text/css" rel="stylesheet" href="css/shaarli.css" />
 {if="is_file('inc/user.css')"}
-  <link type="text/css" rel="stylesheet" href="inc/user.css#" />
+  <link type="text/css" rel="stylesheet" href="data/user.css#" />
 {/if}
 {loop="$plugins_includes.css_files"}
   <link type="text/css" rel="stylesheet" href="{$value}#"/>

tpl/default/js/shaarli.js

@@ -84,7 +84,13 @@ window.onload = function () {
         [].forEach.call(foldAllButtons, function (foldAllButton) {
             foldAllButton.addEventListener('click', function (event) {
                 event.preventDefault();
+                var state = foldAllButton.firstElementChild.getAttribute('class').indexOf('down') != -1 ? 'down' : 'up';
                 [].forEach.call(foldButtons, function (foldButton) {
+                    if (foldButton.firstElementChild.classList.contains('fa-chevron-up') && state == 'down'
+                        || foldButton.firstElementChild.classList.contains('fa-chevron-down') && state == 'up'
+                    ) {
+                        return;
+                    }
                     // Retrieve description
                     var description = null;
                     var thumbnail = null;
@@ -225,4 +231,32 @@ window.onload = function () {
             anchor.style.paddingTop = 0;
         }
     }
+
+    /**
+     * Text area resizer
+     */
+    var description = document.getElementById('lf_description');
+    var observe = function (element, event, handler) {
+        element.addEventListener(event, handler, false);
+    };
+    function init () {
+        function resize () {
+            description.style.height = 'auto';
+            description.style.height = description.scrollHeight+10+'px';
+        }
+        /* 0-timeout to get the already changed text */
+        function delayedResize () {
+            window.setTimeout(resize, 0);
+        }
+        observe(description, 'change',  resize);
+        observe(description, 'cut',     delayedResize);
+        observe(description, 'paste',   delayedResize);
+        observe(description, 'drop',    delayedResize);
+        observe(description, 'keydown', delayedResize);
+
+        resize();
+    }
+    if (description != null) {
+        init();
+    }
 };

tpl/default/linklist.html

@@ -174,7 +174,7 @@
                     {$updated=$value.updated_timestamp ? 'Edited: '. strftime('%c', $value.updated_timestamp) : 'Permalink'}
                     <span class="linkdate" title="{$updated}">
                       <i class="fa fa-clock-o"></i>
-                      {function="strftime('%d %B %Y %H:%M', $value.timestamp)"}{if="$value.updated_timestamp"}*{/if}
+                      {function="strftime('%c', $value.timestamp)"}{if="$value.updated_timestamp"}*{/if}
                       &middot;
                     </span>
                   {/if}

tpl/default/linklist.paging.html

@@ -10,7 +10,7 @@
              class={if="$privateonly"}"filter-on"{else}"filter-off"{/if}
           ><i class="fa fa-key"></i></a>
         {/if}
-        <a href="#" class="filter-off fold-all" title="Fold all">
+        <a href="#" class="filter-off fold-all pure-u-lg-0" title="Fold all">
           <i class="fa fa-chevron-up"></i>
         </a>
         {loop="$action_plugin"}
@@ -50,6 +50,9 @@
       <form method="GET" class="pure-u-0 pure-u-lg-visible">
         <input type="text" name="linksperpage" placeholder="133">
       </form>
+      <a href="#" class="filter-off fold-all pure-u-0 pure-u-lg-visible" title="Fold all">
+        <i class="fa fa-chevron-up"></i>
+      </a>
     </div>
   </div>
 </div>

tpl/default/page.header.html

@@ -76,7 +76,7 @@
           </li>
           {if="!isLoggedIn()"}
           <li class="pure-menu-item">
-            <a href="?do=login" class="pure-menu-link subheader-opener"
+            <a href="?do=login" class="pure-menu-link"
                data-open-id="header-login-form"
                id="login-button" title="{'Login'|t}">
               <i class="fa fa-user"></i>