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

Compare commits

base: Commander1024:e80e93bcaa8524529a89c86a2f6d9783c5b8c5f9
Branches Tags
Commander1024:master
Commander1024:linklist-add
..
compare: Commander1024:427ce11adb4bc0145058a64f07ce20327f6f20fa
Branches Tags
Commander1024:master
Commander1024:linklist-add

No commits in common. "e80e93bcaa8524529a89c86a2f6d9783c5b8c5f9" and "427ce11adb4bc0145058a64f07ce20327f6f20fa" have entirely different histories.
e80e93bcaa ... 427ce11adb

5 changed files with 125 additions and 156 deletions
Show Stats Expand all files Collapse all files

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

@ -9,8 +9,6 @@
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__Item{ .LP-Pagination__Item{
@ -18,20 +16,13 @@
&--disabled{ &--disabled{
color: rgb(182, 182, 182); color: rgb(182, 182, 182);
.LP-Link{
color: rgb(182, 182, 182);
cursor: default;
&:hover{
background-color: unset;
color: unset;
}
}
} }
&--current{ &--current{
.LP-Link{ .LP-Link{
background-color: $-beige; background-color: $-beige;
border-radius: 2px;
&:hover{ &:hover{
background-color: $-beige; background-color: $-beige;
@ -42,51 +33,45 @@
} }
.LP-Link{ .LP-Link{
padding: 15px 20px; padding: 15px 25px;
vertical-align: sub; vertical-align: sub;
border-radius: 2px;
&:active, &:hover{ &:active, &:hover{
background-color: $-beige; background-color: $-beige;
border-radius: 2px;
color: $-grey; color: $-grey;
} }
} }
.LP-Icon{ .LP-Pagination__First{
&:before{
content: "⟪";
padding-right: 1em;
font-size: larger; font-size: larger;
} }
} }
@media(max-width: $-viewport-normal){ .LP-Pagination__Previous{
.LP-Pagination{ &:before{
.LP-Link{ content: "⟨";
padding: 10px 15px; padding-right: 1em;
} font-size: larger;
.LP-Pagination__Item--other{
.LP-Text{
display: none;
} }
} }
}
}
@media(max-width: $-viewport-small){ .LP-Pagination__Next{
.LP-Pagination{ &:after{
.LP-Pagination__Item{ content: "⟩";
margin: 0 1px; padding-left: 1em;
.LP-Link{ font-size: larger;
padding: 13px 16px;
} }
} }
}
}
@media(max-width: $-viewport-extra-small){ .LP-Pagination__Last{
.LP-Pagination{ &:after{
.LP-Pagination__Item{ content: "⟫";
.LP-Link{ padding-left: 1em;
padding: 8px 11px; font-size: larger;
}
} }
} }
} }

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

@ -1,54 +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--other LP-Pagination__Item--first"> <li class="LP-Pagination__Item LP-Pagination__Item--first LP-Pagination__Item--disabled">
<a href="#" class="LP-Link"> <span class="LP-Pagination__First">first</span></a>
<span class="LP-Icon">⟪</span>
<span class="LP-Text">First</span>
</a>
</li> </li>
<li class="LP-Pagination__Item LP-Pagination__Item--other LP-Pagination__Item--disabled LP-Pagination__Item--previous"> <li class="LP-Pagination__Item LP-Pagination__Item--previous LP-Pagination__Item--disabled">
<a href="#" class="LP-Link"> <span class="LP-Pagination__Previous">previous</span></a>
<span class="LP-Icon">⟨</span>
<span class="LP-Text">Previous</span>
</a>
</li> </li>
<li class="LP-Pagination__Item LP-Pagination__Item--neighbor"> <li class="LP-Pagination__Item LP-Pagination__Item--number LP-Pagination__Item--current">
<a href="#" class="LP-Link"> <a href="#" class="LP-Link"><span class="LP-Pagination__Number">1</span></a>
<span class="LP-Text">1</span>
</a>
</li> </li>
<li class="LP-Pagination__Item LP-Pagination__Item--neighbor"> <li class="LP-Pagination__Item LP-Pagination__Item--number">
<a href="#" class="LP-Link"> <a href="#" class="LP-Link"><span class="LP-Pagination__Number">2</span></a>
<span class="LP-Text">2</span>
</a>
</li> </li>
<li class="LP-Pagination__Item LP-Pagination__Item--neighbor"> <li class="LP-Pagination__Item LP-Pagination__Item--number">
<a href="#" class="LP-Link"> <a class="LP-Link" href="#"><span class="LP-Pagination__Number">3</span></a>
<span class="LP-Text">3</span>
</a>
</li> </li>
<li class="LP-Pagination__Item LP-Pagination__Item--current"> <li class="LP-Pagination__Item LP-Pagination__Item--number">
<a href="#" class="LP-Link"> <a href="#" class="LP-Link"><span class="LP-Pagination__Number">4</span></a>
<span class="LP-Text">4</span>
</a>
</li> </li>
<li class="LP-Pagination__Item LP-Pagination__Item--neighbor"> <li class="LP-Pagination__Item LP-Pagination__Item--number">
<a href="#" class="LP-Link"> <a href="#" class="LP-Link"><span class="LP-Pagination__Number">5</span></a>
<span class="LP-Text">5</span>
</a>
</li> </li>
<li class="LP-Pagination__Item LP-Pagination__Item--other LP-Pagination__Item--next"> <li class="LP-Pagination__Item LP-Pagination__Item--number">
<a href="#" class="LP-Link"> <a href="#" class="LP-Link"><span class="LP-Pagination__Number">6</span></a>
<span class="LP-Text">Next</span>
<span class="LP-Icon">⟩</span>
</a>
</li> </li>
<li class="LP-Pagination__Item LP-Pagination__Item--other LP-Pagination__Item--last"> <li class="LP-Pagination__Item LP-Pagination__Item--number">
<a href="#" class="LP-Link"> <a href="#" class="LP-Link"><span class="LP-Pagination__Number">7</span></a>
<span class="LP-Text">Last</span> </li>
<span class="LP-Icon">⟫</span> <li class="LP-Pagination__Item LP-Pagination__Item--number">
<a href="#" class="LP-Link"><span class="LP-Pagination__Number">8</span></a>
</a> </li>
<li class="LP-Pagination__Item LP-Pagination__Item--number">
<a href="#" class="LP-Link"><span class="LP-Pagination__Number">9</span></a>
</li>
<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> </li>
</ul> </ul>
</div> </div>

2
components/03_Organisms/placeList/_placeList.scss
View File

@ -21,7 +21,7 @@
.LP-PlaceList__Item{ .LP-PlaceList__Item{
max-width: 900px; max-width: 900px;
//min-width: 450px; min-width: 450px;
margin: 18px 0; margin: 18px 0;
} }
} }

10
components/main.scss
View File

@ -26,8 +26,8 @@ $-primary-sans-serif-font: Montserrat, Helvetica, sans-serif;
$-primary-serif-font: Crimson, Times, serif; $-primary-serif-font: Crimson, Times, serif;
$-primary-sans-serif-accent-font: Roboto, Arial, sans-serif; $-primary-sans-serif-accent-font: Roboto, Arial, sans-serif;
$-viewport-extra-small: 450px;
$-viewport-small: 650px; $-viewport-small: 650px;
$-viewport-extra-small: 450px;
$-viewport-medium: 750px; $-viewport-medium: 750px;
$-viewport-normal: 1000px; $-viewport-normal: 1000px;
@ -99,12 +99,6 @@ body{
} }
} }
@media(max-width: $-viewport-extra-small){
.LP-Main__Sidebar{
max-width: 100vw;
}
}
@media(max-width: $-viewport-toggle-sidebar){ @media(max-width: $-viewport-toggle-sidebar){
.LP-Wrapper__Site{ .LP-Wrapper__Site{
grid-template-columns: 0 1fr; grid-template-columns: 0 1fr;
@ -131,7 +125,7 @@ body{
} }
#toggle_sidebar ~ .LP-Main__Sidebar{ #toggle_sidebar ~ .LP-Main__Sidebar{
left: -1 * $-sidebar-width - 1; left: -1 * $-sidebar-width;
} }
.LP-Menu__TriggerLabel{ .LP-Menu__TriggerLabel{

75
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"); }
@ -55,11 +56,17 @@ 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 {
@ -70,14 +77,16 @@ 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 {
left: -251px; } animation-name: slide_in_siedebar;
animation-duration: .3s; }
.LP-Menu__TriggerLabel { .LP-Menu__TriggerLabel {
z-index: 20; z-index: 20;
height: 60px; height: 60px;
@ -306,49 +315,40 @@ 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 20px; padding: 15px 25px;
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-Icon { .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; } 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,6 +578,7 @@ 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 {