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

@@ -61,7 +61,7 @@ public class RegisterController : Controller {
}
// Model instantiation
var model = new RegisterViewModel(category, id, res, title) {
var model = new RegisterViewModel(category, id, res, title, false) {
AvailableCategories = availableCategories,
};
@@ -104,7 +104,7 @@ public class RegisterController : Controller {
}
// Model instantiation
var model = new RegisterViewModel(category, id, res, title) {
var model = new RegisterViewModel(category, id, res, title, false) {
AvailableCategories = availableCategories,
};
@@ -154,7 +154,7 @@ public class RegisterController : Controller {
}
// Model instantiation
var model = new RegisterViewModel(category, id, res, title) {
var model = new RegisterViewModel(category, id, res, title, true) {
AvailableCategories = availableCategories,
AvailableSideCategories = AvailableSideCategories
};

View File

@@ -6,24 +6,16 @@
<Nullable>enable</Nullable>
<ImplicitUsings>enable</ImplicitUsings>
</PropertyGroup>
<ItemGroup>
<!-- exclude all Content items from being watched -->
<Content Update="wwwroot/css/site.css" Watch="false" />
<ItemGroup>
<Content Remove="wwwroot\css\site.css" />
<Content Include="wwwroot\css\site.css" Watch="false" />
</ItemGroup>
<ItemGroup>
<Watch Include="**\*.js" Exclude="node_modules\**\*;**\*.js.map;obj\**\*;bin\**\*" />
<Watch Include="**\*.css" Exclude="node_modules\**\*;**\*.js.map;obj\**\*;bin\**\*" />
<Watch Include="**\*.cs" Exclude="node_modules\**\*;**\*.js.map;obj\**\*;bin\**\*" />
<Watch Include="**\*.cshtml" Exclude="node_modules\**\*;**\*.js.map;obj\**\*;bin\**\*" />
<Watch Include="**\*.csproj" Exclude="node_modules\**\*;**\*.js.map;obj\**\*;bin\**\*" />
</ItemGroup>
<ItemGroup>
<UpToDateCheckBuilt Include="postcss.config.js" Set="Css" />
<UpToDateCheckBuilt Include="tailwind.config.js" Set="Css" />
</ItemGroup>
<Target Name="Tailwind" BeforeTargets="Build">
<Exec Command="npm run css:build" />
<Exec Command="npm run css_build" />
</Target>
<ItemGroup>
<PackageReference Include="Microsoft.FeatureManagement.AspNetCore" Version="2.5.1" />
</ItemGroup>
@@ -32,6 +24,4 @@
<ProjectReference Include="..\HaXMLReaderV6\HaXMLReaderV6.csproj" />
<ProjectReference Include="..\HaDocumentV6\HaDocumentV6.csproj" />
</ItemGroup>
</Project>

View File

@@ -5,6 +5,7 @@ public class RegisterViewModel {
public string Category { get; private set; }
public string Id { get; private set; }
public string Title { get; private set; }
public bool AllowSendIn { get; private set; }
private List<(string, string)>? _AvailableCategories;
private List<(string, string)>? _AvailableSideCategories;
@@ -41,10 +42,11 @@ public class RegisterViewModel {
}
}
public RegisterViewModel(string category, string id, List<CommentModel> parsedComments, string title) {
public RegisterViewModel(string category, string id, List<CommentModel> parsedComments, string title, bool allowSendIn) {
this.Category = HttpUtility.HtmlAttributeEncode(category);
this.Id = HttpUtility.HtmlAttributeEncode(id);
this.ParsedComments = parsedComments;
this.Title = HttpUtility.HtmlEncode(title);
this.AllowSendIn = allowSendIn;
}
}

View File

@@ -33,17 +33,12 @@ Startseite für die Briefausgebe / Werkausgabe. Unterschiedliche Menüs für die
Briefe beim Namen
- GND Normdaten der Namen
TODO 1127 zu breit
TODO tabellen ok, ausser 939, 806 falsch geschachtelt: dort sind htabs geschachtelt
TODO 659 align center und align-right ueberschneidugn
TODO Kommentare und min-size von ha-lettertetx
TODO Word-wrap before align, tabs
TODO pills are not mobile friendly (hover / click)
TODO Evtl alignment von center / right an der letzten oder nächsten zeile
TODO Abhärten des Konstruktors von XMLRootDokument für von außerhalb platzierte Dokumente
TODO XML-Check im Client
TODO Lock für die Liste, Bzw ConcurretBag
TODO Up-Button
TODO Neue Forschungsliteratur einsenden
TODO Lock für die Liste, Bzw ConcurretBag

View File

@@ -25,17 +25,7 @@
}
<div class="ha-uploadpublishforms">
<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"><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>
@await Html.PartialAsync("/Views/Shared/_UploadForm.cshtml", Model)
<a class="ha-publishbutton" asp-controller="Upload" asp-action="Index" asp-route-id="@string.Empty">
<div class="ha-publishtext">Veröffentlichen</div>
@@ -43,62 +33,64 @@
</div>
</div>
<div class="ha-uploadheader">
<h1 class="ha-uploadtitle">@Model.ActiveTitle</h1>
</div>
<div class="ha-uploadcontainer">
@* File Category Page File List *@
@if (Model.AvailableFiles != null && Model.AvailableFiles.Any()) {
<div class="ha-filesheader">
<div class="ha-availablefiles" id="ha-availablefiles">
<div class="ha-availablefilestitle">Datei(en)</div>
@if(Model.UsedFiles != null && Model.UsedFiles.ContainsKey(Model.Prefix)) {
<div class="ha-usedfilelist">
@foreach (var item in Model.UsedFiles[Model.Prefix]!)
{
if(item == Model.UsedFiles[Model.Prefix]!.Last()) {
<span class="ha-usedfile">@item.FileName</span>
}
else {
<span class="ha-usedfile">@item.FileName,</span>
@* File Category Page File List *@
@if (Model.AvailableFiles != null && Model.AvailableFiles.Any()) {
<div class="ha-filesheader">
<div class="ha-availablefiles" id="ha-availablefiles">
<div class="ha-availablefilestitle">Datei(en)</div>
@if(Model.UsedFiles != null && Model.UsedFiles.ContainsKey(Model.Prefix)) {
<div class="ha-usedfilelist">
@foreach (var item in Model.UsedFiles[Model.Prefix]!)
{
if(item == Model.UsedFiles[Model.Prefix]!.Last()) {
<span class="ha-usedfile">@item.FileName</span>
}
else {
<span class="ha-usedfile">@item.FileName,</span>
}
}
</div>
}
</div>
}
</div>
<div class="ha-availablefileslist hidden" id="ha-availablefileslist">
@await Html.PartialAsync("/Views/Shared/_FileListForm.cshtml", (Model.AvailableFiles, "Verfügbare Dateien", "API", "SetUsed", Model.Prefix, "/Download/XML/" + Model.Prefix + "/", true))
</div>
</div>
<div class="ha-availablefileslist hidden" id="ha-availablefileslist">
@await Html.PartialAsync("/Views/Shared/_FileList.cshtml", (Model.AvailableFiles, "Verfügbare Dateien:", "API", "SetUsed", Model.Prefix, "/Download/XML/" + Model.Prefix + "/", true))
</div>
</div>
}
@* Start Page File List *@
else {
<div class="ha-publishfilelist">
@await Html.PartialAsync("/Views/Shared/_PublishForm.cshtml", Model)
</div>
<div class="ha-hamannfilechooser">
@await Html.PartialAsync("/Views/Shared/_FileList.cshtml", (Model.HamannFiles, "Verfügbare Hamann-Dateien", "API", "SetUsedHamann", string.Empty, "/Download/XML/", false))
</div>
}
@* File Category Page Syntax Check *@
@if (Model.UsedFiles != null && Model.Prefix != null && Model.UsedFiles.ContainsKey(Model.Prefix)) {
<div class="ha-errorswarnings">
<div class="ha-criticalerrors">
</div>
<div class="ha-warnings">
</div>
</div>
<div class="ha-crossfilechecking">
</div>
}
@if (Model.UsedFiles != null && Model.Prefix != null && Model.UsedFiles.ContainsKey(Model.Prefix)) {
<div class="ha-errorswarnings">
<div class="ha-criticalerrors">
</div>
<div class="ha-warnings">
</div>
</div>
<div class="ha-crossfilechecking">
</div>
}
}
@* Start Page File List *@
else {
<div class="ha-publishfilelist">
@await Html.PartialAsync("/Views/Shared/_PublishForm.cshtml", Model)
</div>
<div class="ha-hamannfilechooser">
@await Html.PartialAsync("/Views/Shared/_FileListForm.cshtml", (Model.HamannFiles, "Verfügbare Hamann-Dateien", "API", "SetUsedHamann", string.Empty, "/Download/XML/", false))
</div>
}
</div>
@@ -118,71 +110,6 @@ else {
}
}
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").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").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").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").style.display = "none";
window.location.replace("/Admin/Upload/" + json[0].Prefix);
}
}
})
.catch ((e) => {
document.getElementById("dropzone").style.pointerEvents = "auto";
document.getElementById("ha-lds-ellipsis").style.display = "none";
document.getElementById("ha-uploadmessage").style.opacity = "1";
oFormElement.elements.namedItem("upload-result").value = "Keine Antwort. Bitte Seite neu laden!";
})
}
function getCookie(name) {
var value = "; " + document.cookie;
var parts = value.split("; " + name + "=");
@@ -190,19 +117,9 @@ else {
}
window.addEventListener("load", function () {
var submitelement = document.getElementById("file");
var formelement = document.getElementById("uploadForm");
var dropzone = document.getElementById("dropzone");
var filesbutton = document.getElementById("ha-availablefiles");
if (filesbutton !== null)
filesbutton.addEventListener("click", () => hideshowfiles());
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));
});

View File

@@ -51,20 +51,11 @@
<div class="ha-letterbody " id="ha-letterbody">
<div class="ha-lettertext @minwidth" id="ha-lettertext">
@if (Model.MetaData.ParsedZHString != null) {
<div class="ha-linecount ha-firstline">
@if (Model.MetaData.ParsedZHString != null)
{
<span>@Html.Raw(Model.MetaData.ParsedZHString)</span>
}
else
{
<div class="ha-tooltip">
<div class="ha-pill">
<span>Neu</span>
</div>
</div>
}
<span>@Html.Raw(Model.MetaData.ParsedZHString)</span>
</div>
}
@Html.Raw(@Model.ParsedText)
@* It's not beautiful but it's a hack to keep the last comment within parent element boundaries: *@
<br>

View File

@@ -36,7 +36,12 @@
<td>Durchstreichung</td>
<td>in spitzen Klammern ⟨...⟩</td>
<td><span class="ha-del">Durchstreichung</span> (einfache bis doppelte)</td>
</tr>
</tr>
<tr>
<td>Einfügung</td>
<td></td>
<td>&#x2E02;Einfügung&#x2E03; (lediglich in Einzelfällen)</td>
</tr>
<tr>
<td>Nicht entzifferbare Stelle / Unsichere Lesung</td>
<td>unterschiedlich gehandhabt</td>

View File

@@ -28,6 +28,14 @@
<div class="@commentClass">
<div class="ha-register-head">
<h1>@Model.Title</h1>
@if (Model.AllowSendIn) {
<div class="ha-register-add">
<a href="mailto:post@hamann-ausgabe.de?subject=Publikation%28en%29%20beitragen">
<div class="ha-register-add-plusbutton">+</div>
<div class="ha-register-add-text">Publikation(en) beitragen</div>
</a>
</div>
}
<div class="ha-register-nav" id="ha-register-nav">
<div class="ha-register-left-nav">
@if (Model.AvailableCategories != null) {
@@ -60,15 +68,3 @@
</div>
</div>
</div>
<script type="text/javascript">
(function() {
var ga = document.createElement('script');
ga.src = 'https://www.bibleserver.com/api/parser.js?key=262ea61e694b0d300608a52ef3f4585a10b47ff4&lang=de';
ga.setAttribute('async', 'true');
document.documentElement.firstChild.appendChild(ga);
})();
var bsQuery = '.ha-lemma'; // CSS-Selektor für Wrapper der Suche (optional)
var bsTrl = 'LUT'; // Verlinkte Übersetzung (optional)
</script>

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>

1968
HaWeb/package-lock.json generated

File diff suppressed because it is too large Load Diff

View File

@@ -4,14 +4,23 @@
"description": "",
"main": "index.js",
"scripts": {
"css:build": "npx tailwind build ./wwwroot/css/site.css -o ./wwwroot/css/output.css"
"css_build": "npx postcss wwwroot/css/site.css -o wwwroot/css/output.css",
"watch": "watch 'npm run css_build'"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"autoprefixer": "^10.4.7",
"postcss": "^8.4.13",
"cssnano": "^5.1.11",
"postcss": "^8.4.14",
"postcss-cli": "^9.1.0",
"tailwindcss": "^3.0.24"
},
"dependencies": {
"watch": "^1.0.2"
},
"watch": {
"css_build": "wwwroot/css/site.css"
}
}

View File

@@ -1,6 +1,9 @@
module.exports = {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
plugins: [
require('tailwindcss'),
// Production:
require('autoprefixer'),
require('cssnano')({ preset: 'default' })
],
}

View File

@@ -31,7 +31,16 @@ module.exports = {
extend: {
colors: {
'hamannHighlight': '#d80000',
'hamannLightHighlight': '#cc7878'
'hamannLightHighlight': '#cc7878',
'hamannSlate': {
50: '#6A829E',
100: '#416C9E',
200: '#3F8FEB',
300: '#3270B8',
500: '#2B619E',
700: '#1E4570',
900: '#173557'
}
}
},
},

File diff suppressed because one or more lines are too long

View File

@@ -158,6 +158,22 @@
@apply border-b-2 border-slate-200
}
.ha-register .ha-register-head .ha-register-add a {
@apply rounded border border-black hover:shadow-md hover:border-hamannHighlight
}
.ha-register .ha-register-head .ha-register-add a .ha-register-add-plusbutton {
@apply rounded-l bg-slate-200
}
.ha-register .ha-register-head .ha-register-add a:hover .ha-register-add-plusbutton {
}
.ha-register .ha-register-head .ha-register-add a .ha-register-add-text {
}
.ha-register .ha-register-head .ha-register-nav a {
@apply text-slate-700 hover:text-slate-900 dark:text-white dark:hover:text-gray-300
}
@@ -173,7 +189,7 @@
.ha-register .ha-neuzeit .ha-register-body .ha-commenthead .ha-letlinks::before,
.ha-register .ha-forschung .ha-register-body .ha-commenthead .ha-letlinks::before {
@apply bg-slate-400 dark:bg-slate-500
@apply bg-hamannSlate-500 dark:bg-slate-500
}
.ha-register .ha-register-body .ha-commenthead .ha-letlinks.ha-expanded-box {
@@ -181,40 +197,39 @@
}
.ha-register .ha-btn-collapsed-box {
@apply hidden desktop:block absolute -top-[0.15rem] cursor-pointer
@apply hidden desktop:block absolute -top-[0.15rem] cursor-pointer mt-0.5
}
.ha-register
.ha-register-body
.ha-comment
.ha-commenthead
.ha-letlinks
.ha-hkb {
.ha-register .ha-register-body .ha-comment .ha-commenthead .ha-letlinks .ha-hkb {
@apply text-slate-900 dark:text-white
}
.ha-register .ha-register-body .ha-comment .ha-commenthead .ha-letlinks a {
@apply hover:text-slate-900 dark:hover:text-gray-200 no-underline hover:underline
@apply hover:text-hamannSlate-900 dark:hover:text-gray-200 no-underline hover:underline
}
.ha-register .ha-register-body .ha-comment .ha-commenthead .ha-letlinks {
@apply text-slate-600 dark:text-white
@apply text-slate-700 dark:text-white
}
.ha-letterhead .ha-metadata .ha-tooltiptext {
@apply bg-slate-100 shadow
@apply shadow-sm bg-slate-50 border-hamannSlate-900 text-hamannSlate-900 border dark:border-none dark:shadow dark:bg-slate-800
}
.ha-tooltip .ha-tooltiptext::after {
@apply border-t-slate-600 border-l-transparent border-r-transparent border-b-transparent
@apply border-t-slate-600 dark:border-t-slate-800 border-l-transparent border-r-transparent border-b-transparent
}
.ha-letterhead .ha-metadata .ha-metadataupperrow .ha-pill {
@apply bg-slate-100 shadow dark:bg-gray-700
@apply rounded-lg border shadow-inner border-hamannSlate-900 text-hamannSlate-900 dark:text-white dark:bg-slate-800 dark:shadow-md dark:border-slate-400
}
.ha-letterhead .ha-metadata .ha-metadataupperrow .ha-pill.ha-newpill {
@apply dark:text-white dark:bg-slate-800 dark:shadow-md dark:border-slate-400
}
.ha-letterhead .ha-metadata .ha-metadataupperrow .ha-pill .ha-cross::before {
@apply border-b-2 border-gray-600 dark:border-gray-200
@apply border-b-2 border-hamannSlate-900 dark:border-gray-200
}
.ha-letterheader {
@@ -258,7 +273,7 @@
}
.ha-linecount.ha-firstline {
@apply sm:bg-slate-100 sm:dark:bg-gray-700 shadow
@apply rounded-lg sm:border sm:bg-slate-50 sm:shadow-inner sm:border-slate-600 text-slate-800 dark:text-white sm:dark:bg-slate-800 sm:dark:shadow-md sm:dark:border-slate-400
}
.ha-linecount .ha-zhpage,
@@ -268,7 +283,7 @@
.ha-tradzhtext .ha-marginal::before,
.ha-lettertext .ha-marginal:before {
@apply bg-slate-400 dark:bg-slate-500
@apply bg-hamannSlate-500 dark:bg-slate-500
}
.ha-tradzhtext .ha-marginalbox,
@@ -359,6 +374,14 @@
@apply border-none
}
.ha-scrollbutton {
@apply opacity-0 transition-opacity duration-500 cursor-pointer fixed left-[85%] text-center bottom-0 pb-3 pt-2 bg-slate-50 dark:bg-slate-700 dark:text-white px-2 shadow-md rounded-t-xl hover:shadow-lg text-hamannSlate-700 hover:text-hamannSlate-500
}
.ha-scrollbuttonarrow {
@apply h-8 w-8
}
/* Classes for the footer */
.ha-footer {
@apply font-serif;
@@ -435,7 +458,7 @@
}
.ha-static p {
@apply my-3
@apply my-4
}
.ha-static a {
@@ -473,6 +496,22 @@
@apply font-bold text-xl desktop:font-normal desktop:text-4xl mb-6
}
.ha-register .ha-register-head .ha-register-add a {
@apply -mt-4 mb-6 flex flex-row w-fit text-sm font-sans
}
.ha-register .ha-register-head .ha-register-add a .ha-register-add-plusbutton {
@apply px-2 leading-none text-xl font-bold pb-0.5
}
.ha-register .ha-register-head .ha-register-add a:hover .ha-register-add-plusbutton {
}
.ha-register .ha-register-head .ha-register-add a .ha-register-add-text {
@apply pl-1 pr-2 leading-none pt-1
}
.ha-register .ha-register-head .ha-register-nav {
@apply font-sans
}
@@ -535,11 +574,11 @@
}
.ha-register .ha-register-body .ha-comment .ha-commenthead .ha-letlinks {
@apply inline-block font-normal text-xs md:text-sm leading-snug font-sans caps-allpetite ml-2
@apply inline-block font-normal text-xs md:text-sm leading-snug font-sans caps-allpetite ml-2 mt-1
}
.ha-register .ha-register-body .ha-comment .ha-commenthead .ha-letlinks::before {
@apply absolute top-[0.1rem] bottom-[0.1rem] left-0 w-0.5 content-['']
@apply absolute mt-1 top-[0.1rem] bottom-[0.1rem] left-0 w-0.5 content-['']
}
.ha-register
@@ -637,7 +676,7 @@
}
.ha-letterhead .ha-metadata .ha-tooltip {
@apply self-center cursor-default inline-block relative
@apply self-center cursor-default inline-block relative
}
.ha-letterhead .ha-metadata .ha-tooltiptext {
@@ -649,7 +688,7 @@
}
.ha-letterhead .ha-metadata .ha-metadataupperrow .ha-pill {
@apply text-xs rounded px-2 ml-2 py-[0.1rem]
@apply text-sm rounded px-1.5 ml-2 py-0.5 leading-none caps-allpetite tracking-wide
}
.ha-letterhead .ha-metadata .ha-metadataupperrow .ha-pill .ha-cross {
@@ -755,7 +794,7 @@
}
.ha-uploadcontainer .ha-publishfilelist .ha-publishfilelabel {
@apply mt-4 ml-6 rounded-md px-3 border-2 border-blue-600 hover:border-2 hover:shadow active:shadow-inner hover:border-blue-800 cursor-pointer float-right;
@apply relative mt-4 ml-6 rounded-md px-3 border-2 border-blue-600 hover:border-2 hover:shadow active:shadow-inner hover:border-blue-800 cursor-pointer float-right;
}
.ha-uploadcontainer .ha-availablefiles {
@@ -1049,7 +1088,7 @@
}
.ha-linecount.ha-firstline {
@apply hidden sm:inline-block rounded px-1 sm:pb-1 caps-allpetite normal-nums whitespace-nowrap
@apply hidden sm:inline-block rounded px-1.5 sm:py-0.5 sm:pb-1 sm:leading-none caps-allpetite normal-nums whitespace-nowrap
}
.ha-linecount {
@@ -1075,12 +1114,12 @@
.ha-tradzhtext .ha-marginal::before,
.ha-lettertext .ha-marginal::before {
@apply absolute top-[0.1rem] bottom-[0.1rem] left-0 w-0.5 content-['']
@apply absolute top-[0.2rem] bottom-[0.1rem] left-0 w-0.5 content-['']
}
.ha-tradzhtext .ha-marginalbox,
.ha-lettertext .ha-marginalbox {
@apply hidden pl-2 md:block absolute left-full ml-6 mt-1 w-[16rem] desktop:w-[24rem] text-sm leading-tight rounded-sm font-sans
@apply hidden select-none hover:select-auto hyphenate pl-2 md:block absolute left-full ml-2 desktop:ml-10 mt-1 w-[16rem] desktop:w-[28rem] text-sm leading-tight rounded-sm font-sans
}
.ha-tradzhtext .ha-marginalbox .ha-marginallist,
@@ -1107,7 +1146,7 @@
.ha-tradzhtext .ha-btn-collapsed-box,
.ha-lettertext .ha-btn-collapsed-box {
@apply absolute left-full ml-4 hidden md:block cursor-pointer leading-none mt-0.5
@apply absolute left-full desktop:ml-7 hidden md:block cursor-pointer leading-none mt-0.5
}
.ha-minwidth .ha-tradzhtext,
@@ -1376,6 +1415,7 @@
/* Not implemented in tailwindcss */
* {
scroll-behavior: smooth;
text-decoration-skip-ink: all;
}
@@ -1440,6 +1480,9 @@ body {
-webkit-text-decoration-skip-ink: auto;
}
/* Missiung Tailwind classes */
.hyphenate {
hyphens: auto;
}
@@ -1468,6 +1511,7 @@ body {
font-variant-caps: normal;
}
.break-inside-avoid {
break-inside: avoid;
}
@@ -1584,7 +1628,23 @@ body {
bottom: 20px;
}
.ha-lds-ellipsis div {
.ha-lds-ellipsis-load {
display: none;
position: relative;
width: 38px;
bottom: 8px;
}
.ha-lds-ellipsis-publish {
display: none;
position: absolute;
left: -50px;
bottom: 16px;
}
.ha-lds-ellipsis div,
.ha-lds-ellipsis-load div,
.ha-lds-ellipsis-publish div {
position: absolute;
width: 7px;
height: 7px;
@@ -1593,22 +1653,30 @@ body {
animation-timing-function: cubic-bezier(0, 1, 1, 0);
}
.ha-lds-ellipsis div:nth-child(1) {
.ha-lds-ellipsis div:nth-child(1),
.ha-lds-ellipsis-load div:nth-child(1),
.ha-lds-ellipsis-publish div:nth-child(1) {
left: 6px;
animation: ha-lds-ellipsis1 0.6s infinite;
}
.ha-lds-ellipsis div:nth-child(2) {
.ha-lds-ellipsis div:nth-child(2),
.ha-lds-ellipsis-load div:nth-child(2),
.ha-lds-ellipsis-publish div:nth-child(2) {
left: 4px;
animation: ha-lds-ellipsis2 0.6s infinite;
}
.ha-lds-ellipsis div:nth-child(3) {
.ha-lds-ellipsis div:nth-child(3),
.ha-lds-ellipsis-load div:nth-child(3),
.ha-lds-ellipsis-publish div:nth-child(3) {
left: 16px;
animation: ha-lds-ellipsis2 0.6s infinite;
}
.ha-lds-ellipsis div:nth-child(4) {
.ha-lds-ellipsis div:nth-child(4),
.ha-lds-ellipsis-load div:nth-child(4),
.ha-lds-ellipsis-publish div:nth-child(4) {
left: 30px;
animation: ha-lds-ellipsis3 0.6s infinite;
}

View File

@@ -1,3 +1,4 @@
// Functions for opening and closing the menu on mobile devices
const openmenu = function () {
var x = document.getElementById("ha-topnav");
if (x !== null) x.className += " ha-topnav-collapsed";
@@ -31,6 +32,7 @@ const markactive_startswith = function (element) {
};
const markactive_exact = function (element) {
// Marks links active which target URL is exact the same as the current URL
var all_links = element.getElementsByTagName("a"),
i = 0,
len = all_links.length,
@@ -43,6 +45,7 @@ const markactive_exact = function (element) {
}
};
// Functions for collapsing marginals, and adding a button next to those
const getLineHeight = function (element) {
var temp = document.createElement(element.nodeName),
ret;
@@ -122,7 +125,6 @@ const addbuttoncaollapsebox = function (element, height, hoverfunction) {
element.parentNode.insertBefore(btn, element);
};
/* TODO: need a resize watcher to undo and reapply the effect on breakpoint */
const overlappingcollapsebox = function (selector, hoverfunction) {
let boxes = document.querySelectorAll(selector);
let lineheight = 1;
@@ -172,6 +174,22 @@ const overlappingcollapsebox = function (selector, hoverfunction) {
}
};
const marginalboxwidthset = function() {
let lt = document.getElementById("ha-letterbody");
if (lt !== null) {
let mg = lt.querySelectorAll(".ha-lettertext .ha-marginalbox");
if (mg.length > 0) {
let ltbcr = lt.getBoundingClientRect();
let mgbcr = mg[0].getBoundingClientRect();
let nw = ltbcr.right - mgbcr.left - 18;
for (let element of mg) {
element.style.width = nw + "px";
}
}
}
}
/* Button to hide / show traditions, marginals and the text of the letter */
const showhidebutton = function (
buttonid,
@@ -215,6 +233,11 @@ const showhidebutton = function (
}
};
const collapseboxes = function () {
overlappingcollapsebox(".ha-neuzeit .ha-letlinks", true);
overlappingcollapsebox(".ha-forschung .ha-letlinks", true);
overlappingcollapsebox(".ha-lettertext .ha-marginalbox", true);
};
// Functions for switching theme
const go_to_dark = function () {
localStorage.setItem("theme", "ha-toggledark");
@@ -233,14 +256,26 @@ const get_theme_settings = function (standard) {
let toggleSwitch = document.getElementById(theme).click();
};
const collapseboxes = function () {
overlappingcollapsebox(".ha-neuzeit .ha-letlinks", true);
overlappingcollapsebox(".ha-forschung .ha-letlinks", true);
overlappingcollapsebox(".ha-lettertext .ha-marginalbox", true);
};
// Functions for scrolling
const scrollFunction = function () {
button = document.getElementById("ha-scrollbutton");
if (document.body.scrollTop > 300 || document.documentElement.scrollTop > 300) {
button.style.opacity = "1";
} else {
button.style.opacity = "0";
}
}
//////////////////////////////// ONLOAD ////////////////////////////////////
window.addEventListener("load", function () {
// Scroll button
let scrollbutton = this.document.getElementById("ha-scrollbutton");
scrollbutton.addEventListener("click", () => {
document.body.scrollTop = 0; // For Safari
document.documentElement.scrollTop = 0; // For Chrome, Firefox, IE and Opera
})
this.window.addEventListener("scroll", scrollFunction);
// Menu: Show / Hide Buttons for mobile View
if (
document.getElementById("openmenubutton") !== null &&
@@ -263,11 +298,13 @@ window.addEventListener("load", function () {
markactive_exact(document.getElementById("ha-adminuploadfields"));
// Letter / Register View: Collapse all unfit boxes + resize observer
marginalboxwidthset();
collapseboxes();
var doit;
this.window.addEventListener("resize", function () {
this.clearTimeout(doit);
this.setTimeout(collapseboxes, 250);
marginalboxwidthset();
doit = this.setTimeout(collapseboxes, 250);
});
// Letter View: Show / Hide Tabs