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

Restructured PlaceTeaser

Browse Source
This commit is contained in:
reverend
2020-08-01 00:27:38 +02:00
parent 48d32a8dac
commit a20d599e3f
2 changed files with 16 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

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

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

@@ -5,15 +5,17 @@
<div class="LP-Place__Meta">
<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='--teaser'}}</span>
<span class="LP-Place__Detail" >{{> @paragraph text=location modifier='--detail'}}</span>
</div>
<div class="LP-Place__Description">
{{> @paragraph text=description}}
</div>
<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 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>
</div>
</article>