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

Compare commits

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

5 Commits
fb20b555c4 ... fba48603b6

Author SHA1 Message Date
reverend
fba48603b6 Ye 2020-08-12 18:29:27 +02:00
reverend
16f0e10d89 Minor fix 2020-08-12 18:29:20 +02:00
reverend
e431d9a1a0 Form squishiness and Button layout 2020-08-12 18:29:08 +02:00
reverend
f9233249a3 Styled submit input 2020-08-12 18:28:47 +02:00
reverend
2e48395076 Neater cancle button 2020-08-12 18:28:37 +02:00
8 changed files with 180 additions and 49 deletions
Show Stats Expand all files Collapse all files

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

@ -5,6 +5,7 @@
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;
@ -12,6 +13,11 @@
} }
&--cancel{ &--cancel{
background-color: $-grey;
color: $-almost-white;
&:active{
color: $-grey;
background-color: $-almost-white; background-color: $-almost-white;
} }
} }
}

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

@ -18,6 +18,22 @@
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{

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

@ -1,7 +1,14 @@
.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;
padding: 0; padding: 0;
@ -9,31 +16,61 @@
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 1 100px; flex: 3 2 100px;
padding: 6px 15px; padding: 6px 15px;
&--wider{ &--wider{
flex: 5 1; flex: 5 2;
} }
&--wide{ &--wide{
flex: 4 1; flex: 4 2;
} }
&--narrow{ &--narrow{
flex: 2 0; flex: 2 1;
} }
&--narrower{ &--narrower{
flex: 1 0; flex: 1 2;
} }
} }
&--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;
} }
} }
} }
@ -59,10 +96,21 @@
justify-content: space-between; justify-content: space-between;
.LP-Form__Field{ .LP-Form__Field{
&:not(.LP-Form__Button){
flex: 3 1 100px; flex: 3 1 100px;
padding: 12px 15px; padding: 12px 15px;
} }
} }
.LP-Form__Button{
padding: 0 15px;
}
&--buttons{
justify-content: flex-end;
}
}
} }
} }
} }

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

@ -37,6 +37,12 @@
</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>
@ -48,5 +54,14 @@
</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>

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

@ -27,6 +27,8 @@
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, 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.'}} {{> @paragraph text='Lorem ipsum dolor sit amet, '}}
</div> </div>
<section class="LP-Section"> <section class="LP-Section">

1
components/main.scss
View File

@ -48,6 +48,7 @@ body{
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;

65
public/main.css
View File

@ -18,7 +18,8 @@ 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);
@ -99,11 +100,16 @@ 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;
color: #f9f9f9; }
.LP-Button--cancel:active {
color: #565656;
background-color: #f9f9f9; } background-color: #f9f9f9; }
.LP-Form .LP-Form__Checkbox { .LP-Form .LP-Form__Checkbox {
@ -132,6 +138,17 @@ 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; }
@ -459,8 +476,14 @@ 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 {
display: flex;
flex-direction: column;
align-items: center; }
.LP-Form .LP-Form__Fieldset { .LP-Form .LP-Form__Fieldset {
border: none; } border: none;
max-width: 1200px;
min-width: 750px; }
.LP-Form .LP-Form__Fieldset .LP-Form__Legend { .LP-Form .LP-Form__Fieldset .LP-Form__Legend {
margin: 0; margin: 0;
padding: 0; padding: 0;
@ -471,16 +494,31 @@ body {
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 2 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; } flex: 5 2; }
.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; } flex: 4 2; }
.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; } flex: 2 1; }
.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; } 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 {
@ -493,9 +531,13 @@ 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 { .LP-Form .LP-Form__Fieldset .LP-Form__Composition .LP-Form__Field:not(.LP-Form__Button) {
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;
@ -558,4 +600,5 @@ body {
width: 100%; width: 100%;
height: auto; height: auto;
margin: 0; margin: 0;
padding: 0; } } padding: 0;
margin-bottom: 25px; } }