redoing home page in a more 'bootstrapy' way

2 files changed, 127 insertions, 111 deletions

diff --git a/pyaggr3g470r/templates/home.html b/pyaggr3g470r/templates/home.html
index dbb95451..6d1ca85e 100644
--- a/pyaggr3g470r/templates/home.html
+++ b/pyaggr3g470r/templates/home.html
@@ -6,104 +6,119 @@
         <h1><a href="{{ url_for("feed.form") }}">{{ _('Add some') }}</a>, {{ _('or') }} <a href="/management">{{ _('upload an OPML file.') }}</a></h1>
     </div>
 {% else %}
-    <div id="affix-nav" class="col-md-3 sidebar hidden-xs hidden-sm">
-        <ul class="nav sidenav navbar-collapse pre-scrollable" data-offset-top="0" data-offset-bottom="0" style="min-height: 650px;">
-            <li><a href="{{ gen_url(feed_id=0) }}">
-                {% if not feed_id %}<b>{% endif %}
-                  {{ _('All feeds') }} <span id="total-unread" class="badge pull-right">{{ articles.__len__() }}</span>
-                {% if not feed_id %}</b>{% endif %}
-            </a></li>
-        {% for fid, nbunread in unread|dictsort(by='value')|reverse %}
-            <li class="feed-menu"><a href="{{ gen_url(feed_id=fid) }}">
-                {% if feed_id == fid %}<b>{% endif %}
+<div class="container-fluid">
+    <div class="row row-offcanvas row-offcanvas-left">
+        <div class="col-md-2 sidebar sidebar-offcanvas pre-scrollable affix hidden-sm hidden-xs" id="sidebar" role="navigation" data-spy="affix" style="max-height: 100%;">
+            <ul class="nav nav-sidebar" data-offset-top="0" data-offset-bottom="0">
+                <li><a href="{{ gen_url(feed_id=0) }}">
+                    {% if not feed_id %}<b>{% endif %}
+                    {{ _('All feeds') }} <span id="total-unread" class="badge pull-right">{{ articles.__len__() }}</span>
+                    {% if not feed_id %}</b>{% endif %}
+                </a></li>
+            {% for fid, nbunread in unread|dictsort(by='value')|reverse %}
+                <li class="feed-menu"><a href="{{ gen_url(feed_id=fid) }}">
+                    {% if feed_id == fid %}<b>{% endif %}
+                        {% if in_error.get(fid, 0) > 0 %}
+                            <span style="background-color: {{ "red" if in_error[fid] > conf.DEFAULT_MAX_ERROR -1 else "orange" }} ;" class="badge pull-right" title="Some errors occured while trying to retrieve that feed.">{{ in_error[fid] }} {{ _("error") }}{% if in_error[fid] > 1 %}s{% endif %}</span>
+                        {% endif %}
+                        <span id="unread-{{ fid }}" class="badge pull-right">{{ nbunread }}</span>
+                        {{ feeds[fid]|safe }}
+                    {% if feed_id == fid %}</b>{% endif %}
+                </a></li>
+                <li class="feed-commands"><span>
+                    <a href="/feed/{{ fid }}"><i class="glyphicon glyphicon-info-sign" title="{{ _('Details') }}"></i></a>
+                    <a href="{{ url_for("feed.form", feed_id=fid) }}"><i class="glyphicon glyphicon-edit" title="{{ _('Edit this feed') }}"></i></a>
+                    <a href="{{ url_for("feed.delete", feed_id=fid) }}"><i class="glyphicon glyphicon-remove" title="{{ _('Delete this feed') }}" onclick="return confirm('{{ _('You are going to delete this feed.') }}');"></i></a>
+                    <a href="{{ url_for("feed.update", feed_id=fid, action="read") }}"><i class="glyphicon glyphicon-check" title="{{ _('Mark this feed as read') }}"></i></a>
+                    <a href="{{ url_for("feed.update", feed_id=fid, action="unread") }}"><i class="glyphicon glyphicon-unchecked" title="{{ _('Mark this feed as unread') }}"></i></a>
+                </span></li>
+            {% endfor %}
+            {% for fid, ftitle in feeds|dictsort(case_sensitive=False, by='value') if not fid in unread %}
+                <li class="feed-menu"><a href="{{ gen_url(feed_id=fid) }}">
                     {% if in_error.get(fid, 0) > 0 %}
-                        <span style="background-color: {{ "red" if in_error[fid] > conf.DEFAULT_MAX_ERROR -1 else "orange" }} ;" class="badge pull-right" title="Some errors occured while trying to retrieve that feed.">{{ in_error[fid] }} {{ _("error") }}{% if in_error[fid] > 1 %}s{% endif %}</span>
+                        <span style="background-color: {{ "red" if in_error[fid] > conf.DEFAULT_MAX_ERROR - 1 else "orange" }} ;" class="badge pull-right" title="Some errors occured while trying to retrieve that feed.">{{ in_error[fid] }} {{ _("error") }}{% if in_error[fid] > 1 %}s{% endif %}</span>
                     {% endif %}
-                    <span id="unread-{{ fid }}" class="badge pull-right">{{ nbunread }}</span>
-                    {{ feeds[fid]|safe }}
-                {% if feed_id == fid %}</b>{% endif %}
-            </a></li>
-            <li class="feed-commands"><span>
-                <a href="/feed/{{ fid }}"><i class="glyphicon glyphicon-info-sign" title="{{ _('Details') }}"></i></a>
-                <a href="{{ url_for("feed.form", feed_id=fid) }}"><i class="glyphicon glyphicon-edit" title="{{ _('Edit this feed') }}"></i></a>
-                <a href="{{ url_for("feed.delete", feed_id=fid) }}"><i class="glyphicon glyphicon-remove" title="{{ _('Delete this feed') }}" onclick="return confirm('{{ _('You are going to delete this feed.') }}');"></i></a>
-                <a href="{{ url_for("feed.update", feed_id=fid, action="read") }}"><i class="glyphicon glyphicon-check" title="{{ _('Mark this feed as read') }}"></i></a>
-                <a href="{{ url_for("feed.update", feed_id=fid, action="unread") }}"><i class="glyphicon glyphicon-unchecked" title="{{ _('Mark this feed as unread') }}"></i></a>
-            </span></li>
-        {% endfor %}
-        {% for fid, ftitle in feeds|dictsort(case_sensitive=False, by='value') if not fid in unread %}
-            <li class="feed-menu"><a href="{{ gen_url(feed_id=fid) }}">
-                {% if in_error.get(fid, 0) > 0 %}
-                    <span style="background-color: {{ "red" if in_error[fid] > conf.DEFAULT_MAX_ERROR - 1 else "orange" }} ;" class="badge pull-right" title="Some errors occured while trying to retrieve that feed.">{{ in_error[fid] }} {{ _("error") }}{% if in_error[fid] > 1 %}s{% endif %}</span>
-                {% endif %}
-                {% if feed_id == fid %}<b>{% endif %}
-                    {{ ftitle|safe }}
-                {% if feed_id == fid %}</b>{% endif %}
-            </a></li>
-            <li class="feed-commands"><span>
-                <a href="{{ url_for("feed.feed", feed_id=fid) }}"><i class="glyphicon glyphicon-info-sign" title="{{ _('Details') }}"></i></a>
-                <a href="{{ url_for("feed.form", feed_id=fid) }}"><i class="glyphicon glyphicon-edit" title="{{ _('Edit this feed') }}"></i></a>
-                <a href="{{ url_for("feed.delete", feed_id=fid) }}"><i class="glyphicon glyphicon-remove" title="{{ _('Delete this feed') }}" onclick="return confirm('{{ _('You are going to delete this feed.') }}');"></i></a>
-                <a href="{{ url_for("feed.update", feed_id=fid, action="read") }}"><i class="glyphicon glyphicon-check" title="{{ _('Mark this feed as read') }}"></i></a>
-                <a href="{{ url_for("feed.update", feed_id=fid, action="unread") }}"><i class="glyphicon glyphicon-unchecked" title="{{ _('Mark this feed as unread') }}"></i></a>
-            </span></li>
-        {% endfor %}
-        </ul>
-    </div>
-    <div class="container col-md-9">
-        <div id="filters" data-filter="{{ filter_ }}">
-            <ul id="myTab" class="nav nav-tabs" role="tablist">
-                <li id="tab-all"><a href="{{ gen_url(filter_='all') }}">{{ _('All') }}</a></li>
-                <li id="tab-read"><a href="{{ gen_url(filter_='read') }}">{{ _('Read') }}</a></li>
-                <li id="tab-unread"><a href="{{ gen_url(filter_='unread') }}">{{ _('Unread') }}</a></li>
-                <li id="tab-nbdisplay" class="pull-right">
-                    <div id="nbdisplay">
-                        <a href="{{ gen_url(limit=10) }}" class="label {% if limit == 10 %}label-primary{% else %}label-info{% endif %}">{{ _(10) }}</a>
-                        <a href="{{ gen_url(limit=100) }}" class="label {% if limit == 100 %}label-primary{% else %}label-info{% endif %}">{{ _(100) }}</a>
-                        <a href="{{ gen_url(limit=1000) }}" class="label {% if limit == 1000 %}label-primary{% else %}label-info{% endif %}">{{ _(1000) }}</a>
-                        <a href="{{ gen_url(limit='all') }}" class="label {% if limit == 'all' %}label-primary{% else %}label-info{% endif %}">{{ _('All') }}</a>
-                    </div>
-                </li>
-        </div>
-        {% if articles | count != 0%}
-            <div class="table-responsive">
-                <table class="table table-striped strict-table">
-                    <thead>
-                        <tr>
-                            <th></th>
-                            <th><a href="{{ gen_url(sort_='-feed' if sort_ == 'feed' else 'feed') }}">{{ _('Feed') }}</a></th>
-                            <th><a href="{{ gen_url(sort_='-article' if sort_ == 'article' else 'article') }}">{{ _('Article') }}</a></th>
-                            <th><a href="{{ gen_url(sort_='-date' if sort_ == 'date' else 'date') }}">{{ _('Date') }}</a></th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        {% for article in articles %}
-                        <tr data-article="{{ article.id }}" data-feed="{{ article.feed_id }}">
-                            <td>
-                                <a><i class="glyphicon glyphicon-remove delete" title="{{ _('Delete this article') }}"></i></a>
-                                {% if article.like %}
-                                    <a><i class="glyphicon glyphicon-star like" title="{{ _('One of your favorites') }}"></i></a>
-                                {% else %}
-                                    <a><i class="glyphicon glyphicon-star-empty like" title="{{ _('Click if you like this article') }}"></i></a>
-                                {% endif %}
-                                {% if article.readed %}
-                                    <a><i class="glyphicon glyphicon-unchecked readed" title="{{ _('Mark this article as unread') }}"></i></a>
-                                {% else %}
-                                    <a><i class="glyphicon glyphicon-check readed" title="{{ _('Mark this article as read') }}"></i></a>
-                                    {% if filter_ == 'all' %}</b>{% endif %}
-                                {% endif %}
-                            </td>
-                            <td><a class="open-article" href="/article/redirect/{{ article.id}}" target="_blank">{{ article.source.title|safe }}</a></td>
-                            <td {%if filter_ == 'all' and article.readed == False %}style='font-weight:bold'{% endif %}>
-                                <a href="/article/{{ article.id }}">{{ article.title|safe }}</a>
-                            </td>
-                            <td class="date">{{ article.date|datetime }}</a></td>
-                        </tr>
-                    {% endfor %}
-                    </tbody>
-                </table>
+                    {% if feed_id == fid %}<b>{% endif %}
+                        {{ ftitle|safe }}
+                    {% if feed_id == fid %}</b>{% endif %}
+                </a></li>
+                <li class="feed-commands"><span>
+                    <a href="{{ url_for("feed.feed", feed_id=fid) }}"><i class="glyphicon glyphicon-info-sign" title="{{ _('Details') }}"></i></a>
+                    <a href="{{ url_for("feed.form", feed_id=fid) }}"><i class="glyphicon glyphicon-edit" title="{{ _('Edit this feed') }}"></i></a>
+                    <a href="{{ url_for("feed.delete", feed_id=fid) }}"><i class="glyphicon glyphicon-remove" title="{{ _('Delete this feed') }}" onclick="return confirm('{{ _('You are going to delete this feed.') }}');"></i></a>
+                    <a href="{{ url_for("feed.update", feed_id=fid, action="read") }}"><i class="glyphicon glyphicon-check" title="{{ _('Mark this feed as read') }}"></i></a>
+                    <a href="{{ url_for("feed.update", feed_id=fid, action="unread") }}"><i class="glyphicon glyphicon-unchecked" title="{{ _('Mark this feed as unread') }}"></i></a>
+                </span></li>
+            {% endfor %}
+            </ul>
+        </div><!-- row -->
+
+        {% with messages = get_flashed_messages(with_categories=true) %}
+            {% if messages %}
+                <div class="col-md-offset-2 col-md-10 main">
+                    {% block messages %}
+                        {{ super() }}
+                    {% endblock %}
+                </div>
+            {% endif %}
+        {% endwith %}
+        <div class="col-md-offset-2 col-md-10 main">
+            <div id="filters" data-filter="{{ filter_ }}">
+                <ul id="myTab" class="nav nav-tabs" role="tablist">
+                    <li id="tab-all"><a href="{{ gen_url(filter_='all') }}">{{ _('All') }}</a></li>
+                    <li id="tab-read"><a href="{{ gen_url(filter_='read') }}">{{ _('Read') }}</a></li>
+                    <li id="tab-unread"><a href="{{ gen_url(filter_='unread') }}">{{ _('Unread') }}</a></li>
+                    <li id="tab-nbdisplay" class="pull-right">
+                        <div id="nbdisplay">
+                            <a href="{{ gen_url(limit=10) }}" class="label {% if limit == 10 %}label-primary{% else %}label-info{% endif %}">{{ _(10) }}</a>
+                            <a href="{{ gen_url(limit=100) }}" class="label {% if limit == 100 %}label-primary{% else %}label-info{% endif %}">{{ _(100) }}</a>
+                            <a href="{{ gen_url(limit=1000) }}" class="label {% if limit == 1000 %}label-primary{% else %}label-info{% endif %}">{{ _(1000) }}</a>
+                            <a href="{{ gen_url(limit='all') }}" class="label {% if limit == 'all' %}label-primary{% else %}label-info{% endif %}">{{ _('All') }}</a>
+                        </div>
+                    </li>
             </div>
-        {% endif %}
-    </div><!-- /.container -->
+            {% if articles | count != 0%}
+                <div class="table-responsive">
+                    <table class="table table-striped strict-table">
+                        <thead>
+                            <tr>
+                                <th></th>
+                                <th><a href="{{ gen_url(sort_='-feed' if sort_ == 'feed' else 'feed') }}">{{ _('Feed') }}</a></th>
+                                <th><a href="{{ gen_url(sort_='-article' if sort_ == 'article' else 'article') }}">{{ _('Article') }}</a></th>
+                                <th><a href="{{ gen_url(sort_='-date' if sort_ == 'date' else 'date') }}">{{ _('Date') }}</a></th>
+                            </tr>
+                        </thead>
+                        <tbody>
+                            {% for article in articles %}
+                            <tr data-article="{{ article.id }}" data-feed="{{ article.feed_id }}">
+                                <td>
+                                    <a><i class="glyphicon glyphicon-remove delete" title="{{ _('Delete this article') }}"></i></a>
+                                    {% if article.like %}
+                                        <a><i class="glyphicon glyphicon-star like" title="{{ _('One of your favorites') }}"></i></a>
+                                    {% else %}
+                                        <a><i class="glyphicon glyphicon-star-empty like" title="{{ _('Click if you like this article') }}"></i></a>
+                                    {% endif %}
+                                    {% if article.readed %}
+                                        <a><i class="glyphicon glyphicon-unchecked readed" title="{{ _('Mark this article as unread') }}"></i></a>
+                                    {% else %}
+                                        <a><i class="glyphicon glyphicon-check readed" title="{{ _('Mark this article as read') }}"></i></a>
+                                        {% if filter_ == 'all' %}</b>{% endif %}
+                                    {% endif %}
+                                </td>
+                                <td><a class="open-article" href="/article/redirect/{{ article.id}}" target="_blank">{{ article.source.title|safe }}</a></td>
+                                <td {%if filter_ == 'all' and article.readed == False %}style='font-weight:bold'{% endif %}>
+                                    <a href="/article/{{ article.id }}">{{ article.title|safe }}</a>
+                                </td>
+                                <td class="date">{{ article.date|datetime }}</a></td>
+                            </tr>
+                        {% endfor %}
+                        </tbody>
+                    </table>
+                </div>
+            {% endif %}
+        </div><!-- row -->
+    </div><!-- main -->
+</div><!-- container-fluid -->
+<style>.not-at-home {display: none};</style>
 {% endif %}
 {% endblock %}
diff --git a/pyaggr3g470r/templates/layout.html b/pyaggr3g470r/templates/layout.html
index 80c74703..c66cce3e 100644
--- a/pyaggr3g470r/templates/layout.html
+++ b/pyaggr3g470r/templates/layout.html
@@ -129,29 +129,30 @@
         </div><!-- /.navbar-collapse -->
       </div><!-- /.container -->
     </nav>
-
     <br />
 
-    <div class="container">
-    {% with messages = get_flashed_messages(with_categories=true) %}
-    {% if messages %}
-        {% for category, message in messages %}
-            <div class="alert alert-{{category}}">
-                <button type="button" class="close" data-dismiss="alert">&times;</button>
-                {{ message }}
-            </div>
-        {% endfor %}
-    {% endif %}
-    {% endwith %}
+    <div class="container-fluid not-at-home">
+        {% block messages %}
+            {% with messages = get_flashed_messages(with_categories=true) %}
+                {% if messages %}
+                    {% for category, message in messages %}
+                        <div class="alert alert-{{category}}">
+                            <button type="button" class="close" data-dismiss="alert">&times;</button>
+                            {{ message }}
+                        </div>
+                    {% endfor %}
+                {% endif %}
+            {% endwith %}
+        {% endblock %}
     </div>
 
     {% block content %}{% endblock %}
 
     <!-- Bootstrap core JavaScript -->
     <!-- Placed at the end of the document so the pages load faster -->
-    <script src="{{ url_for('static', filename = 'js/jquery.js') }}"></script>
-    <script src="{{ url_for('static', filename = 'js/bootstrap.js') }}"></script>
-    <script src="{{ url_for('static', filename = 'js/articles.js') }}"></script>
+    <script type="text/javascript" src="{{ url_for('static', filename = 'js/jquery.js') }}"></script>
+    <script type="text/javascript" src="{{ url_for('static', filename = 'js/bootstrap.js') }}"></script>
+    <script type="text/javascript" src="{{ url_for('static', filename = 'js/articles.js') }}"></script>
     <script type="text/javascript" class="source">
         var filter_ = {% if filter_ %}"{{ filter_ }}"{% else %}undefined{% endif %};
         if (filter_ == undefined) {