Mercurial > libervia-templates

changeset 115:5d9e2270ceb4

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
blog/articles, input/navigation: moved navigation template in a dedicated macro
author Goffi <goffi@goffi.org>
date Tue, 30 Jan 2018 07:47:21 +0100
parents 1d0ddeb79903
children da8f1ba9034d
files default/blog/articles.html default/input/navigation.html default/static/blog.css default/static/styles.css
diffstat 4 files changed, 73 insertions(+), 67 deletions(-) [+]
line wrap: on
line diff
--- a/default/blog/articles.html	Fri Jan 26 07:52:41 2018 +0100
+++ b/default/blog/articles.html	Tue Jan 30 07:47:21 2018 +0100
@@ -2,6 +2,7 @@
 {% set single = items|length == 1 %}
 {% set dates_format='relative' if single else 'short' %}
 {% import 'blog/macros.html' as blog with context %}
+{% import 'input/navigation.html' as navigation with context %}
 
 {% block title scoped -%}
     {%- if single -%}
@@ -18,24 +19,6 @@
 <div id="blog_items">
     {{ blog.show_items(items, expanded=single) }}
 </div>
-<nav class="bottom_links">
-    <ul>
-        {% if newer_url is defined %}
-            <li class="newer_items">
-                <a href="{{newer_url}}">
-                    <img src="{{media_path}}icons/tango/actions/32/go-previous.png">
-                    {% trans %}newer articles{% endtrans %}
-                </a>
-            </li>
-        {% endif %}
-        {% if older_url is defined %}
-            <li class="older_items">
-                <a href="{{older_url}}">
-                    <img src="{{media_path}}icons/tango/actions/32/go-next.png">
-                    {% trans %}older articles{% endtrans %}
-                </a>
-            </li>
-        {% endif %}
-    </ul>
-</nav>
+
+{{ navigation.prev_next(_("newer articles"), _("older articles")) }}
 {% endblock body %}
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/default/input/navigation.html	Tue Jan 30 07:47:21 2018 +0100
@@ -0,0 +1,22 @@
+{% macro prev_next(prev_label=_("newer"), next_label=_("older")) %}
+    <nav class="prev_next_links">
+        <ul>
+            {% if newer_url is defined %}
+                <li class="newer_items">
+                    <a href="{{newer_url}}">
+                        <img src="{{media_path}}icons/tango/actions/32/go-previous.png">
+                        {{prev_label}}
+                    </a>
+                </li>
+            {% endif %}
+            {% if older_url is defined %}
+                <li class="older_items">
+                    <a href="{{older_url}}">
+                        <img src="{{media_path}}icons/tango/actions/32/go-next.png">
+                        {{next_label}}
+                    </a>
+                </li>
+            {% endif %}
+        </ul>
+    </nav>
+{% endmacro %}
--- a/default/static/blog.css	Fri Jan 26 07:52:41 2018 +0100
+++ b/default/static/blog.css	Tue Jan 30 07:47:21 2018 +0100
@@ -87,48 +87,6 @@
     margin: 0;
 }
 
-/** navigation links **/
-
-.bottom_links ul {
-    list-style: none;
-    display: flex;
-    padding: 0 2em;
-    margin: 0;
-}
-
-.bottom_links li {
-    flex: 1;
-}
-
-.bottom_links li.older_items {
-    text-align: right;
-}
-
-.bottom_links img {
-    display: block;
-}
-
-.bottom_links .older_items img {
-    display: block;
-    margin-left: auto;
-    margin-right: 0;
-}
-
-.bottom_links a {
-    display: inline-block;
-    margin-top: 1em;
-    padding: 0.2em;
-    text-decoration: None;
-    color: inherit;
-    font-variant: small-caps;
-    background: rgba(200,200,200,0.6);
-    border-radius: 0.5em;
-}
-
-.bottom_links a:hover {
-    background-color: #ddd;
-}
-
 /** reduce/expand buttons **/
 
 .expand_box {
@@ -311,10 +269,6 @@
         padding: 0.5em;
     }
 
-    .bottom_links ul {
-        padding: 0 6em;
-    }
-
     footer span {
         background: rgba(200,200,200,0.6);
         border-radius: 0.5em 0.5em 0 0;
--- a/default/static/styles.css	Fri Jan 26 07:52:41 2018 +0100
+++ b/default/static/styles.css	Tue Jan 30 07:47:21 2018 +0100
@@ -12,7 +12,7 @@
 }
 
 #main_side_bar {
-    
+
 }
 
 #main_area {
@@ -221,6 +221,48 @@
     display: block;
 }
 
+/*** Navigation ***/
+
+.prev_next_links ul {
+    list-style: none;
+    display: flex;
+    padding: 0 2em;
+    margin: 0;
+}
+
+.prev_next_links li {
+    flex: 1;
+}
+
+.prev_next_links li.older_items {
+    text-align: right;
+}
+
+.prev_next_links img {
+    display: block;
+}
+
+.prev_next_links .older_items img {
+    display: block;
+    margin-left: auto;
+    margin-right: 0;
+}
+
+.prev_next_links a {
+    display: inline-block;
+    margin-top: 1em;
+    padding: 0.2em;
+    text-decoration: None;
+    color: inherit;
+    font-variant: small-caps;
+    background: rgba(200,200,200,0.6);
+    border-radius: 0.5em;
+}
+
+.prev_next_links a:hover {
+    background-color: #ddd;
+}
+
 /*** XMLUI ***/
 
 .xmlui_cont_vertical>* {
@@ -297,4 +339,9 @@
         flex-direction: column;
         padding-left: 2em;
     }
+
+    .prev_next_links ul {
+        padding: 0 6em;
+    }
+
 }