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

HaWeb/Controllers/RegisterController.cs

@@ -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
         };

HaWeb/HaWeb.csproj

@@ -6,24 +6,16 @@
     <Nullable>enable</Nullable>
     <ImplicitUsings>enable</ImplicitUsings>
   </PropertyGroup>
-  <ItemGroup>
+
-     <!-- exclude all Content items from being watched -->
+<ItemGroup>
-    <Content Update="wwwroot/css/site.css" Watch="false" />
+    <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>

HaWeb/Models/RegisterViewModel.cs

@@ -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;
     }
 }

HaWeb/README.md

@@ -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

HaWeb/Views/Admin/Upload/Index.cshtml

@@ -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">
+    @await Html.PartialAsync("/Views/Shared/_UploadForm.cshtml", Model)
-        <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>
 
     <a class="ha-publishbutton" asp-controller="Upload" asp-action="Index" asp-route-id="@string.Empty">
       <div class="ha-publishtext">Veröffentlichen</div>
@@ -43,13 +33,15 @@
   </div>
 </div>
 
+
 <div class="ha-uploadheader">
   <h1 class="ha-uploadtitle">@Model.ActiveTitle</h1>
 </div>
 
+
 <div class="ha-uploadcontainer">
-@* File Category Page File List *@
+  @* File Category Page File List *@
-@if (Model.AvailableFiles != null && Model.AvailableFiles.Any()) {
+  @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>
@@ -68,24 +60,11 @@
           }
       </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))
+          @await Html.PartialAsync("/Views/Shared/_FileListForm.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">
+    @if (Model.UsedFiles != null && Model.Prefix != null && Model.UsedFiles.ContainsKey(Model.Prefix)) {
-    @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">
 
@@ -98,7 +77,20 @@ else {
       <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));
     });
 
     

HaWeb/Views/Briefe/Index.cshtml

@@ -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>
         }
-        </div>
         @Html.Raw(@Model.ParsedText)
         @* It's not beautiful but it's a hack to keep the last comment within parent element boundaries: *@
         <br>

HaWeb/Views/Edition/Richtlinien.cshtml

@@ -37,6 +37,11 @@
                 <td>in spitzen Klammern ⟨...⟩</td>
                 <td><span class="ha-del">Durchstreichung</span> (einfache bis doppelte)</td>
             </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>

HaWeb/Views/Register/Index.cshtml

@@ -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>

HaWeb/Views/Shared/_FileListForm.cshtml

@@ -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) => {
+            document.getElementById("ha-filelistbutton").style.pointerEvents = "auto";
+            document.getElementById("ha-lds-ellipsis-load").style.display = "none";
             document.getElementById("ha-filelistoutput").textContent = e;
         })
     }
-
-    
 </script>

HaWeb/Views/Shared/_Layout.cshtml

@@ -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>
 

HaWeb/Views/Shared/_LetterHead.cshtml

@@ -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>

HaWeb/Views/Shared/_PublishForm.cshtml

@@ -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>

HaWeb/Views/Shared/_UploadForm.cshtml

@@ -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>

HaWeb/package.json

@@ -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"
   }
 }

HaWeb/postcss.config.js

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

HaWeb/tailwind.config.js

@@ -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'
+        }
       }
     },
   },

HaWeb/wwwroot/css/site.css

@@ -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 .ha-register-body .ha-comment .ha-commenthead .ha-letlinks .ha-hkb {
-    .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
@@ -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;
 }

HaWeb/wwwroot/js/site.js

@@ -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 () {
+// Functions for scrolling
-  overlappingcollapsebox(".ha-neuzeit .ha-letlinks", true);
+const scrollFunction = function () {
-  overlappingcollapsebox(".ha-forschung .ha-letlinks", true);
+  button = document.getElementById("ha-scrollbutton");
-  overlappingcollapsebox(".ha-lettertext .ha-marginalbox", true);
+  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