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

Merge branch 'master' of mowoe.com:reverend/lostplaces-frontend

Browse Source
This commit is contained in:
Marcus Scholz 2020-08-04 20:00:44 +02:00
commit 9e061f9566
11 changed files with 162 additions and 81 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
components/01_Atoms/input/_input.scss
View File

@ -11,11 +11,12 @@
padding: 8px; padding: 8px;
margin-bottom: $-margin-bottom; margin-bottom: $-margin-bottom;
&:focus, &:active{ &:focus, &:active, &:invalid{
margin-bottom: $-margin-bottom - 1px; margin-bottom: $-margin-bottom - 1px;
border-bottom: 2px solid $-wine-red; border-bottom: 2px solid $-wine-red;
background-color: $-almost-white; background-color: $-almost-white;
border-radius: 3px 3px 0 0; border-radius: 3px 3px 0 0;
box-shadow: none;
} }
} }
@ -31,10 +32,6 @@
padding: 3px; padding: 3px;
position: relative; position: relative;
top: -$-margin-bottom; top: -$-margin-bottom;
&:before{
content: '* ';
}
} }
&--error{ &--error{

6
components/01_Atoms/link/_link.scss
View File

@ -1,13 +1,13 @@
.LP-Link { .LP-Link {
color: $-grey; color: $-grey;
text-decoration: none; text-decoration: none;
font-family: $-primary-sans-serif-accent-font; font-family: $-primary-sans-serif-font;
&:hover { &:hover {
color: $-light-brown; color: $-light-brown;
} }
.LP-Text{ .LP-Paragraph{
font-family: $-primary-sans-serif-accent-font; font-family: $-primary-sans-serif-font;
&:hover{ &:hover{
color: $-light-brown; color: $-light-brown;
} }

28
components/02_Molecules/navigation/_navigation.scss
View File

@ -1,9 +1,10 @@
.LP-Menu{ .LP-Menu{
border-left: 1px solid $-light-brown;
.LP-Menu__List { .LP-Menu__List {
list-style-type: none; list-style-type: none;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
justify-content: space-between; justify-content: space-around;
padding: 0; padding: 0;
margin: 0; margin: 0;
} }
@ -11,7 +12,6 @@
.LP-Menu__Item { .LP-Menu__Item {
padding: 15px 0; padding: 15px 0;
margin: 0; margin: 0;
width: 100px;
text-align: center; text-align: center;
background-color: transparent; background-color: transparent;
} }
@ -24,6 +24,24 @@
color: $-wine-red; color: $-wine-red;
} }
} }
&--sidebar{
border: none;
min-width: 80px;
.LP-Menu__List{
flex-direction: column;
.LP-Menu__Item{
text-align: left;
border-left: 1px solid $-light-brown;
margin-bottom: 10px;
&:last-child{
margin-bottom: 0;
}
}
}
}
} }
@media(max-width: $-viewport-medium){ @media(max-width: $-viewport-medium){
@ -32,7 +50,11 @@
.LP-Menu__List{ .LP-Menu__List{
display: flex; display: flex;
flex-direction: row; flex-direction: row;
justify-content: flex-start justify-content: flex-start;
.LP-Menu__Item{
flex: 1 1 auto;
}
} }
} }
} }

10
components/02_Molecules/navigation/navigation.config.json
View File

@ -1,3 +1,11 @@
{ {
"title": "Navigation",
"variants": [
{
"name": "Sidebar",
"context":{
"modifier": "--sidebar"
}
}
]
} }

2
components/02_Molecules/navigation/navigation.hbs
View File

@ -1,4 +1,4 @@
<nav class="LP-Menu"> <nav class="LP-Menu LP-Menu{{modifier}}">
<ul class="LP-Menu__List"> <ul class="LP-Menu__List">
<li class="LP-Menu__Item">{{> @link text='Home'}}</li> <li class="LP-Menu__Item">{{> @link text='Home'}}</li>
<li class="LP-Menu__Item">{{> @link text='About'}}</li> <li class="LP-Menu__Item">{{> @link text='About'}}</li>

17
components/03_Organisms/form/_form.scss
View File

@ -1,11 +1,12 @@
.LP-Form{ .LP-Form{
max-width: 900px;
.LP-Form__Fieldset{ .LP-Form__Fieldset{
border: none; border: none;
.LP-Form__Legend{ .LP-Form__Legend{
margin: 0; margin: 0;
padding: 0; padding: 0;
font-family: $-primary-sans-serif-font;
font-size: 21px;
} }
.LP-Form__Composition{ .LP-Form__Composition{
@ -18,23 +19,19 @@
padding: 6px 15px; padding: 6px 15px;
&--wider{ &--wider{
flex: 5 1 200px; flex: 5 1;
} }
&--wide{ &--wide{
flex: 4 1 150px; flex: 4 1;
} }
&--narrow{ &--narrow{
flex: 2 0 50px; flex: 2 0;
} }
&--narrower{ &--narrower{
flex: 1 0 25px; flex: 1 0;
}
input{
width: 100%;
} }
} }
} }

18
components/03_Organisms/header/_header.scss
View File

@ -4,6 +4,10 @@
justify-content: space-between; justify-content: space-between;
margin-bottom: 70px; margin-bottom: 70px;
height: 60px; height: 60px;
&__Navigation{
flex-grow: 2;
}
&__Logo { &__Logo {
height: 60px; height: 60px;
@ -11,6 +15,7 @@
object-fit:cover; object-fit:cover;
max-height: 100%; max-height: 100%;
overflow: hidden; overflow: hidden;
flex-shrink: 0;
.LP-Image{ .LP-Image{
height: 60px; height: 60px;
@ -18,6 +23,19 @@
} }
} }
.LP-Header__UserInformation{
margin-right: 3%;
.LP-Paragraph{
font-family: $-primary-sans-serif-font;
white-space: nowrap;
}
.LP-Link{
margin: 0 3px;
padding: 4px 4px;
}
}
@media(max-width: $-viewport-medium){ @media(max-width: $-viewport-medium){
.LP-Header__Logo{ .LP-Header__Logo{
width: 60px; width: 60px;

5
components/03_Organisms/header/header.hbs
View File

@ -2,6 +2,11 @@
<div class="LP-Header__Logo"> <div class="LP-Header__Logo">
{{> @image source='/images/logo.png'}} {{> @image source='/images/logo.png'}}
</div> </div>
<div class="LP-Header__UserInformation">
<span class="LP-Paragraph">
Hi there!{{> @link url="#" text="Login"}} or {{> @link url="#" text="Sign up"}}
</span>
</div>
<div class="LP-Header__Navigation"> <div class="LP-Header__Navigation">
{{> @navigation}} {{> @navigation}}
</div> </div>

9
components/04_Templates/home/_home.scss
View File

@ -1,8 +1,15 @@
.LP-MainContainer { .LP-MainContainer {
margin: 0 auto; margin: 0 auto;
max-width: 1280px; max-width: 1280px;
} }
.LP-HorizontalLine{ .LP-HorizontalLine{
color: $-grey; color: $-grey;
}
@media(max-width: $-viewport-small){
.LP-MainContainer {
width: 100%;
}
} }

1
components/04_Templates/placeOverview/_placeOverview.scss
View File

@ -20,6 +20,7 @@
.LP-Headline{ .LP-Headline{
position: relative; position: relative;
top: 15px; top: 15px;
margin-bottom: 30px;
} }
} }
} }

138
public/components.css
View File

@ -9,12 +9,12 @@
.LP-Link { .LP-Link {
color: #565656; color: #565656;
text-decoration: none; text-decoration: none;
font-family: Roboto, Arial, sans-serif; } font-family: Montserrat, Helvetica, sans-serif; }
.LP-Link:hover { .LP-Link:hover {
color: #C09F80; } color: #C09F80; }
.LP-Link .LP-Text { .LP-Link .LP-Paragraph {
font-family: Roboto, Arial, sans-serif; } font-family: Montserrat, Helvetica, sans-serif; }
.LP-Link .LP-Text:hover { .LP-Link .LP-Paragraph:hover {
color: #C09F80; } color: #C09F80; }
.LP-Link__IconWrapper { .LP-Link__IconWrapper {
@ -86,11 +86,12 @@
border-bottom: 1px solid #565656; border-bottom: 1px solid #565656;
padding: 8px; padding: 8px;
margin-bottom: 30px; } margin-bottom: 30px; }
.LP-Input .LP-Input__Field:focus, .LP-Input .LP-Input__Field:active { .LP-Input .LP-Input__Field:focus, .LP-Input .LP-Input__Field:active, .LP-Input .LP-Input__Field:invalid {
margin-bottom: 29px; margin-bottom: 29px;
border-bottom: 2px solid #76323F; border-bottom: 2px solid #76323F;
background-color: #f9f9f9; background-color: #f9f9f9;
border-radius: 3px 3px 0 0; } border-radius: 3px 3px 0 0;
box-shadow: none; }
.LP-Input .LP-Input__Label { .LP-Input .LP-Input__Label {
font-family: Montserrat, Helvetica, sans-serif; font-family: Montserrat, Helvetica, sans-serif;
font-size: 16px; } font-size: 16px; }
@ -101,8 +102,6 @@
padding: 3px; padding: 3px;
position: relative; position: relative;
top: -30px; } top: -30px; }
.LP-Input .LP-Input__Message:before {
content: '* '; }
.LP-Input--error .LP-Input__Field { .LP-Input--error .LP-Input__Field {
margin-bottom: 25px; margin-bottom: 25px;
border-bottom: 2px solid #76323F; border-bottom: 2px solid #76323F;
@ -230,33 +229,45 @@
.LP-TagList .LP-TagList__List .LP-TagList__Item { .LP-TagList .LP-TagList__List .LP-TagList__Item {
margin: 6px; } margin: 6px; }
.LP-Menu .LP-Menu__List { .LP-Menu {
list-style-type: none; border-left: 1px solid #C09F80; }
display: flex; .LP-Menu .LP-Menu__List {
flex-direction: row; list-style-type: none;
justify-content: space-between; display: flex;
padding: 0; flex-direction: row;
margin: 0; } justify-content: space-around;
padding: 0;
.LP-Menu .LP-Menu__Item { margin: 0; }
padding: 15px 0; .LP-Menu .LP-Menu__Item {
margin: 0; padding: 15px 0;
width: 100px; margin: 0;
text-align: center; text-align: center;
background-color: transparent; } background-color: transparent; }
.LP-Menu .LP-Link__Text {
.LP-Menu .LP-Link__Text { color: #565656;
color: #565656; font-weight: bold;
font-weight: bold; text-shadow: 0px 0px 20px white; }
text-shadow: 0px 0px 20px white; } .LP-Menu .LP-Link__Text:hover {
.LP-Menu .LP-Link__Text:hover { color: #76323F; }
color: #76323F; } .LP-Menu--sidebar {
border: none;
min-width: 80px; }
.LP-Menu--sidebar .LP-Menu__List {
flex-direction: column; }
.LP-Menu--sidebar .LP-Menu__List .LP-Menu__Item {
text-align: left;
border-left: 1px solid #C09F80;
margin-bottom: 10px; }
.LP-Menu--sidebar .LP-Menu__List .LP-Menu__Item:last-child {
margin-bottom: 0; }
@media (max-width: 750px) { @media (max-width: 750px) {
.LP-Menu .LP-Menu__List { .LP-Menu .LP-Menu__List {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
justify-content: flex-start; } } justify-content: flex-start; }
.LP-Menu .LP-Menu__List .LP-Menu__Item {
flex: 1 1 auto; } }
@media (max-width: 450px) { @media (max-width: 450px) {
.LP-Menu .LP-Menu__List { .LP-Menu .LP-Menu__List {
@ -268,15 +279,27 @@
justify-content: space-between; justify-content: space-between;
margin-bottom: 70px; margin-bottom: 70px;
height: 60px; } height: 60px; }
.LP-Header__Navigation {
flex-grow: 2; }
.LP-Header__Logo { .LP-Header__Logo {
height: 60px; height: 60px;
margin: 25px; margin: 25px;
object-fit: cover; object-fit: cover;
max-height: 100%; max-height: 100%;
overflow: hidden; } overflow: hidden;
flex-shrink: 0; }
.LP-Header__Logo .LP-Image { .LP-Header__Logo .LP-Image {
height: 60px; } height: 60px; }
.LP-Header__UserInformation {
margin-right: 3%; }
.LP-Header__UserInformation .LP-Paragraph {
font-family: Montserrat, Helvetica, sans-serif;
white-space: nowrap; }
.LP-Header__UserInformation .LP-Link {
margin: 0 3px;
padding: 4px 4px; }
@media (max-width: 750px) { @media (max-width: 750px) {
.LP-Header__Logo { .LP-Header__Logo {
width: 60px; } width: 60px; }
@ -376,30 +399,28 @@
.LP-Footer .LP-LinkList__List .LP-LinkList__Item .LP-Link:hover { .LP-Footer .LP-LinkList__List .LP-LinkList__Item .LP-Link:hover {
background-color: inherit; } background-color: inherit; }
.LP-Form { .LP-Form .LP-Form__Fieldset {
max-width: 900px; } border: none; }
.LP-Form .LP-Form__Fieldset { .LP-Form .LP-Form__Fieldset .LP-Form__Legend {
border: none; } margin: 0;
.LP-Form .LP-Form__Fieldset .LP-Form__Legend { padding: 0;
margin: 0; font-family: Montserrat, Helvetica, sans-serif;
padding: 0; } font-size: 21px; }
.LP-Form .LP-Form__Fieldset .LP-Form__Composition { .LP-Form .LP-Form__Fieldset .LP-Form__Composition {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
justify-content: space-between; } justify-content: space-between; }
.LP-Form .LP-Form__Fieldset .LP-Form__Composition .LP-Form__Field { .LP-Form .LP-Form__Fieldset .LP-Form__Composition .LP-Form__Field {
flex: 3 1 100px; flex: 3 1 100px;
padding: 6px 15px; } padding: 6px 15px; }
.LP-Form .LP-Form__Fieldset .LP-Form__Composition .LP-Form__Field--wider { .LP-Form .LP-Form__Fieldset .LP-Form__Composition .LP-Form__Field--wider {
flex: 5 1 200px; } flex: 5 1; }
.LP-Form .LP-Form__Fieldset .LP-Form__Composition .LP-Form__Field--wide { .LP-Form .LP-Form__Fieldset .LP-Form__Composition .LP-Form__Field--wide {
flex: 4 1 150px; } flex: 4 1; }
.LP-Form .LP-Form__Fieldset .LP-Form__Composition .LP-Form__Field--narrow { .LP-Form .LP-Form__Fieldset .LP-Form__Composition .LP-Form__Field--narrow {
flex: 2 0 50px; } flex: 2 0; }
.LP-Form .LP-Form__Fieldset .LP-Form__Composition .LP-Form__Field--narrower { .LP-Form .LP-Form__Fieldset .LP-Form__Composition .LP-Form__Field--narrower {
flex: 1 0 25px; } flex: 1 0; }
.LP-Form .LP-Form__Fieldset .LP-Form__Composition .LP-Form__Field input {
width: 100%; }
@media (max-width: 650px) { @media (max-width: 650px) {
.LP-Form .LP-Form__Fieldset .LP-Form__Composition--breakable { .LP-Form .LP-Form__Fieldset .LP-Form__Composition--breakable {
@ -423,6 +444,10 @@
.LP-HorizontalLine { .LP-HorizontalLine {
color: #565656; } color: #565656; }
@media (max-width: 650px) {
.LP-MainContainer {
width: 100%; } }
.LP-PlaceOverview .LP-PlaceOverview__Info .LP-PlaceOveriew__Image { .LP-PlaceOverview .LP-PlaceOverview__Info .LP-PlaceOveriew__Image {
width: 700px; width: 700px;
box-shadow: 0 0 10px #565656; box-shadow: 0 0 10px #565656;
@ -439,7 +464,8 @@
top: -15px; } top: -15px; }
.LP-PlaceOverview .LP-PlaceOverview__Info .LP-PlaceOverView__Description .LP-Headline { .LP-PlaceOverview .LP-PlaceOverview__Info .LP-PlaceOverView__Description .LP-Headline {
position: relative; position: relative;
top: 15px; } top: 15px;
margin-bottom: 30px; }
.LP-PlaceOverview .LP-PlaceOverView__ImageList { .LP-PlaceOverview .LP-PlaceOverView__ImageList {
list-style-type: none; list-style-type: none;