Pagination style implementation, and fix the pagination on the topic detail

diff --git a/app/static/src/sass/global/_buttons.scss b/app/static/src/sass/global/_buttons.scss
index 8f3b1a4a5bf61a6b592ba365461cabf8f01db7ac..b6c6b8e061bb0ba1a6120c134eca17c15d8cff39 100755 (executable)
--- 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 5ce9075de9fec152ca93d748bcb6f7d9fe724add..deeefb86e4ef2a81afaf5b50ff077335c2445743 100644 (file)
--- 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 f9a91cf3dd7ebd540537263fbed9cfb9e2448f29..5725d867d8607da8c56b29ca4906d9412a40bbf7 100644 (file)
--- 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 d7db68d8b9a8e73d24f2b4afe630b40f82204283..dcd45d06ffde8dacbd9dfbc68760e604cd63537f 100644 (file)
--- 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 %}