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

Compare commits

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

No commits in common. "d174d59197b5aca80610385c222b4cd3e6e29e39" and "3404c1fd28c3b5b53e8dee4931ccb0d46f5bddf8" have entirely different histories.
d174d59197 ... 3404c1fd28

6 changed files with 92 additions and 128 deletions
Show Stats Expand all files Collapse all files

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

@ -41,53 +41,5 @@
color: $-grey; color: $-grey;
display: none; display: none;
} }
}
@media(min-width: $-viewport-small){
.LP-PlaceTeaser--extended{
display: flex;
flex-direction: row;
width: auto;
padding-right: 25px;
height: 165px;
.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,13 +4,5 @@
"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"
}
}
]
} }

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

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

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

@ -1,28 +1,58 @@
.LP-PlaceList{ .LP-Place__List{
.LP-PlaceList__List{ list-style-type: none;
list-style-type: none;
.LP-Link{
.LP-Link{ .LP-Place{
.LP-Place{ &:hover{
&:hover{ color: $-grey;
color: $-grey; background-color: $-almost-white;
background-color: $-almost-white;
$-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 $-grey solid; }
} }
} }
} }
}
.LP-Place__Item{
.LP-PlaceList__Item{ max-width: 900px;
max-width: 900px; min-width: 450px;
min-width: 450px; margin: 18px 0;
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;
}
}
}
} }

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

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