From 19ac80e11ab70218adc70d7f3ad64669a90aab70 Mon Sep 17 00:00:00 2001
From: ArthurHoaro <arthur@hoa.ro>
Date: Sat, 14 Jan 2017 13:51:29 +0100
Subject: [PATCH] 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 8f7fa660b698d82adfa413c89df2266049a12ae3..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 4275
zcmd^D<yRAq-`xfq-QC?SAu+l(1*AJhDIEgRGC(9G1f&}_MCv<2q)SR#8V1rKEg&iK
z^PK0;c<#CJIiFYe^^Mop(<UKgBm@8eBygC9;lCXECntQIe|}+}A_oBA0Q7Z?H6I=x
z{(X>0<iWv#o10s3aPY~=$>-0XySlnGG&DLpJ2Nsewzjq~7>vBUyuH2s=H_N^Z|~{p
z>Bh#!moHynFqn#pN?KZ4TwL6%SFaQm6-7lwBO)Snb#*N)EcW;Ji;IgB5)!7Sru6mo
zySuxGhK5Q?O8)%$gGQrwcXyvZf4;Z3S6f><Ha7O*!-w13+sewyii(Oyj~-oKUVi)b
zZF_rLLPBC;Vd3f1r#3b=S65edc6LWcM<^8P`}gl}-@aX6UoR^w6BieEc6R3G=5};+
zoSd92Dk{3TxX8=P`}*~3e}8{VOUvumuYdgbVPaykv$M0dw&vmC5fl{k;>C;A)m2qh
zRR;%$l$4b7^K*ZH|BjB1f`S5RY3Z4n866!R0s;aG3X1IP?Ah5_et!Pa(o!fC`t#?{
z>FMd}>S`(~DtdbQm6a758X6ZDm!_tsk&%&!iHVq)n8d`yH*el3DJjLq#(H^q&Ckz!
zdV1E?)s2sjhlGUO-Q7h+MS(yd1OoB$<x6jG@6^=P<>lqJwzm8GdrC@5Gc&Wn!NL0a
zdNnn*ckkX|vDi<aKGoFJsH>}6TU$FhIgO5v`uX|g=jZ3-<SZ^O4h#%LM@JtYAAkJ#
z@z<|k<>lq^@$qM8XYK9nJv}|RxVSt#JmKNtK0ZFazP_ZSq;qp~VPRpz!^25QNsWz-
za5y|OGqa(gK~GOlQ&Te_AmHZa#?a6(G&HoYuTNH1R$E)!%F4>r)b#P=$AW@_Qc_Z6
zWMo1@LX3=z%*@OzEG&F{e1(OD*VosaoSeM8yn%s%wzjrQOG~-Axp;VZ#>U2xk&(^K
z&91Jl92^{Ubacwf%I@y&3JMCu#KcBMMsjj;`1tr-TwGaMSxih!Y;0`8!osbstyNW3
zgoK1dL_`J#2Il7GmX?-UT3P}E0wg3Pl9G}#GBWSqzlT5|Po6wUPEKZEU;u-`w6wJB
z?Cj*^<RT&>fB*jd{rk6=nAo#t&wxN+dV2cd;UNwV4mCA3D=X`N|NVFFmXiel00I7n
zdPd-X4gNo4QQ;B`01!LCHB^m*Y*+Gd{_`AZ)wHr|iuc4e{U4JY|6O<c1n@K`zLOp2
z!sYbOmpKP?iHViBAptbshw6u7#Jim!hY&h_TMAdgF?;vAi$$cG>(wR@Sbh{*LyX6V
zD0}52uMXS_l2eM@-EWAde97b#7YDume!DL8^J544qZzf*h`BULTx3B7Jy$C!JBg?E
z&kQAl7}B`r^g96k7McG38cV995_$C!agcTsh!Y+TGr#d*3Wm2+hYD{B-1@tQ7nqT2
z@?X88yQ7!%wWaE*$3uGs8%pYKn0ghJamM=}AzukUrh$B{z()f3iv5f~mrQnNPT=Un
ztA?ETpEb+i5vNMbP$^}!N+on)B%}B|`k9g7)15$Tx431{e19J~0neF0Pfks6iF~Pf
z$rv#`-~D#HJkIAkZnvrbgs3P=--{x@$E%6<6MQ1BP7qSE1T>%USH7m9jPZ!Q5Zn+&
zZDrOVXiL1ZxXcO5mjfqg*DIO3CDuZH!1VED2OeNE=6u*rR+YffW6DfM!=0hj+}@Qh
zf>~RYV#n;cOZQhmpA_q@K|R6ZcP1@@hMBThke>K<wibTdd;<+|kCZT4b}YI(w0N8s
zH|T}Z0(E@dDpGL4f6A8;Iy$#;szmoKxW*=3LgodBbX*F@uJT-R*-h7U?EyhPiD?9J
zP(sTn$af%FYXi@g#ujbm=4`5cW`6Qjn3EGqq<l+spKC>1p(}@u<MW&d8NKm<|Egi5
zGg=}g5Ghp(39~7)P^P9rT9E-TC^&6%GpoH{>@QmUZPm#%qo;;Z(&^WX-k()1#%Km^
zPYZDJGC)if(#1gsg>jQp9Gm3((UXi=rl#r&gL@QMYG2FMEx@wSGzQIkVcr{F&Nw&!
zGBMCFCJ{BBMmMsqN3yrbr&H&(Z3QvIL|Zq?A1*48{UYk6A0l?6APV|<K3HJ8Z_j8;
zhi-7^SjM&j2=G(P(?4)_$1dlIydjp+%t@yAdNvvq&$~CuXsn6l6w`jw%fL8H^FAwU
z7jYQOux={Ml5EQ^WwT(XIlY!%`r%#j1%pUJe5G!y0oieu>ghUCtc$~4C>4J(A^EGn
z3%B|qP!Q&|mmevfyg&hXwdq}PH97CJCU^>HS@Y5Sh)}JiG+V19+2o9Log+6o!7v}Y
zB28VB7SQRJU?0$@7lBP`x*|$Ub-zMf1MbK=?NY7XYD=7$joLuGBsgM-`92b1d-_J&
zSRepYsYNbP$ps*hq-|jd47brig%il^bTr%JJEF`a!HG?jqdCa161NkRM}%lgT$Rfr
zR+DY$ntq`Q^(Sj)_d0vtvvg*M8R_|1m3%8&3g}bnc#yjt1vH$bkP`^LZ4|cCa(SIp
zGivxG2X`VNF+2D<*0Y@zh)_q={fcW(RuZ>cGCni2T%i5bID>Y!>fm9BqW)^;#JT4+
zr}%>zI#kv*gQKuS=<eV97#97rdM=gjn?15!HvwCM<JhIKxlR--2fGB=S9vlT*rD<R
zyf@Xuzg!($#;J#O<~9I!M4`C%KwJ*OgrRfk*p%aCroha-MJ83$-MA18OaJ=Vj>__}
zNN36jVya+y4);wP@Im*y5Qp*!C?qcW_Dk%kuNF=gcc`~?d=JjM4&rXd0N<yINvKQ^
z=2Jkwmv#A%Ar2Ku7l?07rCCtgn?d(6P@$u$GMX|}q>jrr41__SHfDeHC@IUHw#toC
zmy-z2EYwMhH)<vpL`Inj<c_&q8kI|If!NxYX@}b&3?v#+7&W8``d!+ESm`tJRp#iP
z7Q$0sJMSMpY0WEt17@5Vpbe>$freP#>FCanq;jh^%xR|jEejnr$CtLjHM}RHn)2Rf
zkK^Q$6e$ku3pxe>UFQ*H$j!VQ_AABcu!_s6%60|o>-LofR=-qF`U~oe4kU=PWg-=_
zhU1GeqqPE6YSZ^FIK6gQvm3n-RY6N2Ore?{5Nw<Jl-XHk$v7)P=fi;E8poQ5d4e+o
z<8!Re!k}E{c`T;QWuEZ-1hrDbIVnl}LE_Zre%ab7?C38bGt}?<``b0AZKI&1dO%T3
z<s_@mNzS<STdPr=*)~6n?ihX5S!zfR4S@ZfK^c-dn8n37wJlWod)}EY+tWSdQ3Rk+
zVEBO@#iU3QERMTDUU-aC7FWHnZ&K>os?vBBWZC4vwQPqD6;R0@7)ZWgXF%%Po>=o2
zzw<-32LE{;w|myIeiko=s2+&Gg49~e$VoBDmPV}A$M!=^S`Kw(HZhg61D$;V&d!30
z1SR=K;V^zm119=GII`i;A%cFwmQPa9W}lG$?<>%X<%LD`X$2zorauA2!6rkQQuB$&
zlSLY!>g2KrWr$zrsDtklYkx-cQFE7b!+d=DyAv5{6%*3?VWi-O!|igip9La!*nVAG
z16FNzZ2eJ%wz~P-t}L~l%)NUP*+>4>wQJpLPke(GJx{j`o4O+ksJ0kq#D1TP7y%dK
z_h2c}EXl|{QRw_fDfOL07HNntWR>9bCFf5=_UH-}4W#3aZ*v2b4U1J=Xq<AT=A}2R
z#{uZwJm|9htuThf;v{hh5o%jzX1HzMc?a`%no=M#MrtPZ6P)U;atiKj!CC<JXmj(%
z<n{5BtQVlq_XhZ18^1-%a67&_QZI?}u(5LUnf26eu+Si!aErPnAQsi+;UG3mb|mU4
zL4!`%ZqR;f=5SZZx_2AuCXGCTU$0@4I@UuWB|O^k1-tpm!xCpJ+X9#}CY864iA#Ur
z@ggcL<jM9dIE>@fG?uEWg=}k&LAE(hxkXoXbL<BfY{;@7LK8^b)u)8Z;b&C%R?IQ~
z{oFHwxzU|{QrX`*N#$_<PVo1O*@lB+9cGrFzmrm3&X$(K#Q5Wc$$5U4>N)am$79)h
z`J`Ks-X2s#0Q-Tim+%LrDl3(u&WGAh(<3^ubJz33miKq*Hg-VsQ6hZ(Ta7t|B-MSV
z2mF=vNRDL#5=y)}FUn4aNUBY3M}^0;&aW?>E(}zz2XWT1Lm-SSo76H%vaGa^y%?MC
zhgFadMOOFo<jnVv9;gp-`CRF+D&gf@Fg`3OyB%J8?#5&<uTn@(0zGrkFOWYQv=a(K
zaKZk>bU)&h9evv^&s!wr(Q^)Vfu1W@3DU^YEL*@EV;rBj+=Q)TBE0o7mjj*2b}}$M
zLAm4L3|faU$v7h#`{%?nFBLH)F6rew$dd7BXZ(UUC!rSVb?KBd;{n<&#J5wmzn7Z_
zqVu4f<eZJyLeGTK3^z#p2E>Vg1E%e4G1OIU8;*j;!zLB9=*A*@7Z4HqeszMV=2mW!
zqtPKC2kiD&0zKJi5b|j5*#t_+s=eau>YQR1viI%FZ^7c|qsU3MQ55W9>S7z)wtrDM
zdu}#vq(C|>5=M1|&-cgMp5G$S#0iWqR{zKH(au8*%^x3U1{1IPIKV#Aom4C$8?{Q>
zH}oHJt6Bwk1^ju$BQz<TPKLVO!PNqi225fwVGFx?(TiYD^<AbVD(2VlHBRB46?6;m
zDXw-lRrUg;7_7Rr45l)<dexfX&v#1-T+aRz!>-8=c!H<<IEFp4vb*5^VLIakY&WJW
z1AglD!J_xCv9L5Xc>-X2uwdKI{J=gt39&0;BwNP(qxr?Tn3J0UfbVIF;a%=?fFa*Y
zQ+cUM(yfeIr~upTDwx6CR=P<MkS7PGOXx{lwI1o0GV=e%9a+kp8Qgig5xUu<0L%;?
zPArm*zppaoYS~GTy*6)u`Jcs=yc|3&`P*wyww-GFIVH0WH|CgI_R(ZFma+RUL7@T~
zvAu`O(;x$bG*xsiC6pE><Hg2;raWl^*W)QKDEXCX$tgKP-3E)iAGTBV_1CJha=ZMv
zP$0qz)Q6L0DU~AexZwcR4H4YAd~m<q*?j?`l{%qZ07xrg&T0i2;UN6;fUBJ@B@V+2
zqF{hFiT6;fLNZY?ADJT51Ho4UT*@Zcn=}517p+{1b|xkwlEes=-eE=BKp4qB-`gX~
z&W!86&(GvHNNx2#WTz)OGx;mq?zjg=f^=9?su0>Hz*Ah%6HAP_Z=@!qOn|vP6>tMT
z{o|rx@4I(4Xvlxf&qM^j)Ix5kPC|+JDlrScZg5V)UDUWOWd3E<%*F5Mpf7ovzpQI5
zCISwap+9U&x_{)rNNE!!IArVJbW>2=OwR~i!~Pa+nPQZJc_P%hqbBqo=+G^Vv4SRK
RegCEh09;c~qgD+O^*^tsff4`!

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>
-- 
2.41.0