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

Compare commits

base: Commander1024:ac0951ba6eb76e793faa14cebf7a9c32b1822786
Branches Tags
Commander1024:master
Commander1024:linklist-add
..
compare: Commander1024:5e5e9691dc068958f9d81174092d81dc75c4ca2d
Branches Tags
Commander1024:master
Commander1024:linklist-add

No commits in common. "ac0951ba6eb76e793faa14cebf7a9c32b1822786" and "5e5e9691dc068958f9d81174092d81dc75c4ca2d" have entirely different histories.
ac0951ba6e ... 5e5e9691dc

18 changed files with 115 additions and 132 deletions
Show Stats Expand all files Collapse all files

2
components/01_Atoms/_atoms.scss
View File

@ -2,7 +2,7 @@
@import 'headline/headline'; @import 'headline/headline';
@import 'text/text'; @import 'text/text';
@import 'icon/icon'; @import 'icon/icon';
@import 'textField/textField';
@import 'button/button'; @import 'button/button';
@import 'checkbox/checkbox'; @import 'checkbox/checkbox';
@import 'input/input'; @import 'input/input';
@import 'image/image';

4
components/01_Atoms/image/_image.scss
View File

@ -1,4 +0,0 @@
.LP-Image{
max-width:100%;
max-height:100%;
}

3
components/01_Atoms/image/image.config.json
View File

@ -1,3 +0,0 @@
{
}

23
components/01_Atoms/image/image.hbs
View File

@ -1,23 +0,0 @@
<img src="/images/photo_2020-05-02_18-11-21.jpg" class="LP-Image"/>
<div style="height: 80px;width: 40px; background-color: green;">
<img src="/images/photo_2020-05-02_18-11-21.jpg" class="LP-Image"/>
</div>
<p></p>
<div style="height: 40px;width: 80px;background-color: green;">
<img src="/images/photo_2020-05-02_18-11-21.jpg" class="LP-Image"/>
</div>
<p></p>
<div style="height: 80px;width: 40px;background-color: green;">
<img src="/images/ice-vertical-panorama.jpg" class="LP-Image"/>
</div>
<p></p>
<div style="height: 40px;width: 80px;background-color: green;">
<img src="/images/ice-vertical-panorama.jpg" class="LP-Image"/>
</div>

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

@ -1,3 +1,7 @@
.LP-Input:has( .LP-Input__Field:disabled){
background-color: red;
}
.LP-Input{ .LP-Input{
$-margin-bottom: 30px; $-margin-bottom: 30px;
display: flex; display: flex;
@ -17,11 +21,27 @@
background-color: $-secondary-background-color; background-color: $-secondary-background-color;
border-radius: 3px 3px 0 0; border-radius: 3px 3px 0 0;
} }
&:disabled{
background-color: transparent;
border-bottom: 1px dashed $-secondary-color;
cursor: not-allowed;
&:active{
margin-bottom: $-margin-bottom;
border-radius: 0;
}
~.LP-Input__Message{
visibility: hidden;
}
}
} }
.LP-Input__Label{ .LP-Input__Label{
font-family: $-primary-sans-serif-font; font-family: $-primary-sans-serif-font;
font-size: 16px; font-size: 18px;
} }
.LP-Input__Message{ .LP-Input__Message{
@ -47,30 +67,23 @@
.LP-Input__Message{ .LP-Input__Message{
color: $-primary-accent-color; color: $-primary-accent-color;
} }
} }
}
&--disabled{
.LP-Input__Field, .LP-Input__Field:disabled{ @media(max-width: $-viewport-small){
background-color: transparent; .LP-Input{
border-bottom: 1px dashed $-secondary-color; .LP-Input__Label{
cursor: not-allowed; font-family: $-primary-sans-serif-font;
font-size: 2.5vw;
label + &{ }
color: red; }
} }
&:focus, &:active{ @media(max-width: $-viewport-extra-small){
margin-bottom: $-margin-bottom; .LP-Input{
border-radius: 0; .LP-Input__Label{
} font-family: $-primary-sans-serif-font;
font-size: 18px;
~.LP-Input__Message{ }
visibility: hidden; }
}
}
.LP-Input__Label{
color: $-secondary-color;
}
}
} }

6
components/01_Atoms/input/input.config.json
View File

@ -1,7 +1,3 @@
{ {
"context": {
"label": "Enter your value here",
"placeholder": "A sample value",
"message": "Please fill in anything valuable"
}
} }

30
components/01_Atoms/input/input.hbs
View File

@ -1,28 +1,10 @@
<h3>Regular with message</h3>
<div class="LP-Input"> <div class="LP-Input">
<label for="input123" class="LP-Input__Label">{{label}}</label> <label for="input123" class="LP-Input__Label">First name</label>
<input type="text" id="input123" class="LP-Input__Field" placeholder="{{placeholder}}"/> <input type="text" id="input123" class="LP-Input__Field"/>
<span class="LP-Input__Message">{{message}}</span> <span class="LP-Input__Message">Field is required</span>
</div> </div>
<h3>Regular without message</h3>
<div class="LP-Input"> <div class="LP-Input">
<label for="input123" class="LP-Input__Label">{{label}}</label> <label for="input123" class="LP-Input__Label">First name</label>
<input type="text" id="input123" class="LP-Input__Field" placeholder="{{placeholder}}"/> <input type="text" id="input123" class="LP-Input__Field" disabled="disabled"/>
</div> <span class="LP-Input__Message">Field is required</span>
<h3>Regular without placeholder</h3>
<div class="LP-Input">
<label for="input123" class="LP-Input__Label">{{label}}</label>
<input type="text" id="input123" class="LP-Input__Field" placeholder=""/>
<span class="LP-Input__Message">{{message}}</span>
</div>
<h3>Disabled</h3>
<div class="LP-Input LP-Input--disabled">
<label for="input123" class="LP-Input__Label">{{label}}</label>
<input type="text" id="input123" class="LP-Input__Field" placeholder="{{placeholder}}" disabled="disabled"/>
</div>
<h3>Error</h3>
<div class="LP-Input LP-Input--error">
<label for="input123" class="LP-Input__Label">{{label}}</label>
<input type="text" id="input123" class="LP-Input__Field" placeholder="{{placeholder}}"/>
<span class="LP-Input__Message">{{message}}</span>
</div> </div>

10
components/01_Atoms/textField/_textField.scss Normal file
View File

@ -0,0 +1,10 @@
.LP-Form{
.LP-Form__Input--text{
border: none;
border-bottom: 1px solid $-secondary-accent-color;
&:active, &:focus{
border-bottom: 1px solid $-primary-accent-color;
}
}
}

17
components/01_Atoms/textField/textField.config.json Normal file
View File

@ -0,0 +1,17 @@
{
"title": "TextField",
"variants": [
{
"name": "default",
"context": {
"type": "text"
}
},
{
"name": "Password",
"context": {
"type": "password"
}
}
]
}

3
components/01_Atoms/textField/textField.hbs Normal file
View File

@ -0,0 +1,3 @@
<form class="LP-Form">
<input type="{{type}}" class="LP-Form__Input LP-Form__Input--text"/>
</form>

2
components/02_Molecules/_molecules.scss
View File

@ -1,5 +1,5 @@
@import 'logo/logo'; @import 'logo/logo';
@import 'textSection/textSection'; @import 'textSection/textSection';
@import 'placeTeaser/placeTeaser'; @import 'place/place';
@import 'securityMeasureList/securityMeasureList'; @import 'securityMeasureList/securityMeasureList';
@import 'form/form'; @import 'form/form';

5
components/02_Molecules/form/_form.scss
View File

@ -15,7 +15,7 @@
.LP-Form__Field{ .LP-Form__Field{
flex: 3 1 100px; flex: 3 1 100px;
padding: 6px 15px; padding: 0 15px;
&--wider{ &--wider{
flex: 5 1 200px; flex: 5 1 200px;
@ -62,8 +62,7 @@
justify-content: space-between; justify-content: space-between;
.LP-Form__Field{ .LP-Form__Field{
flex: 3 1 100px; flex: 3 1 100px;
padding: 12px 15px;
} }
} }
} }

63
components/02_Molecules/form/form.hbs
View File

@ -3,49 +3,44 @@
<legend class="LP-Form__Legend">Basic data</legend> <legend class="LP-Form__Legend">Basic data</legend>
<div class="LP-Form__Composition LP-Form__Composition--breakable"> <div class="LP-Form__Composition LP-Form__Composition--breakable">
<div class="LP-Form__Field"> <span class="LP-Form__Field LP-Input LP-Input--error">
<div class="LP-Input LP-Input--error"> <label for="input123" class="LP-Input__Label">First name</label>
<label for="input123" class="LP-Input__Label">First name</label>
<input type="text" id="input123" class="LP-Input__Field" placeholder="Peter"/>
<span class="LP-Input__Message">Field is required</span>
</div>
</div>
<div class="LP-Form__Field">
<div class="LP-Input">
<label for="input123" class="LP-Input__Label">Last name</label>
<input type="text" id="input123" class="LP-Input__Field"/>
</div>
</div>
<div class="LP-Form__Field LP-Form__Field--narrower">
<div class="LP-Input LP-Input--disabled">
<label for="input123" class="LP-Input__Label">Age</label>
<input type="text" id="input123" class="LP-Input__Field" disabled="disabled"/>
</div>
</div>
</div>
<div class="LP-Form__Composition">
<div class="LP-Form__Field LP-Form__Field--wider LP-Input">
<label for="input123" class="LP-Input__Label">Street</label>
<input type="text" id="input123" class="LP-Input__Field"/>
<span class="LP-Input__Message">We won't send any stalkers, promise</span>
</div>
<div class="LP-Form__Field LP-Form__Field--narrow LP-Input">
<label for="input123" class="LP-Input__Label">House no</label>
<input type="text" id="input123" class="LP-Input__Field"/> <input type="text" id="input123" class="LP-Input__Field"/>
<span class="LP-Input__Message">Field is required</span> <span class="LP-Input__Message">Field is required</span>
</div> </span>
<span class="LP-Form__Field LP-Input">
<label for="input123" class="LP-Input__Label">Last name</label>
<input type="text" id="input123" class="LP-Input__Field"/>
</span>
</div> </div>
<div class="LP-Form__Composition"> <div class="LP-Form__Composition">
<div class="LP-Form__Field LP-Form__Field--narrow LP-Input"> <span class="LP-Form__Field LP-Form__Field--wider LP-Input">
<label for="input123" class="LP-Input__Label">Street</label>
<input type="text" id="input123" class="LP-Input__Field"/>
<span class="LP-Input__Message">We won't send any stalkers, promise</span>
</span>
<span class="LP-Form__Field LP-Form__Field--narrower LP-Input">
<label for="input123" class="LP-Input__Label">House no</label>
<input type="text" id="input123" class="LP-Input__Field"/>
<span class="LP-Input__Message">Field is required</span>
</span>
<span class="LP-Form__Field LP-Form__Field--narrower LP-Input">
<label for="input123" class="LP-Input__Label">Disabled</label>
<input type="text" id="input123" class="LP-Input__Field" disabled="disabled"/>
<span class="LP-Input__Message">Field is required</span>
</span>
</div>
<div class="LP-Form__Composition">
<span 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>
<input type="text" id="input123" class="LP-Input__Field"/> <input type="text" id="input123" class="LP-Input__Field"/>
</div> </span>
<div class="LP-Form__Field LP-Form__Field--wide LP-Input"> <span class="LP-Form__Field LP-Form__Field--wide LP-Input">
<label for="input123" class="LP-Input__Label">Town</label> <label for="input123" class="LP-Input__Label">Town</label>
<input type="text" id="input123" class="LP-Input__Field"/> <input type="text" id="input123" class="LP-Input__Field"/>
</div> </span>
</div> </div>
</fieldset> </fieldset>

0
components/02_Molecules/placeTeaser/_placeTeaser.scss → components/02_Molecules/place/_place.scss
View File

0
components/02_Molecules/placeTeaser/placeTeaser.config.json → components/02_Molecules/place/place.config.json
View File

8
components/02_Molecules/placeTeaser/placeTeaser.hbs → components/02_Molecules/place/place.hbs
View File

@ -1,14 +1,12 @@
<article class="LP-Place"> <article class="LP-Place">
<div class="LP-Place__Image"> <img class="LP-Place__Image" src="{{image}}"/>
<img class="LP-Image" src="{{image}}"/> <div class="LP-Place__Assets">
</div>
<div class="LP-Place__Detail">
<div class="LP-Place__Info"> <div class="LP-Place__Info">
<h3 class="LP-Place__Title">{{title}}</h3> <h3 class="LP-Place__Title">{{title}}</h3>
<p class="LP-Place__Detail" >{{location}}</p> <p class="LP-Place__Detail" >{{location}}</p>
</div> </div>
{{# if description}} {{# if description}}
<p class="LP-Place__Description"> <p class="LP-TextSection LP-Place__Description">
{{description}} {{description}}
</p> </p>
{{/if}} {{/if}}

8
components/components.scss
View File

@ -10,9 +10,9 @@
@font-face { @font-face {
font-family: Montserrat; font-family: Montserrat;
src: src:
url('fonts/Montserrat/Montserrat-Regular.otf'), url('fonts/Montserrat/Montserrat-Regular.ttf'),
url('fonts/Montserrat/Montserrat-Bold.otf'), url('fonts/Montserrat/Montserrat-Bold.ttf'),
url('fonts/Montserrat/Montserrat-Italic.otf') url('fonts/Montserrat/Montserrat-Italic.ttf')
; ;
} }
@ -27,7 +27,7 @@ $-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-small: 650px; $-viewport-small: 650px;
$-viewport-extra-small: 450px; $-viewport-extra-small: 390px;
@import '01_Atoms/atoms'; @import '01_Atoms/atoms';

BIN
public/images/ice-vertical-panorama.jpg
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 75 KiB