Commander1024/lostplaces-backend
Commander1024/lostplaces-backend
1
0
Fork 0
Code Issues 14 Pull Requests Releases Wiki Activity

New Markup for Pagination

Browse Source
This commit is contained in:
reverend 2020-08-17 08:45:12 +02:00
parent 4ea8d16253
commit d58d118953
2 changed files with 76 additions and 64 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

75
lostplaces/lostplaces_app/static/main.css
View File

@ -1,4 +1,3 @@
@charset "UTF-8";
@font-face { @font-face {
font-family: Crimson; font-family: Crimson;
src: url("fonts/Crimson/CrimsonText-Regular.ttf"), url("fonts/Crimson/CrimsonText-Bold.ttf"), url("fonts/Crimson/CrimsonText-Italic.ttf"); } 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 { .LP-Section .LP-Headline {
margin: 0; } } margin: 0; } }
@media (max-width: 450px) {
.LP-Main__Sidebar {
max-width: 100vw; } }
@media (max-width: 650px) { @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 { .LP-Wrapper__Site {
grid-template-columns: 0 1fr; } grid-template-columns: 0 1fr; }
.LP-Main__Sidebar { .LP-Main__Sidebar {
@ -77,16 +70,14 @@ body {
left: -251px; left: -251px;
height: 100vh; height: 100vh;
top: 60px; top: 60px;
border-right: 1px solid #C09F80; } border-right: 1px solid #C09F80;
transition: left 0.3s; }
.LP-Main__Sidebar--hidden { .LP-Main__Sidebar--hidden {
visibility: hidden; } visibility: hidden; }
#toggle_sidebar:checked ~ .LP-Main__Sidebar { #toggle_sidebar:checked ~ .LP-Main__Sidebar {
animation-name: slide_out_siedebar;
animation-duration: .3s;
left: 0; } left: 0; }
#toggle_sidebar ~ .LP-Main__Sidebar { #toggle_sidebar ~ .LP-Main__Sidebar {
animation-name: slide_in_siedebar; left: -251px; }
animation-duration: .3s; }
.LP-Menu__TriggerLabel { .LP-Menu__TriggerLabel {
z-index: 20; z-index: 20;
height: 60px; height: 60px;
@ -315,41 +306,50 @@ body {
.LP-Pagination .LP-Pagination__List { .LP-Pagination .LP-Pagination__List {
list-style-type: none; list-style-type: none;
display: flex; display: flex;
flex-direction: row; } flex-direction: row;
padding-left: 0;
padding-right: 0; }
.LP-Pagination .LP-Pagination__Item { .LP-Pagination .LP-Pagination__Item {
margin: 0 4px; } margin: 0 4px; }
.LP-Pagination .LP-Pagination__Item--disabled { .LP-Pagination .LP-Pagination__Item--disabled {
color: #b6b6b6; } 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 { .LP-Pagination .LP-Pagination__Item--current .LP-Link {
background-color: #D7CEC7; background-color: #D7CEC7; }
border-radius: 2px; }
.LP-Pagination .LP-Pagination__Item--current .LP-Link:hover { .LP-Pagination .LP-Pagination__Item--current .LP-Link:hover {
background-color: #D7CEC7; background-color: #D7CEC7;
color: #565656; } color: #565656; }
.LP-Pagination .LP-Link { .LP-Pagination .LP-Link {
padding: 15px 25px; padding: 15px 20px;
vertical-align: sub; } vertical-align: sub;
border-radius: 2px; }
.LP-Pagination .LP-Link:active, .LP-Pagination .LP-Link:hover { .LP-Pagination .LP-Link:active, .LP-Pagination .LP-Link:hover {
background-color: #D7CEC7; background-color: #D7CEC7;
border-radius: 2px;
color: #565656; } color: #565656; }
.LP-Pagination .LP-Pagination__First:before { .LP-Pagination .LP-Icon {
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;
font-size: larger; } 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 { .LP-Content {
padding: 35px; } padding: 35px; }
@ -578,7 +578,6 @@ body {
border-left: 2px #565656 solid; } border-left: 2px #565656 solid; }
.LP-PlaceList .LP-PlaceList__List .LP-PlaceList__Item { .LP-PlaceList .LP-PlaceList__List .LP-PlaceList__Item {
max-width: 900px; max-width: 900px;
min-width: 450px;
margin: 18px 0; } margin: 18px 0; }
.LP-PlaceList .LP-Pagination { .LP-PlaceList .LP-Pagination {

65
lostplaces/lostplaces_app/templates/partials/nav/pagination.html
View File

@ -3,46 +3,59 @@
{% if is_paginated %} {% if is_paginated %}
<div class="LP-Pagination"> <div class="LP-Pagination">
<ul class="LP-Pagination__List"> <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 %} {% if page_obj.has_previous %}
<li class="LP-Pagination__Item LP-Pagination__Item--first"> <li class="LP-Pagination__Item LP-Pagination__Item--other LP-Pagination__Item--previous">
<a href="?page=1" class="LP-Link"><span class="LP-Pagination__First">first</span></a> <a href="?page={{ page_obj.previous_page_number }}" class="LP-Link">
</li> <span class="LP-Icon">⟨</span>
<li class="LP-Pagination__Item LP-Pagination__Item--previous"> <span class="LP-Text">Previous</span>
<a href="?page={{ page_obj.previous_page_number }}" class="LP-Link"><span class="LP-Pagination__Previous">previous</span></a> </a>
</li> </li>
{% else %} {% else %}
<li class="LP-Pagination__Item LP-Pagination__Item--first 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__First">first</span>
</li>
<li class="LP-Pagination__Item LP-Pagination__Item--previous LP-Pagination__Item--disabled">
<span class="LP-Pagination__Previous">previous</span> <span class="LP-Pagination__Previous">previous</span>
</li> </li>
{% endif %} {% endif %}
{% for i in page_obj.paginator|proper_paginate:page_obj.number %} {% for i in page_obj.paginator|proper_paginate:page_obj.number %}
{% if i == 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 %} {% else %}
<li class="LP-Pagination__Item LP-Pagination__Item--number"> <li class="LP-Pagination__Item LP-Pagination__Item--neighbor">
{% endif %} {% 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> </li>
{% endfor %} {% endfor %}
{% if page_obj.has_next %} <li class="LP-Pagination__Item LP-Pagination__Item--other LP-Pagination__Item--next">
<li class="LP-Pagination__Item LP-Pagination__Item--next"> <a href="?page={{ page_obj.next_page_number }}" class="LP-Link">
<a href="?page={{ page_obj.next_page_number }}" class="LP-Link"><span class="LP-Pagination__Next">next</span></a> <span class="LP-Text">Next</span>
</li> <span class="LP-Icon">⟩</span>
<li class="LP-Pagination__Item LP-Pagination__Item--last"> </a>
<a href="?page={{ page_obj.paginator.num_pages }}" class="LP-Link"><span class="LP-Pagination__Last">last</span></a> </li>
</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 %} {% else %}
<li class="LP-Pagination__Item LP-Pagination__Item--next LP-Pagination__Item--disabled"> <li class="LP-Pagination__Item LP-Pagination__Item--other LP-Pagination__Item--last LP-Pagination__Item--disabled">
<span class="LP-Pagination__Next">next</span> <a href="#" class="LP-Link">
</li> <span class="LP-Text">Last</span>
<li class="LP-Pagination__Item LP-Pagination__Item--last LP-Pagination__Item--disabled"> <span class="LP-Icon">⟫</span>
<span class="LP-Pagination__Last">last</span>
</li> </a>
</li>
{% endif %} {% endif %}
</ul> </ul>
</div> </div>