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

Extended Version of the placeteaser

Browse Source
This commit is contained in:
reverend 2020-08-01 10:57:00 +02:00
parent 3404c1fd28
commit 3f29a83f3f
6 changed files with 126 additions and 92 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -42,4 +42,50 @@
display: none;
}
&--extended{
display: flex;
flex-direction: row;
width: auto;
padding-right: 25px;
.LP-PlaceTeaser__Meta{
margin: 0;
padding: 5px;
padding-left: 25px;
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: flex-start;
.LP-PlaceTeaser__Info{
.LP-Headline{
font-size: 28px;
}
}
.LP-PlaceTeaser__Icons{
margin-top: auto;
ul{
padding: 0;
margin: 0;
}
}
}
.LP-PlaceTeaser__Description{
display: block;
max-height: 55px;
overflow: hidden;
}
.LP-PlaceTeaser__Image{
height:165px;
width: 280px;
flex-shrink: 0;
flex-grow: 0;
}
}
}

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

@ -4,5 +4,13 @@
"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. "
}
},
"variants": [
{
"name": "Extended",
"context": {
"modifier": "--extended"
}
}
]
}

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

@ -1,4 +1,4 @@
<article class="LP-PlaceTeaser">
<article class="LP-PlaceTeaser LP-PlaceTeaser{{modifier}}">
<div class="LP-PlaceTeaser__Image">
<img class="LP-Image" src="{{image}}"/>
</div>

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

@ -1,58 +1,28 @@
.LP-Place__List{
list-style-type: none;
.LP-Link{
.LP-Place{
&:hover{
color: $-grey;
background-color: $-almost-white;
$-hover-offset: 2px;
position: relative;
left: -$-hover-offset;
>.LP-Place__Image{
border-left: $-hover-offset $-grey solid;
}
}
}
}
.LP-Place__Item{
max-width: 900px;
min-width: 450px;
margin: 18px 0;
.LP-Place{
display: flex;
flex-direction: row;
width: auto;
padding-right: 25px;
.LP-Place__Assets{
margin: 0;
padding: 0;
padding-left: 25px;
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: flex-start;
.LP-Place__Info{
.LP-Place__Title{
font-size: 28px;
}
}
.LP-Icon__List{
justify-self: flex-end;
}
}
>.LP-Place__Image{
height:168px;
width: 280px;
}
}
}
.LP-PlaceList{
.LP-PlaceList__List{
list-style-type: none;
.LP-Link{
.LP-Place{
&:hover{
color: $-grey;
background-color: $-almost-white;
$-hover-offset: 2px;
position: relative;
left: -$-hover-offset;
>.LP-Place__Image{
border-left: $-hover-offset $-grey solid;
}
}
}
}
.LP-PlaceList__Item{
max-width: 900px;
min-width: 450px;
margin: 18px 0;
}
}
}

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

@ -1 +1,31 @@
{}
{
"title": "PlaceList",
"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": ""
}
]
}
}

44
components/03_Organisms/placeList/placeList.hbs
View File

@ -1,32 +1,12 @@
<ul class="LP-Place__List">
<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)' 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>
</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>
<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 class="LP-PlaceList">
{{> @headline headline='Listing our places'}}
<ul class="LP-PlaceList__List">
{{#each places}}
<li class="LP-PlaceList__Item">
<a href="#" class="LP-Link">
{{> @placeteaser image=this.image title=this.name location=this.location description=this.description}}
</a>
</li>
{{/each}}
</ul>
</div>