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:71fda3ddbfe19f5221c4ef735b33b46a25d649ed
Branches Tags
Commander1024:master
Commander1024:linklist-add

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
Show Stats Expand all files Collapse all files

3
components/01_Atoms/_atoms.scss
View File

@ -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
View File

@ -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
View File

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

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

@ -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
View File

@ -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
View File

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

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

13
components/01_Atoms/paragraph/_paragraph.scss Normal file
View 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
View File

@ -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
View File

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

5
components/01_Atoms/text/_text.scss
View File

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

1
components/01_Atoms/text/text.hbs
View File

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

4
components/02_Molecules/_molecules.scss
View File

@ -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
View File

@ -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
View File

@ -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
View File

@ -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
View File

@ -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
View File

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

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

6
components/_preview.hbs
View File

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