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

Adapting ImageGrid

Browse Source
This commit is contained in:
reverend
2021-10-24 19:39:00 +02:00
parent bbcbd19ef5
commit daaa3e11a7
5 changed files with 151 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
components/03_Organisms/_organisms.scss
View File

@@ -4,6 +4,6 @@
@import 'linkList/linkList';
@import 'footer/footer';
@import 'form/form';
//@import 'imageGrid/imageGrid';
@import 'imageGrid/imageGrid';
//@import 'osmMap/osmMap';
//@import 'userProfile/userProfile';

25
components/03_Organisms/imageGrid/_imageGrid.scss
View File

@@ -1,11 +1,24 @@
@use "sass:math";
.LP-ImageGrid{
@include RV-FlexGrid(290px, 200px);
@include RV-ElementList;
@include RV-Spacing__Inner--small;
&__Container {
list-style-type: none;
@include RV-Grid;
--itemWidth: 290px;
--itemHeight: 200px;
grid-template-rows: repeat(auto-fit, var(--itemHeight));
gap: $-spacing-small;
}
&__Item {
position: relative;
@include RV-ContentCrop;
//@include RV-ContentCrop;
height: var(--itemHeight);
.LP-Image {
height: 100%;
height: 100%;
}
&--add {
.LP-Link {
@@ -50,8 +63,8 @@
height: #{$-spacing-small * 2};
width: #{$-spacing-small * 2};
position:relative;
left: #{($-spacing-large - $-spacing-small) / 3.2};
top: #{($-spacing-large - $-spacing-small) / 3.2};
left: #{math.div(($-spacing-large - $-spacing-small), 3.2)};
top: #{math.div(($-spacing-large - $-spacing-small), 3.2)};
}
}

2
components/03_Organisms/imageGrid/imageGrid.hbs
View File

@@ -4,7 +4,7 @@
{{#each images}}
<li class="LP-ImageGrid__Item">
<a href="#{{this.current_id}}" class="LP-Link">
<img class="LP-Image" src="{{this}}">
<img class="LP-Image" src="{{this.url}}">
</a>
<span class="LP-ImageGrid__DeleteItem" title="Bild löschen">
<a href="#" class="LP-Link">