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

Compare commits

base: Commander1024:3404c1fd28c3b5b53e8dee4931ccb0d46f5bddf8
Branches Tags
Commander1024:master
Commander1024:linklist-add
..
compare: Commander1024:6215b8dd7cd35ea96051d9e5a33082ac5236d5ff
Branches Tags
Commander1024:master
Commander1024:linklist-add

No commits in common. "3404c1fd28c3b5b53e8dee4931ccb0d46f5bddf8" and "6215b8dd7cd35ea96051d9e5a33082ac5236d5ff" have entirely different histories.
3404c1fd28 ... 6215b8dd7c

35 changed files with 160 additions and 201 deletions
Show Stats Expand all files Collapse all files

1
components/01_Atoms/_atoms.scss
View File

@ -7,4 +7,3 @@
@import 'input/input'; @import 'input/input';
@import 'image/image'; @import 'image/image';
@import 'logo/logo'; @import 'logo/logo';
@import 'tag/tag';

14
components/01_Atoms/button/_button.scss
View File

@ -1,17 +1,13 @@
.LP-Button{ .LP-Button{
background-color: $-light-brown; background-color: $-secondary-accent-color;
color: $-grey; color: $-secondary-color;
border: none; border: none;
padding: 8px 14px; padding: 8px 14px;
border-radius: 2px; border-radius: 2px;
font-weight: bold; font-weight: bold;
&:active{ &:active {
background-color: $-wine-red; background-color: $-primary-accent-color;
color:$-almost-white; color: $-secondary-accent-color;
}
&--cancel{
background-color: $-almost-white;
} }
} }

13
components/01_Atoms/button/button.config.json
View File

@ -1,14 +1,3 @@
{ {
"title": "Button",
"context":{
"text": "Click me"
},
"variants": [
{
"name": "Cancel Button",
"context": {
"modifier": "--cancel"
}
}
]
} }

2
components/01_Atoms/button/button.hbs
View File

@ -1 +1 @@
<button class="LP-Button LP-Button{{modifier}}">Click Me</button> <button class="LP-Button">Click Me</button>

2
components/01_Atoms/headline/_headline.scss
View File

@ -1,6 +1,6 @@
.LP-Headline{ .LP-Headline{
font-family: $-primary-sans-serif-font; font-family: $-primary-sans-serif-font;
color: $-grey; color: $-secondary-color;
font-size: 1.7rem; font-size: 1.7rem;
padding-top: 0px; padding-top: 0px;
margin-top: 0px; margin-top: 0px;

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

@ -7,14 +7,14 @@
.LP-Input__Field{ .LP-Input__Field{
border: none; border: none;
border-bottom: 1px solid $-grey; border-bottom: 1px solid $-secondary-color;
padding: 8px; padding: 8px;
margin-bottom: $-margin-bottom; margin-bottom: $-margin-bottom;
&:focus, &:active{ &:focus, &:active{
margin-bottom: $-margin-bottom - 1px; margin-bottom: $-margin-bottom - 1px;
border-bottom: 2px solid $-wine-red; border-bottom: 2px solid $-primary-accent-color;
background-color: $-almost-white; background-color: $-secondary-background-color;
border-radius: 3px 3px 0 0; border-radius: 3px 3px 0 0;
} }
} }
@ -40,19 +40,19 @@
&--error{ &--error{
.LP-Input__Field{ .LP-Input__Field{
margin-bottom: 25px; margin-bottom: 25px;
border-bottom: 2px solid $-wine-red; border-bottom: 2px solid $-primary-accent-color;
margin-bottom: $-margin-bottom - 1px; margin-bottom: $-margin-bottom - 1px;
} }
.LP-Input__Message{ .LP-Input__Message{
color: $-wine-red; color: $-primary-accent-color;
} }
} }
&--disabled{ &--disabled{
.LP-Input__Field, .LP-Input__Field:disabled{ .LP-Input__Field, .LP-Input__Field:disabled{
background-color: transparent; background-color: transparent;
border-bottom: 1px dashed $-grey; border-bottom: 1px dashed $-secondary-color;
cursor: not-allowed; cursor: not-allowed;
label + &{ label + &{
@ -70,7 +70,7 @@
} }
.LP-Input__Label{ .LP-Input__Label{
color: $-grey; color: $-secondary-color;
} }
} }
} }

6
components/01_Atoms/link/_link.scss
View File

@ -1,15 +1,15 @@
.LP-Link { .LP-Link {
color: $-grey; color: $-secondary-color;
text-decoration: none; text-decoration: none;
font-family: $-primary-sans-serif-accent-font; font-family: $-primary-sans-serif-accent-font;
&:hover { &:hover {
color: $-light-brown; color: $-secondary-accent-color;
} }
.LP-Text{ .LP-Text{
font-family: $-primary-sans-serif-accent-font; font-family: $-primary-sans-serif-accent-font;
&:hover{ &:hover{
color: $-light-brown; color: $-secondary-accent-color;
} }
} }
} }

14
components/01_Atoms/tag/_tag.scss
View File

@ -1,14 +0,0 @@
.LP-Tag{
padding: 8px 14px;
background-color: #D7CEC7;
border-radius: 2px;
width: max-content;
.LP-Paragraph{
padding: 0;
margin: 0;
font-family: $-primary-sans-serif-font;
font-size: 1em;
display: inline;
}
}

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

@ -1,6 +0,0 @@
{
"title": "Tag",
"context": {
"text": "Im a tag"
}
}

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

@ -1,3 +0,0 @@
<div class="LP-Tag">
{{> @paragraph text=text}}
</div>

2
components/02_Molecules/_molecules.scss
View File

@ -1,3 +1,3 @@
@import 'textSection/textSection'; @import 'textSection/textSection';
@import 'placeTeaser/placeTeaser'; @import 'placeTeaser/placeTeaser';
@import 'tagList/tagList'; @import 'securityMeasureList/securityMeasureList';

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

@ -1,19 +1,12 @@
.LP-PlaceTeaser{ .LP-Place{
width: 280px; width: 280px;
.LP-PlaceTeaser__Image{ .LP-Place__Image{
height: 165px; height: 165px;
width: 280px; object-fit: fill;
overflow: hidden;
.LP-Image{
max-width:unset;
max-height:unset;
object-fit: cover;
}
} }
.LP-PlaceTeaser__Meta{ .LP-Place__Meta{
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
@ -29,16 +22,16 @@
.LP-Headline{ .LP-Headline{
font-family: $-primary-sans-serif-font; font-family: $-primary-sans-serif-font;
color: $-grey; color: $-secondary-color;
font-size: 1rem; font-size: 1rem;
padding: 0px; padding: 0px;
margin: 0px; margin: 0px;
} }
} }
.LP-PlaceTeaser__Description{ .LP-Place__Description{
font-family: $-primary-sans-serif-accent-font; font-family: $-primary-sans-serif-accent-font;
color: $-grey; color: $-secondary-color;
display: none; display: none;
} }

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

@ -1,16 +1,16 @@
<article class="LP-PlaceTeaser"> <article class="LP-Place">
<div class="LP-PlaceTeaser__Image"> <div class="LP-Place__Image">
<img class="LP-Image" src="{{image}}"/> <img class="LP-Image" src="{{image}}"/>
</div> </div>
<div class="LP-PlaceTeaser__Meta"> <div class="LP-Place__Meta">
<div class="LP-PlaceTeaser__Info"> <div class="LP-Place__Info">
<span class="LP-PlaceTeaser__Title">{{> @headline headline=title modifier='--teaser'}}</span> <span class="LP-Place__Title">{{> @headline headline=title modifier='--teaser'}}</span>
<span class="LP-PlaceTeaser__Detail" >{{> @paragraph text=location}}</span> <span class="LP-Place__Detail" >{{> @paragraph text=location}}</span>
</div> </div>
<div class="LP-PlaceTeaser__Description"> <div class="LP-Place__Description">
{{> @paragraph text=description}} {{> @paragraph text=description}}
</div> </div>
<div class="LP-PlaceTeaser__Icons"> <div class="LP-Place__Icons">
<ul class="LP-Icon__List"> <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/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/location.svg"/></li>

17
components/02_Molecules/securityMeasureList/_securityMeasureList.scss Normal file
View File

@ -0,0 +1,17 @@
.LP-SecurityMeasure__List{
list-style-type: none;
display: flex;
padding:0;
margin: 0;
.LP-SecurityMeasure__Item{
margin: 0 8px;
padding: 8px 14px;
background-color: #D7CEC7;
border-radius: 2px;
.LP-Text{
font-family: $-primary-sans-serif-font;
font-size: 1.2rem;
}
}
}

1
components/02_Molecules/securityMeasureList/securityMeasureList.config.json Normal file
View File

@ -0,0 +1 @@
{}

7
components/02_Molecules/securityMeasureList/securityMeasureList.hbs Normal file
View File

@ -0,0 +1,7 @@
<ul class="LP-SecurityMeasure__List">
<li class="LP-SecurityMeasure__Item"><span class="LP-Text">Kameras</span></li>
<li class="LP-SecurityMeasure__Item"><span class="LP-Text">Zaun</span></li>
<li class="LP-SecurityMeasure__Item"><span class="LP-Text">Wachhund</span></li>
<li class="LP-SecurityMeasure__Item"><span class="LP-Text">Alarmanlage</span></li>
<li class="LP-SecurityMeasure__Item"><span class="LP-Text">Selbstschussanlage</span></li>
</ul>

13
components/02_Molecules/tagList/_tagList.scss
View File

@ -1,13 +0,0 @@
.LP-TagList{
.LP-TagList__List{
list-style-type: none;
display: flex;
flex-wrap: wrap;
padding:0;
margin: 0;
.LP-TagList__Item{
margin: 6px;
}
}
}

11
components/02_Molecules/tagList/tagList.config.json
View File

@ -1,11 +0,0 @@
{
"title": "TagList",
"context": {
"tags": [
"Kamera",
"Wachhund",
"Zaun",
"Security"
]
}
}

7
components/02_Molecules/tagList/tagList.hbs
View File

@ -1,7 +0,0 @@
<div class="LP-TagList">
<ul class="LP-TagList__List">
{{#each tags}}
<li class="LP-TagList__Item">{{> @tag text=this}}</li>
{{/each}}
</ul>
</div>

7
components/02_Molecules/textSection/textSection.config.json
View File

@ -1,6 +1 @@
{ {}
"context": {
"headline": "At vero eos et accusam et justo duo dolores",
"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."
}
}

2
components/02_Molecules/textSection/textSection.hbs
View File

@ -1,4 +1,4 @@
<article class="LP-TextSection"> <article class="LP-TextSection">
{{> @headline headline=headline}} {{> @headline headline=headline}}
{{> @paragraph text=text}} {{> @text text=text}}
</article> </article>

1
components/03_Organisms/_organisms.scss
View File

@ -1,5 +1,6 @@
@import 'header/header'; @import 'header/header';
@import 'navigation/navigation'; @import 'navigation/navigation';
@import 'introduction/introduction';
@import 'placeGrid/placeGrid'; @import 'placeGrid/placeGrid';
@import 'placeList/placeList'; @import 'placeList/placeList';
@import 'linkList/linkList'; @import 'linkList/linkList';

4
components/03_Organisms/footer/_footer.scss
View File

@ -1,7 +1,7 @@
.LP-Footer{ .LP-Footer{
margin-top: 75px; margin-top: 75px;
width: 100%; width: 100%;
background-color: $-grey; background-color: $-secondary-color;
padding: 25px; padding: 25px;
.LP-LinkList__List{ .LP-LinkList__List{
@ -14,7 +14,7 @@
width: auto; width: auto;
.LP-Text{ .LP-Text{
color: $-almost-white; color: $-secondary-background-color;
font-size: 17px; font-size: 17px;
} }

10
components/03_Organisms/introduction/_introduction.scss Normal file
View File

@ -0,0 +1,10 @@
.LP-Introduction{
.LP-Headline{
font-size: 2rem;
}
.LP-Text{
font-size: 1.3rem;
}
}

3
components/03_Organisms/introduction/introduction.config.json Normal file
View File

@ -0,0 +1,3 @@
{
"context": {}
}

4
components/03_Organisms/introduction/introduction.hbs Normal file
View File

@ -0,0 +1,4 @@
<div class="LP-Introduction">
{{> @textsection headline='Welcome to the urban exploring registry' 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.'}}
</div>

10
components/03_Organisms/linkList/_linkList.scss
View File

@ -6,7 +6,7 @@
padding: 0; padding: 0;
.LP-LinkList__Item{ .LP-LinkList__Item{
border-left: 1px solid $-light-brown; border-left: 1px solid $-secondary-accent-color;
width: 100%; width: 100%;
margin-top: 12px; margin-top: 12px;
height: 55px; height: 55px;
@ -16,7 +16,7 @@
padding: $-link-padding 0 $-link-padding $-link-padding; padding: $-link-padding 0 $-link-padding $-link-padding;
width: calc(100% - $-link-padding); width: calc(100% - $-link-padding);
display: block; display: block;
color: $-grey; color: $-secondary-color;
&--iconized{ &--iconized{
@ -34,8 +34,8 @@
&:hover{ &:hover{
background-color: $-almost-white; background-color: $-secondary-background-color;
color: $-wine-red; color: $-primary-accent-color;
} }
.LP-Text{ .LP-Text{
@ -48,7 +48,7 @@
.LP-Link__Icon{ .LP-Link__Icon{
width: 2em; width: 2em;
height: 2em; height: 2em;
fill: $-wine-red; fill: $-primary-accent-color;
line-height: 5em; line-height: 5em;
} }

4
components/03_Organisms/navigation/_navigation.scss
View File

@ -14,11 +14,11 @@
} }
.LP-Link__Text { .LP-Link__Text {
color: $-grey; color: $-secondary-color;
font-weight: bold; font-weight: bold;
text-shadow: 0px 0px 20px white; text-shadow: 0px 0px 20px white;
&:hover{ &:hover{
color: $-wine-red; color: $-primary-accent-color;
} }
} }
} }

43
components/03_Organisms/placeGrid/_placeGrid.scss
View File

@ -1,23 +1,26 @@
.LP-PlaceGrid{ .LP-Place__Grid{
.LP-PlaceGrid__Grid{ margin: 0;
margin: 0; padding: 0;
padding: 0; list-style-type: none;
list-style-type: none; display: flex;
display: flex; flex-direction: row;
flex-direction: row; flex-wrap: wrap;
flex-wrap: wrap;
.LP-PlaceGrid__Item{ >.LP-Place__Item{
margin: 0 15px; margin: 0 15px;
margin-bottom: 50px;
}
.LP-Link{ margin-bottom: 50px;
.LP-PlaceTeaser{ }
&:hover{
box-shadow: 0 0 2px $-grey; .LP-Link{
} .LP-Place__Description{
} display:none;
} }
}
.LP-Place{
&:hover{
box-shadow: 0 0 8px $-secondary-color;
}
}
}
} }

32
components/03_Organisms/placeGrid/placeGrid.config.json
View File

@ -1,31 +1 @@
{ {}
"title": "PlaceGrid",
"context":{
"places": [
{
"image": "/images/photo_2020-04-09_18-27-13.jpg",
"name": "Haus Maikotten",
"location": "Münster (westfalen)",
"description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."
},
{
"image": "/images/Bildschirmfoto_von_2020-07-13_11-03-07.png",
"name": "Kokerei in Hamm",
"location": "Hamm (westfalen)",
"description": ""
},
{
"image": "/images/Bildschirmfoto_von_2020-07-13_20-15-00.png",
"name": "Noch ein Zementwerk",
"location": "Beckum (Westfalen)",
"description": ""
},
{
"image": "/images/photo_2020-05-02_18-11-21.jpg",
"name": "Zementwerk Mersmann",
"location": "Beckum (Westfalen)",
"description": ""
}
]
}
}

47
components/03_Organisms/placeGrid/placeGrid.hbs
View File

@ -1,12 +1,37 @@
<div class="LP-PlaceGrid"> <div class="LP-Content__Wrapper">
{{> @headline headline='Explorere the latest locations'}} <div class="LP-Content">
<ul class="LP-PlaceGrid__Grid"> {{> @headline headline='Explorere the latest locations'}}
{{#each places}} <ul class="LP-Place__Grid">
<li class="LP-PlaceGrid__Item"> <li class="LP-Place__Item">
<a href="#" class="LP-Link"> <a href="#" class="LP-Link">{{> @place image='/images/photo_2020-04-09_18-27-13.jpg' title='Haus Maikotten' location='Münster (westfalen)' description='Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.'}}</a>
{{> @placeteaser image=this.image title=this.name location=this.location description=this.description}} </li>
</a> <li class="LP-Place__Item">
</li> <a href="#" class="LP-Link">{{> @place image='/images/Bildschirmfoto_von_2020-07-13_11-03-07.png' title='Kokerei in Hamm' location='Hamm (westfalen)' }}</a>
{{/each}} </li>
</ul> <li class="LP-Place__Item">
<a href="#" class="LP-Link">{{> @place image='/images/Bildschirmfoto_von_2020-07-13_20-15-00.png' title='Noch ein Zementwerk' location='Beckum (Westfalen)' }}</a>
</li>
<li class="LP-Place__Item">
<a href="#" class="LP-Link">{{> @place image='/images/photo_2020-05-02_18-11-21.jpg' title='Zementwerk Mersmann' location='Beckum (Westfalen)' }}</a>
</li>
<li class="LP-Place__Item">
<a href="#" class="LP-Link">{{> @place image='/images/Bildschirmfoto_von_2020-07-13_20-15-00.png' title='Noch ein Zementwerk' location='Beckum (Westfalen)' }}</a>
</li>
<li class="LP-Place__Item">
<a href="#" class="LP-Link">{{> @place image='/images/photo_2020-04-09_18-27-13.jpg' title='Haus Maikotten' location='Münster (westfalen)' }}</a>
</li>
<li class="LP-Place__Item">
<a href="#" class="LP-Link">{{> @place image='/images/Bildschirmfoto_von_2020-07-13_20-15-00.png' title='Noch ein Zementwerk' location='Beckum (Westfalen)' }}</a>
</li>
<li class="LP-Place__Item">
<a href="#" class="LP-Link">{{> @place image='/images/photo_2020-05-02_18-11-21.jpg' title='Zementwerk Mersmann' location='Beckum (Westfalen)' }}</a>
</li>
<li class="LP-Place__Item">
<a href="#" class="LP-Link">{{> @place image='/images/Bildschirmfoto_von_2020-07-13_20-15-00.png' title='Noch ein Zementwerk' location='Beckum (Westfalen)' }}</a>
</li>
<li class="LP-Place__Item">
<a href="#" class="LP-Link">{{> @place image='/images/Bildschirmfoto_von_2020-07-13_11-03-07.png' title='Kokerei in Hamm' location='Hamm (westfalen)' }}</a>
</li>
</ul>
</div>
</div> </div>

6
components/03_Organisms/placeList/_placeList.scss
View File

@ -4,15 +4,15 @@
.LP-Link{ .LP-Link{
.LP-Place{ .LP-Place{
&:hover{ &:hover{
color: $-grey; color: $-secondary-color;
background-color: $-almost-white; background-color: $-secondary-background-color;
$-hover-offset: 2px; $-hover-offset: 2px;
position: relative; position: relative;
left: -$-hover-offset; left: -$-hover-offset;
>.LP-Place__Image{ >.LP-Place__Image{
border-left: $-hover-offset $-grey solid; border-left: $-hover-offset $-secondary-color solid;
} }
} }
} }

2
components/04_Templates/home/_home.scss
View File

@ -4,5 +4,5 @@
} }
.LP-HorizontalLine{ .LP-HorizontalLine{
color: $-grey; color: $-secondary-color;
} }

4
components/04_Templates/placeOverview/_placeOverview.scss
View File

@ -4,7 +4,7 @@
.LP-PlaceOveriew__Image{ .LP-PlaceOveriew__Image{
width: 700px; width: 700px;
height: 450px; height: 450px;
box-shadow: 0 0 10px $-grey; box-shadow: 0 0 10px $-secondary-color;
object-fit: cover; object-fit: cover;
float: right; float: right;
@ -28,7 +28,7 @@
.LP-PlaceOverView__ImageItem{ .LP-PlaceOverView__ImageItem{
img { img {
box-shadow: 0 0 5px $-grey; box-shadow: 0 0 5px $-secondary-color;
height: 200px; height: 200px;
width: 290px; width: 290px;
object-fit: cover; object-fit: cover;

10
components/components.scss
View File

@ -16,11 +16,11 @@
; ;
} }
$-beige: #D7CEC7; $-primary-color: #D7CEC7;
$-grey: #565656; $-secondary-color: #565656;
$-wine-red: #76323F; $-primary-accent-color: #76323F;
$-light-brown: #C09F80; $-secondary-accent-color: #C09F80;
$-almost-white: #f9f9f9; $-secondary-background-color: #f9f9f9;
$-primary-sans-serif-font: Montserrat, Helvetica, sans-serif; $-primary-sans-serif-font: Montserrat, Helvetica, sans-serif;
$-primary-serif-font: Crimson, Times, serif; $-primary-serif-font: Crimson, Times, serif;