bagit link + overlay save link + listmode

themes/baggy/_menu.twig

@@ -4,7 +4,7 @@
                 <li><a href="./?view=fav" {% if view == 'fav' %}class="current"{% endif %}>{% trans "favorites" %}</a></li>
                 <li><a href="./?view=archive" {% if view == 'archive' %}class="current"{% endif %}>{% trans "archive" %}</a></li>
                 <li><a href="./?view=tags" {% if view == 'tags' %}class="current"{% endif %}>{% trans "tags" %}</a></li>
-                <li><a href="javascript: void(null);" id="pocheit">{% trans "save a link" %}</a></li>
+                <li><a href="javascript: void(null);" id="bagit">{% trans "save a link" %}</a></li>
                 <li><a href="./?view=config" {% if view == 'config' %}class="current"{% endif %}>{% trans "config" %}</a></li>
                 <li><a class="icon icon-power" href="./?logout" title="{% trans "logout" %}">{% trans "logout" %}</a></li>
             </ul>

themes/baggy/_pocheit-form.twig

@@ -0,0 +1,8 @@
+<div id="bagit-form" class="messages info">
+
+    <form method="get" action="index.php">
+        <h2>{% trans "Save a link" %}</h2>
+        <input required placeholder="example.com/article" class="addurl" id="plainurl" name="plainurl" type="url" />
+        <input type="submit" value="{% trans "save link!" %}" />
+    </form>
+</div>

themes/baggy/css/main.css

@@ -173,7 +173,7 @@ h2:after {
 #links {
   position: fixed;
   top: 0;
-  width: 9em;
+  width: 10em;
   left: 0;
   text-align: right;
   background: #333;
@@ -184,7 +184,7 @@ h2:after {
 }
 
 #main {
-  margin-left: 12em;
+  margin-left: 13em;
   position: relative;
   z-index: 10;
   padding-right: 5%;
@@ -228,7 +228,7 @@ h2:after {
   #links li:last-child {
     position: fixed;
     bottom: 1em;
-    width: 9em;
+    width: 10em;
   }
 
   #links li:last-child a:before {
@@ -322,6 +322,15 @@ footer a {
   letter-spacing:-5px;
 }
 
+.listmode .entrie {
+  width: 100%!important;
+  margin-left: 0!important;
+}
+
+.listmode .entrie p {
+  display: none;
+}
+
 .list-entries + .results {
   margin-bottom: 2em;
 }
@@ -343,10 +352,10 @@ footer a {
   letter-spacing:normal;
   box-shadow: 0 3px 7px rgba(0,0,0,0.3);
   display: inline-block;
-  width: 32%;
+  width: 32%!important;
   margin-bottom: 1.5em;
   vertical-align: top;
-  margin-left: 1.5%;
+  margin-left: 1.5%!important;
   position: relative;
   overflow: hidden;
   padding: 1.5em 1.5em 3em 1.5em;
@@ -481,7 +490,7 @@ footer a {
   }
 
 .entrie:nth-child(3n+1) {
-  margin-left: 0;
+  margin-left: 0!important;
 }
 
 .results {
@@ -525,6 +534,33 @@ footer a {
   display: none;
 }
 
+#bagit-form {
+  background: rgba(0,0,0,0.8);
+  position: fixed;
+  top: 0;
+  left: 10em;
+  z-index: 20;
+  height: 100%;
+  width: 100%;
+  margin: 0;
+  padding: 2em;
+  display: none;
+}
+
+#bagit-form form {
+  background: #FFF;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  z-index: 20;
+  border: 10px solid #000;
+  width: 600px;
+  height: 300px;
+  margin: -150px 0 0 -300px;
+  padding: 2em;
+}
+
+
 /* ==========================================================================
    3 = Pictos
    ========================================================================== */

themes/baggy/home.twig

@@ -30,7 +30,7 @@
                 </div>
                     {% endif %}
                 {% endblock %}
-            <div class="list-entries">
+            <div id="list-entries" class="list-entries">
                     {% for entry in entries %}
                 <div id="entry-{{ entry.id|e }}" class="entrie"{% if listmode %} style="width:100%; margin-left:0;"{% endif %}>
                     <h2><a href="index.php?view=view&amp;id={{ entry.id|e }}">{{ entry.title|raw }}</a></h2>

themes/baggy/js/init.js

@@ -1,36 +1,75 @@
-$(document).ready(function() {
+$.fn.ready(function() {
+
+  var $listmode = $('#listmode'),
+      $listentries = $("#list-entries"),
+      $bagit = $('#bagit'),
+      $bagitForm = $('#bagit-form');
+
+  /* ==========================================================================
+     Menu
+     ========================================================================== */
 
   $("#menu").click(function(){
     $("#links").toggle();
   });
 
+  /* ==========================================================================
+     List mode or Table Mode
+     ========================================================================== */
 
-  $("#listmode").click(function(){
+  $listmode.click(function(){
     if ( $.cookie("listmode") == 1 ) {
-      $(".entrie").css("width", "");
+      // Cookie
-      $(".entrie").css("margin-left", "");
-
       $.removeCookie("listmode");
-      $("#listmode").removeClass("tablemode");
+
-      $("#listmode").addClass("listmode");
+      $listentries.removeClass("listmode");
+      $listmode.removeClass("tablemode");
+      $listmode.addClass("listmode");
     }
     else {
+      // Cookie
       $.cookie("listmode", 1, {expires: 365});
 
-      $(".entrie").css("width", "100%");
+      $listentries.addClass("listmode");
-      $(".entrie").css("margin-left", "0");
+      $listmode.removeClass("listmode");
-      $("#listmode").removeClass("listmode");
+      $listmode.addClass("tablemode");
-      $("#listmode").addClass("tablemode");
     }
 
   });
 
+  /* ==========================================================================
+     Cookie listmode
+     ========================================================================== */
+
   if ( $.cookie("listmode") == 1 ) {
-    $(".entrie").css("width", "100%");
+    $listentries.addClass("listmode");
-    $(".entrie").css("margin-left", "0");
+    $listmode.removeClass("listmode");
-    $("#listmode").removeClass("listmode");
+    $listmode.addClass("tablemode");
-    $("#listmode").addClass("tablemode");
   }
 
+  /* ==========================================================================
+     bag it link
+     ========================================================================== */
+
+  $bagit.click(function(){
+    $bagitForm.toggle();
+  });
+
+  /* ==========================================================================
+     Keyboard gestion
+     ========================================================================== */
+
+  $(window).keydown(function(e){
+    switch (e.keyCode) {
+      // s letter
+      case 83:
+        $bagitForm.toggle();
+      break;
+      case 27:
+        $bagitForm.hide();
+      break;
+    }
+  })
+
 
 });