Adapting ImageGrid

components/03_Organisms/_organisms.scss

@@ -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';

components/03_Organisms/imageGrid/_imageGrid.scss

@@ -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)};
 		}
 	}
 	

components/03_Organisms/imageGrid/imageGrid.hbs

@@ -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">

public/main.css

@@ -27305,4 +27305,133 @@ label + .LP-Input--disabled .LP-Input__Field:disabled {
   color: #565656;
 }
 
+.LP-ImageGrid__Container {
+  list-style-type: none;
+  display: grid;
+  grid-template-columns: repeat(auto-fill, var(--itemWidth));
+  gap: var(--gap);
+  --itemWidth: 290px;
+  --itemHeight: 200px;
+  grid-template-rows: repeat(auto-fit, var(--itemHeight));
+  gap: 10px;
+}
+.LP-ImageGrid__Item {
+  position: relative;
+  height: var(--itemHeight);
+}
+.LP-ImageGrid__Item .LP-Image {
+  height: 100%;
+  height: 100%;
+}
+.LP-ImageGrid__Item--add .LP-Link {
+  width: 100%;
+  height: 100%;
+  position: relative;
+  display: block;
+  background: #f9f9f9;
+  transition: background 0.3s;
+}
+.LP-ImageGrid__Item--add .LP-Link .LP-Icon {
+  width: 35px;
+  height: 35px;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+.LP-ImageGrid__Item--add:hover .LP-Link {
+  background-color: #D7CEC7;
+}
+.LP-ImageGrid__DeleteItem {
+  opacity: 0.7;
+  visibility: hidden;
+  position: absolute;
+  top: 10px;
+  right: 10px;
+  background-color: transparent;
+  border-radius: 50%;
+  transition: background 0.2s;
+  height: 35px;
+  width: 35px;
+}
+.LP-ImageGrid__DeleteItem .LP-Link .LP-Icon {
+  height: 20px;
+  width: 20px;
+  position: relative;
+  left: 7.8125px;
+  top: 7.8125px;
+}
+.LP-ImageGrid__Item > .LP-Link:hover + .LP-ImageGrid__DeleteItem, .LP-ImageGrid__DeleteItem:hover {
+  background-color: #C09F80;
+  visibility: visible;
+}
+.LP-ImageGrid__LightBox {
+  visibility: hidden;
+  display: none;
+  position: fixed;
+  pointer-events: none;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  background-color: rgba(86, 86, 86, 0.9);
+  padding: 2rem;
+  padding-bottom: 0;
+  width: 100vw;
+  height: 100vh;
+  z-index: 30;
+  top: 0;
+  left: 0;
+  box-sizing: border-box;
+}
+.LP-ImageGrid__LightBox img {
+  object-fit: contain;
+}
+.LP-ImageGrid__LightBox:target {
+  visibility: visible;
+  display: grid;
+  grid-template-areas: "picture picture" "previous next";
+  grid-template-rows: 1fr 4rem;
+  grid-template-columns: 1fr 1fr;
+  pointer-events: initial;
+}
+.LP-ImageGrid__FullSizeImage {
+  grid-area: picture;
+}
+.LP-ImageGrid__Previous {
+  grid-area: previous;
+  align-self: center;
+  justify-self: end;
+}
+.LP-ImageGrid__Next {
+  grid-area: next;
+  align-self: center;
+  justify-self: start;
+}
+.LP-ImageGrid__Previous, .LP-ImageGrid__Next {
+  padding: 25px;
+  color: #D7CEC7;
+  text-decoration: none;
+  font-family: "Montserrat", Helvetica, sans-serif;
+  font-weight: bold;
+  font-size: 20px;
+}
+.LP-ImageGrid__Close {
+  position: fixed;
+  right: 1rem;
+  top: 1rem;
+  left: unset;
+  visibility: visible;
+  opacity: 1;
+}
+
+.LP-Select {
+  display: block;
+  cursor: pointer;
+  transition: box-shadow 0.3s;
+}
+
+.LP-Select:checked, :checked + .LP-Select, .LP-Select--active {
+  box-shadow: 0 0 3px 3px #C09F80;
+}
+
 /*# sourceMappingURL=main.css.map */