Extended Version of the placeteaser
This commit is contained in:
parent
3404c1fd28
commit
3f29a83f3f
@ -42,4 +42,50 @@
|
|||||||
display: none;
|
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;
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
@ -4,5 +4,13 @@
|
|||||||
"title": "Kokerei Wiescherhöfen",
|
"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. "
|
"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"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
]
|
||||||
}
|
}
|
||||||
@ -1,4 +1,4 @@
|
|||||||
<article class="LP-PlaceTeaser">
|
<article class="LP-PlaceTeaser LP-PlaceTeaser{{modifier}}">
|
||||||
<div class="LP-PlaceTeaser__Image">
|
<div class="LP-PlaceTeaser__Image">
|
||||||
<img class="LP-Image" src="{{image}}"/>
|
<img class="LP-Image" src="{{image}}"/>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -1,58 +1,28 @@
|
|||||||
.LP-Place__List{
|
.LP-PlaceList{
|
||||||
list-style-type: none;
|
.LP-PlaceList__List{
|
||||||
|
list-style-type: none;
|
||||||
.LP-Link{
|
|
||||||
.LP-Place{
|
.LP-Link{
|
||||||
&:hover{
|
.LP-Place{
|
||||||
color: $-grey;
|
&:hover{
|
||||||
background-color: $-almost-white;
|
color: $-grey;
|
||||||
|
background-color: $-almost-white;
|
||||||
|
|
||||||
$-hover-offset: 2px;
|
|
||||||
position: relative;
|
$-hover-offset: 2px;
|
||||||
left: -$-hover-offset;
|
position: relative;
|
||||||
>.LP-Place__Image{
|
left: -$-hover-offset;
|
||||||
border-left: $-hover-offset $-grey solid;
|
>.LP-Place__Image{
|
||||||
}
|
border-left: $-hover-offset $-grey solid;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
}
|
||||||
.LP-Place__Item{
|
|
||||||
max-width: 900px;
|
.LP-PlaceList__Item{
|
||||||
min-width: 450px;
|
max-width: 900px;
|
||||||
margin: 18px 0;
|
min-width: 450px;
|
||||||
.LP-Place{
|
margin: 18px 0;
|
||||||
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;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
@ -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": ""
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -1,32 +1,12 @@
|
|||||||
<ul class="LP-Place__List">
|
<div class="LP-PlaceList">
|
||||||
<li class="LP-Place__Item">
|
{{> @headline headline='Listing our places'}}
|
||||||
<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>
|
<ul class="LP-PlaceList__List">
|
||||||
</li>
|
{{#each places}}
|
||||||
<li class="LP-Place__Item">
|
<li class="LP-PlaceList__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>
|
<a href="#" class="LP-Link">
|
||||||
</li>
|
{{> @placeteaser image=this.image title=this.name location=this.location description=this.description}}
|
||||||
<li class="LP-Place__Item">
|
</a>
|
||||||
<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>
|
{{/each}}
|
||||||
<li class="LP-Place__Item">
|
</ul>
|
||||||
<a href="#" class="LP-Link">{{> @place image='/images/photo_2020-05-02_18-11-21.jpg' title='Zementwerk Mersmann' location='Beckum (Westfalen)' }}</a>
|
</div>
|
||||||
</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>
|
|
||||||
Loading…
Reference in New Issue
Block a user