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

Compare commits

base: Commander1024:fba48603b67097d997e5ce4d4de8330a4ea1d399
Branches Tags
Commander1024:master
Commander1024:linklist-add
..
compare: Commander1024:fb20b555c4db135bfe034efb18a91a2cda72b4d2
Branches Tags
Commander1024:master
Commander1024:linklist-add

No commits in common. "fba48603b67097d997e5ce4d4de8330a4ea1d399" and "fb20b555c4db135bfe034efb18a91a2cda72b4d2" have entirely different histories.
fba48603b6 ... fb20b555c4

8 changed files with 49 additions and 180 deletions
Show Stats Expand all files Collapse all files

8
components/01_Atoms/button/_button.scss
View File

@ -5,7 +5,6 @@
padding: 8px 14px; padding: 8px 14px;
border-radius: 2px; border-radius: 2px;
font-weight: bold; font-weight: bold;
cursor: pointer;
&:active{ &:active{
background-color: $-wine-red; background-color: $-wine-red;
@ -13,11 +12,6 @@
} }
&--cancel{ &--cancel{
background-color: $-grey; background-color: $-almost-white;
color: $-almost-white;
&:active{
color: $-grey;
background-color: $-almost-white;
}
} }
} }

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

@ -3,7 +3,7 @@
display: flex; display: flex;
flex-direction: column; flex-direction: column;
margin-bottom: -$-margin-bottom; margin-bottom: -$-margin-bottom;
padding: 10px 0; padding: 10px 0;
.LP-Input__Field{ .LP-Input__Field{
border: none; border: none;
@ -17,23 +17,7 @@
background-color: $-almost-white; background-color: $-almost-white;
border-radius: 3px 3px 0 0; border-radius: 3px 3px 0 0;
box-shadow: none; box-shadow: none;
} }
&[type=submit]{
background-color: $-light-brown;
color: $-grey;
border: none;
padding: 8px 14px;
border-radius: 2px;
font-weight: bold;
cursor: pointer;
&:active{
background-color: $-wine-red;
color:$-almost-white;
}
}
} }
.LP-Input__Label{ .LP-Input__Label{

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

@ -1,13 +1,6 @@
.LP-Form{ .LP-Form{
display: flex;
flex-direction: column;
align-items: center;
.LP-Form__Fieldset{ .LP-Form__Fieldset{
border: none; border: none;
max-width: 1200px;
min-width: $-viewport-medium;
.LP-Form__Legend{ .LP-Form__Legend{
margin: 0; margin: 0;
@ -16,72 +9,42 @@
font-size: 21px; font-size: 21px;
} }
.LP-Form__Composition{ .LP-Form__Composition{
display: flex; display: flex;
flex-direction: row; flex-direction: row;
justify-content: space-between; justify-content: space-between;
.LP-Form__Field{ .LP-Form__Field{
flex: 3 2 100px; flex: 3 1 100px;
padding: 6px 15px; padding: 6px 15px;
&--wider{ &--wider{
flex: 5 2; flex: 5 1;
} }
&--wide{ &--wide{
flex: 4 2; flex: 4 1;
} }
&--narrow{ &--narrow{
flex: 2 1; flex: 2 0;
} }
&--narrower{ &--narrower{
flex: 1 2; flex: 1 0;
} }
} }
&--buttons{
justify-content: flex-end;
}
.LP-Form__Button{
flex-grow: 0;
padding-left: 0;
min-width: 130px;
.LP-Link{
display:contents;
}
}
.LP-Form__InfoText{
.LP-Paragraph{
font-family: $-primary-sans-serif-font;
color: $-grey;
}
}
} }
} }
} }
@media(max-width: $-viewport-medium){
.LP-Form{
.LP-Form__Fieldset{
min-width: unset;
}
}
}
@media(max-width: $-viewport-small){ @media(max-width: $-viewport-small){
.LP-Form{ .LP-Form{
.LP-Form__Fieldset{ .LP-Form__Fieldset{
.LP-Form__Composition--breakable{ .LP-Form__Composition--breakable{
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: space-between; justify-content: space-between;
} }
} }
} }
@ -96,20 +59,9 @@
justify-content: space-between; justify-content: space-between;
.LP-Form__Field{ .LP-Form__Field{
flex: 3 1 100px;
&:not(.LP-Form__Button){ padding: 12px 15px;
flex: 3 1 100px; }
padding: 12px 15px;
}
}
.LP-Form__Button{
padding: 0 15px;
}
&--buttons{
justify-content: flex-end;
}
} }
} }
} }

15
components/03_Organisms/form/form.hbs
View File

@ -37,12 +37,6 @@
</div> </div>
</div> </div>
<div class="LP-Form__Composition">
<div class="LP-Form__Field LP-Form__InfoText">
<p class="LP-Paragraph">At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. </p>
</div>
</div>
<div class="LP-Form__Composition"> <div class="LP-Form__Composition">
<div class="LP-Form__Field LP-Form__Field--narrow LP-Input"> <div class="LP-Form__Field LP-Form__Field--narrow LP-Input">
<label for="input123" class="LP-Input__Label">Postal Code</label> <label for="input123" class="LP-Input__Label">Postal Code</label>
@ -54,14 +48,5 @@
</div> </div>
</div> </div>
<div class="LP-Form__Composition LP-Form__Composition--buttons">
<div class="LP-Form__Field LP-Form__Button LP-Input">
<input type="submit" class="LP-Button" value="Submit"/>
</div>
<div class="LP-Form__Field LP-Form__Button LP-Input LP-Input">
<button class="LP-Button LP-Button--cancel">Kenschäll</button>
</div>
</div>
</fieldset> </fieldset>
</form> </form>

4
components/04_Templates/placeDetail/_placeDetail.scss
View File

@ -26,9 +26,7 @@
width: 100%; width: 100%;
height: auto; height: auto;
margin: 0; margin: 0;
padding: 0; padding: 0;
margin-bottom: 25px;
} }
} }
} }

2
components/04_Templates/placeDetail/placeDetail.hbs
View File

@ -8,7 +8,7 @@
</header> </header>
<div class="LP-PlaceDetail__Description"> <div class="LP-PlaceDetail__Description">
{{> @paragraph text='Lorem ipsum dolor sit amet, '}} {{> @paragraph text='Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.'}}
</div> </div>
<section class="LP-Section"> <section class="LP-Section">

5
components/main.scss
View File

@ -47,12 +47,11 @@ body{
.LP-Main{ .LP-Main{
display: table; display: table;
flex-direction: row-reverse; flex-direction: row-reverse;
height: calc(100% - 61px); height: calc(100% - 61px);
width: 100%;
.LP-Main__Content{ .LP-Main__Content{
display: table-cell; display: table-cell;
width: calc(100% - 300px); width: calc(100% -300px);
min-height: 1px; min-height: 1px;
padding: 25px; padding: 25px;
} }

101
public/main.css
View File

@ -18,11 +18,10 @@ body {
.LP-Main { .LP-Main {
display: table; display: table;
flex-direction: row-reverse; flex-direction: row-reverse;
height: calc(100% - 61px); height: calc(100% - 61px); }
width: 100%; }
.LP-Main .LP-Main__Content { .LP-Main .LP-Main__Content {
display: table-cell; display: table-cell;
width: calc(100% - 300px); width: calc(100% -300px);
min-height: 1px; min-height: 1px;
padding: 25px; } padding: 25px; }
.LP-Main .LP-Main__Sidebar { .LP-Main .LP-Main__Sidebar {
@ -100,17 +99,12 @@ body {
border: none; border: none;
padding: 8px 14px; padding: 8px 14px;
border-radius: 2px; border-radius: 2px;
font-weight: bold; font-weight: bold; }
cursor: pointer; }
.LP-Button:active { .LP-Button:active {
background-color: #76323F; background-color: #76323F;
color: #f9f9f9; } color: #f9f9f9; }
.LP-Button--cancel { .LP-Button--cancel {
background-color: #565656; background-color: #f9f9f9; }
color: #f9f9f9; }
.LP-Button--cancel:active {
color: #565656;
background-color: #f9f9f9; }
.LP-Form .LP-Form__Checkbox { .LP-Form .LP-Form__Checkbox {
display: none; } display: none; }
@ -138,17 +132,6 @@ body {
background-color: #f9f9f9; background-color: #f9f9f9;
border-radius: 3px 3px 0 0; border-radius: 3px 3px 0 0;
box-shadow: none; } box-shadow: none; }
.LP-Input .LP-Input__Field[type=submit] {
background-color: #C09F80;
color: #565656;
border: none;
padding: 8px 14px;
border-radius: 2px;
font-weight: bold;
cursor: pointer; }
.LP-Input .LP-Input__Field[type=submit]:active {
background-color: #76323F;
color: #f9f9f9; }
.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; }
@ -476,49 +459,28 @@ body {
.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 {
display: flex; border: none; }
flex-direction: column; .LP-Form .LP-Form__Fieldset .LP-Form__Legend {
align-items: center; } margin: 0;
.LP-Form .LP-Form__Fieldset { padding: 0;
border: none; font-family: Montserrat, Helvetica, sans-serif;
max-width: 1200px; font-size: 21px; }
min-width: 750px; } .LP-Form .LP-Form__Fieldset .LP-Form__Composition {
.LP-Form .LP-Form__Fieldset .LP-Form__Legend { display: flex;
margin: 0; flex-direction: row;
padding: 0; justify-content: space-between; }
font-family: Montserrat, Helvetica, sans-serif; .LP-Form .LP-Form__Fieldset .LP-Form__Composition .LP-Form__Field {
font-size: 21px; } flex: 3 1 100px;
.LP-Form .LP-Form__Fieldset .LP-Form__Composition { padding: 6px 15px; }
display: flex; .LP-Form .LP-Form__Fieldset .LP-Form__Composition .LP-Form__Field--wider {
flex-direction: row; flex: 5 1; }
justify-content: space-between; } .LP-Form .LP-Form__Fieldset .LP-Form__Composition .LP-Form__Field--wide {
.LP-Form .LP-Form__Fieldset .LP-Form__Composition .LP-Form__Field { flex: 4 1; }
flex: 3 2 100px; .LP-Form .LP-Form__Fieldset .LP-Form__Composition .LP-Form__Field--narrow {
padding: 6px 15px; } flex: 2 0; }
.LP-Form .LP-Form__Fieldset .LP-Form__Composition .LP-Form__Field--wider { .LP-Form .LP-Form__Fieldset .LP-Form__Composition .LP-Form__Field--narrower {
flex: 5 2; } flex: 1 0; }
.LP-Form .LP-Form__Fieldset .LP-Form__Composition .LP-Form__Field--wide {
flex: 4 2; }
.LP-Form .LP-Form__Fieldset .LP-Form__Composition .LP-Form__Field--narrow {
flex: 2 1; }
.LP-Form .LP-Form__Fieldset .LP-Form__Composition .LP-Form__Field--narrower {
flex: 1 2; }
.LP-Form .LP-Form__Fieldset .LP-Form__Composition--buttons {
justify-content: flex-end; }
.LP-Form .LP-Form__Fieldset .LP-Form__Composition .LP-Form__Button {
flex-grow: 0;
padding-left: 0;
min-width: 130px; }
.LP-Form .LP-Form__Fieldset .LP-Form__Composition .LP-Form__Button .LP-Link {
display: contents; }
.LP-Form .LP-Form__Fieldset .LP-Form__Composition .LP-Form__InfoText .LP-Paragraph {
font-family: Montserrat, Helvetica, sans-serif;
color: #565656; }
@media (max-width: 750px) {
.LP-Form .LP-Form__Fieldset {
min-width: unset; } }
@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 {
@ -531,13 +493,9 @@ body {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: space-between; } justify-content: space-between; }
.LP-Form .LP-Form__Fieldset .LP-Form__Composition .LP-Form__Field:not(.LP-Form__Button) { .LP-Form .LP-Form__Fieldset .LP-Form__Composition .LP-Form__Field {
flex: 3 1 100px; flex: 3 1 100px;
padding: 12px 15px; } padding: 12px 15px; } }
.LP-Form .LP-Form__Fieldset .LP-Form__Composition .LP-Form__Button {
padding: 0 15px; }
.LP-Form .LP-Form__Fieldset .LP-Form__Composition--buttons {
justify-content: flex-end; } }
.LP-ImageGrid .LP-ImageGrid__List { .LP-ImageGrid .LP-ImageGrid__List {
list-style-type: none; list-style-type: none;
@ -600,5 +558,4 @@ body {
width: 100%; width: 100%;
height: auto; height: auto;
margin: 0; margin: 0;
padding: 0; padding: 0; } }
margin-bottom: 25px; } }