Did a lot of styling on letter & register view; introduced a new accent color. Added scroll and submit vutton, TODO style submit button

This commit is contained in:
schnulller
2022-06-09 02:07:21 +02:00
parent c2ecf0ea23
commit 11ccd7772e
20 changed files with 2324 additions and 4734 deletions

View File

@@ -37,7 +37,11 @@
</div>
}
</div>
<output id ="ha-filelistoutput"></output><input class="btn ha-filelistbutton" type="submit" value="Laden" />
<output id ="ha-filelistoutput"></output>
<button type="submit" class="ha-filelistbutton" id="ha-filelistbutton" >
Laden
<div class="ha-lds-ellipsis-load" id="ha-lds-ellipsis-load"><div></div><div></div><div></div><div></div></div>
</button>
</form>
}
else {
@@ -48,6 +52,8 @@
<script>
const USESubmit = async function (oFormElement, file = null) {
let fd = new FormData(oFormElement);
document.getElementById("ha-filelistbutton").style.pointerEvents = "none";
document.getElementById("ha-lds-ellipsis-load").style.display = "inline-block";
await fetch(oFormElement.action, {
method: 'POST',
headers: {
@@ -58,16 +64,20 @@
.then(response => response.json())
.then(json => {
if ("Error" in json) {
document.getElementById("ha-filelistbutton").style.pointerEvents = "auto";
document.getElementById("ha-lds-ellipsis-load").style.display = "none";
document.getElementById("ha-filelistoutput").textContent = json.Error;
}
else {
document.getElementById("ha-filelistbutton").style.pointerEvents = "auto";
document.getElementById("ha-lds-ellipsis-load").style.display = "none";
location.reload();
}
})
.catch ((e) => {
.catch ((e) => {
document.getElementById("ha-filelistbutton").style.pointerEvents = "auto";
document.getElementById("ha-lds-ellipsis-load").style.display = "none";
document.getElementById("ha-filelistoutput").textContent = e;
})
}
</script>

View File

@@ -1,5 +1,5 @@
<!DOCTYPE html>
<html lang="de">
<html lang="de" id="top">
<head>
<meta charset="utf-8" />
@@ -42,10 +42,17 @@
@await Html.PartialAsync("/Views/Shared/_Footer.cshtml")
</div>
</div>
<environment exclude="Development">
@await Html.PartialAsync("/Views/Shared/_Javascript.cshtml")
</environment>
<a class="ha-scrollbutton" id="ha-scrollbutton">
<svg class="ha-scrollbuttonarrow" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path strokeLinecap="round" strokeLinejoin="round" stroke-width="2" d="M5 11l7-7 7 7M5 19l7-7 7 7" />
</svg>
</div>
@RenderSection("Scripts", required: false)
</body>

View File

@@ -20,9 +20,9 @@
</div>
</div>
}
else if (Model.ParsedZHString == null && Model.ShowZHData) {
else if (Model.ParsedZHString == null) {
<div class="ha-tooltip">
<div class="ha-pill">
<div class="ha-pill ha-newpill">
<span>Neu</span>
</div>
</div>

View File

@@ -24,10 +24,9 @@
<form class="ha-publishform" id="ha-publishform" asp-controller="API" asp-action="LocalPublish" method="post" enctype="multipart/form-data">
<label class="ha-publishfilelabel" id="ha-publishfilelabel">
<div class="ha-publishtext">Dateien Veröffentlichen</div>
<div class="ha-lds-ellipsis" id="ha-lds-ellipsis-publish"><div></div><div></div><div></div><div></div></div>
<div class="ha-lds-ellipsis-publish" id="ha-lds-ellipsis-publish"><div></div><div></div><div></div><div></div></div>
</label>
<div class="ha-publishmessage" id="ha-publishmessage">
@* Fehler!<br/> *@
<output form="uploadForm" name="publish-result" id="publish-result"></output>
</div>
</form>

View File

@@ -0,0 +1,91 @@
@model UploadViewModel;
<form class="ha-uploadform" id="uploadForm" asp-controller="API" asp-action="Upload" method="post" enctype="multipart/form-data">
<label class="ha-uploadfilelabel" id="dropzone">
<input class="hidden" id="file" type="file" accept=".xml" name="file" />
<div class="ha-uploadtext">Upload</div>
<div class="ha-lds-ellipsis" id="ha-lds-ellipsis-upload"><div></div><div></div><div></div><div></div></div>
</label>
<div class="ha-uploadmessage" id="ha-uploadmessage">
Fehler!<br/>
<output form="uploadForm" name="upload-result"></output>
</div>
</form>
<script>
const dropHandler = function (formelement, ev, dropzone) {
ev.preventDefault();
if (ev.dataTransfer.items) {
if (ev.dataTransfer.items[0].kind === 'file') {
var file = ev.dataTransfer.items[0].getAsFile();
UPLOADSubmit(formelement, file);
} else {
var file = ev.dataTransfer.files[0];
UPLOADSubmit(formelement, file);
}
}
}
const dragOverHandler = function (ev, dropzone) {
ev.preventDefault();
}
const dragLeaveHander = function (ev, dropzone) {
ev.preventDefault();
}
const dragEnterHandler = function (ev, dropzone) {
ev.preventDefault();
}
const UPLOADSubmit = async function (oFormElement, file = null) {
var fd = new FormData();
if (file !== null) fd.append("file", file);
else fd = new FormData(oFormElement);
document.getElementById("dropzone").style.pointerEvents = "none";
document.getElementById("ha-lds-ellipsis-upload").style.display = "inline-block";
document.getElementById("ha-uploadmessage").style.opacity = "0";
await fetch(oFormElement.action, {
method: 'POST',
headers: {
'RequestVerificationToken': getCookie('RequestVerificationToken')
},
body: fd
})
.then(response => response.json())
.then(json => {
if ("Error" in json) {
document.getElementById("dropzone").style.pointerEvents = "auto";
document.getElementById("ha-lds-ellipsis-upload").style.display = "none";
document.getElementById("ha-uploadmessage").style.opacity = "1";
oFormElement.elements.namedItem("upload-result").value = json.Error;
} else {
document.getElementById("dropzone").style.pointerEvents = "auto";
document.getElementById("ha-lds-ellipsis-upload").style.display = "none";
oFormElement.elements.namedItem("upload-result").value = "Erfolg!";
if ("Prefix" in json[0]) {
document.getElementById("dropzone").style.pointerEvents = "auto";
document.getElementById("ha-lds-ellipsis-upload").style.display = "none";
window.location.replace("/Admin/Upload/" + json[0].Prefix);
}
}
})
.catch ((e) => {
document.getElementById("dropzone").style.pointerEvents = "auto";
document.getElementById("ha-lds-ellipsis-upload").style.display = "none";
document.getElementById("ha-uploadmessage").style.opacity = "1";
oFormElement.elements.namedItem("upload-result").value = "Keine Antwort. Bitte Seite neu laden!";
})
}
window.addEventListener("load", () => {
var submitelement = document.getElementById("file");
var formelement = document.getElementById("uploadForm");
var dropzone = document.getElementById("dropzone");
submitelement.addEventListener("change", () => UPLOADSubmit(formelement));
dropzone.addEventListener("drop", (ev) => dropHandler(formelement, ev, dropzone));
dropzone.addEventListener("dragover", (ev) => dragOverHandler(ev, dropzone));
dropzone.addEventListener("dragleave", (ev) => dragLeaveHander(ev, dropzone));
dropzone.addEventListener("dragenter", (ev) => dragEnterHandler(ev, dropzone));
});
</script>