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

New Component

Browse Source
This commit is contained in:
reverend 2020-08-09 23:43:40 +02:00
parent f663864c29
commit 6d69fb6c29
4 changed files with 66 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
components/03_Organisms/_organisms.scss
View File

@ -4,3 +4,4 @@
@import 'linkList/linkList'; @import 'linkList/linkList';
@import 'footer/footer'; @import 'footer/footer';
@import 'form/form'; @import 'form/form';
@import 'imageGrid/imageGrid';

42
components/03_Organisms/imageGrid/_imageGrid.scss Normal file
View File

@ -0,0 +1,42 @@
.LP-ImageGrid{
.LP-ImageGrid__List{
list-style-type: none;
display: grid;
grid-template-columns: repeat(auto-fit, 300px);
align-content: space-around;
justify-content: center;
margin: 0px;
padding: 0px;
}
.LP-ImageGrid__Item{
margin-top:10px;
}
.LP-Link{
overflow: hidden;
}
.LP-Image {
box-shadow: 0 0 5px $-grey;
height: 200px;
width: 290px;
object-fit: cover;
}
}
@media(max-width: $-viewport-small){
.LP-ImageGrid{
.LP-ImageGrid__List{
grid-template-columns: 1fr;
.LP-Image{
box-shadow: 0 0 5px $-grey;
height: auto;
width: 100%;
object-fit: cover;
}
}
}
}

11
components/03_Organisms/imageGrid/imageGrid.config.json Normal file
View File

@ -0,0 +1,11 @@
{
"context": {
"images": [
"/images/Bildschirmfoto_von_2020-07-13_11-03-07.png",
"/images/photo_2020-05-02_18-11-21.jpg",
"/images/Bildschirmfoto_von_2020-07-13_20-15-00.png",
"/images/photo_2020-05-02_18-11-21.jpg",
"/images/Bildschirmfoto_von_2020-07-13_11-03-07.png"
]
}
}

11
components/03_Organisms/imageGrid/imageGrid.hbs Normal file
View File

@ -0,0 +1,11 @@
<div class="LP-Layout__Centered">
<div class="LP-ImageGrid">
<ul class="LP-ImageGrid__List">
{{#each images}}
<li class="LP-ImageGrid__Item">
<a href="#" class="LP-Link"><img class="LP-Image" src="{{this}}"></a>
</li>
{{/each}}
</ul>
</div>
</div>