From d58d118953f5a7f616d7ebbe363033b513cefb74 Mon Sep 17 00:00:00 2001
From: reverend <reverend@reverend2048.de>
Date: Mon, 17 Aug 2020 08:45:12 +0200
Subject: [PATCH] New Markup for Pagination

---
 lostplaces/lostplaces_app/static/main.css     | 75 +++++++++----------
 .../templates/partials/nav/pagination.html    | 65 +++++++++-------
 2 files changed, 76 insertions(+), 64 deletions(-)

diff --git a/lostplaces/lostplaces_app/static/main.css b/lostplaces/lostplaces_app/static/main.css
index e3c67e4..5af6813 100644
--- a/lostplaces/lostplaces_app/static/main.css
+++ b/lostplaces/lostplaces_app/static/main.css
@@ -1,4 +1,3 @@
-@charset "UTF-8";
 @font-face {
   font-family: Crimson;
   src: url("fonts/Crimson/CrimsonText-Regular.ttf"), url("fonts/Crimson/CrimsonText-Bold.ttf"), url("fonts/Crimson/CrimsonText-Italic.ttf"); }
@@ -56,17 +55,11 @@ body {
     .LP-Section .LP-Headline {
       margin: 0; } }
 
+@media (max-width: 450px) {
+  .LP-Main__Sidebar {
+    max-width: 100vw; } }
+
 @media (max-width: 650px) {
-  @keyframes slide_out_siedebar {
-    from {
-      left: -250px; }
-    to {
-      left: 0; } }
-  @keyframes slide_in_siedebar {
-    from {
-      left: 0; }
-    to {
-      left: -250px; } }
   .LP-Wrapper__Site {
     grid-template-columns: 0 1fr; }
   .LP-Main__Sidebar {
@@ -77,16 +70,14 @@ body {
     left: -251px;
     height: 100vh;
     top: 60px;
-    border-right: 1px solid #C09F80; }
+    border-right: 1px solid #C09F80;
+    transition: left 0.3s; }
     .LP-Main__Sidebar--hidden {
       visibility: hidden; }
   #toggle_sidebar:checked ~ .LP-Main__Sidebar {
-    animation-name: slide_out_siedebar;
-    animation-duration: .3s;
     left: 0; }
   #toggle_sidebar ~ .LP-Main__Sidebar {
-    animation-name: slide_in_siedebar;
-    animation-duration: .3s; }
+    left: -251px; }
   .LP-Menu__TriggerLabel {
     z-index: 20;
     height: 60px;
@@ -315,41 +306,50 @@ body {
   .LP-Pagination .LP-Pagination__List {
     list-style-type: none;
     display: flex;
-    flex-direction: row; }
+    flex-direction: row;
+    padding-left: 0;
+    padding-right: 0; }
   .LP-Pagination .LP-Pagination__Item {
     margin: 0 4px; }
     .LP-Pagination .LP-Pagination__Item--disabled {
       color: #b6b6b6; }
+      .LP-Pagination .LP-Pagination__Item--disabled .LP-Link {
+        color: #b6b6b6;
+        cursor: default; }
+        .LP-Pagination .LP-Pagination__Item--disabled .LP-Link:hover {
+          background-color: unset;
+          color: unset; }
     .LP-Pagination .LP-Pagination__Item--current .LP-Link {
-      background-color: #D7CEC7;
-      border-radius: 2px; }
+      background-color: #D7CEC7; }
       .LP-Pagination .LP-Pagination__Item--current .LP-Link:hover {
         background-color: #D7CEC7;
         color: #565656; }
   .LP-Pagination .LP-Link {
-    padding: 15px 25px;
-    vertical-align: sub; }
+    padding: 15px 20px;
+    vertical-align: sub;
+    border-radius: 2px; }
     .LP-Pagination .LP-Link:active, .LP-Pagination .LP-Link:hover {
       background-color: #D7CEC7;
-      border-radius: 2px;
       color: #565656; }
-  .LP-Pagination .LP-Pagination__First:before {
-    content: "⟪";
-    padding-right: 1em;
-    font-size: larger; }
-  .LP-Pagination .LP-Pagination__Previous:before {
-    content: "⟨";
-    padding-right: 1em;
-    font-size: larger; }
-  .LP-Pagination .LP-Pagination__Next:after {
-    content: "⟩";
-    padding-left: 1em;
-    font-size: larger; }
-  .LP-Pagination .LP-Pagination__Last:after {
-    content: "⟫";
-    padding-left: 1em;
+  .LP-Pagination .LP-Icon {
     font-size: larger; }
 
+@media (max-width: 1000px) {
+  .LP-Pagination .LP-Link {
+    padding: 10px 15px; }
+  .LP-Pagination .LP-Pagination__Item--other .LP-Text {
+    display: none; } }
+
+@media (max-width: 650px) {
+  .LP-Pagination .LP-Pagination__Item {
+    margin: 0 1px; }
+    .LP-Pagination .LP-Pagination__Item .LP-Link {
+      padding: 13px 16px; } }
+
+@media (max-width: 450px) {
+  .LP-Pagination .LP-Pagination__Item .LP-Link {
+    padding: 8px 11px; } }
+
 .LP-Content {
   padding: 35px; }
 
@@ -578,7 +578,6 @@ body {
       border-left: 2px #565656 solid; }
   .LP-PlaceList .LP-PlaceList__List .LP-PlaceList__Item {
     max-width: 900px;
-    min-width: 450px;
     margin: 18px 0; }
 
 .LP-PlaceList .LP-Pagination {
diff --git a/lostplaces/lostplaces_app/templates/partials/nav/pagination.html b/lostplaces/lostplaces_app/templates/partials/nav/pagination.html
index 0e4f59c..2bda9cf 100644
--- a/lostplaces/lostplaces_app/templates/partials/nav/pagination.html
+++ b/lostplaces/lostplaces_app/templates/partials/nav/pagination.html
@@ -3,46 +3,59 @@
 {% if is_paginated %}
     <div class="LP-Pagination">
         <ul class="LP-Pagination__List">
+			<li class="LP-Pagination__Item LP-Pagination__Item--other LP-Pagination__Item--first">
+				<a href="?page=1" class="LP-Link">
+					<span class="LP-Icon">⟪</span>
+					<span class="LP-Text">First</span>
+				</a>
+			</li>
             {% if page_obj.has_previous %}
-                <li class="LP-Pagination__Item LP-Pagination__Item--first">
-                    <a href="?page=1" class="LP-Link"><span class="LP-Pagination__First">first</span></a>
-                </li>
-                <li class="LP-Pagination__Item LP-Pagination__Item--previous">
-                    <a href="?page={{ page_obj.previous_page_number }}" class="LP-Link"><span class="LP-Pagination__Previous">previous</span></a>
-                </li>
+				<li class="LP-Pagination__Item LP-Pagination__Item--other LP-Pagination__Item--previous">
+					<a href="?page={{ page_obj.previous_page_number }}" class="LP-Link">
+						<span class="LP-Icon">⟨</span>
+						<span class="LP-Text">Previous</span>
+					</a>
+				</li>
             {% else %}
-                <li class="LP-Pagination__Item LP-Pagination__Item--first LP-Pagination__Item--disabled">
-                    <span class="LP-Pagination__First">first</span>
-                </li>
-                <li class="LP-Pagination__Item LP-Pagination__Item--previous LP-Pagination__Item--disabled">
+                <li class="LP-Pagination__Item LP-Pagination__Item--other LP-Pagination__Item--previous LP-Pagination__Item--disabled">
                     <span class="LP-Pagination__Previous">previous</span>
                 </li>
 			{% endif %}
 			
 			{% for i in page_obj.paginator|proper_paginate:page_obj.number %}
 				{% if i == page_obj.number %}
-					<li class="LP-Pagination__Item LP-Pagination__Item--number LP-Pagination__Item--current">
+					<li class="LP-Pagination__Item LP-Pagination__Item--current">
 				{% else %}
-					<li class="LP-Pagination__Item LP-Pagination__Item--number">
+					<li class="LP-Pagination__Item LP-Pagination__Item--neighbor">
 				{% endif %}
-						<a href="?page={{i}}" class="LP-Link"><span class="LP-Pagination__Number">{{i}}</span></a>
+						<a href="?page={{i}}" class="LP-Link">
+							<span class="LP-Text">{{i}}</span>
+						</a>
 					</li>
 			{% endfor %}
 			
-            {% if page_obj.has_next %}
-                <li class="LP-Pagination__Item LP-Pagination__Item--next">
-                    <a href="?page={{ page_obj.next_page_number }}" class="LP-Link"><span class="LP-Pagination__Next">next</span></a>
-                </li>
-                <li class="LP-Pagination__Item LP-Pagination__Item--last">
-                    <a href="?page={{ page_obj.paginator.num_pages }}" class="LP-Link"><span class="LP-Pagination__Last">last</span></a>
-                </li>
+			<li class="LP-Pagination__Item LP-Pagination__Item--other LP-Pagination__Item--next">
+				<a href="?page={{ page_obj.next_page_number }}" class="LP-Link">
+					<span class="LP-Text">Next</span>
+					<span class="LP-Icon">⟩</span>
+				</a>
+			</li>
+			{% if page_obj.has_next %}
+			<li class="LP-Pagination__Item LP-Pagination__Item--other LP-Pagination__Item--last">
+				<a href="?page={{ page_obj.paginator.num_pages }}" class="LP-Link">
+					<span class="LP-Text">Last</span>
+					<span class="LP-Icon">⟫</span>
+	
+				</a>
+			</li>
             {% else %}
-                <li class="LP-Pagination__Item LP-Pagination__Item--next LP-Pagination__Item--disabled">
-                    <span class="LP-Pagination__Next">next</span>
-                </li>
-                <li class="LP-Pagination__Item LP-Pagination__Item--last LP-Pagination__Item--disabled">
-                    <span class="LP-Pagination__Last">last</span>
-                </li>
+			<li class="LP-Pagination__Item LP-Pagination__Item--other LP-Pagination__Item--last LP-Pagination__Item--disabled">
+				<a href="#" class="LP-Link">
+					<span class="LP-Text">Last</span>
+					<span class="LP-Icon">⟫</span>
+	
+				</a>
+			</li>
             {% endif %}
         </ul>
     </div>