some baggy theme fixes and enhancement: issue #479

diff --git a/themes/baggy/_display-mode.twig b/themes/baggy/_display-mode.twig
new file mode 100755 (executable)
index 0000000..31f7658
--- /dev/null
+++ b/themes/baggy/_display-mode.twig
@@ -0,0 +1,5 @@
+<div id="display-mode">
+  <a href="javascript: void(null);" id="listmode" class="listmode">
+    <img src="{{ poche_url }}/themes/{{ theme }}/img/{{ theme }}/blank.png" alt="{% trans "toggle view mode" %}" title="{% trans "toggle view mode" %}" width="16" height="16">
+  </a>
+</div>

diff --git a/themes/baggy/_head.twig b/themes/baggy/_head.twig
old mode 100644 (file)
new mode 100755 (executable)
index 206d5aa..1ea59ab
--- a/themes/baggy/_head.twig
+++ b/themes/baggy/_head.twig
@@ -8,5 +8,6 @@
         <link rel="stylesheet" href="{{ poche_url }}/themes/{{theme}}/css/messages.css" media="all">
         <link rel="stylesheet" href="{{ poche_url }}/themes/{{theme}}/css/print.css" media="print">
         <script src="{{ poche_url }}/themes/{{theme}}/js/jquery-2.0.3.min.js"></script>
+        <script src="{{ poche_url }}/themes/{{theme}}/js/jquery.cookie.js"></script>
         <script src="{{ poche_url }}/themes/{{theme}}/js/init.js"></script>
         <script src="{{ poche_url }}/themes/{{ constant('DEFAULT_THEME') }}/js/closeMessage.js"></script>

diff --git a/themes/baggy/css/main.css b/themes/baggy/css/main.css
index 3e128b08d5a568851aeb7d6fd89bcc472702afbc..0a8d2c7b0f04f0a0d853e4312787a4de1922d327 100755 (executable)
--- a/themes/baggy/css/main.css
+++ b/themes/baggy/css/main.css
@@ -177,7 +177,7 @@ h2:after {
   left: 0;
   text-align: right;
   background: #333;
-  padding-top: 9em;
+  padding-top: 9.5em;
   height: 100%;
   box-shadow:inset -4px 0 20px rgba(0,0,0,0.6);
   z-index: 10;
@@ -188,6 +188,7 @@ h2:after {
   position: relative;
   z-index: 10;
   padding-right: 5%;
+  padding-bottom: 1em;
 }
 
   #links a {
@@ -227,7 +228,7 @@ h2:after {
   #links li:last-child {
     position: fixed;
     bottom: 1em;
-    width: 10%;
+    width: 9em;
   }
 
   #links li:last-child a:before {
@@ -237,6 +238,61 @@ h2:after {
   }
 
 
+#sort {
+    padding: 0;
+    list-style-type: none;
+    opacity: 0.5;
+    display: inline-block;
+}
+
+#sort li {
+    display: inline;
+    font-size: 0.9em;
+}
+
+#sort li + li {
+    margin-left: 10px;
+}
+
+#sort a {
+    padding: 2px 2px 0;
+    vertical-align: middle;
+}
+
+#sort img {
+    vertical-align: baseline;
+}
+#sort img:hover {
+    cursor: pointer;
+}
+
+#display-mode {
+  float: right;
+  vertical-align: middle;
+  margin-top: 10px;
+  margin-bottom: 10px;
+  opacity: 0.5;
+}
+#listmode {
+  width: 16px;
+  display: inline-block;
+  text-decoration: none;
+}
+#listmode a:hover {
+  opacity: 1;
+}
+.tablemode {
+  background-image: url("../img/baggy/table.png");
+  background-repeat: no-repeat;
+  background-position: bottom;
+}
+.listmode {
+  background-image: url("../img/baggy/list.png");
+  background-repeat: no-repeat;
+  background-position: bottom;
+}
+
+
 /* ==========================================================================
    2 = Layout
    ========================================================================== */
@@ -248,7 +304,7 @@ h2:after {
 
 footer {
   text-align: right;
-  position: fixed;
+  position: relative;
   bottom: 0;
   right: 5em;
   color: #999;
@@ -731,6 +787,9 @@ blockquote {
     width: 100%;
     margin-left: 0;
   }
+  #display-mode {
+    display: none;
+  }
 }
 
 @media screen and (max-width: 500px) {
@@ -820,4 +879,8 @@ blockquote {
   #article_toolbar a {
     padding: 0.3em 0.4em 0.2em;
   }
+  
+  #display-mode {
+    display: none;
+  }
 }

diff --git a/themes/baggy/home.twig b/themes/baggy/home.twig
old mode 100644 (file)
new mode 100755 (executable)
index 4f9db06..5262c05
--- a/themes/baggy/home.twig
+++ b/themes/baggy/home.twig
@@ -18,6 +18,10 @@
             {% if entries is empty %}
             <div class="messages warning"><p>{% trans "No articles found." %}</p></div>
             {% else %}
+                 <div>
+                     {% include '_display-mode.twig' %}
+                     {% include '_sorting.twig' %}
+                 </div>
                 {% block pager %}
                     {% if nb_results > 1 %}
                 <div class="results">

diff --git a/themes/baggy/img/baggy/blank.png b/themes/baggy/img/baggy/blank.png
new file mode 100755 (executable)
index 0000000..63e0984
Binary files /dev/null and b/themes/baggy/img/baggy/blank.png differ

diff --git a/themes/baggy/img/baggy/down.png b/themes/baggy/img/baggy/down.png
new file mode 100644 (file)
index 0000000..b9d536a
Binary files /dev/null and b/themes/baggy/img/baggy/down.png differ

diff --git a/themes/baggy/img/baggy/list.png b/themes/baggy/img/baggy/list.png
new file mode 100755 (executable)
index 0000000..bd5aff5
Binary files /dev/null and b/themes/baggy/img/baggy/list.png differ

diff --git a/themes/baggy/img/baggy/table.png b/themes/baggy/img/baggy/table.png
new file mode 100755 (executable)
index 0000000..859c4cd
Binary files /dev/null and b/themes/baggy/img/baggy/table.png differ

diff --git a/themes/baggy/img/baggy/top.png b/themes/baggy/img/baggy/top.png
new file mode 100644 (file)
index 0000000..954a8c0
Binary files /dev/null and b/themes/baggy/img/baggy/top.png differ

diff --git a/themes/baggy/js/init.js b/themes/baggy/js/init.js
index c1d3c0ec01c6476e144462f664145a0e4bfdd2df..4a843548c92e9256de2e24a466c353c278311b75 100755 (executable)
--- a/themes/baggy/js/init.js
+++ b/themes/baggy/js/init.js
@@ -1,12 +1,36 @@
-document.addEventListener('DOMContentLoaded', function() {
-  var menu = document.getElementById('menu');
-
-  menu.addEventListener('click', function(){
-    if(this.nextElementSibling.style.display === "block") {
-      this.nextElementSibling.style.display = "none";
-    }else {
-      this.nextElementSibling.style.display = "block";  
+$(document).ready(function() {
+
+  $("#menu").click(function(){
+    $("#links").toggle();
+  });
+
+
+  $("#listmode").click(function(){
+    if ( $.cookie("listmode") == 1 ) {
+      $(".entrie").css("width", "");
+      $(".entrie").css("margin-left", "");
+
+      $.removeCookie("listmode");
+      $("#listmode").removeClass("tablemode");
+      $("#listmode").addClass("listmode");
     }
-    
+    else {
+      $.cookie("listmode", 1, {expires: 365});
+
+      $(".entrie").css("width", "100%");
+      $(".entrie").css("margin-left", "0");
+      $("#listmode").removeClass("listmode");
+      $("#listmode").addClass("tablemode");
+    }
+
   });
-});
\ No newline at end of file
+
+  if ( $.cookie("listmode") == 1 ) {
+    $(".entrie").css("width", "100%");
+    $(".entrie").css("margin-left", "0");
+    $("#listmode").removeClass("listmode");
+    $("#listmode").addClass("tablemode");
+  }
+
+
+});

diff --git a/themes/baggy/js/jquery.cookie.js b/themes/baggy/js/jquery.cookie.js
new file mode 100755 (executable)
index 0000000..9271900
--- /dev/null
+++ b/themes/baggy/js/jquery.cookie.js
@@ -0,0 +1,117 @@
+/*!
+ * jQuery Cookie Plugin v1.4.0
+ * https://github.com/carhartl/jquery-cookie
+ *
+ * Copyright 2013 Klaus Hartl
+ * Released under the MIT license
+ */
+(function (factory) {
+       if (typeof define === 'function' && define.amd) {
+               // AMD. Register as anonymous module.
+               define(['jquery'], factory);
+       } else {
+               // Browser globals.
+               factory(jQuery);
+       }
+}(function ($) {
+
+       var pluses = /\+/g;
+
+       function encode(s) {
+               return config.raw ? s : encodeURIComponent(s);
+       }
+
+       function decode(s) {
+               return config.raw ? s : decodeURIComponent(s);
+       }
+
+       function stringifyCookieValue(value) {
+               return encode(config.json ? JSON.stringify(value) : String(value));
+       }
+
+       function parseCookieValue(s) {
+               if (s.indexOf('"') === 0) {
+                       // This is a quoted cookie as according to RFC2068, unescape...
+                       s = s.slice(1, -1).replace(/\\"/g, '"').replace(/\\\\/g, '\\');
+               }
+
+               try {
+                       // Replace server-side written pluses with spaces.
+                       // If we can't decode the cookie, ignore it, it's unusable.
+                       s = decodeURIComponent(s.replace(pluses, ' '));
+               } catch(e) {
+                       return;
+               }
+
+               try {
+                       // If we can't parse the cookie, ignore it, it's unusable.
+                       return config.json ? JSON.parse(s) : s;
+               } catch(e) {}
+       }
+
+       function read(s, converter) {
+               var value = config.raw ? s : parseCookieValue(s);
+               return $.isFunction(converter) ? converter(value) : value;
+       }
+
+       var config = $.cookie = function (key, value, options) {
+
+               // Write
+               if (value !== undefined && !$.isFunction(value)) {
+                       options = $.extend({}, config.defaults, options);
+
+                       if (typeof options.expires === 'number') {
+                               var days = options.expires, t = options.expires = new Date();
+                               t.setDate(t.getDate() + days);
+                       }
+
+                       return (document.cookie = [
+                               encode(key), '=', stringifyCookieValue(value),
+                               options.expires ? '; expires=' + options.expires.toUTCString() : '', // use expires attribute, max-age is not supported by IE
+                               options.path    ? '; path=' + options.path : '',
+                               options.domain  ? '; domain=' + options.domain : '',
+                               options.secure  ? '; secure' : ''
+                       ].join(''));
+               }
+
+               // Read
+
+               var result = key ? undefined : {};
+
+               // To prevent the for loop in the first place assign an empty array
+               // in case there are no cookies at all. Also prevents odd result when
+               // calling $.cookie().
+               var cookies = document.cookie ? document.cookie.split('; ') : [];
+
+               for (var i = 0, l = cookies.length; i < l; i++) {
+                       var parts = cookies[i].split('=');
+                       var name = decode(parts.shift());
+                       var cookie = parts.join('=');
+
+                       if (key && key === name) {
+                               // If second argument (value) is a function it's a converter...
+                               result = read(cookie, value);
+                               break;
+                       }
+
+                       // Prevent storing a cookie that we couldn't decode.
+                       if (!key && (cookie = read(cookie)) !== undefined) {
+                               result[name] = cookie;
+                       }
+               }
+
+               return result;
+       };
+
+       config.defaults = {};
+
+       $.removeCookie = function (key, options) {
+               if ($.cookie(key) !== undefined) {
+                       // Must not alter options, thus extending a fresh object...
+                       $.cookie(key, '', $.extend({}, options, { expires: -1 }));
+                       return true;
+               }
+               return false;
+       };
+
+}));

diff --git a/themes/default/_sorting.twig b/themes/default/_sorting.twig
new file mode 100755 (executable)
index 0000000..4f2fceb
--- /dev/null
+++ b/themes/default/_sorting.twig
@@ -0,0 +1,6 @@
+{% if entries|length > 1 %}
+  <ul id="sort">
+      <li><a href="./?sort=ia&amp;view={{ view }}&amp;id={{ id }}"><img src="{{ poche_url }}/themes/{{ theme }}/img/{{ theme }}/top.png" alt="{% trans "by date asc" %}" title="{% trans "by date asc" %}" /></a> {% trans "by date" %} <a href="./?sort=id&amp;view={{ view }}&amp;id={{ id }}"><img src="{{ poche_url }}/themes/{{ theme }}/img/{{ theme }}/down.png" alt="{% trans "by date desc" %}" title="{% trans "by date desc" %}" /></a></li>
+      <li><a href="./?sort=ta&amp;view={{ view }}&amp;id={{ id }}"><img src="{{ poche_url }}/themes/{{ theme }}/img/{{ theme }}/top.png" alt="{% trans "by title asc" %}" title="{% trans "by title asc" %}" /></a> {% trans "by title" %} <a href="./?sort=td&amp;view={{ view }}&amp;id={{ id }}"><img src="{{ poche_url }}/themes/{{ theme }}/img/{{ theme }}/down.png" alt="{% trans "by title desc" %}" title="{% trans "by title desc" %}" /></a></li>
+  </ul>
+{% endif %}

diff --git a/themes/default/home.twig b/themes/default/home.twig
old mode 100644 (file)
new mode 100755 (executable)
index 165fecc..bd5fc2d
--- a/themes/default/home.twig
+++ b/themes/default/home.twig
@@ -12,12 +12,7 @@
 {% include '_menu.twig' %}
 {% endblock %}
 {% block precontent %}
-            {% if entries|length > 1 %}
-            <ul id="sort">
-                <li><a href="./?sort=ia&amp;view={{ view }}&amp;id={{ id }}"><img src="{{ poche_url }}/themes/{{ theme }}/img/{{ theme }}/top.png" alt="{% trans "by date asc" %}" title="{% trans "by date asc" %}" /></a> {% trans "by date" %} <a href="./?sort=id&amp;view={{ view }}&amp;id={{ id }}"><img src="{{ poche_url }}/themes/{{ theme }}/img/{{ theme }}/down.png" alt="{% trans "by date desc" %}" title="{% trans "by date desc" %}" /></a></li>
-                <li><a href="./?sort=ta&amp;view={{ view }}&amp;id={{ id }}"><img src="{{ poche_url }}/themes/{{ theme }}/img/{{ theme }}/top.png" alt="{% trans "by title asc" %}" title="{% trans "by title asc" %}" /></a> {% trans "by title" %} <a href="./?sort=td&amp;view={{ view }}&amp;id={{ id }}"><img src="{{ poche_url }}/themes/{{ theme }}/img/{{ theme }}/down.png" alt="{% trans "by title desc" %}" title="{% trans "by title desc" %}" /></a></li>
-            </ul>
-            {% endif %}
+            {% include '_sorting.twig' %}
 {% endblock %}
 {% block content %}
             {% if tag %}