15 files changed, 287 insertions, 143 deletions

diff --git a/tpl/default/changetag.html b/tpl/default/changetag.html
index 49dd20d9..6606c4fa 100644
--- a/tpl/default/changetag.html
+++ b/tpl/default/changetag.html
@@ -32,7 +32,7 @@
       </div>
     </form>
 
-    <p>You can also edit tags in the <a href="?do=taglist&sort=usage">tag list</a>.</p>
+    <p>{'You can also edit tags in the'|t} <a href="?do=taglist&sort=usage">{'tag list'|t}</a>.</p>
   </div>
 </div>
 {include="page.footer"}
diff --git a/tpl/default/configure.html b/tpl/default/configure.html
index 76a1b9fd..a63c7ad3 100644
--- a/tpl/default/configure.html
+++ b/tpl/default/configure.html
@@ -70,6 +70,30 @@
         </div>
       </div>
       <div class="pure-g">
+        <div class="pure-u-lg-{$ratioLabel} pure-u-1">
+          <div class="form-label">
+            <label for="language">
+              <span class="label-name">{'Language'|t}</span>
+            </label>
+          </div>
+        </div>
+        <div class="pure-u-lg-{$ratioInput} pure-u-1">
+          <div class="form-input">
+            <select name="language" id="language" class="align">
+              {loop="$languages"}
+                <option value="{$key}"
+                      {if="$key===$language"}
+                      selected="selected"
+                      {/if}
+                >
+                  {$value}
+                </option>
+              {/loop}
+            </select>
+          </div>
+        </div>
+      </div>
+      <div class="pure-g">
         <div class="pure-u-lg-{$ratioLabel} pure-u-1 ">
           <div class="form-label">
             <label>
@@ -105,21 +129,6 @@
           </div>
         </div>
       </div>
-      <div class="pure-g">
-        <div class="pure-u-lg-{$ratioLabel} pure-u-1 ">
-          <div class="form-label">
-            <label for="redirector">
-              <span class="label-name">{'Redirector'|t}</span><br>
-              <span class="label-desc">{'e. g.'|t} <i>http://anonym.to/?</i> {'will mask the HTTP_REFERER'|t}</span>
-            </label>
-          </div>
-        </div>
-        <div class="pure-u-lg-{$ratioInput} pure-u-1 ">
-          <div class="form-input">
-            <input type="text" name="redirector" id="redirector" size="50" value="{$redirector}">
-          </div>
-        </div>
-      </div>
       <div class="clear"></div>
       <div class="pure-g">
         <div class="pure-u-lg-{$ratioLabel} pure-u-{$ratioLabelMobile} ">
diff --git a/tpl/default/css/shaarli.css b/tpl/default/css/shaarli.css
index ba589723..14439402 100644
--- a/tpl/default/css/shaarli.css
+++ b/tpl/default/css/shaarli.css
@@ -433,7 +433,7 @@ body, .pure-g [class*="pure-u"] {
  * 64em -> lg
  */
 .linklist-filters {
-    margin: 10px 0;
+    margin: 5px 0;
     color: #252525;
     font-size: 0.9em;
 }
@@ -454,7 +454,7 @@ body, .pure-g [class*="pure-u"] {
 }
 
 .linklist-pages {
-    margin: 10px 0;
+    margin: 5px 0;
     color: #252525;
     text-align: center;
 }
@@ -469,7 +469,7 @@ body, .pure-g [class*="pure-u"] {
 }
 
 .linksperpage {
-    margin: 10px 0;
+    margin: 5px 0;
     text-align: right;
     color: #252525;
     font-size: 0.9em;
@@ -506,9 +506,29 @@ body, .pure-g [class*="pure-u"] {
  * CONTENT - LINKLIST ITEMS
  */
 .linklist-item {
-    margin: 0 0 15px 0;
+    margin: 0 0 10px 0;
     background: #f5f5f5;
-    box-shadow: 2px 2px 0.5em #797979;
+    box-shadow: 1px 1px 3px #797979;
+}
+
+.linklist-item-buttons {
+    background: transparent;
+    position: relative;
+    width: 23px;
+    z-index: 99;
+}
+
+.linklist-item-buttons-right {
+    float: right;
+    margin-right: -25px;
+}
+
+.linklist-item-buttons * {
+    display: block;
+    float: left;
+    width:100%;
+    margin: auto;
+    text-align: center;
 }
 
 .linklist-item-title, .linklist-item-title h2  {
@@ -526,7 +546,7 @@ body, .pure-g [class*="pure-u"] {
     line-height: 30px;
 }
 
-.linklist-item-title a {
+.linklist-item-title h2 a {
     font-size: 0.7em;
     color: #252525;
     text-decoration: none;
@@ -538,11 +558,11 @@ body, .pure-g [class*="pure-u"] {
     color: #1b926c;
 }
 
-.linklist-item-title a:visited .linklist-link {
+.linklist-item-title h2 a:visited .linklist-link {
     color: #2a4c41;
 }
 
-.linklist-item-title a:hover, .linklist-item-title .linklist-link:hover{
+.linklist-item-title h2 a:hover, .linklist-item-title .linklist-link:hover{
     color: #252525;
 }
 
@@ -554,8 +574,9 @@ body, .pure-g [class*="pure-u"] {
     color: #F89406;
 }
 
-.linklist-item-title .fold-button {
+.fold-button {
     display: none;
+    color: #252525;
 }
 
 .linklist-item-editbuttons {
@@ -585,24 +606,12 @@ body, .pure-g [class*="pure-u"] {
 
 .linklist-item-description {
     position: relative;
-    padding: 10px;
+    padding: 0 10px;
     word-wrap: break-word;
     color: #252525;
     line-height: 1.3em;
 }
 
- {
-    position: absolute;
-    left: 3px;
-    top: 0;
-    display: block;
-    content:"";
-    background: #F89406;
-    height: 95%;
-    width: 2px;
-    z-index: 1;
-}
-
 .linklist-item-description a {
     text-decoration: none;
     color: #1b926c;
@@ -618,32 +627,36 @@ body, .pure-g [class*="pure-u"] {
 
 .linklist-item-thumbnail {
     position: relative;
-    margin-top: 10px;
-    padding: 10px;
-    float: left;
+    padding: 0 0 0 5px;
+    margin: 0;
+    float: right;
     z-index: 50;
+    height: 90px;
 }
 
 .linklist-item.private .linklist-item-title::before,
-.linklist-item.private .linklist-item-description::before,
-.linklist-item.private .linklist-item-thumbnail::before {
+.linklist-item.private .linklist-item-description::before {
     position: absolute;
     left: 3px;
     top: 0;
     display: block;
     content:"";
     background: #F89406;
-    height: 95%;
+    height: 96%;
     width: 2px;
     z-index: 1;
 }
 
+.linklist-item.private .linklist-item-description::before {
+    height: 100%;
+}
+
 .linklist-item.private .linklist-item-title::before {
     margin-top: 3px;
 }
 
 .linklist-item-infos {
-    padding: 8px 8px 5px 8px;
+    padding: 4px 8px 4px 8px;
     background: #ddd;
     color: #252525;
 }
@@ -680,6 +693,8 @@ body, .pure-g [class*="pure-u"] {
     overflow: hidden;
     text-overflow: ellipsis;
     font-size: 0.8em;
+    height:23px;
+    line-height:23px;
 }
 
 .linklist-item-infos .mobile-buttons {
@@ -693,6 +708,16 @@ body, .pure-g [class*="pure-u"] {
     height: 16px;
 }
 
+.linklist-item-infos-controls-group {
+    display: inline-block;
+    border-right: 1px solid #5d5d5d;
+    padding-right: 6px;
+}
+
+.ctrl-edit {
+    margin: 0 7px;
+}
+
 /** 64em -> lg **/
 @media screen and (max-width: 64em) {
     .linklist-item-infos-url {
@@ -1284,3 +1309,40 @@ form[name="linkform"].page-form {
     text-decoration: none;
     font-weight: bold;
 }
+
+/**
+ * Markdown
+ */
+.markdown p {
+    margin: 0 !important;
+}
+
+.markdown p + p {
+    margin: 0.5em 0 0 0 !important;
+}
+
+.markdown *:first-child {
+    margin-top: 0 !important;
+}
+
+.markdown *:last-child {
+    margin-bottom: 5px !important;
+}
+
+/**
+ * Pure Button
+ */
+.pure-button-success,
+.pure-button-error,
+.pure-button-warning,
+.pure-button-primary,
+.pure-button-shaarli,
+.pure-button-secondary {
+    color: white !important;
+    border-radius: 4px;
+    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
+}
+
+.pure-button-shaarli {
+    background-color: #1B926C;
+}
diff --git a/tpl/default/img/apple-touch-icon.png b/tpl/default/img/apple-touch-icon.png
new file mode 100644
index 00000000..f29210ce
--- /dev/null
+++ b/tpl/default/img/apple-touch-icon.png
diff --git a/tpl/default/import.html b/tpl/default/import.html
index 1f040685..000a50ac 100644
--- a/tpl/default/import.html
+++ b/tpl/default/import.html
@@ -18,7 +18,7 @@
       <div class="center" id="import-field">
         <input type="hidden" name="MAX_FILE_SIZE" value="{$maxfilesize}">
         <input type="file" name="filetoupload">
-        <p><br>Maximum size allowed: <strong>{$maxfilesizeHuman}</strong></p>
+        <p><br>{'Maximum size allowed:'|t} <strong>{$maxfilesizeHuman}</strong></p>
       </div>
 
       <div class="pure-g">
@@ -31,15 +31,15 @@
           <div class="radio-buttons">
             <div>
               <input type="radio" name="privacy" value="default" checked="checked">
-              Use values from the imported file, default to public
+              {'Use values from the imported file, default to public'|t}
             </div>
             <div>
               <input type="radio" name="privacy" value="private">
-              Import all bookmarks as private
+              {'Import all bookmarks as private'|t}
             </div>
             <div>
               <input type="radio" name="privacy" value="public">
-              Import all bookmarks as public
+              {'Import all bookmarks as public'|t}
             </div>
           </div>
         </div>
diff --git a/tpl/default/includes.html b/tpl/default/includes.html
index 0350ef66..b2bfec30 100644
--- a/tpl/default/includes.html
+++ b/tpl/default/includes.html
@@ -5,16 +5,17 @@
 <link rel="alternate" type="application/atom+xml" href="{$feedurl}?do=atom{$searchcrits}#" title="ATOM Feed" />
 <link rel="alternate" type="application/rss+xml" href="{$feedurl}?do=rss{$searchcrits}#" title="RSS Feed" />
 <link href="img/favicon.png" rel="shortcut icon" type="image/png" />
-<link type="text/css" rel="stylesheet" href="css/pure.min.css" />
-<link type="text/css" rel="stylesheet" href="css/grids-responsive.min.css">
-<link type="text/css" rel="stylesheet" href="css/pure-extras.css">
-<link type="text/css" rel="stylesheet" href="css/font-awesome.min.css" />
-<link type="text/css" rel="stylesheet" href="inc/awesomplete.css#" />
-<link type="text/css" rel="stylesheet" href="css/shaarli.css" />
+<link href="img/apple-touch-icon.png" rel="apple-touch-icon" sizes="180x180" />
+<link type="text/css" rel="stylesheet" href="css/pure.min.css?v={$version_hash}" />
+<link type="text/css" rel="stylesheet" href="css/grids-responsive.min.css?v={$version_hash}">
+<link type="text/css" rel="stylesheet" href="css/pure-extras.css?v={$version_hash}">
+<link type="text/css" rel="stylesheet" href="css/font-awesome.min.css?v={$version_hash}" />
+<link type="text/css" rel="stylesheet" href="inc/awesomplete.css?v={$version_hash}#" />
+<link type="text/css" rel="stylesheet" href="css/shaarli.css?v={$version_hash}" />
 {if="is_file('data/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}#"/>
+  <link type="text/css" rel="stylesheet" href="{$value}?v={$version_hash}#"/>
 {/loop}
-<link rel="search" type="application/opensearchdescription+xml" href="?do=opensearch#" title="Shaarli search - {$shaarlititle}"/>
\ No newline at end of file
+<link rel="search" type="application/opensearchdescription+xml" href="?do=opensearch#" title="Shaarli search - {$shaarlititle}"/>
diff --git a/tpl/default/install.html b/tpl/default/install.html
index 164d453b..6199b33d 100644
--- a/tpl/default/install.html
+++ b/tpl/default/install.html
@@ -68,6 +68,27 @@
     <div class="pure-g">
       <div class="pure-u-lg-{$ratioLabel} pure-u-1">
         <div class="form-label">
+          <label for="language">
+            <span class="label-name">{'Language'|t}</span>
+          </label>
+        </div>
+      </div>
+      <div class="pure-u-lg-{$ratioInput} pure-u-1">
+        <div class="form-input">
+          <select name="language" id="language" class="align">
+            {loop="$languages"}
+              <option value="{$key}">
+                {$value}
+              </option>
+            {/loop}
+          </select>
+        </div>
+      </div>
+    </div>
+
+    <div class="pure-g">
+      <div class="pure-u-lg-{$ratioLabel} pure-u-1">
+        <div class="form-label">
           <label>
             <span class="label-name">{'Timezone'|t}</span><br>
             <span class="label-desc">{'Continent'|t} &middot; {'City'|t}</span>
diff --git a/tpl/default/js/shaarli.js b/tpl/default/js/shaarli.js
index 1c66ebbd..cf628e87 100644
--- a/tpl/default/js/shaarli.js
+++ b/tpl/default/js/shaarli.js
@@ -138,6 +138,9 @@ window.onload = function () {
                 });
                 foldAllButton.firstElementChild.classList.toggle('fa-chevron-down');
                 foldAllButton.firstElementChild.classList.toggle('fa-chevron-up');
+                foldAllButton.title = state === 'down'
+                    ? document.getElementById('translation-fold-all').innerHTML
+                    : document.getElementById('translation-expand-all').innerHTML
             });
         });
     }
@@ -146,7 +149,7 @@ window.onload = function () {
     {
         // Switch fold/expand - up = fold
         if (button.classList.contains('fa-chevron-up')) {
-            button.title = 'Expand';
+            button.title = document.getElementById('translation-expand').innerHTML;
             if (description != null) {
                 description.style.display = 'none';
             }
@@ -155,7 +158,7 @@ window.onload = function () {
             }
         }
         else {
-            button.title = 'Fold';
+            button.title = document.getElementById('translation-fold').innerHTML;
             if (description != null) {
                 description.style.display = 'block';
             }
@@ -173,7 +176,7 @@ window.onload = function () {
     var deleteLinks = document.querySelectorAll('.confirm-delete');
     [].forEach.call(deleteLinks, function(deleteLink) {
         deleteLink.addEventListener('click', function(event) {
-            if(! confirm('Are you sure you want to delete this link ?')) {
+            if(! confirm(document.getElementById('translation-delete-link').innerHTML)) {
                 event.preventDefault();
             }
         });
@@ -275,8 +278,14 @@ window.onload = function () {
     };
     function init () {
         function resize () {
+            /* Fix jumpy resizing: https://stackoverflow.com/a/18262927/1484919 */
+            var scrollTop  = window.pageYOffset ||
+                (document.documentElement || document.body.parentNode || document.body).scrollTop;
+
             description.style.height = 'auto';
             description.style.height = description.scrollHeight+10+'px';
+
+            window.scrollTo(0, scrollTop);
         }
         /* 0-timeout to get the already changed text */
         function delayedResize () {
@@ -369,7 +378,7 @@ window.onload = function () {
     var linkCheckboxes = document.querySelectorAll('.delete-checkbox');
     var bar = document.getElementById('actions');
     [].forEach.call(linkCheckboxes, function(checkbox) {
-        checkbox.style.display = 'block';
+        checkbox.style.display = 'inline-block';
         checkbox.addEventListener('click', function(event) {
             var count = 0;
             var linkCheckedCheckboxes = document.querySelectorAll('.delete-checkbox:checked');
@@ -612,7 +621,7 @@ function activateFirefoxSocial(node) {
     // Keeping the data separated (ie. not in the DOM) so that it's maintainable and diffable.
     var data = {
         name: title,
-        description: "The personal, minimalist, super-fast, database free, bookmarking service by the Shaarli community.",
+        description: document.getElementById('translation-delete-link').innerHTML,
         author: "Shaarli",
         version: "1.0.0",
 
diff --git a/tpl/default/linklist.html b/tpl/default/linklist.html
index 685821e3..c666e30a 100644
--- a/tpl/default/linklist.html
+++ b/tpl/default/linklist.html
@@ -53,9 +53,9 @@
 {/loop}
 
 <div id="linklist">
-  <div class="pure-g">
+  <div id="link-count-block" 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="link-count-content" class="pure-u-lg-20-24 pure-u-22-24">
       <div class="linkcount pure-u-lg-0 center">
         {if="!empty($linkcount)"}
         <span class="strong">{$linkcount}</span> {function="t('shaare', 'shaares', $linkcount)"}
@@ -76,17 +76,17 @@
   </div>
 
   {if="count($links)==0"}
-    <div class="pure-g pure-alert pure-alert-error search-result">
+    <div id="search-result-block" class="pure-g pure-alert pure-alert-error search-result">
       <div class="pure-u-2-24"></div>
-      <div class="pure-u-20-24">
+      <div id="search-result-content" class="pure-u-20-24">
         <div id="searchcriteria">{'Nothing found.'|t}</div>
       </div>
     </div>
   {elseif="!empty($search_term) or $search_tags !== '' or !empty($visibility) or $untaggedonly"}
-    <div class="pure-g pure-alert pure-alert-success search-result">
+    <div id="search-result-block" class="pure-g pure-alert pure-alert-success search-result">
       <div class="pure-u-2-24"></div>
-      <div class="pure-u-20-24">
-        {function="t('%s result', '%s results', $result_count)"}
+      <div id="search-result-content" class="pure-u-20-24 search-result-main">
+        {function="sprintf(t('%s result', '%s results', $result_count), $result_count)"}
         {if="!empty($search_term)"}
           {'for'|t} <em><strong>{$search_term}</strong></em>
         {/if}
@@ -114,23 +114,34 @@
     </div>
   {/if}
 
-  <div class="pure-g">
+  <div id="linklist-loop-block" 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="linklist-loop-content" class="pure-u-lg-20-24 pure-u-22-24">
+      {ignore}Set translation here, for performances{/ignore}
+      {$strPrivate=t('Private')}
+      {$strEdit=t('Edit')}
+      {$strDelete=t('Delete')}
+      {$strFold=t('Fold')}
+      {$strEdited=t('Edited: ')}
+      {$strPermalink=t('Permalink')}
+      {$strPermalinkLc=t('permalink')}
+      {$strAddTag=t('Add tag')}
+      {ignore}End of translations{/ignore}
       {loop="links"}
         <div class="anchor" id="{$value.shorturl}"></div>
-        <div class="linklist-item linklist-item{if="$value.class"} {$value.class}{/if}" data-id="{$value.id}">
 
+        <div class="linklist-item linklist-item{if="$value.class"} {$value.class}{/if}" data-id="{$value.id}">
           <div class="linklist-item-title">
+            {$thumb=thumbnail($value.url)}
+            {if="$thumb!=false"}
+              <div class="linklist-item-thumbnail">{$thumb}</div>
+            {/if}
+
             {if="isLoggedIn()"}
               <div class="linklist-item-editbuttons">
                 {if="$value.private"}
-                  <span class="label label-private">{'Private'|t}</span>
+                  <span class="label label-private">{$strPrivate}</span>
                 {/if}
-                <input type="checkbox" class="delete-checkbox" value="{$value.id}">
-                <!-- FIXME! JS translation -->
-                <a href="?edit_link={$value.id}" title="{'Edit'|t}"><i class="fa fa-pencil-square-o edit-link"></i></a>
-                <a href="#" title="{'Fold'|t}" class="fold-button"><i class="fa fa-chevron-up"></i></a>
               </div>
             {/if}
 
@@ -147,11 +158,6 @@
             </h2>
           </div>
 
-          {$thumb=thumbnail($value.url)}
-          {if="$thumb!=false"}
-            <div class="linklist-item-thumbnail">{$thumb}</div>
-          {/if}
-
           {if="$value.description"}
             <div class="linklist-item-description">
               {$value.description}
@@ -164,7 +170,7 @@
                 <i class="fa fa-tags"></i>
                 {$tag_counter=count($value.taglist)}
                 {loop="value.taglist"}
-                  <span class="label label-tag" title="Add tag">
+                  <span class="label label-tag" title="{$strAddTag}">
                     <a href="?addtag={$value|urlencode}">{$value}</a>
                   </span>
                   {if="$tag_counter - 1 != $counter"}&middot;{/if}
@@ -172,11 +178,27 @@
               </div>
             {/if}
 
-            <div class="pure-g">
-              <div class="linklist-item-infos-dateblock pure-u-lg-3-8 pure-u-1">
-                <a href="?{$value.shorturl}" title="{'Permalink'|t}">
+            <div class="linklist-item-infos-date-url-block pure-g">
+              <div class="linklist-item-infos-dateblock pure-u-lg-7-12 pure-u-1">
+                {if="isLoggedIn()"}
+                  <div class="linklist-item-infos-controls-group pure-u-0 pure-u-lg-visible">
+                    <span class="linklist-item-infos-controls-item ctrl-checkbox">
+                      <input type="checkbox" class="delete-checkbox" value="{$value.id}">
+                    </span>
+                    <span class="linklist-item-infos-controls-item ctrl-edit">
+                      <a href="?edit_link={$value.id}" title="{$strEdit}"><i class="fa fa-pencil-square-o edit-link"></i></a>
+                    </span>
+                    <span class="linklist-item-infos-controls-item ctrl-delete">
+                      <a href="?delete_link&amp;lf_linkdate={$value.id}&amp;token={$token}"
+                         title="{$strDelete}" class="delete-link pure-u-0 pure-u-lg-visible confirm-delete">
+                        <i class="fa fa-trash"></i>
+                      </a>
+                    </span>
+                  </div>
+                {/if}
+                <a href="?{$value.shorturl}" title="{$strPermalink}">
                   {if="!$hide_timestamps || isLoggedIn()"}
-                    {$updated=$value.updated_timestamp ? 'Edited: '. format_date($value.updated) : 'Permalink'}
+                    {$updated=$value.updated_timestamp ? $strEdited. format_date($value.updated) : $strPermalink}
                     <span class="linkdate" title="{$updated}">
                       <i class="fa fa-clock-o"></i>
                       {$value.created|format_date}
@@ -184,7 +206,7 @@
                       &middot;
                     </span>
                   {/if}
-                  {'permalink'|t}
+                  {$strPermalinkLc}
                 </a>
 
                 <div class="pure-u-0 pure-u-lg-visible">
@@ -199,16 +221,13 @@
                 </div>
               </div><div
                 {ignore}do not add space or line break between these div - Firefox issue{/ignore}
-                class="linklist-item-infos-url pure-u-lg-5-8 pure-u-1">
+                class="linklist-item-infos-url pure-u-lg-5-12 pure-u-1">
                 <a href="{$value.real_url}" title="{$value.title}">
                   <i class="fa fa-link"></i> {$value.url}
                 </a>
-                {if="isLoggedIn()"}
-                  <a href="?delete_link&amp;lf_linkdate={$value.id}&amp;token={$token}"
-                     title="{'Delete'|t}" class="delete-link pure-u-0 pure-u-lg-visible confirm-delete">
-                    <i class="fa fa-trash"></i>
-                  </a>
-                {/if}
+                <div class="linklist-item-buttons pure-u-0 pure-u-lg-visible">
+                  <a href="#" title="{$strFold}" class="fold-button"><i class="fa fa-chevron-up"></i></a>
+                </div>
               </div>
               <div class="mobile-buttons pure-u-1 pure-u-lg-0">
                 {if="isset($value.link_plugin)"}
@@ -221,9 +240,11 @@
                 {if="isLoggedIn()"}
                   &middot;
                   <a href="?delete_link&amp;lf_linkdate={$value.id}&amp;token={$token}"
-                     title="{'Delete'|t}" class="delete-link confirm-delete">
+                     title="{$strDelete}" class="delete-link confirm-delete">
                     <i class="fa fa-trash"></i>
                   </a>
+                  &middot;
+                  <a href="?edit_link={$value.id}" title="{$strEdit}"><i class="fa fa-pencil-square-o edit-link"></i></a>
                 {/if}
               </div>
             </div>
@@ -240,9 +261,9 @@
     {/loop}
   </div>
 
-<div class="pure-g">
+<div id="linklist-paging-bottom-block" 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="linklist-paging-bottom-content" class="pure-u-lg-20-24 pure-u-22-24">
     {include="linklist.paging"}
   </div>
 </div>
diff --git a/tpl/default/linklist.paging.html b/tpl/default/linklist.paging.html
index 41e9fa34..347b3d13 100644
--- a/tpl/default/linklist.paging.html
+++ b/tpl/default/linklist.paging.html
@@ -13,7 +13,7 @@
         <a href="?untaggedonly" title="{'Filter untagged links'|t}"
            class={if="$untaggedonly"}"filter-on"{else}"filter-off"{/if}
         ><i class="fa fa-tag"></i></a>
-        <a href="#" class="filter-off fold-all pure-u-lg-0" title="Fold all">
+        <a href="#" class="filter-off fold-all pure-u-lg-0" title="{'Fold all'|t}">
           <i class="fa fa-chevron-up"></i>
         </a>
         {loop="$action_plugin"}
@@ -53,7 +53,7 @@
       <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">
+      <a href="#" class="filter-off fold-all pure-u-0 pure-u-lg-visible" title="{'Fold all'|t}">
         <i class="fa fa-chevron-up"></i>
       </a>
     </div>
diff --git a/tpl/default/page.footer.html b/tpl/default/page.footer.html
index 94f771a2..659e8c7f 100644
--- a/tpl/default/page.footer.html
+++ b/tpl/default/page.footer.html
@@ -8,8 +8,8 @@
       {$version}
     {/if}
     &middot;
-    The personal, minimalist, super-fast, database free, bookmarking service by the Shaarli community &middot;
-    <a href="doc/html/index.html" rel="nofollow">Documentation</a>
+    {'The personal, minimalist, super-fast, database free, bookmarking service'|t} {'by the Shaarli community'|t} &middot;
+    <a href="doc/html/index.html" rel="nofollow">{'Documentation'|t}</a>
       {loop="$plugins_footer.text"}
           {$value}
       {/loop}
@@ -27,6 +27,17 @@
         <script src="{$value}#"></script>
 {/loop}
 
-<script src="js/shaarli.js"></script>
-<script src="inc/awesomplete.js#"></script>
-<script src="inc/awesomplete-multiple-tags.js#"></script>
+<div id="js-translations" class="hidden">
+  <span id="translation-fold">{'Fold'|t}</span>
+  <span id="translation-fold-all">{'Fold all'|t}</span>
+  <span id="translation-expand">{'Expand'|t}</span>
+  <span id="translation-expand-all">{'Expand all'|t}</span>
+  <span id="translation-delete-link">{'Are you sure you want to delete this link?'|t}</span>
+  <span id="translation-shaarli-desc">
+    {'The personal, minimalist, super-fast, database free, bookmarking service'|t} {'by the Shaarli community'|t}
+  </span>
+</div>
+
+<script src="js/shaarli.js?v={$version_hash}"></script>
+<script src="inc/awesomplete.js?v={$version_hash}#"></script>
+<script src="inc/awesomplete-multiple-tags.js?v={$version_hash}#"></script>
diff --git a/tpl/default/page.header.html b/tpl/default/page.header.html
index 2411703c..6f15c1c5 100644
--- a/tpl/default/page.header.html
+++ b/tpl/default/page.header.html
@@ -1,7 +1,7 @@
 <div class="shaarli-menu pure-g" id="shaarli-menu">
   <div class="pure-u-lg-0 pure-u-1">
     <div class="pure-menu">
-      <a href="{$titleLink}" class="pure-menu-link">
+      <a href="{$titleLink}" class="pure-menu-link shaarli-title" id="shaarli-title-mobile">
         <img src="img/icon.png" width="16" height="16" class="head-logo" alt="logo" />
         {$shaarlititle}
       </a>
@@ -12,32 +12,32 @@
     <div class="pure-menu menu-transform pure-menu-horizontal pure-g">
       <ul class="pure-menu-list pure-u-lg-5-6 pure-u-1">
         <li class="pure-menu-item pure-u-0 pure-u-lg-visible">
-          <a href="{$titleLink}" class="pure-menu-link">
+          <a href="{$titleLink}" class="pure-menu-link shaarli-title" id="shaarli-title-desktop">
             <img src="img/icon.png" width="16" height="16" class="head-logo" alt="logo" />
             {$shaarlititle}
           </a>
         </li>
         {if="isLoggedIn() || $openshaarli"}
           <li class="pure-menu-item">
-            <a href="?do=addlink" class="pure-menu-link">
+            <a href="?do=addlink" class="pure-menu-link" id="shaarli-menu-shaare">
               <i class="fa fa-plus" ></i> {'Shaare'|t}
             </a>
           </li>
-          <li class="pure-menu-item">
+          <li class="pure-menu-item" id="shaarli-menu-tools">
             <a href="?do=tools" class="pure-menu-link">{'Tools'|t}</a>
           </li>
         {/if}
-        <li class="pure-menu-item">
+        <li class="pure-menu-item" id="shaarli-menu-tags">
           <a href="?do=tagcloud" class="pure-menu-link">{'Tag cloud'|t}</a>
         </li>
-        <li class="pure-menu-item">
+        <li class="pure-menu-item" id="shaarli-menu-picwall">
           <a href="?do=picwall{$searchcrits}" class="pure-menu-link">{'Picture wall'|t}</a>
         </li>
-        <li class="pure-menu-item">
+        <li class="pure-menu-item" id="shaarli-menu-daily">
           <a href="?do=daily" class="pure-menu-link">{'Daily'|t}</a>
         </li>
         {loop="$plugins_header.buttons_toolbar"}
-          <li class="pure-menu-item">
+          <li class="pure-menu-item shaarli-menu-plugin">
             <a
               {$value.attr.class=isset($value.class) ? $value.attr.class . ' pure-menu-link' : 'pure-menu-link'}
               {loop="$value.attr"}
@@ -47,47 +47,47 @@
             </a>
           </li>
         {/loop}
-        <li class="pure-menu-item pure-u-lg-0">
+        <li class="pure-menu-item pure-u-lg-0 shaarli-menu-mobile" id="shaarli-menu-mobile-rss">
             <a href="?do={$feed_type}{$searchcrits}" class="pure-menu-link">{'RSS Feed'|t}</a>
         </li>
         {if="isLoggedIn()"}
-          <li class="pure-menu-item pure-u-lg-0">
+          <li class="pure-menu-item pure-u-lg-0 shaarli-menu-mobile" id="shaarli-menu-mobile-logout">
             <a href="?do=logout" class="pure-menu-link">{'Logout'|t}</a>
           </li>
         {else}
-          <li class="pure-menu-item pure-u-lg-0">
+          <li class="pure-menu-item pure-u-lg-0 shaarli-menu-mobile" id="shaarli-menu-mobile-login">
             <a href="?do=login" class="pure-menu-link">{'Login'|t}</a>
           </li>
         {/if}
       </ul>
       <div class="header-buttons pure-u-lg-1-6 pure-u-0 pure-u-lg-visible">
         <ul class="pure-menu-list">
-          <li class="pure-menu-item">
+          <li class="pure-menu-item" id="shaarli-menu-desktop-search">
             <a href="#" class="pure-menu-link subheader-opener"
                data-open-id="search"
                id="search-button" title="{'Search'|t}">
               <i class="fa fa-search"></i>
             </a>
           </li>
-          <li class="pure-menu-item">
+          <li class="pure-menu-item" id="shaarli-menu-desktop-rss">
             <a href="?do={$feed_type}{$searchcrits}" class="pure-menu-link" title="{'RSS Feed'|t}">
               <i class="fa fa-rss"></i>
             </a>
           </li>
           {if="!isLoggedIn()"}
-          <li class="pure-menu-item">
-            <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>
-            </a>
-          </li>
+            <li class="pure-menu-item" id="shaarli-menu-desktop-login">
+              <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>
+              </a>
+            </li>
           {else}
-          <li class="pure-menu-item">
-            <a href="?do=logout" class="pure-menu-link" title="{'Logout'|t}">
-              <i class="fa fa-sign-out"></i>
-            </a>
-          </li>
+            <li class="pure-menu-item" id="shaarli-menu-desktop-logout">
+              <a href="?do=logout" class="pure-menu-link" title="{'Logout'|t}">
+                <i class="fa fa-sign-out"></i>
+              </a>
+            </li>
           {/if}
         </ul>
       </div>
@@ -156,7 +156,7 @@
 {/if}
 
 {if="!empty($plugin_errors) && isLoggedIn()"}
-  <div class="pure-g new-version-message pure-alert pure-alert-error pure-alert-closable">
+  <div class="pure-g new-version-message pure-alert pure-alert-error pure-alert-closable" id="shaarli-errors-alert">
     <div class="pure-u-2-24"></div>
     <div class="pure-u-20-24">
         {loop="plugin_errors"}
diff --git a/tpl/default/pluginsadmin.html b/tpl/default/pluginsadmin.html
index 5cc1802f..b2d7cdc5 100644
--- a/tpl/default/pluginsadmin.html
+++ b/tpl/default/pluginsadmin.html
@@ -27,7 +27,7 @@
 
         <div>
           {if="count($enabledPlugins)==0"}
-          <p>{'No plugin enabled.'|t}</p>
+            <p class="center">{'No plugin enabled.'|t}</p>
           {else}
           <table id="plugin_table">
             <thead>
@@ -77,7 +77,7 @@
 
         <div>
           {if="count($disabledPlugins)==0"}
-          <p>{'No plugin disabled.'|t}</p>
+            <p class="center">{'No plugin disabled.'|t}</p>
           {else}
           <table>
             <thead>
@@ -116,8 +116,8 @@
       </section>
 
       <div class="center more">
-        More plugins available
-        <a href="doc/Community-&-Related-software.html#third-party-plugins">in the documentation</a>.
+        {"More plugins available"|t}
+        <a href="doc/Community-&-Related-software.html#third-party-plugins">{"in the documentation"|t}</a>.
       </div>
       <div class="center">
         <input type="submit" value="{'Save'|t}" name="save">
@@ -135,9 +135,11 @@
       <section id="plugin_parameters">
         <div>
           {if="count($enabledPlugins)==0"}
-            <p>{'No plugin enabled.'|t}</p>
+            <p class="center">{'No plugin enabled.'|t}</p>
           {else}
+            {$nbParameters=0}
             {loop="$enabledPlugins"}
+              {$nbParameters=$nbParameters+count($value.parameters)}
               {if="count($value.parameters) > 0"}
                 <div class="plugin_parameters">
                   <h3 class="window-subtitle">{function="str_replace('_', ' ', $key)"}</h3>
@@ -159,10 +161,14 @@
                 </div>
               {/if}
             {/loop}
+            {if="$nbParameters===0"}
+              <p class="center">{'No parameter available.'|t}</p>
+            {else}
+              <div class="center">
+                <input type="submit" name="parameters_form" value="{'Save'|t}"/>
+              </div>
+            {/if}
           {/if}
-          <div class="center">
-            <input type="submit" name="parameters_form" value="{'Save'|t}"/>
-          </div>
         </div>
       </section>
     </div>
diff --git a/tpl/default/tag.cloud.html b/tpl/default/tag.cloud.html
index 96b357a3..12701465 100644
--- a/tpl/default/tag.cloud.html
+++ b/tpl/default/tag.cloud.html
@@ -14,8 +14,10 @@
     {$countTags=count($tags)}
     <h2 class="window-title">{'Tag cloud'|t} - {$countTags} {'tags'|t}</h2>
     {if="!empty($search_tags)"}
-    <p class="enter">
-      <a href="?searchtags={$search_tags|urlencode}">{'List all links with those tags'|t}</a>
+    <p class="center">
+      <a href="?searchtags={$search_tags|urlencode}" class="pure-button pure-button-shaarli">
+        {'List all links with those tags'|t}
+      </a>
     </p>
     {/if}
 
@@ -26,7 +28,7 @@
           <input type="hidden" name="do" value="tagcloud">
           <input type="text" name="searchtags" placeholder="{'Filter by tag'|t}"
                  {if="!empty($search_tags)"}
-                 value="{$search_tags}"
+                    value="{$search_tags}"
                  {/if}
           autocomplete="off" data-multiple data-autofirst data-minChars="1"
           data-list="{loop="$tags"}{$key}, {/loop}"
diff --git a/tpl/default/tag.list.html b/tpl/default/tag.list.html
index a3e741d3..7140c67a 100644
--- a/tpl/default/tag.list.html
+++ b/tpl/default/tag.list.html
@@ -15,7 +15,9 @@
     <h2 class="window-title">{'Tag list'|t} - {$countTags} {'tags'|t}</h2>
     {if="!empty($search_tags)"}
       <p class="center">
-        <a href="?searchtags={$search_tags|urlencode}">{'List all links with those tags'|t}</a>
+        <a href="?searchtags={$search_tags|urlencode}" class="pure-button pure-button-shaarli">
+          {'List all links with those tags'|t}
+        </a>
       </p>
     {/if}