From 19ac80e11ab70218adc70d7f3ad64669a90aab70 Mon Sep 17 00:00:00 2001
From: ArthurHoaro <arthur@hoa.ro>
Date: Sat, 14 Jan 2017 13:51:29 +0100
Subject: Use latest feedbacks

---
 inc/plugin_admin.js              |  22 ++++++---
 tpl/default/configure.html       |   5 +-
 tpl/default/css/shaarli.css      |  86 ++++++++++++++++------------------
 tpl/default/img/noise.png        | Bin 4275 -> 0 bytes
 tpl/default/js/shaarli.js        |  10 ++++
 tpl/default/linklist.html        |  49 +++++++++++++------
 tpl/default/linklist.paging.html |  99 +++++++++++++++++++--------------------
 tpl/default/pluginsadmin.html    |  10 ++--
 8 files changed, 155 insertions(+), 126 deletions(-)
 delete mode 100644 tpl/default/img/noise.png

diff --git a/inc/plugin_admin.js b/inc/plugin_admin.js
index 134ffb33..055ac285 100644
--- a/inc/plugin_admin.js
+++ b/inc/plugin_admin.js
@@ -22,14 +22,22 @@ function changePos(elem, toPos)
 function changeOrder(pos, move)
 {
     var newpos = parseInt(pos) + move;
-    var line = document.querySelector('[data-order="'+ pos +'"]');
-    var changeline = document.querySelector('[data-order="'+ newpos +'"]');
-    var parent = changeline.parentNode;
+    var lines = document.querySelectorAll('[data-order="'+ pos +'"]');
+    var changelines = document.querySelectorAll('[data-order="'+ newpos +'"]');
+
+    // If we go down reverse lines to preserve the rows order
+    if (move > 0) {
+        lines = [].slice.call(lines).reverse();
+    }
+
+    for (var i = 0 ; i < lines.length ; i++) {
+        var parent = changelines[0].parentNode;
+        changePos(lines[i], newpos);
+        changePos(changelines[i], parseInt(pos));
+        var changeItem = move < 0 ? changelines[0] : changelines[changelines.length - 1].nextSibling;
+        parent.insertBefore(lines[i], changeItem);
+    }
 
-    changePos(line, newpos);
-    changePos(changeline, parseInt(pos));
-    var changeItem = move < 0 ? changeline : changeline.nextSibling;
-    parent.insertBefore(line, changeItem);
 }
 
 /**
diff --git a/tpl/default/configure.html b/tpl/default/configure.html
index b959a91b..450fe4ca 100644
--- a/tpl/default/configure.html
+++ b/tpl/default/configure.html
@@ -13,8 +13,8 @@
 
 <form method="POST" action="#" name="configform" id="configform">
   <div class="pure-g">
-    <div class="pure-u-lg-1-6 pure-u-1-24"></div>
-    <div class="pure-u-lg-2-3 pure-u-22-24 page-form page-form-complete">
+    <div class="pure-u-lg-1-8 pure-u-1-24"></div>
+    <div class="pure-u-lg-3-4 pure-u-22-24 page-form page-form-complete">
       <h2 class="window-title">{'Configure'|t}</h2>
       <div class="pure-g">
         <div class="pure-u-lg-{$ratioLabel} pure-u-1">
@@ -76,6 +76,7 @@
           </div>
         </div>
       </div>
+      <div class="clear"></div>
       <div class="pure-g">
         <div class="pure-u-lg-{$ratioLabel} pure-u-{$ratioLabelMobile} ">
           <div class="form-label">
diff --git a/tpl/default/css/shaarli.css b/tpl/default/css/shaarli.css
index 6b073437..63cf68ac 100644
--- a/tpl/default/css/shaarli.css
+++ b/tpl/default/css/shaarli.css
@@ -2,7 +2,7 @@
  * General
  */
 body {
-    background: url(../img/noise.png) #c5c5c5;
+    background: #c5c5c5;
 }
 
 .strong {
@@ -87,7 +87,7 @@ pre {
 }
 
 .anchor:target {
-    padding-top: 35px;
+    padding-top: 40px;
 }
 /**
  * MENU
@@ -96,10 +96,11 @@ pre {
     position: fixed;
     top: 0;
     width: 100%;
+    --height: 50px;
     background: #1b926c;
     -webkit-font-smoothing: antialiased;
     /* Hack to transition with auto height: http://stackoverflow.com/a/8331169/1484919 */
-    max-height: 2.1em;
+    max-height: 45px;
     transition: max-height 0.5s;
     overflow: hidden;
     z-index: 999;
@@ -107,7 +108,7 @@ pre {
 
 /* Chrome bugfix: with 100% height, it only displays the first element. */
 .pure-menu-item {
-    height: inherit;
+    height: 45px;
 }
 
 .shaarli-menu.open {
@@ -124,6 +125,7 @@ pre {
 .pure-menu-link:visited,
 .pure-menu-selected .pure-menu-link,
 .pure-menu-selected .pure-menu-link:visited {
+    padding: 0.8em 1em;
     color: #f5f5f5;
 }
 
@@ -132,14 +134,22 @@ pre {
 .pure-menu-selected .pure-menu-link:focus {
     color: #fff;
     background: transparent;
+}
 
+.pure-menu-item:hover::after {
+    margin: -4px auto 0 auto;
+    display: block;
+    content:"";
+    background: #fff;
+    height: 4px;
+    width: 100%;
 }
 
 .menu-toggle {
     width: 34px;
-    height: 34px;
+    height: 45px;
     position: absolute;
-    top: 0;
+    top: 5px;
     right: 0;
     display: none;
 }
@@ -183,6 +193,13 @@ pre {
     font-size: 0.8em;
 }
 
+@media screen and (min-width: 64em) {
+    #linkcount {
+        position: absolute;
+        right: 5px;
+    }
+}
+
 #search, #search-linklist {
     text-align: center;
     width: 100%;
@@ -219,12 +236,9 @@ pre {
     color: #252525;
 }
 
-#search button:hover {
-    color: #fff;
-}
-
+#search button:hover,
 #search-linklist button:hover {
-    color: #000;
+    color: #fff;
 }
 
 #search-linklist {
@@ -261,7 +275,7 @@ pre {
     text-align: center;
     background: #1b926c;
     display: block;
-    z-index: 9999;
+    z-index: 999;
     height: 30px;
     padding: 5px 0;
 }
@@ -328,18 +342,7 @@ pre {
 #content {
     position: relative;
     z-index: 2;
-}
-
-@media screen and (max-width: 64em) {
-    #content {
-        margin: 2.1em 0 0 0;
-    }
-}
-
-@media screen and (min-width: 64em) {
-    #content {
-        margin-top: 33px;
-    }
+    margin-top: 45px;
 }
 
 /**
@@ -393,7 +396,7 @@ pre {
 }
 
 .linklist-filters a {
-    padding: 2px 5px;
+    padding: 5px 8px;
     text-decoration: none;
 }
 
@@ -430,7 +433,7 @@ pre {
 }
 
 .linksperpage a {
-    padding: 2px 5px;
+    padding: 5px 5px;
     text-decoration: none;
     color: #252525;
     background: #f5f5f5;
@@ -447,9 +450,9 @@ pre {
 }
 
 .linksperpage input[type="text"] {
-    height: 15px;
+    height: 20px;
     margin: 0;
-    padding: 3px 5px 3px 8px;
+    padding: 4px 5px 3px 8px;
     background: #f5f5f5;
     border: medium none currentColor;
     color: #252525;
@@ -483,13 +486,14 @@ pre {
     content:"";
     background: #F89406;
     height: 95%;
-    width: 3px;
+    width: 2px;
     margin-top: 3px;
+    z-index: 1;
 }
 
 .linklist-item-title h2 {
     padding: 3px 10px 0 10px;
-    line-height: 25px;
+    line-height: 30px;
 }
 
 .linklist-item-title a {
@@ -525,18 +529,9 @@ pre {
     display: none;
 }
 
-.linklist-item-title:after {
-    display: block;
-    content:"";
-    background: linear-gradient(to right, #f5f5f5, #8e8e8e, #f5f5f5);
-    height: 1px;
-    width: 90%;
-    margin: 1px auto 0 auto;
-}
-
 .linklist-item-editbuttons {
     float: right;
-    padding: 5px;
+    padding: 8px 5px;
 }
 
 .linklist-item-editbuttons * {
@@ -555,7 +550,7 @@ pre {
 }
 
 .delete-link {
-    font-size: 1.1em;
+    font-size: 1.3em;
     color: #ac2925 !important;
 }
 
@@ -566,6 +561,7 @@ pre {
     font-family: Roboto Slab, Arial, sans-serif;
     word-wrap: break-word;
     color: #252525;
+    line-height: 1.3em;
 }
 
 .linklist-item.private .linklist-item-description::before {
@@ -576,9 +572,8 @@ pre {
     content:"";
     background: #F89406;
     height: 95%;
-    width: 3px;
-    z-index: 9999;
-    #margin: 0;
+    width: 2px;
+    z-index: 1;
 }
 
 .linklist-item-description a {
@@ -807,7 +802,7 @@ pre {
 
 .page-form-complete .form-label, .page-form-complete .form-input {
     position: relative;
-    height: 60px;
+    min-height: 60px;
 }
 
 .page-form-complete .form-label label,
@@ -1128,6 +1123,7 @@ pre {
     padding: 5px 5px 0 5px;
     font-size: 0.9em;
     text-align: justify;
+    word-wrap: break-word;
 }
 
 .daily-entry .daily-entry-tags {
diff --git a/tpl/default/img/noise.png b/tpl/default/img/noise.png
deleted file mode 100644
index 8f7fa660..00000000
Binary files a/tpl/default/img/noise.png and /dev/null differ
diff --git a/tpl/default/js/shaarli.js b/tpl/default/js/shaarli.js
index ebe0b521..925f6ce7 100644
--- a/tpl/default/js/shaarli.js
+++ b/tpl/default/js/shaarli.js
@@ -212,3 +212,13 @@ if (openers != null) {
 function removeClass(element, classname) {
     element.className = element.className.replace(new RegExp('(?:^|\\s)'+ classname + '(?:\\s|$)'), ' ');
 }
+
+/**
+ * Remove CSS target padding (for fixed bar)
+ */
+var anchor = document.querySelector('.anchor:target');
+if (anchor != null) {
+    var padsize = anchor.clientHeight;
+    this.window.scroll(0, this.window.scrollY - padsize);
+    anchor.style.paddingTop = 0;
+}
diff --git a/tpl/default/linklist.html b/tpl/default/linklist.html
index 5bd8a12e..5a601d82 100644
--- a/tpl/default/linklist.html
+++ b/tpl/default/linklist.html
@@ -6,7 +6,17 @@
 <body>
 {include="page.header"}
 
+<div id="linkcount" class="pure-u-0 pure-u-lg-visible">
+  {if="!empty($linkcount)"}
+  <span class="strong">{$linkcount}</span> {function="t('shaare', 'shaares', $linkcount)"}
+  {if="$privateLinkcount>0"}
+  <br><span class="strong">{$privateLinkcount}</span> {function="t('private link', 'private links', $privateLinkcount)"}
+  {/if}
+  {/if}
+</div>
+
 <div id="search-linklist">
+
   <div class="pure-g">
     <div class="pure-u-1 pure-u-lg-1-2">
       <form method="GET" class="searchform" name="searchform">
@@ -50,22 +60,26 @@
 {/loop}
 
 <div id="linklist">
+  <div class="pure-g">
+    <div class="pure-u-lg-2-24 pure-u-1-24"></div>
+    <div class="pure-u-lg-20-24 pure-u-22-24">
+      <div id="linkcount" class="pure-u-lg-0 center">
+        {if="!empty($linkcount)"}
+        <span class="strong">{$linkcount}</span> {function="t('shaare', 'shaares', $linkcount)"}
+        {if="$privateLinkcount>0"}
+        &middot; <span class="strong">{$privateLinkcount}</span> {function="t('private link', 'private links', $privateLinkcount)"}
+        {/if}
+        {/if}
+      </div>
 
-  <div id="linkcount" class="center">
-    {if="!empty($linkcount)"}
-    <span class="strong">{$linkcount}</span> {function="t('shaare', 'shaares', $linkcount)"}
-    {if="$privateLinkcount>0"}
-    &middot; <span class="strong">{$privateLinkcount}</span> {function="t('private link', 'private links', $privateLinkcount)"}
-    {/if}
-    {/if}
-  </div>
-
-  {include="linklist.paging"}
+      {include="linklist.paging"}
 
-  <div id="plugin_zone_start_linklist" class="plugin_zone">
-    {loop="$plugin_start_zone"}
-      {$value}
-    {/loop}
+      <div id="plugin_zone_start_linklist" class="plugin_zone">
+        {loop="$plugin_start_zone"}
+          {$value}
+        {/loop}
+      </div>
+    </div>
   </div>
 
   {if="count($links)==0"}
@@ -220,7 +234,12 @@
     {/loop}
   </div>
 
-  {include="linklist.paging"}
+<div class="pure-g">
+  <div class="pure-u-lg-2-24 pure-u-1-24"></div>
+  <div class="pure-u-lg-20-24 pure-u-22-24">
+    {include="linklist.paging"}
+  </div>
+</div>
 
 {include="page.footer"}
 </body>
diff --git a/tpl/default/linklist.paging.html b/tpl/default/linklist.paging.html
index a48f4c18..bc1591e4 100644
--- a/tpl/default/linklist.paging.html
+++ b/tpl/default/linklist.paging.html
@@ -1,60 +1,55 @@
 <div class="linklist-paging">
-  <div class="pure-g">
-    <div class="pure-u-lg-2-24 pure-u-1-24"></div>
-    <div class="pure-u-lg-20-24 pure-u-22-24">
-      <div class="paging pure-g">
-        <div class="linklist-filters pure-u-1-3">
-          {if="isLoggedIn() or !empty($action_plugin)"}
-            <span class="linklist-filters-text">
-              {'Filters'|t}
-            </span>
-            {if="isLoggedIn()"}
-              <a href="?privateonly" title="{'Filter private links'|t}"
-                 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">
-              <i class="fa fa-chevron-up"></i>
-            </a>
-            {loop="$action_plugin"}
-              {$value.attr.class=isset($value.attr.class) ? $value.attr.class : ''}
-              {$value.attr.class=!empty($value.on) ? $value.attr.class .' filter-on' : $value.attr.class .' filter-off'}
-              <a
-                {loop="$value.attr"}
-                  {$key}="{$value}"
-                {/loop}>
-                {$value.html}
-              </a>
-            {/loop}
-          {/if}
-        </div>
+  <div class="paging pure-g">
+    <div class="linklist-filters pure-u-1-3">
+      {if="isLoggedIn() or !empty($action_plugin)"}
+        <span class="linklist-filters-text pure-u-0 pure-u-lg-visible">
+          {'Filters'|t}
+        </span>
+        {if="isLoggedIn()"}
+          <a href="?privateonly" title="{'Filter private links'|t}"
+             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">
+          <i class="fa fa-chevron-up"></i>
+        </a>
+        {loop="$action_plugin"}
+          {$value.attr.class=isset($value.attr.class) ? $value.attr.class : ''}
+          {$value.attr.class=!empty($value.on) ? $value.attr.class .' filter-on' : $value.attr.class .' filter-off'}
+          <a
+            {loop="$value.attr"}
+              {$key}="{$value}"
+            {/loop}>
+            {$value.html}
+          </a>
+        {/loop}
+      {/if}
+    </div>
 
 
-        <div class="linklist-pages pure-u-1-3">
-          {if="$next_page_url"}
-            <a href="{$next_page_url}" class="paging_newer">
-              <i class="fa fa-arrow-circle-left"></i>
-            </a>
-          {/if}
-          {if="$page_max>1"}<span class="strong">{$page_current} / {$page_max}</span>{/if}
-          {if="$previous_page_url"}
-            <a href="{$previous_page_url}" class="paging_older">
-              <i class="fa fa-arrow-circle-right"></i>
-            </a>
-          {/if}
+    <div class="linklist-pages pure-u-1-3">
+      {if="$next_page_url"}
+        <a href="{$next_page_url}" class="paging_newer">
+          <i class="fa fa-arrow-circle-left"></i>
+        </a>
+      {/if}
+      {if="$page_max>1"}<span class="strong">{$page_current} / {$page_max}</span>{/if}
+      {if="$previous_page_url"}
+        <a href="{$previous_page_url}" class="paging_older">
+          <i class="fa fa-arrow-circle-right"></i>
+        </a>
+      {/if}
 
-        </div>
+    </div>
 
-        <div class="linksperpage pure-u-1-3">
-          <div class="pure-u-0 pure-u-lg-visible">{'Links per page'|t}</div>
-          <a href="?linksperpage=20">20</a>
-          <a href="?linksperpage=50">50</a>
-          <a href="?linksperpage=100">100</a>
-          <form method="GET" class="pure-u-0 pure-u-lg-visible">
-            <input type="text" name="linksperpage" placeholder="133">
-          </form>
-        </div>
-      </div>
+    <div class="linksperpage pure-u-1-3">
+      <div class="pure-u-0 pure-u-lg-visible">{'Links per page'|t}</div>
+      <a href="?linksperpage=20">20</a>
+      <a href="?linksperpage=50">50</a>
+      <a href="?linksperpage=100">100</a>
+      <form method="GET" class="pure-u-0 pure-u-lg-visible">
+        <input type="text" name="linksperpage" placeholder="133">
+      </form>
     </div>
   </div>
 </div>
\ No newline at end of file
diff --git a/tpl/default/pluginsadmin.html b/tpl/default/pluginsadmin.html
index 22fa81f6..92af2eef 100644
--- a/tpl/default/pluginsadmin.html
+++ b/tpl/default/pluginsadmin.html
@@ -18,8 +18,8 @@
 
 <form method="POST" action="?do=save_pluginadmin" name="pluginform" id="pluginform">
   <div class="pure-g">
-    <div class="pure-u-lg-1-6 pure-u-1-24"></div>
-    <div class="pure-u-lg-2-3 pure-u-22-24 page-form page-form-complete">
+    <div class="pure-u-lg-1-8 pure-u-1-24"></div>
+    <div class="pure-u-lg-3-4 pure-u-22-24 page-form page-form-complete">
       <h2 class="window-title">{'Plugin administration'|t}</h2>
 
       <section id="enabled_plugins">
@@ -60,7 +60,7 @@
                     <input type="hidden" name="order_{$key}" value="{$counter}">
                   </td>
                 </tr>
-                <tr class="pure-u-lg-0 mobile-row">
+                <tr data-line="{$key}" data-order="{$counter}" class="pure-u-lg-0 mobile-row">
                   <td colspan="4"><label for="{$key}">{$value.description}</label></td>
                 </tr>
               {/loop}
@@ -135,8 +135,8 @@
 
 <form action="?do=save_pluginadmin" method="POST">
   <div class="pure-g">
-    <div class="pure-u-lg-1-6 pure-u-1-24"></div>
-    <div class="pure-u-lg-2-3 pure-u-22-24 page-form page-form-light">
+    <div class="pure-u-lg-1-8 pure-u-1-24"></div>
+    <div class="pure-u-lg-3-4 pure-u-22-24 page-form page-form-light">
       <h2 class="window-title">{'Plugin configuration'|t}</h2>
       <section id="plugin_parameters">
         <div>
-- 
cgit v1.2.3