Work in progress: linklist, header and footer

9 files changed, 548 insertions, 86 deletions

diff --git a/plugins/markdown/markdown.css b/plugins/markdown/markdown.css
index e012b864..8f2c0051 100644
--- a/plugins/markdown/markdown.css
+++ b/plugins/markdown/markdown.css
@@ -5,7 +5,7 @@
  */
 
 .markdown p{
-    margin:0.75em 0;
+    margin: 0.75em 0;
 }
 
 .markdown img{
diff --git a/tpl/default/css/pure-extras.css b/tpl/default/css/pure-extras.css
new file mode 100644
index 00000000..d72fc94c
--- /dev/null
+++ b/tpl/default/css/pure-extras.css
@@ -0,0 +1,262 @@
+/* Images */
+.pure-img-eliptical {
+        border-radius: 80%;
+}
+.pure-img-rounded {
+        border-radius: 3px;
+}
+.pure-img-bordered {
+    background-color: #FFFFFF;
+    border: 1px solid rgba(0, 0, 0, 0.2);
+    padding: 5px;
+}
+
+
+/* Thumbnails */
+.pure-thumbnails li {
+    text-align: center;
+    display: inline-block;
+    *display: inline;
+    /* IE7 inline-block hack */
+    *zoom: 1;
+    vertical-align: top;
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    box-sizing: border-box;
+    padding: 0.5em;
+}
+.pure-thumbnails {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+}
+
+.pure-thumbnails a:focus {
+    outline: 0 none;
+}
+
+.pure-thumb {
+    display: block;
+    text-decoration: none;
+    color: inherit;
+}
+.pure-thumb img {
+    max-width: 100%;
+    margin-right: auto;
+    margin-left: auto;
+    vertical-align: middle; /* this will remove a thin line below the image */
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    box-sizing: border-box;
+}
+
+.pure-thumb-bordered {
+    border: 1px solid rgba(0, 0, 0, 0.2);
+}
+.pure-thumb .caption {
+    text-align: left;
+    display: block;
+    margin: 0 5px 6px;
+
+}
+.pure-thumb .caption p {
+    margin: 0.3em 0 0;
+    font-size: 75%;
+}
+.pure-thumb .caption .caption-head {
+    font-weight: bold;
+    margin-top: 0.3em;
+}
+
+.pure-thumb-eliptical img {
+        border-radius: 50%;
+}
+.pure-thumb-rounded img {
+        border-radius: 3px;
+}
+
+/* Badges/Pills */
+.pure-badge,
+.pure-badge-error,
+.pure-badge-warning,
+.pure-badge-success,
+.pure-badge-info,
+.pure-badge-inverse {
+    padding: 0.35em 0.9em 0.35em;
+    background-color: #9D988E;
+    color: #fff;
+    display: inline-block;
+    font-size: 11.844px;
+    font-weight: bold;
+    line-height: 1.2em;
+    vertical-align: baseline;
+    white-space: nowrap;
+    border-radius: 20px;
+    margin: 0.2em;
+}
+.pure-badge-error {
+    background-color: #D13C38;
+}
+.pure-badge-warning {
+    background-color: #E78C05;
+}
+.pure-badge-success {
+    background-color: rgb(83, 180, 79);
+}
+.pure-badge-info {
+    background-color: rgb(18, 169, 218);
+}
+.pure-badge-inverse {
+    background-color: #4D370C;
+}
+
+/* Alerts */
+.pure-alert {
+    position: relative;
+    margin-bottom: 1em;
+    padding: 1em;
+    background: #ccc;
+    border-radius: 3px;
+}
+
+.pure-alert label {
+    display: inline-block;
+    *display: inline;
+    /* IE7 inline-block hack */
+    *zoom: 1;
+    white-space: nowrap;
+}
+
+.pure-alert {
+    background-color: rgb(209, 235, 238);
+    color: rgb(102, 131, 145);
+}
+.pure-alert-error {
+    background-color: #D13C38;
+    color: #fff;
+}
+
+.pure-alert-warning {
+    background-color: rgb(250, 191, 103);
+    color: rgb(151, 96, 13);
+}
+
+.pure-alert-success {
+    background-color: rgb(83, 180, 79);
+    color: #fff;
+}
+
+
+/* Contextual Modals */
+
+.pure-popover {
+    position: relative;
+    width: 300px;
+    background-color: #f0f1f3;
+    color: #2f3034;
+    padding: 15px;
+    border: 1px solid #bfc0c8;
+    border-radius: 2px;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+    box-padding: border-box;
+    -webkit-background-clip: padding-box;
+    -moz-background-clip: padding;
+    background-clip: padding-box;
+}
+
+.pure-arrow-border, .pure-arrow {
+    border-style: solid;
+    border-width: 10px;
+    height:0;
+    width:0;
+    position:absolute;
+}
+
+
+/* POPOVER ARROW POSITIONING BOTTOM */
+
+.pure-popover.bottom .pure-arrow-border {
+    border-color: #bfc0c8 transparent transparent transparent;
+    bottom: -20px;
+    left: 50%;
+}
+.pure-popover.bottom .pure-arrow {
+    border-color: #f0f1f3 transparent transparent transparent;
+    bottom:-19px;
+    left: 50%;
+}
+
+/* POPOVER ARROW POSITIONING TOP*/
+
+.pure-popover.top .pure-arrow-border {
+    border-color: transparent transparent #bfc0c8 transparent;
+    top: -21px;
+    left: 50%;
+}
+.pure-popover.top .pure-arrow {
+    border-color: transparent transparent #f0f1f3 transparent;
+    top:-20px;
+    left: 50%;
+}
+
+/* POPOVER ARROW POSITIONING RIGHT*/
+
+.pure-popover.right .pure-arrow-border {
+    border-color: transparent transparent transparent #bfc0c8;
+    top: 45%;
+    right: -21px;
+}
+.pure-popover.right .pure-arrow {
+    border-color: transparent transparent transparent #f0f1f3;
+    top:45%;
+    right: -20px;
+}
+
+
+/* POPOVER ARROW POSITIONING LEFT*/
+
+.pure-popover.left .pure-arrow-border {
+    border-color: transparent #bfc0c8 transparent transparent;
+    top: 45%;
+    left: -21px;
+}
+.pure-popover.left .pure-arrow {
+    border-color: transparent #f0f1f3 transparent transparent;
+    top:45%;
+    left: -20px;
+}
+
+
+/* BUTTON IMPROVEMENTS */
+.pure-button-block {
+    display: block;
+}
+.pure-button-small {
+    padding: .6em 2em .65em;
+    font-size:70%;
+}
+.pure-button-large {
+    padding: .8em 5em .9em;
+    font-size:110%;
+}
+.pure-button-selected {
+    background-color: #345fcb;
+    color: #fff;
+}
+.pure-button-secondary {
+    background: rgb(161, 195, 238);
+    color: rgb(26, 88, 122);
+}
+.pure-button-error {
+    background: rgb(214, 86, 75);
+    color: white;
+}
+.pure-button-success {
+    background: rgb(54, 197, 71);
+    color: white;
+}
+.pure-button-warning {
+    background: rgb(255, 163, 0);
+    color: white;
+}
+
diff --git a/tpl/default/css/shaarli.css b/tpl/default/css/shaarli.css
index eeff5151..9a075574 100644
--- a/tpl/default/css/shaarli.css
+++ b/tpl/default/css/shaarli.css
@@ -25,6 +25,10 @@ body {
     border-radius: .25rem;
 }
 
+pre {
+    max-width: 100%;
+}
+
 @font-face {
     font-family: 'Roboto Slab';
     font-weight: 400;
@@ -60,6 +64,16 @@ body {
 }
 
 /**
+ * Make pure-extras alert closable.
+ */
+.pure-alert-closable .fa-times {
+    float: right;
+}
+.pure-alert-close {
+    cursor: pointer;
+}
+
+/**
  * MENU
  **/
 .shaarli-menu {
@@ -174,6 +188,10 @@ body {
     color: #d1fff0;
 }
 
+.header-buttons {
+    text-align: right;
+}
+
 #linkcount {
     /* position: fixed; */
     position: absolute;
@@ -208,6 +226,11 @@ body {
     color: #b0ddce;
 }
 
+/* because chrome */
+#search input[type="text"]::-webkit-input-placeholder {
+    color: #b0ddce;
+}
+
 #search button {
     background: transparent;
     border: none;
@@ -218,6 +241,55 @@ body {
     color: #fff;
 }
 
+#header-login-form {
+    display: none;
+    height: 30px;
+    padding: 5px 0;
+    text-align: center;
+    background: #1b926c;
+    box-shadow: 0 1px 1px 1px #797979;
+}
+
+#header-login-form input[type="text"], #header-login-form input[type="password"] {
+    margin: 0 0 5px 0;
+    padding: 5px 5px 3px 15px;
+    height: 20px;
+    width: 200px;
+    background: #1fa67a;
+    border: medium none currentColor;
+    border-radius: 25px;
+    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.078), 0 1px 4px rgba(0, 0, 0, 0.298) inset;
+    color: #b0ddce;
+}
+
+/* because chrome */
+#header-login-form input[type="text"]::-webkit-input-placeholder,
+#header-login-form input[type="password"]::-webkit-input-placeholder
+{
+    color: #b0ddce;
+}
+
+#header-login-form input[type="submit"] {
+    display: inline-block;
+    margin: 0 0 5px 0;
+    height: 25px;
+    width: 100px;
+    background: #0C7653;
+    border: medium none currentColor;
+    border-radius: 25px;
+    box-shadow: 1px 1px 2px #005C3E, -1px -1px 2px #005C3E;
+    color: #b0ddce;
+}
+
+.new-version-message {
+    text-align: center;
+}
+
+.new-version-message a {
+    color: rgb(151, 96, 13);
+    font-weight: bold;
+}
+
 /**
  * CONTENT - GENERAL
  */
@@ -233,6 +305,7 @@ body {
 
 /**
  * CONTENT - LINKLIST PAGING
+ * 64em -> lg
  */
 @media screen and (max-width: 64em) {
     .linklist-paging {
@@ -249,10 +322,7 @@ body {
 .linklist-filters {
     margin: 10px 0;
     color: #252525;
-}
-
-.linklist-filters span {
-    margin: 0 0 0 10px;
+    font-size: 0.9em;
 }
 
 .linklist-filters a {
@@ -289,6 +359,7 @@ body {
     margin: 10px 0;
     text-align: right;
     color: #252525;
+    font-size: 0.9em;
 }
 
 .linksperpage a {
@@ -306,12 +377,12 @@ body {
 
 .linksperpage input[type="text"] {
     width: 28px;
-    height: 20px;
-    margin: 0 0 5px 0;
+    height: 16px;
+    margin: 0;
     padding: 3px 5px 3px 8px;
     background: #c8c8c8;
     border: medium none currentColor;
-    border-radius: 25px;
+    --border-radius: 25px;
     box-shadow: 0 1px 0 rgba(255, 255, 255, 0.078), 0 1px 4px rgba(0, 0, 0, 0.298) inset;
     color: #252525;
     font-size: 0.8em;
@@ -395,13 +466,17 @@ body {
     color: #20b988;
 }
 
+.linklist-item-thumbnail {
+    padding: 10px;
+    float: left;
+}
+
 .linklist-item-infos {
-    padding: 5px;
+    padding: 5px 5px 0 5px;
     background: #ddd url(../img/noise.png);
     border-top: 1px solid #989898;
     box-shadow: 1px -1px 0.2em #989898;
     color: #252525;
-    font-size: 0.8em;
 }
 
 .linklist-item-infos a {
@@ -415,6 +490,7 @@ body {
 
 .linklist-item-tags {
     margin: 0 0 5px 0;
+    font-size: 0.8em;
 }
 
 .linklist-item-infos .label-tag {
@@ -426,6 +502,10 @@ body {
     border: 1px solid #000;
 }
 
+.linklist-item-infos-dateblock {
+    font-size: 0.9em;
+}
+
 .linklist-plugin-icon {
     width: 13px;
     height: 13px;
@@ -436,9 +516,39 @@ body {
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
+    font-size: 0.8em;
+}
+
+/** 64em -> lg **/
+@media screen and (max-width: 64em) {
+    .linklist-item-infos-url {
+        text-align: left;
+    }
 }
 
 /**
+ * Footer
+ */
+#footer {
+    margin: 20px 0;
+    padding: 5px;
+    text-align: center;
+    color: #252525;
+}
+
+#footer:before {
+    display: block;
+    content:"";
+    background: linear-gradient(to right, #949393, #252525, #949393);
+    height: 1px;
+    width: 80%;
+    margin: 10px auto;
+}
+
+#footer a {
+    color: #252525;
+}
+/**
  * CONTENT - LINKLIST ITEMS
  */
 .linklist-item {
diff --git a/tpl/default/includes.html b/tpl/default/includes.html
index 03cc3d2a..24c4bef0 100644
--- a/tpl/default/includes.html
+++ b/tpl/default/includes.html
@@ -7,6 +7,7 @@
 <link href="images/favicon.ico#" rel="shortcut icon" type="image/x-icon" />
 <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="css/shaarli.css" />
 <link type="text/css" rel="stylesheet" href="inc/awesomplete.css#" />
diff --git a/tpl/default/js/shaarli.js b/tpl/default/js/shaarli.js
index d73bd29b..8e541998 100644
--- a/tpl/default/js/shaarli.js
+++ b/tpl/default/js/shaarli.js
@@ -87,7 +87,6 @@ var foldButtons = document.querySelectorAll('.fold-button');
 
         // Switch fold/expand - up = fold
         if (event.target.classList.contains('fa-chevron-up')) {
-
             event.target.title = 'Expand';
             description.style.display = 'none';
         }
@@ -98,4 +97,59 @@ var foldButtons = document.querySelectorAll('.fold-button');
         event.target.classList.toggle('fa-chevron-down');
         event.target.classList.toggle('fa-chevron-up');
     });
-});
\ No newline at end of file
+});
+
+/**
+ * Confirmation message before deletion.
+ */
+var deleteLinks = document.querySelectorAll('.delete-link');
+[].forEach.call(deleteLinks, function(deleteLink) {
+    deleteLink.addEventListener('click', function(event) {
+        if(!confirm('Are you sure you want to delete this link ?')) {
+            event.preventDefault();
+        }
+    });
+});
+
+/**
+ * Close alerts
+ */
+var closeLinks = document.querySelectorAll('.pure-alert-close');
+[].forEach.call(closeLinks, function(closeLink) {
+    closeLink.addEventListener('click', function(event) {
+        var alert = getParentByClass(event.target, 'pure-alert-closable');
+        alert.style.display = 'none';
+    });
+});
+
+/**
+ * New version dismiss.
+ * Hide the message for one week using localStorage.
+ */
+var newVersionDismiss = document.getElementById('new-version-dismiss');
+var newVersionMessage = document.querySelector('.new-version-message');
+if (newVersionMessage != null
+    && localStorage.getItem('newVersionDismiss') != null
+    && parseInt(localStorage.getItem('newVersionDismiss')) + 7*24*60*60*1000 > (new Date()).getTime()
+) {
+    newVersionMessage.style.display = 'none';
+}
+if (newVersionDismiss != null) {
+    newVersionDismiss.addEventListener('click', function () {
+        localStorage.setItem('newVersionDismiss', (new Date()).getTime());
+    });
+}
+
+/**
+ * Login button
+ */
+var loginButton = document.getElementById('login-button');
+loginButton.addEventListener('click', function(event) {
+    event.preventDefault();
+    var loginBlock = document.getElementById('header-login-form');
+    loginBlock.style.display = 'block';
+    loginBlock.classList.toggle('open');
+    // Focus on login field.
+    loginBlock.firstElementChild.focus();
+    document.getElementById('content').style.boxShadow = 'none';
+});
diff --git a/tpl/default/linklist.html b/tpl/default/linklist.html
index cc70cc6a..964cc400 100644
--- a/tpl/default/linklist.html
+++ b/tpl/default/linklist.html
@@ -47,7 +47,9 @@
               <div class="linklist-item-editbuttons">
                 <a href="#" title="Fold" class="fold-button"><i class="fa fa-chevron-up"></i></a>
                 <a href="?edit_link={$value.linkdate}" title="Edit"><i class="fa fa-pencil-square-o"></i></a>
-                <a href="?delete_link={$value.linkdate}&amp;token={$token}" title="Delete"><i class="fa fa-trash"></i></a>
+                <a href="?delete_link={$value.linkdate}&amp;token={$token}" title="Delete" class="delete-link">
+                  <i class="fa fa-trash"></i>
+                </a>
               </div>
             {/if}
 
@@ -68,7 +70,10 @@
             </h2>
           </div>
 
-          <div class="linklist-item-thumbnail">{$value.url|thumbnail}</div>
+          {$thumb=thumbnail($value.url)}
+          {if="$thumb!=false"}
+            <div class="linklist-item-thumbnail">{$thumb}</div>
+          {/if}
 
           {if="$value.description"}
             <div class="linklist-item-description">
@@ -76,7 +81,7 @@
             </div>
           {/if}
 
-          <div class="linklist-item-infos">
+          <div class="linklist-item-infos clear">
             {if="$value.tags"}
               <div class="linklist-item-tags">
                 <i class="fa fa-tags"></i>
@@ -89,7 +94,7 @@
             {/if}
 
             <div class="pure-g">
-              <div class="pure-u-lg-5-8 pure-u-sm-1">
+              <div class="linklist-item-infos-dateblock pure-u-lg-3-8 pure-u-sm-1">
                 <a href="?{$value.shorturl}" title="Permalink">
                   {if="!$GLOBALS['config']['HIDE_TIMESTAMPS'] || isLoggedIn()"}
                     <span class="linkdate">
@@ -106,7 +111,7 @@
                   {if="$link_plugin_counter - 1 != $counter"}&middot;{/if}
                 {/loop}
               </div>
-              <div class="linklist-item-infos-url pure-u-lg-3-8 pure-u-sm-1">
+              <div class="linklist-item-infos-url pure-u-lg-5-8 pure-u-sm-1">
                 <a href="{$value.real_url}" title="{$value.title}">
                   <i class="fa fa-link"></i> {$value.url}
                 </a>
diff --git a/tpl/default/linklist.paging.html b/tpl/default/linklist.paging.html
index 1a8256f3..9a3fd7a8 100644
--- a/tpl/default/linklist.paging.html
+++ b/tpl/default/linklist.paging.html
@@ -1,52 +1,57 @@
 <div class="linklist-paging">
-  <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
-        </span>
-        {if="isLoggedIn()"}
-          <a href="?privateonly" title="Click to see all links"
-             class={if="$privateonly"}"filter-on"{else}"filter-off"{/if}
-          ><i class="fa fa-key"></i></a>
-        {/if}
-        {loop="$action_plugin"}
-          <!-- FIXME! Plugin update to handle that. -->
-          <a href="?privateonly" title="{$value.title}" class=
-            {if="$value.on"}
-              "filter-on"
-            {else}
-              "filter-off"
+  <div class="pure-g">
+    <div class="pure-u-2-24"></div>
+    <div class="pure-u-20-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
+            </span>
+            {if="isLoggedIn()"}
+              <a href="?privateonly" title="Click to see all links"
+                 class={if="$privateonly"}"filter-on"{else}"filter-off"{/if}
+              ><i class="fa fa-key"></i></a>
             {/if}
-          >{$value.url}</a>
-        {/loop}
-      {/if}
-    </div>
+            {loop="$action_plugin"}
+              <!-- FIXME! Plugin update to handle that. -->
+              <a href="?privateonly" title="{$value.title}" class=
+                {if="$value.on"}
+                  "filter-on"
+                {else}
+                  "filter-off"
+                {/if}
+              >{$value.url}</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">
-      Links per page
-      <a href="?linksperpage=20">20</a>
-      <a href="?linksperpage=50">50</a>
-      <a href="?linksperpage=100">100</a>
-      <form method="GET">
-        <input type="text" name="linksperpage" placeholder="133">
-      </form>
+        <div class="linksperpage pure-u-1-3">
+          <div class="pure-u-0 pure-u-lg-visible">Links per page</div>
+          <a href="?linksperpage=20">20</a>
+          <a href="?linksperpage=50">50</a>
+          <a href="?linksperpage=100">100</a>
+          <form method="GET">
+            <input type="text" name="linksperpage" placeholder="133">
+          </form>
+        </div>
+      </div>
     </div>
   </div>
 </div>
\ No newline at end of file
diff --git a/tpl/default/page.footer.html b/tpl/default/page.footer.html
index 5e4ff9ee..f5a92382 100644
--- a/tpl/default/page.footer.html
+++ b/tpl/default/page.footer.html
@@ -1,29 +1,19 @@
-<div id="footer">
-    <b><a href="https://github.com/shaarli/Shaarli">Shaarli</a></b> - The personal, minimalist, super-fast, no-database delicious clone by the <a href="https://github.com/shaarli/Shaarli">Shaarli</a> community - <a href="doc/Home.html">Help/documentation</a>
-    {loop="$plugins_footer.text"}
-        {$value}
-    {/loop}
+<div class="pure-g">
+  <div class="pure-u-2-24"></div>
+  <div id="footer" class="pure-u-20-24">
+    <strong><a href="https://github.com/shaarli/Shaarli">Shaarli</a></strong> -
+    The personal, minimalist, super-fast, database free, bookmarking service by the Shaarli community -
+    <a href="doc/Home.html" rel="nofollow">Help/documentation</a>
+      {loop="$plugins_footer.text"}
+          {$value}
+      {/loop}
+  </div>
+  <div class="pure-u-2-24"></div>
 </div>
-
 {loop="$plugins_footer.endofpage"}
     {$value}
 {/loop}
 
-{if="$newVersion"}
-<div id="newversion">
-  <span id="version_id">&#x25CF;</span> Shaarli {$newVersion} is
-  <a href="https://github.com/shaarli/Shaarli/releases">available</a>.
-</div>
-{/if}
-{if="$versionError"}
-<div id="newversion">
-  Error: {$versionError}
-</div>
-{/if}
-{if="isLoggedIn()"}
-<script>function confirmDeleteLink() { var agree=confirm("Are you sure you want to delete this link ?"); if (agree) return true ; else return false ; }</script>
-{/if}
-
 {loop="$plugins_footer.js_files"}
         <script src="{$value}#"></script>
 {/loop}
diff --git a/tpl/default/page.header.html b/tpl/default/page.header.html
index 7a67fb2a..e6cf5aff 100644
--- a/tpl/default/page.header.html
+++ b/tpl/default/page.header.html
@@ -63,11 +63,21 @@
           </li>
         {/if}
       </ul>
-      <div class="pure-u-lg-1-12 pure-u-sm-0 pure-u-lg-visible">
-        <!--<i class="fa fa-user"></i>-->
-        <a href="?do=atom{$searchcrits}" class="pure-menu-link">
-          <i class="fa fa-rss"></i>
-        </a>
+      <div class="header-buttons pure-u-lg-1-12 pure-u-sm-0 pure-u-lg-visible">
+        <ul class="pure-menu-list">
+          {if="!isLoggedIn()"}
+            <li class="pure-menu-item">
+              <a href="?do=login" class="pure-menu-link" id="login-button">
+                <i class="fa fa-user"></i>
+              </a>
+            </li>
+          {/if}
+          <li class="pure-menu-item">
+            <a href="?do=atom{$searchcrits}" class="pure-menu-link">
+              <i class="fa fa-rss"></i>
+            </a>
+          </li>
+        </ul>
       </div>
     </div>
   </div>
@@ -106,6 +116,31 @@
 </div>
 
 <div id="content">
+  <div id="header-login-form">
+    <input type="text" name="login" placeholder="Username">
+    <input type="password" name="password" placeholder="Password">
+    <input type="submit" value="Login">
+  </div>
+
+{if="!empty($newVersion) || !empty($versionError)"}
+  <div class="pure-g new-version-message pure-alert pure-alert-warning pure-alert-closable">
+    <div class="pure-u-2-24"></div>
+    {if="$newVersion"}
+      <div class="pure-u-20-24">
+        Shaarli {$newVersion} is
+        <a href="https://github.com/shaarli/Shaarli/releases">available</a>.
+      </div>
+    {/if}
+    {if="$versionError"}
+      <div class="pure-u-20-24">
+        Error: {$versionError}
+      </div>
+    {/if}
+    <div class="pure-u-2-24">
+      <i id="new-version-dismiss" class="fa fa-times pure-alert-close"></i>
+    </div>
+  </div>
+{/if}
 
 
 {if="!empty($_GET['source']) && $_GET['source']=='bookmarklet'"}