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

Compare commits

..

9 Commits
ac0951ba6e ... 71fda3ddbf

Author SHA1 Message Date
reverend
71fda3ddbf Cleaned out preview 2020-08-01 00:27:55 +02:00
reverend
a20d599e3f Restructured PlaceTeaser 2020-08-01 00:27:38 +02:00
reverend
48d32a8dac Moving 2020-08-01 00:27:15 +02:00
reverend
915a70e270 Renamed teaser to detail 2020-08-01 00:26:57 +02:00
reverend
5c6303f653 Cleaned Molecules 2020-08-01 00:26:35 +02:00
reverend
906e037c5c Moved Styles and included other components 2020-08-01 00:10:10 +02:00
reverend
0ffb2d5bc6 Moved cases to variants 2020-08-01 00:09:34 +02:00
reverend
8048aea9df Renamed text to paragraph 2020-08-01 00:09:09 +02:00
reverend
afb1397f4a Adding a another variation of headline 2020-08-01 00:08:07 +02:00
22 changed files with 100 additions and 89 deletions

3
components/01_Atoms/_atoms.scss

@ -1,8 +1,9 @@
@import 'link/link';
@import 'headline/headline';
@import 'text/text';
@import 'paragraph/paragraph';
@import 'icon/icon';
@import 'button/button';
@import 'checkbox/checkbox';
@import 'input/input';
@import 'image/image';
@import 'logo/logo';

10
components/01_Atoms/headline/_headline.scss

@ -15,5 +15,13 @@
&--inline{
display: inline;
}
}
&--teaser{
font-family: $-primary-sans-serif-font;
color: $-secondary-color;
font-size: 1rem;
padding: 0px;
margin: 0px;
}
}

6
components/01_Atoms/headline/headline.config.json

@ -9,6 +9,12 @@
"context": {
"modifier": "--main"
}
},
{
"name": "teaser",
"context": {
"modifier": "--teaser"
}
}
]
}

27
components/01_Atoms/input/input.config.json

@ -1,7 +1,28 @@
{
"context": {
"label": "Enter your value here",
"placeholder": "A sample value",
"message": "Please fill in anything valuable"
}
"placeholder": "A sample value"
},
"variants": [
{
"name": "With message",
"context":{
"message": "Please fill in anything valuable"
}
},
{
"name": "disabled",
"context": {
"modifier": "--disabled",
"disabled": true
}
},
{
"name": "error",
"context": {
"modifier": "--error",
"message": "This field is required"
}
}
]
}

33
components/01_Atoms/input/input.hbs

@ -1,28 +1,11 @@
<h3>Regular with message</h3>
<div class="LP-Input">
<div class="LP-Input LP-Input{{modifier}}">
<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>
<h3>Regular without message</h3>
<div class="LP-Input">
<label for="input123" class="LP-Input__Label">{{label}}</label>
<input type="text" id="input123" class="LP-Input__Field" placeholder="{{placeholder}}"/>
</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}}"/>
<input type="text" id="input123" class="LP-Input__Field" placeholder="{{placeholder}}"
{{#if disabled}}
disabled="disabled"
{{/if}}
/>
{{#if message}}
<span class="LP-Input__Message">{{message}}</span>
{{/if}}
</div>

0
components/02_Molecules/logo/_logo.scss → components/01_Atoms/logo/_logo.scss

0
components/02_Molecules/logo/logo.config.json → components/01_Atoms/logo/logo.config.json

0
components/02_Molecules/logo/logo.hbs → components/01_Atoms/logo/logo.hbs

13
components/01_Atoms/paragraph/_paragraph.scss Normal file

@ -0,0 +1,13 @@
.LP-Paragraph {
color: black;
font-family: $-primary-serif-font;
font-size: 1.2rem;
&--detail{
font-family: $-primary-sans-serif-font;
padding: 0;
margin: 0;
margin-top: 5px;
font-size: 0.9rem;
}
}

11
components/01_Atoms/text/text.config.json → components/01_Atoms/paragraph/paragraph.config.json

@ -1,5 +1,14 @@
{
"context": {
"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."
}
},
"variants": [
{
"name": "Detail",
"context":{
"text": "Hamm (Westf)",
"modifier": "--detail"
}
}
]
}

1
components/01_Atoms/paragraph/paragraph.hbs Normal file

@ -0,0 +1 @@
<p class="LP-Paragraph LP-Paragraph{{modifier}}">{{text}}</p>

5
components/01_Atoms/text/_text.scss

@ -1,5 +0,0 @@
.LP-Text {
color: black;
font-family: $-primary-serif-font;
font-size: 1.2rem;
}

1
components/01_Atoms/text/text.hbs

@ -1 +0,0 @@
<p class="LP-Text LP-Content">{{text}}</p>

4
components/02_Molecules/_molecules.scss

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

36
components/02_Molecules/placeTeaser/_placeTeaser.scss

@ -1,42 +1,22 @@
.LP-Place{
width: 280px;
.LP-Place__Image{
width: 280px;
height: 165px;
object-fit: fill;
}
.LP-Place__Assets{
.LP-Place__Meta{
display: flex;
align-items: center;
justify-content: space-between;
margin-top: 0.8rem;
padding: 0 10px;
padding-bottom: 10px;
}
.LP-Place__Info{
.LP-Place__Title{
font-family: $-primary-sans-serif-font;
color: $-secondary-color;
font-size: 1rem;
padding: 0px;
margin: 0px;
}
.LP-Place__Description{
font-family: $-primary-sans-serif-accent-font;
color: $-secondary-color;
}
.LP-Place__Detail{
font-family: $-primary-sans-serif-font;
padding: 0;
margin: 0;
margin-top: 5px;
font-size: 0.9rem;
}
}
.LP-Place__Description{
font-family: $-primary-sans-serif-accent-font;
color: $-secondary-color;
display: none;
}
}

3
components/02_Molecules/placeTeaser/placeTeaser.config.json

@ -2,6 +2,7 @@
"context": {
"image": "/images/photo_2020-05-02_18-11-21.jpg",
"title": "Kokerei Wiescherhöfen",
"location": "Hamm (Westfalen)"
"location": "Hamm (Westfalen)",
"description": "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. "
}
}

27
components/02_Molecules/placeTeaser/placeTeaser.hbs

@ -2,21 +2,20 @@
<div class="LP-Place__Image">
<img class="LP-Image" src="{{image}}"/>
</div>
<div class="LP-Place__Detail">
<div class="LP-Place__Meta">
<div class="LP-Place__Info">
<h3 class="LP-Place__Title">{{title}}</h3>
<p class="LP-Place__Detail" >{{location}}</p>
<span class="LP-Place__Title">{{> @headline headline=title modifier='--teaser'}}</span>
<span class="LP-Place__Detail" >{{> @paragraph text=location modifier='--detail'}}</span>
</div>
{{# if description}}
<p class="LP-Place__Description">
{{description}}
</p>
{{/if}}
<ul class="LP-Icon__List">
<li class="LP-Icon__Item"><img class="LP-Icon" src="/icons/favourite.svg"/></li>
<li class="LP-Icon__Item"><img class="LP-Icon" src="/icons/location.svg"/></li>
<li class="LP-Icon__Item"><img class="LP-Icon" src="/icons/flag.svg"/></li>
</ul>
<div class="LP-Place__Description">
{{> @paragraph text=description}}
</div>
<div class="LP-Place__Icons">
<ul class="LP-Icon__List">
<li class="LP-Icon__Item"><img class="LP-Icon" src="/icons/favourite.svg"/></li>
<li class="LP-Icon__Item"><img class="LP-Icon" src="/icons/location.svg"/></li>
<li class="LP-Icon__Item"><img class="LP-Icon" src="/icons/flag.svg"/></li>
</ul>
</div>
</div>
</article>

3
components/03_Organisms/_organisms.scss

@ -4,4 +4,5 @@
@import 'placeGrid/placeGrid';
@import 'placeList/placeList';
@import 'linkList/linkList';
@import 'footer/footer';
@import 'footer/footer';
@import 'form/form';

0
components/02_Molecules/form/_form.scss → components/03_Organisms/form/_form.scss

0
components/02_Molecules/form/form.config.json → components/03_Organisms/form/form.config.json

0
components/02_Molecules/form/form.hbs → components/03_Organisms/form/form.hbs

6
components/_preview.hbs

@ -6,10 +6,6 @@
<title>Preview</title>
</head>
<body>
{{> @header}}
<article class="LP-MainContainer">
{{{ yield }}}
</article>
{{> @footer}}
{{{ yield }}}
</body>
</html>