some baggy theme fixes and enhancement: issue #479

13 files changed, 234 insertions, 19 deletions

diff --git a/themes/baggy/_display-mode.twig b/themes/baggy/_display-mode.twig
new file mode 100755
index 00000000..31f76581
--- /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
index 206d5aae..1ea59abf 100644..100755
--- 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 3e128b08..0a8d2c7b 100755
--- 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
index 4f9db063..5262c05b 100644..100755
--- 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
index 00000000..63e09844
--- /dev/null
+++ b/themes/baggy/img/baggy/blank.png
diff --git a/themes/baggy/img/baggy/down.png b/themes/baggy/img/baggy/down.png
new file mode 100644
index 00000000..b9d536a7
--- /dev/null
+++ b/themes/baggy/img/baggy/down.png
diff --git a/themes/baggy/img/baggy/list.png b/themes/baggy/img/baggy/list.png
new file mode 100755
index 00000000..bd5aff5a
--- /dev/null
+++ b/themes/baggy/img/baggy/list.png
diff --git a/themes/baggy/img/baggy/table.png b/themes/baggy/img/baggy/table.png
new file mode 100755
index 00000000..859c4cd8
--- /dev/null
+++ b/themes/baggy/img/baggy/table.png
diff --git a/themes/baggy/img/baggy/top.png b/themes/baggy/img/baggy/top.png
new file mode 100644
index 00000000..954a8c0a
--- /dev/null
+++ b/themes/baggy/img/baggy/top.png
diff --git a/themes/baggy/js/init.js b/themes/baggy/js/init.js
index c1d3c0ec..4a843548 100755
--- 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
index 00000000..92719000
--- /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
index 00000000..4f2fceb0
--- /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
index 165fecc6..bd5fc2d6 100644..100755
--- 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 %}