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

Compare commits

base: Commander1024:0e3f0056390e196aa8b73e8b3587cf88cb8e5661
Branches Tags
Commander1024:master
Commander1024:linklist-add
..
compare: Commander1024:fb72b004564ff1bb02f8497df75f47c0483bc006
Branches Tags
Commander1024:master
Commander1024:linklist-add

4 Commits
0e3f005639 ... fb72b00456

Author SHA1 Message Date
Commander1024
fb72b00456 Aligned page numbers to the rest again. 2020-08-14 13:56:11 +02:00
Commander1024
3970aed176 Added beautiful navigation icons to pagination nav-css. 2020-08-14 13:41:27 +02:00
Commander1024
0eacea8243 Added fest/previous next/last again incl text for alignment. 2020-08-14 11:31:35 +02:00
Commander1024
14ea0910ef Added first/last pagination item. 2020-08-14 11:21:13 +02:00
3 changed files with 124 additions and 67 deletions
Show Stats Expand all files Collapse all files

33
components/01_Atoms/pagination/_pagination.scss
View File

@ -31,6 +31,7 @@
.LP-Link{ .LP-Link{
padding: 15px 25px; padding: 15px 25px;
vertical-align: sub;
&:active, &:hover{ &:active, &:hover{
background-color: $-beige; background-color: $-beige;
@ -38,4 +39,36 @@
color: $-grey; color: $-grey;
} }
} }
.LP-Pagination__First{
&:before{
content: "⟪";
padding-right: 1em;
font-size: larger;
}
}
.LP-Pagination__Previous{
&:before{
content: "⟨";
padding-right: 1em;
font-size: larger;
}
}
.LP-Pagination__Next{
&:after{
content: "⟩";
padding-left: 1em;
font-size: larger;
}
}
.LP-Pagination__Last{
&:after{
content: "⟫";
padding-left: 1em;
font-size: larger;
}
}
} }

10
components/01_Atoms/pagination/pagination.hbs
View File

@ -1,7 +1,10 @@
<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--first">
<a href="#" class="LP-Link"><span class="LP-Pagination__First">first</span></a>
</li>
<li class="LP-Pagination__Item LP-Pagination__Item--previous"> <li class="LP-Pagination__Item LP-Pagination__Item--previous">
<a href="#" class="LP-Link"><span class="LP-Pagination__Previous"></span></a> <a href="#" class="LP-Link"><span class="LP-Pagination__Previous">previous</span></a>
</li> </li>
<li class="LP-Pagination__Item LP-Pagination__Item--number"> <li class="LP-Pagination__Item LP-Pagination__Item--number">
<a href="#" class="LP-Link"><span class="LP-Pagination__Number">1</span></a> <a href="#" class="LP-Link"><span class="LP-Pagination__Number">1</span></a>
@ -31,7 +34,10 @@
<a href="#" class="LP-Link"><span class="LP-Pagination__Number">9</span></a> <a href="#" class="LP-Link"><span class="LP-Pagination__Number">9</span></a>
</li> </li>
<li class="LP-Pagination__Item LP-Pagination__Item--next"> <li class="LP-Pagination__Item LP-Pagination__Item--next">
<a href="#" class="LP-Link"><span class="LP-Pagination__Next"></span></a> <a href="#" class="LP-Link"><span class="LP-Pagination__Next">next</span></a>
</li>
<li class="LP-Pagination__Item LP-Pagination__Item--last">
<a href="#" class="LP-Link"><span class="LP-Pagination__Last">last</span></a>
</li> </li>
</ul> </ul>
</div> </div>

20
public/main.css
View File

@ -1,3 +1,4 @@
@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"); }
@ -270,11 +271,28 @@ body {
background-color: #D7CEC7; background-color: #D7CEC7;
color: #565656; } color: #565656; }
.LP-Pagination .LP-Link { .LP-Pagination .LP-Link {
padding: 15px 25px; } padding: 15px 25px;
vertical-align: sub; }
.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; border-radius: 2px;
color: #565656; } 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;
font-size: larger; }
.LP-Content { .LP-Content {
padding: 35px; } padding: 35px; }