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
Show Stats 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{ .LP-Place{
width: 280px;
.LP-Place__Image{ .LP-Place__Image{
width: 280px;
height: 165px; height: 165px;
object-fit: fill; object-fit: fill;
} }
.LP-Place__Assets{ .LP-Place__Meta{
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
margin-top: 0.8rem;
padding: 0 10px;
padding-bottom: 10px; padding-bottom: 10px;
} }
.LP-Place__Info{ .LP-Place__Description{
font-family: $-primary-sans-serif-accent-font;
.LP-Place__Title{ color: $-secondary-color;
display: none;
} }
.LP-Place__Description{
font-family: $-primary-sans-serif-accent-font;
color: $-secondary-color;
}
.LP-Place__Detail{
}
}
} }

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

@ -5,15 +5,17 @@
<div class="LP-Place__Meta"> <div class="LP-Place__Meta">
<div class="LP-Place__Info"> <div class="LP-Place__Info">
<span class="LP-Place__Title">{{> @headline headline=title modifier='--teaser'}}</span> <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>
<div class="LP-Place__Description"> <div class="LP-Place__Description">
{{> @paragraph text=description}} {{> @paragraph text=description}}
</div> </div>
<ul class="LP-Icon__List"> <div class="LP-Place__Icons">
<li class="LP-Icon__Item"><img class="LP-Icon" src="/icons/favourite.svg"/></li> <ul class="LP-Icon__List">
<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/favourite.svg"/></li>
<li class="LP-Icon__Item"><img class="LP-Icon" src="/icons/flag.svg"/></li> <li class="LP-Icon__Item"><img class="LP-Icon" src="/icons/location.svg"/></li>
</ul> <li class="LP-Icon__Item"><img class="LP-Icon" src="/icons/flag.svg"/></li>
</ul>
</div>
</div> </div>
</article> </article>