Pagination style

martins-rafael · Nov 19, 2020 · 90ec16b · 90ec16b
1 parent 8a8a068
commit 90ec16b
Show file tree

Hide file tree

Showing 9 changed files with 35 additions and 17 deletions.
diff --git a/public/styles/global.css b/public/styles/global.css
@@ -38,6 +38,10 @@ body {
     max-width: 940px;
 }
 
+.list {
+    margin-bottom: auto;
+}
+
 header .container {
     display: grid;
     grid-template-columns: 92px 1fr 1fr;
@@ -231,18 +235,29 @@ button.btn-delete:hover {
 ==== PAGINATION ==== 
 ================= */
 
-.container .pagination {
-    margin: 16px 0;
+.pagination {
+    margin: auto 0 32px;
     text-align: center;
 }
 
-.container .pagination a,
-.container .pagination span {
+.pagination a {
+    padding: 4px 8px;
+    border-radius: 4px;
+    border: 2px solid var(--color-purple);
+}
+
+.pagination a,
+.pagination span {
     margin-right: 16px;
     transition: .2s;
 }
 
-.container .pagination a:hover {
-    font-weight: bold;
-    border-bottom: 1px solid var(--color-default-black);
+.pagination a.active {
+    background-color: var(--color-purple);
+    color: var(--color-white-paper);
+}
+
+.pagination a:hover {
+    color: var(--color-white-paper);
+    background-color: var(--color-purple);
 }
diff --git a/public/styles/main/about.css b/public/styles/main/about.css
@@ -1,3 +1,7 @@
+.about {
+    margin: auto;
+}
+
 .about h1 {
     font-size: 24px;
 }

diff --git a/public/styles/main/index.css b/public/styles/main/index.css
@@ -41,10 +41,10 @@ section.banner {
 
 section.most-popular {
     margin-top: 40px;
+    margin-bottom: auto;
 }
 
 footer {
-    margin-top: auto;
     background-color: #eee;
 }
 

diff --git a/public/styles/sessions/index.css b/public/styles/sessions/index.css
@@ -1,4 +1,5 @@
 section.session.container {
+    margin-bottom: auto;
     max-width: 500px;
 }
 

diff --git a/src/app/views/admin/chefs/index.njk b/src/app/views/admin/chefs/index.njk
@@ -16,6 +16,6 @@
         </div>
 
         {{ section.chefs("", chefs) }}
-        {% include "templates/includes/pagination.njk" %}
     </section>
+    {% include "templates/includes/pagination.njk" %}
 {% endblock %}
diff --git a/src/app/views/admin/recipes/index.njk b/src/app/views/admin/recipes/index.njk
@@ -24,6 +24,6 @@
                 </div>
             {% endfor %}
         </div>
-        {% include "templates/includes/pagination.njk" %}
     </section>
+    {% include "templates/includes/pagination.njk" %}
 {% endblock %}
diff --git a/src/app/views/main/chefs.njk b/src/app/views/main/chefs.njk
@@ -7,8 +7,8 @@
 {% endblock %}
 
 {% block content %}
-    <section class="container">
+    <section class="container list">
         {{ section.chefs("total_recipes", chefs) }}
-        {% include "templates/includes/pagination.njk" %}
     </section>
+    {% include "templates/includes/pagination.njk" %}
 {% endblock %}
diff --git a/src/app/views/main/recipes.njk b/src/app/views/main/recipes.njk
@@ -10,13 +10,12 @@
 {% endblock %}
 
 {% block content %}
-    <section class="container">
+    <section class="container list">
         <div class="recipe-container">
             {% for recipe in recipes %}
                 {% include "templates/includes/recipes/recipe-card.njk" %}
             {% endfor %}
         </div>
-
-        {% include "templates/includes/pagination.njk" %}
     </section>
+    {% include "templates/includes/pagination.njk" %}
 {% endblock %}
diff --git a/src/app/views/users/list.njk b/src/app/views/users/list.njk
@@ -27,7 +27,6 @@
                 </div>
             {% endfor %}
         </div>
-
-        {% include "templates/includes/pagination.njk" %}
     </section>
+    {% include "templates/includes/pagination.njk" %}
 {% endblock %}