diff options
| -rw-r--r-- | pyaggr3g470r/templates/home.html | 11 | ||||
| -rw-r--r-- | pyaggr3g470r/templates/layout.html | 57 |
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> |