From 5ba802dc68f8a1dcc1fa4133e792dcb2a3e2b0b4 Mon Sep 17 00:00:00 2001
From: Haka <76921756+Hakorr@users.noreply.github.com>
Date: Mon, 26 Sep 2022 17:50:27 +0300
Subject: [PATCH] Overlaid info

---
 ui/media/main.css | 30 +++++++++++++++++++-----------
 ui/media/main.js  | 10 ++++------
 2 files changed, 23 insertions(+), 17 deletions(-)

diff --git a/ui/media/main.css b/ui/media/main.css
index 7b01e14b..4c742a1c 100644
--- a/ui/media/main.css
+++ b/ui/media/main.css
@@ -69,27 +69,35 @@ label {
     font-size: 8pt;
 }
 .imgSeedLabel {
-    font-size: 1.3em;
+    font-size: 1em;
+    background-color: rgb(44, 45, 48);
+    border-radius: 5px;
+    padding: 5px;
 }
 .imgItem {
     display: inline-block;
-    width: fit-content;
-    height: fit-content;
-    padding: 0.5em;
-    border: 1px solid rgb(255 255 255 / 25%);
     margin-top: 1em;
     margin-right: 1em;
 }
+.imgContainer {
+    display: flex;
+    justify-content: flex-end;
+}
 .imgItemInfo {
-    width: 100%;
-    height: 2em;
     padding-bottom: 0.5em;
     display: flex;
-    align-items: center;
-    justify-content: space-between;
+    align-items: flex-end;
+    flex-direction: column;
+    position: absolute;
+    padding: 5px;
+    opacity: 0.25;
+    transition: 0.1s all;
 }
-.imgInfoLeft {
-    margin-right: 1em;
+.imgContainer:hover > .imgItemInfo {
+    opacity: 1;
+}
+.imgItemInfo * {
+    margin-bottom: 7px;
 }
 #container {
     width: 90%;
diff --git a/ui/media/main.js b/ui/media/main.js
index fb394981..171545a1 100644
--- a/ui/media/main.js
+++ b/ui/media/main.js
@@ -271,16 +271,14 @@ function showImages(res, req) {
         const imageItemElem = document.createElement('div');
         imageItemElem.className = 'imgItem';
         imageItemElem.innerHTML = `
-            <div class="imgItemInfo">
-                <div class="imgInfoLeft">
+            <div class="imgContainer">
+                <img/>
+                <div class="imgItemInfo">
                     <span class="imgSeedLabel"></span>
-                </div>
-                <div>
                     <button class="imgUseBtn">Use as Input</button>
                     <button class="imgSaveBtn">Download</button>
                 </div>
             </div>
-            <img/>
         `;
     
         const imageElem = imageItemElem.querySelector('img'),
@@ -292,7 +290,7 @@ function showImages(res, req) {
         imageElem.width = parseInt(imageWidth);
         imageElem.height = parseInt(imageHeight);
 
-        imageSeedLabel.innerText = imageSeed;
+        imageSeedLabel.innerText = 'Seed: ' + imageSeed;
 
         useAsInputBtn.addEventListener('click', () => {
             initImageSelector.value = null;