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

Compare commits

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

9 Commits
5e5e9691dc ... ac0951ba6e

Author SHA1 Message Date
reverend
ac0951ba6e added neat image 2020-07-31 23:35:50 +02:00
reverend
e525df9347 Fixed stupid copy pasta mistake 2020-07-31 23:35:41 +02:00
reverend
60e231d1ca Form Tweaking 2020-07-31 23:35:17 +02:00
reverend
013769597d Adding Image Component 2020-07-31 23:35:01 +02:00
reverend
07830c671d Renaming place to placeTeaser 2020-07-31 23:34:39 +02:00
reverend
907e0602ce Refactoring markup 2020-07-31 23:12:40 +02:00
reverend
ab7c6c8d84 Providing context and variations of input 2020-07-31 23:12:29 +02:00
reverend
c05a286f84 Styling disabled input 2020-07-31 23:12:06 +02:00
reverend
e49803cb81 Deleting obsolete components 2020-07-31 23:11:38 +02:00
18 changed files with 126 additions and 109 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 Normal file
View File

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

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

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

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

@ -0,0 +1,23 @@
<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>

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

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

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

@ -1,3 +1,7 @@
{ {
"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,10 +1,28 @@
<h3>Regular with message</h3>
<div class="LP-Input"> <div class="LP-Input">
<label for="input123" class="LP-Input__Label">First name</label> <label for="input123" class="LP-Input__Label">{{label}}</label>
<input type="text" id="input123" class="LP-Input__Field"/> <input type="text" id="input123" class="LP-Input__Field" placeholder="{{placeholder}}"/>
<span class="LP-Input__Message">Field is required</span> <span class="LP-Input__Message">{{message}}</span>
</div> </div>
<h3>Regular without message</h3>
<div class="LP-Input"> <div class="LP-Input">
<label for="input123" class="LP-Input__Label">First name</label> <label for="input123" class="LP-Input__Label">{{label}}</label>
<input type="text" id="input123" class="LP-Input__Field" disabled="disabled"/> <input type="text" id="input123" class="LP-Input__Field" placeholder="{{placeholder}}"/>
<span class="LP-Input__Message">Field is required</span> </div>
<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
View File

@ -1,10 +0,0 @@
.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
View File

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

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

@ -1,3 +0,0 @@
<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 'place/place'; @import 'placeTeaser/placeTeaser';
@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: 0 15px; padding: 6px 15px;
&--wider{ &--wider{
flex: 5 1 200px; flex: 5 1 200px;
@ -62,7 +62,8 @@
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;
} }
} }
} }

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

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

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

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

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

@ -1,12 +1,14 @@
<article class="LP-Place"> <article class="LP-Place">
<img class="LP-Place__Image" src="{{image}}"/> <div class="LP-Place__Image">
<div class="LP-Place__Assets"> <img class="LP-Image" src="{{image}}"/>
</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-TextSection LP-Place__Description"> <p class="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.ttf'), url('fonts/Montserrat/Montserrat-Regular.otf'),
url('fonts/Montserrat/Montserrat-Bold.ttf'), url('fonts/Montserrat/Montserrat-Bold.otf'),
url('fonts/Montserrat/Montserrat-Italic.ttf') url('fonts/Montserrat/Montserrat-Italic.otf')
; ;
} }
@ -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: 390px; $-viewport-extra-small: 450px;
@import '01_Atoms/atoms'; @import '01_Atoms/atoms';

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 75 KiB