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

Compare commits

base: Commander1024:71fda3ddbfe19f5221c4ef735b33b46a25d649ed
Branches Tags
Commander1024:master
Commander1024:linklist-add
..
compare: Commander1024:ac0951ba6eb76e793faa14cebf7a9c32b1822786
Branches Tags
Commander1024:master
Commander1024:linklist-add

No commits in common. "71fda3ddbfe19f5221c4ef735b33b46a25d649ed" and "ac0951ba6eb76e793faa14cebf7a9c32b1822786" have entirely different histories.
71fda3ddbf ... ac0951ba6e

22 changed files with 89 additions and 100 deletions
Show Stats Expand all files Collapse all files

3
components/01_Atoms/_atoms.scss
View File

@ -1,9 +1,8 @@
@import 'link/link';
@import 'headline/headline';
@import 'paragraph/paragraph';
@import 'text/text';
@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,13 +15,5 @@
&--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,12 +9,6 @@
"context": {
"modifier": "--main"
}
},
{
"name": "teaser",
"context": {
"modifier": "--teaser"
}
}
]
}

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

@ -1,28 +1,7 @@
{
"context": {
"label": "Enter your value here",
"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"
}
}
]
"placeholder": "A sample value",
"message": "Please fill in anything valuable"
}
}

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

@ -1,11 +1,28 @@
<div class="LP-Input LP-Input{{modifier}}">
<h3>Regular with 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}}"
{{#if disabled}}
disabled="disabled"
{{/if}}
/>
{{#if message}}
<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}}"/>
<span class="LP-Input__Message">{{message}}</span>
{{/if}}
</div>

13
components/01_Atoms/paragraph/_paragraph.scss
View File

@ -1,13 +0,0 @@
.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;
}
}

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

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

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

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

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

@ -1,14 +1,5 @@
{
"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/text/text.hbs Normal file
View File

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

2
components/02_Molecules/_molecules.scss
View File

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

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

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

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

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

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

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

36
components/02_Molecules/placeTeaser/_placeTeaser.scss
View File

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

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

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

27
components/02_Molecules/placeTeaser/placeTeaser.hbs
View File

@ -2,20 +2,21 @@
<div class="LP-Place__Image">
<img class="LP-Image" src="{{image}}"/>
</div>
<div class="LP-Place__Meta">
<div class="LP-Place__Detail">
<div class="LP-Place__Info">
<span class="LP-Place__Title">{{> @headline headline=title modifier='--teaser'}}</span>
<span class="LP-Place__Detail" >{{> @paragraph text=location modifier='--detail'}}</span>
<h3 class="LP-Place__Title">{{title}}</h3>
<p class="LP-Place__Detail" >{{location}}</p>
</div>
<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>
{{# 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>
</article>

1
components/03_Organisms/_organisms.scss
View File

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

6
components/_preview.hbs
View File

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