Merge pull request #760 from gerundt/nav-filter-wrapper

Allow to collapse/expand filter list
fossar · May 2, 2016 · f66195c · f66195c
2 parents 83fe5b1 + 0873875
commit f66195c
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 1 deletion.
diff --git a/public/css/style.css b/public/css/style.css
@@ -87,7 +87,23 @@ body * {
         #nav-mark:hover {
             color:#000000;
         }
+
+    #nav-filter-wrapper  {
+        overflow:hidden;
+    }
 
+        .nav-filter-collapsed {
+            cursor:pointer;
+            padding-left: 20px;
+            background: url(images/nav-collapsed.png) center left no-repeat;
+        }
+
+        .nav-filter-expanded {
+            cursor:pointer;
+            padding-left: 20px;
+            background: url(images/nav-expanded.png) center left no-repeat;
+        }
+
     #nav-filter-title {
         margin-top:20px;
     }

diff --git a/public/js/selfoss-events-navigation.js b/public/js/selfoss-events-navigation.js
@@ -51,6 +51,17 @@ selfoss.events.navigation = function() {
             $('#nav-mobile-settings').click();
     });
 
+    // hide/show filters
+    $('#nav-filter-title').unbind('click').click(function () {
+        $('#nav-filter').slideToggle( "slow", function() {
+            selfoss.events.resize();
+        });
+        $('#nav-filter-title').toggleClass("nav-filter-collapsed nav-filter-expanded");
+        $('#nav-filter-title').attr('aria-expanded', function (i, attr) {
+            return attr == 'true' ? 'false' : 'true';
+        });
+    });
+
     // tag
     $('#nav-tags > li').unbind('click').click(function () {
         $('#nav-tags > li').removeClass('active');

diff --git a/templates/home.phtml b/templates/home.phtml
@@ -96,12 +96,14 @@
         <button id="nav-mark"><?PHP echo \F3::get('lang_markread')?></button>
 
         <?PHP $active = (\F3::get('homepage')) ? \F3::get('homepage') : 'newest' ?>
-        <h2 id="nav-filter-title"><?PHP echo \F3::get('lang_filter') ?></h2>
+        <div id="nav-filter-wrapper">
+        <h2 id="nav-filter-title" class="nav-filter-expanded" tabindex="0" aria-haspopup="true" aria-expanded="true"><?PHP echo \F3::get('lang_filter') ?></h2>
         <ul id="nav-filter">
             <li id="nav-filter-newest" class="nav-filter-newest<?PHP if($active=='newest') : ?> active<?PHP endif; ?>" role="link" tabindex="0"><?PHP echo \F3::get('lang_newest')?> <span><?PHP echo $this->statsAll; ?></span></li>
             <li id="nav-filter-unread" class="nav-filter-unread<?PHP if($active=='unread') : ?> active<?PHP endif; ?>" role="link" tabindex="0"><?PHP echo \F3::get('lang_unread')?> <span class="unread-count<?PHP echo $this->statsUnread>0 ? ' unread' : ''; ?>"><?PHP echo $this->statsUnread; ?></span></li>
             <li id="nav-filter-starred" class="nav-filter-starred<?PHP if($active=='starred') : ?> active<?PHP endif; ?>" role="link" tabindex="0"><?PHP echo \F3::get('lang_starred') ?> <span><?PHP echo $this->statsStarred; ?></span></li>
         </ul>
+        </div>
 
         <hr>