Added marginals animation; stylized site switch button

HaWeb/Views/HKW/Static/Werkuebersicht.cshtml

@@ -5,10 +5,10 @@
 
 <div class="ha-static">
     <h1 class="!leading-tight">Werkübersicht</h1>
-    <div class="relative">
+    <div class="relative desktop:mr-16">
-    <table>
+    <h3 class="pl-2">Schriften (chronologisch)</h3>
+    <table class="border-r-2 border-l-2 border-b-2">
         <tr >
-            <th class="pb-4">Schriften (chronologisch)</th>
         </tr>
         <tr>
             <td class="w-1/2 !pr-14">

HaWeb/Views/Shared/_HKBMenu.cshtml

@@ -61,13 +61,12 @@
             </div>
         </div>
     </nav>
-    <div class="w-100 absolute right-0 -bottom-10">
+    <div class="switchsites">
-        <div class="w-auto dark:bg-slate-900 bg-gray-50 text-base py-1 px-2 drop-shadow-sm dark:drop-shadow-md">
+        <a class="switchsitesbtn" asp-controller="HKW" asp-action="Index">
-            <a class="" asp-controller="HKW" asp-action="Index">
+            <img src="/img/HKW.png" alt="HKB-Logo" />
-                <img src="/img/HKW.png" class="inline w-5 h-5 mr-2 border dark:border-none border-gray-300 " alt="HKB-Logo" />
+            <span class="switchsitestext">Kritische Werkedition</span>
-                <span class="underline decoration-dotted hover:decoration-solid decoration-slate-500">Kritische Werkedition</span> →
+            <span class="switchsitesarrow">→</span>
-            </a>
+        </a>
-        </div>
     </div>
     @* @if(showCredits) 
     {

HaWeb/Views/Shared/_HKWMenu.cshtml

@@ -69,12 +69,11 @@
             </div>
         </div>
     </nav>
-    <div class="w-100 absolute right-0 -bottom-10">
+    <div class="switchsites">
-        <div class="w-auto dark:bg-slate-900 bg-gray-50 text-base py-1 px-2 drop-shadow-sm dark:drop-shadow-md">
+        <a class="switchsitesbtn" asp-controller="Index" asp-action="Index">
-            <a class="" asp-controller="Index" asp-action="Index">
+            <img src="/img/HKB.png" alt="HKB-Logo" />
-                <img src="/img/HKB.png" class="inline w-5 h-5 mr-2 border dark:border-none border-gray-300 " alt="HKB-Logo" />
+            <span class="switchsitestext">Kommentierte Briefausgabe</span>
-                <span class="underline decoration-dotted hover:decoration-solid decoration-slate-500">Kommentierte Briefausgabe</span> →
+            <span class="switchsitesarrow">→</span>
-            </a>
+        </a>
-        </div>
     </div>
 </header>

HaWeb/wwwroot/css/header.css

@@ -9,7 +9,7 @@
   }
 
   .ha-topnav a {
-    @apply text-slate-700 hover:text-slate-900 
+    @apply text-slate-700 hover:text-slate-900 desktop:border-b-4 desktop:border-transparent dark:border-slate-700
   }
 
   .ha-topnav a.active {
@@ -93,4 +93,24 @@
     a {
     @apply py-1 desktop:py-2
   }
+
+  header .switchsites {
+    @apply absolute right-0 border-t-2 -bottom-11
+  }
+
+  header .switchsites .switchsitesbtn {
+    @apply flex w-auto dark:bg-slate-900 bg-gray-50 text-base drop-shadow-sm dark:drop-shadow-md
+  }
+
+  header .switchsites .switchsitesbtn img {
+    @apply inline-block w-5 h-5 mr-2 border dark:border-none border-gray-300 mb-0.5 mt-1 mx-2
+  }
+
+  header .switchsites .switchsitesbtn .switchsitestext {
+    @apply underline decoration-dotted hover:decoration-solid decoration-slate-500 mb-0.5 mt-1 mx-2
+  }
+
+  header .switchsites .switchsitesbtn .switchsitesarrow {
+    @apply  h-full pb-0.5 pt-1 px-2 shadow-inner border-l
+  }
 }

HaWeb/wwwroot/css/icons.css

@@ -50,15 +50,34 @@
     visibility: visible;
     opacity: 1;
   }
-  
+
-  .ha-open-btn-collapsed-box::before {
+  .ha-open-btn-collapsed-box::after {
     content: "\200E+";
-    font-weight: 900;
   }
-  
+
+  .ha-open-btn-collapsed-box {
+    transform: rotate(0deg);
+    font-weight: bold;
+    -webkit-transition: -webkit-transform 80ms ease-in-out;
+    -moz-transition:    -moz-transform 80ms ease-in-out;
+    -o-transition:      -o-transform 80ms ease-in-out;
+    -ms-transition:     -ms-transform 80ms ease-in-out;
+    transition:         transform 80ms ease-in-out;
+  }
+
+  .ha-open-btn-collapsed-box.ha-close-btn-collapsed-box {
+    transform: rotate(45deg);
+    transform-origin: 53% 57%;
+    -webkit-transition: -webkit-transform 80ms ease-in-out;
+    -moz-transition:    -moz-transform 80ms ease-in-out;
+    -o-transition:      -o-transform 80ms ease-in-out;
+    -ms-transition:     -ms-transform 80ms ease-in-out;
+    transition:         transform 80ms ease-in-out;
+  }
+/*   
   .ha-close-btn-collapsed-box::before {
-    content: "\200E\00D7";
+    /* content: "\200E\00D7"; */
-    font-weight: 900;
+    /*font-weight: 900;
   }
   
   .ha-uploadheader .ha-usedfilesheaderlist .ha-plussign {

HaWeb/wwwroot/css/letter.css

@@ -283,12 +283,12 @@
 
   .ha-tradzhtext .ha-marginal::before,
   .ha-lettertext .ha-marginal::before {
-    @apply absolute top-[0.2rem] bottom-[0.1rem] left-0 w-0.5 content-['']
+    @apply absolute top-[0.2rem] bottom-[0.1rem] left-[0.1rem] w-0.5 content-['']
   } 
 
   .ha-tradzhtext .ha-marginalbox,
   .ha-lettertext .ha-marginalbox {
-    @apply hidden select-none hover:select-auto hyphenate pl-2 md:inline-block absolute left-full ml-6 desktop:ml-16 mt-1 w-[16rem] desktop:w-[28rem] text-sm leading-tight rounded-sm font-sans 
+    @apply hidden select-none hover:select-auto hyphenate pl-1 md:inline-block absolute left-full ml-6 desktop:ml-16 mt-1 w-[16rem] desktop:w-[28rem] text-sm leading-tight rounded-sm font-sans 
   }
 
   .ha-tradzhtext .ha-marginalbox .ha-marginallist,
@@ -315,7 +315,7 @@
 
   .ha-tradzhtext .ha-btn-collapsed-box,
   .ha-lettertext .ha-btn-collapsed-box {
-    @apply absolute left-full ml-4 desktop:ml-[3.5rem] hidden md:inline-block cursor-pointer leading-none mt-0.5
+    @apply absolute left-full ml-4 desktop:ml-[3.4rem] hidden md:inline-block cursor-pointer leading-none mt-0.5
   }
 
   .ha-minwidth .ha-tradzhtext,

HaWeb/wwwroot/js/marginals.js

@@ -3,7 +3,7 @@ const getLineHeight = function (element) {
     var temp = document.createElement(element.nodeName),
         ret;
     temp.setAttribute("class", element.className);
-    temp.innerHTML = "Ü";
+    temp.innerHTML = "Üj";
     element.parentNode.appendChild(temp);
     ret = temp.getBoundingClientRect().height;
     temp.parentNode.removeChild(temp);
@@ -35,14 +35,12 @@ const addbuttoncaollapsebox = function (element, height, hoverfunction) {
         ev.stopPropagation();
         if (element.classList.contains("ha-collapsed-box")) {
             uncollapsebox(element);
-            btn.classList.remove("ha-open-btn-collapsed-box");
             btn.classList.add("ha-close-btn-collapsed-box");
             btn.classList.add("ha-collapsed-box-manually-toggled");
         } else {
             collapsebox(element, height);
             btn.classList.remove("ha-close-btn-collapsed-box");
             btn.classList.remove("ha-collapsed-box-manually-toggled");
-            btn.classList.add("ha-open-btn-collapsed-box");
         }
     });
 
@@ -54,10 +52,9 @@ const addbuttoncaollapsebox = function (element, height, hoverfunction) {
             timer = setTimeout(function () {
                 if (element.classList.contains("ha-collapsed-box")) {
                     uncollapsebox(element);
-                    btn.classList.remove("ha-open-btn-collapsed-box");
                     btn.classList.add("ha-close-btn-collapsed-box");
                 }
-            }, 200);
+            }, 80);
         });
 
         element.addEventListener("mouseleave", function (ev) {
@@ -71,7 +68,6 @@ const addbuttoncaollapsebox = function (element, height, hoverfunction) {
             ) {
                 collapsebox(element, height);
                 btn.classList.remove("ha-close-btn-collapsed-box");
-                btn.classList.add("ha-open-btn-collapsed-box");
             }
         });
     }
@@ -105,7 +101,7 @@ const overlappingcollapsebox = function (selector, hoverfunction) {
                 if (newlength % (lineheight * 3) <= 2)
                     newlength -= lineheight;
                 let remainder = newlength % lineheight;
-                newlength = newlength - remainder - 1;
+                newlength = newlength - remainder;
 
                 // Line clamping for Marginals
                 if (element.classList.contains("ha-marginalbox")) {