From cccce836ed952998a9f7796143980cfe81d65198 Mon Sep 17 00:00:00 2001
From: =?utf8?q?Je=CC=81re=CC=81my=20Fabre?= <Jeremy@iMac-de-Jeremy.local>
Date: Wed, 14 Sep 2016 12:21:33 +0200
Subject: [PATCH] Pagination style implementation, and fix the pagination on
 the topic detail

---
 app/static/src/sass/global/_buttons.scss      |  3 ++
 app/static/src/sass/modules/_pagination.scss  | 30 +++++++++++++
 app/templates/includes/pagination.html        | 42 +++++++++++++------
 .../magazine/topic/topic_detail.html          |  2 +
 4 files changed, 64 insertions(+), 13 deletions(-)

diff --git a/app/static/src/sass/global/_buttons.scss b/app/static/src/sass/global/_buttons.scss
index 8f3b1a4a..b6c6b8e0 100755
--- a/app/static/src/sass/global/_buttons.scss
+++ b/app/static/src/sass/global/_buttons.scss
@@ -23,6 +23,9 @@ $module: ".button";
     &:hover {
         background: black;
         color: $color-main;
+        a {
+            color: $color-main;
+        }
     }
 
     &--small {
diff --git a/app/static/src/sass/modules/_pagination.scss b/app/static/src/sass/modules/_pagination.scss
index 5ce9075d..deeefb86 100644
--- a/app/static/src/sass/modules/_pagination.scss
+++ b/app/static/src/sass/modules/_pagination.scss
@@ -6,9 +6,39 @@ $module: ".pagination";
     margin: 0;
     padding: 0;
 
+    @include typeface(sans-serif);
+
+    @include margin(0 0 2 0);
+
     &__item {
 
         display: inline-block;
+        vertical-align: middle;
+        cursor: pointer;
+
+        @include margin(0 0.1);
+
+    }
+
+    &__link {
+
+        @include font-size(xs);
+        @include line-height(1);
+        @include typeface(sans-serif);
+        @include margin(0);
+        font-weight: weight(regular);
+
+        display: block;
+        background: $color-main;
+        color: $color-black;
+
+        @include padding(.15 .5);
+        @include transition(all .25s ease-in-out);
+
+        &.active, &:hover {
+            background: $color-black;
+            color: $color-main;
+        }
 
     }
 
diff --git a/app/templates/includes/pagination.html b/app/templates/includes/pagination.html
index f9a91cf3..5725d867 100644
--- a/app/templates/includes/pagination.html
+++ b/app/templates/includes/pagination.html
@@ -1,19 +1,35 @@
 {% load i18n %}
 
 {% if current_page.has_previous or current_page.has_next %}
-<ul class="pagination tal">
+<div class="container">
+    <div class="row">
+        <div class="col-sm-9 col-lg-8 col-lg-push-2">
+            <ul class="pagination">
 
-<li class="pagination__item">
-    <a class="pagination__link{% if not current_page.has_previous %} disabled{% endif %}"{% if current_page.has_previous %} href="?{{ page_var }}={{ current_page.previous_page_number }}{% if querystring %}&{{ querystring }}{% endif %}"{% endif %}>&larr;</a>
-</li>
-{% for page in current_page.visible_page_range %}
-<li class="pagination__item{% if page == current_page.number %} active{% endif %}">
-    <a class="pagination__link" href="?{{ page_var }}={{ page }}{% if querystring %}&{{ querystring }}{% endif %}">{{ page }}</a>
-</li>
-{% endfor %}
-<li class="pagination__item">
-    <a class="pagination__link{% if not current_page.has_next %} disabled{% endif %}"{% if current_page.has_next %} href="?{{ page_var }}={{ current_page.next_page_number }}{% if querystring %}&{{ querystring }}{% endif %}"{% endif %}>&rarr;</a>
-</li>
+                {% if current_page.has_previous %}
+                    <li class="pagination__item">
+                        <a class="pagination__link"{% if current_page.has_previous %} href="?{{ page_var }}={{ current_page.previous_page_number }}{% if querystring %}&{{ querystring }}{% endif %}"{% endif %}>
+                            {% trans 'Previous page' %}
+                        </a>
+                    </li>
+                {% endif %}
 
-</ul>
+                {% for page in current_page.visible_page_range %}
+                <li class="pagination__item">
+                    <a class="pagination__link{% if page == current_page.number %} active{% endif %}" href="?{{ page_var }}={{ page }}{% if querystring %}&{{ querystring }}{% endif %}">{{ page }}</a>
+                </li>
+                {% endfor %}
+
+                {% if current_page.has_next %}
+                    <li class="pagination__item">
+                        <a class="pagination__link"{% if current_page.has_next %} href="?{{ page_var }}={{ current_page.next_page_number }}{% if querystring %}&{{ querystring }}{% endif %}"{% endif %}>
+                            {% trans 'Next page' %}
+                        </a>
+                    </li>
+                {% endif %}
+
+            </ul>
+        </div>
+    </div>
+</div>
 {% endif %}
diff --git a/app/templates/magazine/topic/topic_detail.html b/app/templates/magazine/topic/topic_detail.html
index d7db68d8..dcd45d06 100644
--- a/app/templates/magazine/topic/topic_detail.html
+++ b/app/templates/magazine/topic/topic_detail.html
@@ -68,5 +68,7 @@
             {% endfor %}
         </div>
     </div>
+
     {% pagination_for articles %}
+    
 {% endblock %}
-- 
2.39.5