Improved sidenav bar.

2 files changed, 62 insertions, 6 deletions

diff --git a/pyaggr3g470r/templates/home.html b/pyaggr3g470r/templates/home.html
index b4c43b64..ce87d0a3 100644
--- a/pyaggr3g470r/templates/home.html
+++ b/pyaggr3g470r/templates/home.html
@@ -2,8 +2,8 @@
 {% block content %}
 <div class="container-fluid">
     <div classe="row">
-        <nav id="affix-nav" class="col-md-2">
-        <ul class="nav sidenav" data-spy="affix" data-offset-top="10" data-offset-bottom="150">
+        <div id="affix-nav" class="sidebar col-md-4">
+        <ul class="nav sidenav affix-top" data-spy="affix" data-offset-top="0" data-offset-bottom="0">
         {% for feed in result|sort(attribute="title")|sort(attribute="nb_unread", reverse=True) %}
             <li>
                 <a href="#{{ feed.id }}">
@@ -13,14 +13,15 @@
             </li>
         {% endfor %}
         </ul>
-        </nav>
-        <div class="col-md-9 col-md-offset-1">
+        </div>
+        <div class="col-md-8">
             {% if result|count == 0 %}
                 <h1>{{ _("You don't have any feeds.") }}</h1>
                 <h1><a href="/create_feed/">{{ _('Add some') }}</a>, {{ _('or') }} <a href="/management/#import">{{ _('upload an OPML file.') }}</a></h1>
             {% else %}
                 {% for feed in result|sort(attribute="title") %}
-                    <div class="row" id="{{ feed.id }}">
+                    <div class="top"><a id="{{ feed.id }}"></a></div>
+                    <div class="row">
                         <div class="col-md-6 col-md-offset-3">
                             <h1>{{ feed.title|safe }}
                             {% if feed.nb_unread != 0 %}
diff --git a/pyaggr3g470r/templates/layout.html b/pyaggr3g470r/templates/layout.html
index 39f4df32..d3162886 100644
--- a/pyaggr3g470r/templates/layout.html
+++ b/pyaggr3g470r/templates/layout.html
@@ -17,7 +17,62 @@ deployed on Heroku or on a traditional server." />
 
     <!-- Add custom CSS here -->
     <style>
-        body {margin-top: 60px;}
+        body {
+            margin-top: 60px;
+        }
+        div.top {
+            position: relative;
+            top:-60px;
+            display: block;
+            height: 0;
+        }
+        ul.affix {
+            position: fixed; 
+            top: 0px;
+        }
+        ul.affix-top {
+            position: static;
+        }
+        ul.affix-bottom {
+            position: absolute;
+        }
+        /* First level of nav */
+        .sidenav {
+            margin-top: 60px;
+            margin-bottom: 30px;
+            padding-top:    10px;
+            padding-bottom: 10px;
+            background-color: #ffffff;
+            border-radius: 2px;
+            font-size: 90%;
+        }
+        /* All levels of nav */
+        .sidebar .nav > li > a {
+            display: block;
+            color: #716b7a;
+            padding: 5px 20px;
+        }
+        .sidebar .nav > li > a:hover,
+        .sidebar .nav > li > a:focus {
+            text-decoration: none;
+            background-color: #e5e3e9;
+        }
+        .sidebar .nav > .active > a,
+        .sidebar .nav > .active:hover > a,
+        .sidebar .nav > .active:focus > a {
+            font-weight: bold;
+            color: #563d7c;
+            background-color: transparent;
+        }
+        /* Nav: second level */
+        .sidebar .nav .nav {
+            margin-bottom: 8px;
+        }
+        .sidebar .nav .nav > li > a {
+            padding-top:    3px;
+            padding-bottom: 3px;
+            font-size: 80%;
+        }
     </style>
 
   </head>