From cb3a09a7de1de282bfed1831bd9b4aec99e8320d Mon Sep 17 00:00:00 2001
From: schnulller <schnulller@mailbox.org>
Date: Sun, 5 Jun 2022 23:51:53 +0200
Subject: [PATCH] Started styling output button.

---
 HaWeb/Views/Admin/Upload/Index.cshtml |  5 +++--
 HaWeb/wwwroot/css/output.css          | 31 +++++++++++++++++++++++----
 HaWeb/wwwroot/css/site.css            | 14 +++++++++++-
 3 files changed, 43 insertions(+), 7 deletions(-)

diff --git a/HaWeb/Views/Admin/Upload/Index.cshtml b/HaWeb/Views/Admin/Upload/Index.cshtml
index 1b08547..cc8f1aa 100644
--- a/HaWeb/Views/Admin/Upload/Index.cshtml
+++ b/HaWeb/Views/Admin/Upload/Index.cshtml
@@ -37,8 +37,9 @@
     </form>
 
     <form class="ha-publishform" id="ha-publishform" asp-controller="API" asp-action="LocalPublish" method="post" enctype="multipart/form-data">
-        <label class="ha-uploadfilelabel" id="ha-uploadfilelabel">
+        <label class="ha-publishfilelabel" id="ha-publishfilelabel">
           Veröffentlichen
+          <div class="ha-lds-ellipsis" id="ha-lds-ellipsis-publish"><div></div><div></div><div></div><div></div></div>
         </label>
         <div class="ha-publishmessage" id="ha-publishmessage">
           @* Fehler!<br/> *@
@@ -180,7 +181,7 @@
       var formelement = document.getElementById("uploadForm");
       var dropzone = document.getElementById("dropzone");
       var publishelement = document.getElementById("ha-publishform");
-      var publishbutton = document.getElementById("ha-uploadfilelabel");
+      var publishbutton = document.getElementById("ha-publishfilelabel");
       publishbutton.addEventListener("click", () => LOCALPUBLISHSubmit(publishelement));
       submitelement.addEventListener("change", () => UPLOADSubmit(formelement));
       dropzone.addEventListener("drop", (ev) => dropHandler(formelement, ev, dropzone));
diff --git a/HaWeb/wwwroot/css/output.css b/HaWeb/wwwroot/css/output.css
index 76bf9dd..3b803ad 100644
--- a/HaWeb/wwwroot/css/output.css
+++ b/HaWeb/wwwroot/css/output.css
@@ -1954,19 +1954,42 @@ body {
 }
 
 .ha-adminuploadfields .ha-publishform {
+  position: relative;
   flex-grow: 1;
   border-radius: 0.25rem;
   --tw-bg-opacity: 1;
   background-color: rgb(248 250 252 / var(--tw-bg-opacity));
-  padding-left: 0.75rem;
-  padding-right: 0.75rem;
-  padding-top: 0.5rem;
-  padding-bottom: 0.5rem;
   --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
   --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
 
+.ha-adminuploadfields .ha-publishform .ha-lds-ellipsis {
+  left: 50%;
+  margin-left: -20px;
+}
+
+.ha-adminuploadfields .ha-publishform .ha-publishfilelabel {
+  display: inline-block;
+  height: 100%;
+  width: 100%;
+  cursor: pointer;
+  padding-left: 0.5rem;
+  padding-right: 0.5rem;
+  padding-bottom: 0.25rem;
+  padding-top: 0.5rem;
+}
+
+.ha-adminuploadfields .ha-publishform .ha-publishmessage {
+  border-radius: 0.125rem;
+  background-color: rgb(51 65 85 / var(--tw-bg-opacity));
+  --tw-bg-opacity: 0.3;
+  padding-left: 0.25rem;
+  padding-right: 0.25rem;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+}
+
 .ha-uploadheader {
   margin-top: 1rem;
   display: flex;
diff --git a/HaWeb/wwwroot/css/site.css b/HaWeb/wwwroot/css/site.css
index 0c3e053..d4806db 100644
--- a/HaWeb/wwwroot/css/site.css
+++ b/HaWeb/wwwroot/css/site.css
@@ -718,7 +718,19 @@
   }
 
   .ha-adminuploadfields .ha-publishform {
-    @apply bg-slate-50 rounded shadow grow px-3 py-2 
+    @apply bg-slate-50 rounded shadow grow relative
+  }
+
+  .ha-adminuploadfields .ha-publishform .ha-lds-ellipsis {
+    @apply left-1/2 -ml-[20px]
+  }
+
+  .ha-adminuploadfields .ha-publishform .ha-publishfilelabel {
+    @apply inline-block px-2 py-1 pt-2 cursor-pointer w-full h-full
+  }
+
+  .ha-adminuploadfields .ha-publishform .ha-publishmessage {
+    @apply text-sm bg-slate-700 bg-opacity-30 px-1 rounded-sm
   }
 
   .ha-uploadheader {