Started styling output button.

This commit is contained in:
schnulller
2022-06-05 23:51:53 +02:00
parent b5aae5ddf0
commit cb3a09a7de
3 changed files with 43 additions and 7 deletions

View File

@@ -37,8 +37,9 @@
</form> </form>
<form class="ha-publishform" id="ha-publishform" asp-controller="API" asp-action="LocalPublish" method="post" enctype="multipart/form-data"> <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 Veröffentlichen
<div class="ha-lds-ellipsis" id="ha-lds-ellipsis-publish"><div></div><div></div><div></div><div></div></div>
</label> </label>
<div class="ha-publishmessage" id="ha-publishmessage"> <div class="ha-publishmessage" id="ha-publishmessage">
@* Fehler!<br/> *@ @* Fehler!<br/> *@
@@ -180,7 +181,7 @@
var formelement = document.getElementById("uploadForm"); var formelement = document.getElementById("uploadForm");
var dropzone = document.getElementById("dropzone"); var dropzone = document.getElementById("dropzone");
var publishelement = document.getElementById("ha-publishform"); var publishelement = document.getElementById("ha-publishform");
var publishbutton = document.getElementById("ha-uploadfilelabel"); var publishbutton = document.getElementById("ha-publishfilelabel");
publishbutton.addEventListener("click", () => LOCALPUBLISHSubmit(publishelement)); publishbutton.addEventListener("click", () => LOCALPUBLISHSubmit(publishelement));
submitelement.addEventListener("change", () => UPLOADSubmit(formelement)); submitelement.addEventListener("change", () => UPLOADSubmit(formelement));
dropzone.addEventListener("drop", (ev) => dropHandler(formelement, ev, dropzone)); dropzone.addEventListener("drop", (ev) => dropHandler(formelement, ev, dropzone));

View File

@@ -1954,19 +1954,42 @@ body {
} }
.ha-adminuploadfields .ha-publishform { .ha-adminuploadfields .ha-publishform {
position: relative;
flex-grow: 1; flex-grow: 1;
border-radius: 0.25rem; border-radius: 0.25rem;
--tw-bg-opacity: 1; --tw-bg-opacity: 1;
background-color: rgb(248 250 252 / var(--tw-bg-opacity)); 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: 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); --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); 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 { .ha-uploadheader {
margin-top: 1rem; margin-top: 1rem;
display: flex; display: flex;

View File

@@ -718,7 +718,19 @@
} }
.ha-adminuploadfields .ha-publishform { .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 { .ha-uploadheader {