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

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

@ -1,41 +1,74 @@
.LP-Pagination{ .LP-Pagination{
font-family: $-primary-sans-serif-font; font-family: $-primary-sans-serif-font;
font-weight: bold; font-weight: bold;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
justify-content: center; justify-content: center;
.LP-Pagination__List{ .LP-Pagination__List{
list-style-type: none; list-style-type: none;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
} }
.LP-Pagination__Item{ .LP-Pagination__Item{
margin: 0 4px; margin: 0 4px;
&--current{ &--current{
.LP-Link{ .LP-Link{
background-color: $-beige; background-color: $-beige;
border-radius: 2px; border-radius: 2px;
&:hover{ &:hover{
background-color: $-beige; background-color: $-beige;
color: $-grey; color: $-grey;
} }
} }
} }
} }
.LP-Link{ .LP-Link{
padding: 15px 25px; padding: 15px 25px;
vertical-align: sub;
&:active, &:hover{ &:active, &:hover{
background-color: $-beige; background-color: $-beige;
border-radius: 2px; border-radius: 2px;
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;
}
}
} }

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

@ -1,37 +1,43 @@
<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--previous"> <li class="LP-Pagination__Item LP-Pagination__Item--first">
<a href="#" class="LP-Link"><span class="LP-Pagination__Previous"></span></a> <a href="#" class="LP-Link"><span class="LP-Pagination__First">first</span></a>
</li> </li>
<li class="LP-Pagination__Item LP-Pagination__Item--number"> <li class="LP-Pagination__Item LP-Pagination__Item--previous">
<a href="#" class="LP-Link"><span class="LP-Pagination__Number">1</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">2</span></a> <a href="#" class="LP-Link"><span class="LP-Pagination__Number">1</span></a>
</li> </li>
<li class="LP-Pagination__Item LP-Pagination__Item--number"> <li class="LP-Pagination__Item LP-Pagination__Item--number">
<a class="LP-Link" href="#"><span class="LP-Pagination__Number">3</span></a> <a href="#" class="LP-Link"><span class="LP-Pagination__Number">2</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">4</span></a> <a class="LP-Link" href="#"><span class="LP-Pagination__Number">3</span></a>
</li> </li>
<li class="LP-Pagination__Item LP-Pagination__Item--number LP-Pagination__Item--current"> <li class="LP-Pagination__Item LP-Pagination__Item--number">
<a href="#" class="LP-Link"><span class="LP-Pagination__Number">5</span></a> <a href="#" class="LP-Link"><span class="LP-Pagination__Number">4</span></a>
</li> </li>
<li class="LP-Pagination__Item LP-Pagination__Item--number"> <li class="LP-Pagination__Item LP-Pagination__Item--number LP-Pagination__Item--current">
<a href="#" class="LP-Link"><span class="LP-Pagination__Number">6</span></a> <a href="#" class="LP-Link"><span class="LP-Pagination__Number">5</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">7</span></a> <a href="#" class="LP-Link"><span class="LP-Pagination__Number">6</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">8</span></a> <a href="#" class="LP-Link"><span class="LP-Pagination__Number">7</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">9</span></a> <a href="#" class="LP-Link"><span class="LP-Pagination__Number">8</span></a>
</li> </li>
<li class="LP-Pagination__Item LP-Pagination__Item--next"> <li class="LP-Pagination__Item LP-Pagination__Item--number">
<a href="#" class="LP-Link"><span class="LP-Pagination__Next"></span></a> <a href="#" class="LP-Link"><span class="LP-Pagination__Number">9</span></a>
</li> </li>
</ul> <li class="LP-Pagination__Item LP-Pagination__Item--next">
<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>
</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; }