Handschriften Verbesserungen Krakow

src/dynamic/handschriften.njk

@@ -123,9 +123,21 @@ eleventyNavigation:
 
 <div class="yearlist" id="list">
   {%- for post in collections.handschriften -%}
-    <div class="category handschrift-sammlung !bg-slate-100 !py-5 !mb-12" id="{{ post.data.Ort | safe }}">
-      <div class="text-xl basis-1/5 font-bold self-start z-0 sticky top-14 pr-3 pl-3">{{ post.data.Ort | safe }}</div>
-      <div class=" basis-4/5 flex flex-col sm:flex-row flex-wrap gap-x-4 gap-y-5 justify-start">{{ post.content | safe }}</div>
+    <div class="category handschrift-sammlung !bg-slate-100 !py-5 !mb-6" id="{{ post.data.Ort | safe }}">
+      <div class="text-xl basis-1/5 font-bold self-start z-0 sticky top-14 pr-3 pl-3">
+      {{ post.data.Ort | safe }}
+      {% if post.data.Verschollen == "yes" %}
+          <div class="font-normal italic">Verschollen</div>
+        {% endif %}
+      </div>
+      <div class="basis-4/5 flex flex-col items-stretch gap-y-4">
+        <div class="flex flex-col sm:flex-row flex-wrap gap-x-4 gap-y-5 justify-start">
+          {{ post.content | safe }}
+        </div>
+        {# <button class="hideprevbutton self-stretch min-h-[3rem] border border-black">
+          ANZEIGEN
+        </button> #}
+      </div>
     </div>
   {%- endfor -%}
 </div>

src/static/css/site.css

@@ -191,9 +191,12 @@
     }
 
     .handschrift-sammlung .information {
-      @apply pr-4
+      @apply bg-slate-50 border border-gray-400 px-4 py-1.5 mr-4
     }
 
+    .handschrift-sammlung .handschrift-liste {
+      @apply w-full mr-4
+    }
 
     .handschrift-sammlung .beschreibung {
       @apply mt-1.5
@@ -250,6 +253,11 @@
     }
   }
 
+  .handschrift-sammlung .handschrift-liste ol {
+    list-style-type: disc; 
+    list-style-position: outside; 
+  }
+
   .hidden-important {
     display: none !important;
   }

src/static/js/scripts.js

@@ -14,7 +14,8 @@ const hideifsearchingclasses = [
   "category",
 ];
 const categoryclass = "category";
-const searchableclasses = ["searchable", "handschrift"];
+const searchableclasses = ["searchable", "handschrift", "handschrift-liste"];
+const hideprevsiblingbtnclass = "hideprevbutton";
 
 // Elements
 let listelement = document.getElementById(listid);
@@ -24,6 +25,7 @@ let scrollbtnelement = document.getElementById(scrollbuttonid);
 let listselectelement = document.getElementById(listselectid);
 let inputelement = document.querySelector(inputselector);
 let categoryelements = document.getElementsByClassName(categoryclass);
+let hideprevsiblingbtnelements = document.getElementsByClassName(hideprevsiblingbtnclass);
 let showifsearchingelements = document.querySelectorAll("." + showifsearchingclasses.join(", ."));
 let hideifsearchingelements = document.querySelectorAll("." + hideifsearchingclasses.join(", ."));
 let searchableelements = document.querySelectorAll("." + searchableclasses.join(", ."));
@@ -63,7 +65,7 @@ const scrollFunction = function () {
   }
 };
 
-function isInViewport(element) {
+const isInViewport = function (element) {
   const rect = element.getBoundingClientRect();
   return (
     rect.top >= 0 &&
@@ -74,7 +76,7 @@ function isInViewport(element) {
   );
 }
 
-function createIndex(id) {
+const createIndex = function(id) {
   for (var s of searchableelements) {
       dictionary.push({
         category: s.closest("." + categoryclass),
@@ -84,7 +86,7 @@ function createIndex(id) {
   }
 }
 
-function findWord(word, d) {
+const findWord = function (word, d) {
   var sw = word.trim().toLowerCase();
   return d.filter(function (e) {
     if (e.searchitem.indexOf(sw) !== -1) {
@@ -133,6 +135,10 @@ const search = function (evt) {
       if (found.indexOf(item) !== -1) {
         item.category.classList.add("search-expanded");
         item.category.classList.remove(hiddenclass);
+        let prevbutton = item.category.getElementsByClassName(hideprevsiblingbtnclass);
+        if (prevbutton.length > 0) {
+          prevbutton[0].previousElementSibling.classList.remove(hiddenclass);
+        } 
         item.element.classList.remove(hiddenclass);
         if (term.length >= 2) {
           $(item.element).mark(term, {
@@ -166,14 +172,31 @@ const searchreset = function () {
   showifinarr(hideifsearchingelements);
   hideifinarr(showifsearchingelements);
   inputelement.value = "";
+  resethidecat();
 };
 
-hideifinarr(showifsearchingelements);
+const resethidecat = function() {
+  for (let el of hideprevsiblingbtnelements) {
+    let prevsib = el.previousElementSibling;
+    if (!prevsib.classList.contains(hiddenclass)) {
+      prevsib.classList.add(hiddenclass);
+    }
+  }
+}
+
+const toggleghidecat = function(cat) {
+  let prevsib = cat.previousElementSibling;
+  if (prevsib.classList.contains(hiddenclass)) {
+    prevsib.classList.remove(hiddenclass);
+  } else {
+    prevsib.classList.add(hiddenclass);
+  }
+}
+
 
 // Mobile menu
 if (navbtnelement !== null && navelelement !== null) {
   navbtnelement.addEventListener("click", () => {
-    console.log("hallo!");
     if (navelelement.classList.contains(hiddenclass)) {
       navelelement.classList.remove(hiddenclass);
     } else {
@@ -182,6 +205,13 @@ if (navbtnelement !== null && navelelement !== null) {
   });
 }
 
+// Hide category button
+for (let el of hideprevsiblingbtnelements) { 
+  el.addEventListener("click", () => {
+    toggleghidecat(el);
+  });
+}
+
 // Scroll button
 if (scrollbtnelement !== null) {
   scrollFunction();
@@ -222,4 +252,6 @@ if (listelement) {
       }
     };
   }
-}
+}
+
+hideifinarr(showifsearchingelements);