From 8e4ae2d9be32e14b96b8e101fda16e7254396002 Mon Sep 17 00:00:00 2001
From: reverend <reverend@reverend2048.de>
Date: Fri, 25 Sep 2020 21:42:18 +0200
Subject: [PATCH] Deleting and adding Image

---
 .../03_Organisms/imageGrid/_imageGrid.scss    | 34 +++++++---
 .../03_Organisms/imageGrid/imageGrid.hbs      | 14 +++-
 public/main.css                               | 67 ++++++++++++++-----
 3 files changed, 89 insertions(+), 26 deletions(-)

diff --git a/components/03_Organisms/imageGrid/_imageGrid.scss b/components/03_Organisms/imageGrid/_imageGrid.scss
index 95f5a58..ebf2a32 100644
--- a/components/03_Organisms/imageGrid/_imageGrid.scss
+++ b/components/03_Organisms/imageGrid/_imageGrid.scss
@@ -6,6 +6,26 @@
     &__Item {
 		position: relative;
 		@include RV-ContentCrop;
+
+		&--add {
+			.LP-Link {
+				width: 100%;
+				height: 100%;
+				position: relative;	
+				display: block;
+				background: $-almost-white;
+
+				.LP-Icon {
+					width: $-spacing-large;
+					height: $-spacing-large;
+
+					position: absolute;
+					top: 50%;
+					left: 50%;
+					transform: translate(-50%, -50%);
+				}
+			}
+		}
 	}
 
 	&__DeleteItem {
@@ -20,17 +40,15 @@
 		height: $-spacing-large;
 		width: $-spacing-large;
 
-		line-height: $-spacing-large;
-		vertical-align: middle;
-
-		.LP-Icon{
-			height: $-spacing-medium;
-			width: $-spacing-medium;
+		.LP-Link .LP-Icon{
+			height: #{$-spacing-small * 2};
+			width: #{$-spacing-small * 2};
 			position:relative;
-			top: calc(50% - 18.75px);
+			left: #{($-spacing-large - $-spacing-small) / 3};
+			top: #{($-spacing-large - $-spacing-small) / 3};
 		}
 	}
-	&__Item:hover &__DeleteItem {
+	&__Item>.LP-Link:hover + &__DeleteItem, &__DeleteItem:hover {
 		visibility: visible;
 	}
 }
\ No newline at end of file
diff --git a/components/03_Organisms/imageGrid/imageGrid.hbs b/components/03_Organisms/imageGrid/imageGrid.hbs
index 81702a9..8b3301e 100644
--- a/components/03_Organisms/imageGrid/imageGrid.hbs
+++ b/components/03_Organisms/imageGrid/imageGrid.hbs
@@ -3,8 +3,20 @@
     <ul class="LP-ImageGrid__Container">
         {{#each images}}
         <li class="LP-ImageGrid__Item">
-            <a href="#" class="LP-Link"><img  class="LP-Image" src="{{this}}"></a>
+            <a href="#" class="LP-Link">
+                <img  class="LP-Image" src="{{this}}">
+            </a>
+            <span class="LP-ImageGrid__DeleteItem" title="Bild löschen">
+                <a href="#" class="LP-Link">
+                    <img class="LP-Icon" src="/icons/cancel.svg"/>
+                </a>
+            </span>
         </li>
         {{/each}}
+        <li class="LP-ImageGrid__Item LP-ImageGrid__Item--add" title="Bild hinzufügen">
+            <a class="LP-Link" href="#">
+                <img class="LP-Icon" src="/icons/plus.svg"/>
+            </a>
+        </li>
     </ul>
 </div>
\ No newline at end of file
diff --git a/public/main.css b/public/main.css
index 1cd7d75..f6a7e64 100644
--- a/public/main.css
+++ b/public/main.css
@@ -1588,23 +1588,56 @@ body {
     border: none; }
   .LP-ImageGrid__Container {
     gap: 10px; }
-  .LP-ImageGrid .LP-ImageGrid__Item, .LP-ImageGrid .LP-ImageGrid__Item * {
-    overflow: hidden;
-    word-break: break-all; }
-  .LP-ImageGrid .LP-ImageGrid__Item img {
-    width: 100%;
-    height: 100%;
-    object-fit: cover; }
-  .LP-ImageGrid .LP-ImageGrid__Item--left img {
-    object-position: left; }
-  .LP-ImageGrid .LP-ImageGrid__Item--center img {
-    object-position: center; }
-  .LP-ImageGrid .LP-ImageGrid__Item--top img {
-    object-position: top; }
-  .LP-ImageGrid .LP-ImageGrid__Item--bottom img {
-    object-position: botom; }
-  .LP-ImageGrid .LP-ImageGrid__Item--center img {
-    object-position: center; }
+  .LP-ImageGrid__Item {
+    position: relative; }
+    .LP-ImageGrid__Item, .LP-ImageGrid__Item * {
+      overflow: hidden;
+      word-break: break-all; }
+    .LP-ImageGrid__Item img {
+      width: 100%;
+      height: 100%;
+      object-fit: cover; }
+    .LP-ImageGrid__Item--left img {
+      object-position: left; }
+    .LP-ImageGrid__Item--center img {
+      object-position: center; }
+    .LP-ImageGrid__Item--top img {
+      object-position: top; }
+    .LP-ImageGrid__Item--bottom img {
+      object-position: botom; }
+    .LP-ImageGrid__Item--center img {
+      object-position: center; }
+    .LP-ImageGrid__Item--add .LP-Link {
+      width: 100%;
+      height: 100%;
+      position: relative;
+      display: block;
+      background: #f9f9f9; }
+      .LP-ImageGrid__Item--add .LP-Link .LP-Icon {
+        width: 35px;
+        height: 35px;
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%); }
+  .LP-ImageGrid__DeleteItem {
+    opacity: 0.7;
+    visibility: hidden;
+    position: absolute;
+    top: 10px;
+    right: 10px;
+    background-color: #C09F80;
+    border-radius: 50%;
+    height: 35px;
+    width: 35px; }
+    .LP-ImageGrid__DeleteItem .LP-Link .LP-Icon {
+      height: 20px;
+      width: 20px;
+      position: relative;
+      left: 8.33333px;
+      top: 8.33333px; }
+  .LP-ImageGrid__Item > .LP-Link:hover + .LP-ImageGrid__DeleteItem, .LP-ImageGrid__DeleteItem:hover {
+    visibility: visible; }
 
 .LP-MainContainer {
   margin: 0 auto;