spec-up-t 1.1.54 → 1.2.0

package/assets/css/terms-and-definitions.css

@@ -1,26 +1,18 @@
+/* 
+ * Terms and Definitions Styling
+ * Organized by component and functionality
+ */
 
-h2,h3,h4,h5,h6 {
- margin-top: 1.5em !important;
+/* ====== GENERAL HEADING STYLES ====== */
+h2,
+h3,
+h4,
+h5,
+h6 {
+  margin-top: 1.5em !important;
 }
 
-
-/* START The “#” before every term that serves as an anchor */
-.toc-anchor {
-  font-size: 0.875em;
-  color: inherit;
-  text-decoration: none;
-  /* opacity: 0.35; */
-  color: #73c2df;
-  transition: opacity 0.3s ease;
-}
-
-.toc-anchor:hover {
-  opacity: 1;
-}
-/* END */
-
-
-/* Terminology Section Utility Container */
+/* ====== TERMINOLOGY SECTION CONTAINER ====== */
 #terminology-section-utility-container {
   display: flex;
   flex-wrap: wrap;
@@ -30,135 +22,257 @@ h2,h3,h4,h5,h6 {
   width: 100%;
 }
 
-/* Small devices (landscape phones, 576px and up) */
 @media (min-width: 576px) {
   #terminology-section-utility-container {
     position: sticky;
     top: 3.5em;
+    z-index: 10; /* Higher z-index to ensure it stays on top */
   }
 }
-/* End Terminology Section Utility Container */
-
-
-/* Transclusions */
-.transcluded-xref-term {
-  background: #a9dde03b !important;
-  padding: 0.5em;
-  margin: 1em 0;
-}
-
-.transclusion-heading {
-  font-size: 1.3em;
-  font-weight: bold;
-  margin: 1em 0 0.5em;
-}
-
-dl.terms-and-definitions-list>dd.transcluded-xref-term-embedded {
-  background-image: linear-gradient(45deg,
-      hsl(190deg 60% 95%) 0%,
-      hsl(189deg 60% 93%) 8%,
-      hsl(189deg 60% 91%) 17%,
-      hsl(188deg 60% 89%) 25%,
-      hsl(188deg 60% 87%) 33%,
-      hsl(187deg 60% 85%) 42%,
-      hsl(186deg 60% 83%) 50%,
-      hsl(190deg 60% 83%) 58%,
-      hsl(193deg 60% 83%) 67%,
-      hsl(197deg 60% 83%) 75%,
-      hsl(202deg 60% 83%) 83%,
-      hsl(207deg 60% 83%) 92%,
-      hsl(212deg 60% 83%) 100%) !important;
-
-}
 
-.placeholder-tref {
-  display: none;
-}
-
-/* End Transclusions */
-
-
-/* Start No xref found */
-.btn,
-.no-xref-found-message {
-  font-variant: small-caps;
-  text-transform: uppercase;
+/* ====== ANCHOR LINKS ====== */
+.toc-anchor {
+  font-size: 0.875em;
+  color: #73c2df;
+  text-decoration: none;
+  transition: opacity 0.3s ease;
 }
 
-.no-xref-found-message {
-  background: #f8c481 !important;
-  color: #03365f !important;
-  margin: 0 0.5em;
-  padding: 0 0.8em;
-  border-radius: 0.25rem;
-  font-size: 0.8rem;
+.toc-anchor:hover {
+  opacity: 1;
 }
-/* End No xref found */
 
-/* START: Definition list for terms styled as Bootstrap Cards */
+/* ====== DEFINITION LIST STYLING (BOOTSTRAP CARD STYLE) ====== */
 dl.terms-and-definitions-list {
   margin: 0;
   padding: 0;
+  position: relative;
+  z-index: 1; /* Set a baseline z-index for the whole list */
 }
 
-dl.terms-and-definitions-list>dt {
+/* ====== DEFAULT STYLING ====== */
+/* Term styling (dt) */
+dl.terms-and-definitions-list > dt {
   font-weight: 700;
-  /* Bootstrap uses 700 for bold */
   margin: 0;
   background-color: var(--card-bg-dt);
   border: 1px solid var(--card-border);
-  padding: 0.1rem 1.25rem;
-  /* Bootstrap card-header padding */
+  padding: 0.5rem 1.25rem; /* Increased vertical padding for better readability */
   border-radius: 0.375rem 0.375rem 0 0;
-  /* Bootstrap default border-radius */
   box-shadow: 0 0.125rem 0.25rem var(--card-shadow);
   color: var(--card-text);
+  position: relative; /* Position relative for stacking */
+  line-height: 1.5; /* Improve line spacing */
+  font-size: 1.05em; /* Slightly larger font for better hierarchy */
+  align-items: center; /* Vertically center the content */
+}
+
+/* This adds spacing between the term text and the buttons */
+dl.terms-and-definitions-list > dt > span {
+  margin-right: 1.5em; /* Add spacing to the right of the term text */
+}
+
+
+/* Increase the size for all buttons in definition terms */
+dl.terms-and-definitions-list > dt .btn {
+  font-size: 1.2em !important; /* Increase button size */
 }
 
-dl.terms-and-definitions-list>dd {
+dl.terms-and-definitions-list > dt:hover {
+  background-color: var(--card-hover-bg);
+  transition: background-color 0.2s ease-in-out;
+}
+
+/* Add a subtle indicator to each term */
+dl.terms-and-definitions-list > dt::before {
+  content: "";
+  width: 4px;
+  height: 70%;
+  background-color: #73c2df;
+  position: absolute;
+  left: 0;
+  border-radius: 0 2px 2px 0;
+}
+
+/* Definition styling (dd) - using the original simpler styling */
+dl.terms-and-definitions-list > dd {
   margin: 0;
   background-color: var(--card-bg);
   border: 1px solid var(--card-border);
   border-top: none;
-  padding: 1rem 1.25rem;
+  padding: 0.75rem 2rem;
   color: var(--card-text);
-  overflow: scroll;
   width: 100%;
+  position: relative;
 }
 
-/* Style paragraphs inside dd */
+/* Style paragraphs inside dd - using original styling */
 dl.terms-and-definitions-list dd p {
-  margin: 0;
+  margin: 0; /* Original margin for paragraphs */
   color: var(--card-text);
+  padding-left: 0.5rem;
 }
 
-/* Remove borders between consecutive <dd> elements */
-dl.terms-and-definitions-list dt+dd {
+/* Remove the blue line indicator for dd */
+dl.terms-and-definitions-list > dd::before {
+  display: none;
+}
+
+/* Improve table styling in definitions */
+dl.terms-and-definitions-list dd table {
+  margin: 1em 0;
+  width: 100%;
+  border-collapse: collapse;
+}
+
+dl.terms-and-definitions-list dd table th,
+dl.terms-and-definitions-list dd table td {
+  padding: 0.5em;
+  border: 1px solid #ddd;
+}
+
+dl.terms-and-definitions-list dd table th {
+  background-color: #f5f5f5;
+}
+
+/* Borders and spacing between elements */
+dl.terms-and-definitions-list dt + dd {
   border-bottom: none;
 }
-dl.terms-and-definitions-list dd+dd {
+
+dl.terms-and-definitions-list dd + dd {
   border-top: none;
   border-bottom: none;
 }
 
-/* Add spacing between card groups */
-dl.terms-and-definitions-list dd+dt {
-  margin-top: 1.5rem;
-  /* Bootstrap-like spacing between cards */
+dl.terms-and-definitions-list dd + dt {
+  margin-top: 0.5rem;
 }
 
-/* Style the last dd in each group */
+/* Last definition in a group */
 dl.terms-and-definitions-list dd.last-dd {
   border-radius: 0 0 0.375rem 0.375rem;
-  /* Rounded bottom corners */
   border-bottom: 1px solid var(--card-border);
 }
 
-/* Optional: Add hover effect similar to Bootstrap interactive cards */
-dl.terms-and-definitions-list>dt:hover {
-  background-color: var(--card-hover-bg);
-  transition: background-color 0.2s ease-in-out;
-  /* Smooth transition */
+/* ====== DENSE INFO STYLING ====== */
+/* Apply original, more condensed styling when the html element has class "dense-info" */
+html.dense-info dl.terms-and-definitions-list > dt {
+  padding: 0.1rem 1.25rem;
+  display: block; /* Revert from flexbox to block */
+  line-height: inherit;
+  font-size: inherit;
+}
+
+html.dense-info dl.terms-and-definitions-list > dt::before {
+  display: none; /* Remove the blue indicator bar */
+}
+
+html.dense-info dl.terms-and-definitions-list > dt > span {
+  margin-right: 0; /* Remove spacing for term text */
+}
+
+/* No need to change dd styling in dense-info mode since it's already using the original styling */
+html.dense-info dl.terms-and-definitions-list > dd {
+  padding: 0.75rem 1.25rem;
+}
+
+/* ====== TRANSCLUSIONS STYLING ====== */
+/* Base transclusion styles */
+.transcluded-xref-term {
+  position: relative;
+}
+
+dt.transcluded-xref-term,
+dd.transcluded-xref-term {
+  background: #a9dde03b !important;
+}
+
+/* Fix for all buttons */
+.btn {
+  font-variant: small-caps;
+  text-transform: uppercase;
+  position: relative;
+  z-index: 5; /* Higher z-index for all buttons */
 }
 
-/* END: Definition list for terms styled as Bootstrap Cards */
+.collapse-all-defs-button {
+  float: right;
+}
+
+.transclusion-heading {
+  font-size: 1.3em;
+  font-weight: bold;
+  margin: 1em 0 0.5em;
+}
+
+/* Embedded transclusions in definition lists */
+dl.terms-and-definitions-list > dd.transcluded-xref-term-embedded {
+  position: relative;
+  padding-left: 2.5rem;
+}
+
+dl.terms-and-definitions-list > dd.transcluded-xref-term-embedded::before {
+  content: "";
+  position: absolute;
+  left: 0;
+  top: 0;
+  bottom: 0;
+  width: 2rem;
+  border-right: 1px dashed #a9dde0;
+}
+
+/* Arrow styling for transclusions */
+dl.terms-and-definitions-list span.transcluded-xref-term::after,
+dl.terms-and-definitions-list > dd.transcluded-xref-term-embedded::after {
+  content: "";
+  position: absolute;
+  left: 0.5rem;
+  top: 50%;
+  width: 1rem;
+  height: 1rem;
+  transform: translateY(-50%);
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' class='bi bi-box-arrow-right' viewBox='0 0 16 16' fill='currentColor'%3E%3Cpath fill-rule='evenodd' d='M10 12.5a.5.5 0 0 1-.5.5h-8a.5.5 0 0 1-.5-.5v-9a.5.5 0 0 1 .5-.5h8a.5.5 0 0 1 .5.5v2a.5.5 0 0 0 1 0v-2A1.5 1.5 0 0 0 9.5 2h-8A1.5 1.5 0 0 0 0 3.5v9A1.5 1.5 0 0 0 1.5 14h8a1.5 1.5 0 0 0 1.5-1.5v-2a.5.5 0 0 0-1 0v2z'/%3E%3Cpath fill-rule='evenodd' d='M15.854 8.354a.5.5 0 0 0 0-.708l-3-3a.5.5 0 0 0-.708.708L14.293 7.5H5.5a.5.5 0 0 0 0 1h8.793l-2.147 2.146a.5.5 0 0 0 .708.708l3-3z'/%3E%3C/svg%3E");
+  background-size: contain;
+  background-repeat: no-repeat;
+  background-position: center;
+}
+
+/* Inline span styling for transclusions */
+dl.terms-and-definitions-list span.transcluded-xref-term {
+  padding-left: 1.5rem;
+  display: inline-block;
+}
+
+dl.terms-and-definitions-list span.transcluded-xref-term::before {
+  content: "";
+  position: absolute;
+  left: 0;
+  top: 0;
+  bottom: 0;
+  width: 1.2rem;
+  border-right: 1px dashed #a9dde0;
+}
+
+dl.terms-and-definitions-list span.transcluded-xref-term::after {
+  width: 0.8rem;
+  height: 0.8rem;
+  left: 0.2rem;
+}
+
+.placeholder-tref {
+  display: none;
+}
+
+/* ====== ERROR MESSAGES ====== */
+/* No cross-reference found styling */
+.no-xref-found-message {
+  background: #f8c481;
+  color: #03365f;
+  margin: 0 0.5em;
+  padding: 0 0.8em;
+  border-radius: 0.25rem;
+  font-size: 0.8rem;
+  font-variant: small-caps;
+  text-transform: uppercase;
+}

package/assets/js/addAnchorsToTerms.js

@@ -20,7 +20,7 @@ function addAnchorsToTerms() {
         const id = dt.getAttribute('id');
         const a = document.createElement('a');
         a.setAttribute('href', `#${id}`);
-        a.setAttribute('class', 'toc-anchor');
+        a.setAttribute('class', 'toc-anchor d-print-none');
         a.innerHTML = '# '; // was '§';
         dt.parentNode.insertBefore(a, dt);
     });

package/assets/js/collapse-definitions.js

@@ -13,12 +13,13 @@ function collapseDefinitions() {
             button.innerHTML = isHidden ? '▲' : '▼';
             button.title = isHidden ? 'Collapse all definitions' : 'Expand all definitions';
         });
+        document.querySelector('html').classList.toggle('defs-hidden');
     }
 
     // Add button as last child of every <dl>
     dts.forEach(dt => {
         const button = document.createElement('button');
-        button.classList.add('collapse-all-defs-button', 'btn', 'p-0', 'fs-5', 'd-flex', 'align-items-center','justify-content-center');
+        button.classList.add('collapse-all-defs-button', 'd-print-none', 'btn', 'p-0', 'fs-5', 'd-flex', 'align-items-center','justify-content-center');
         button.innerHTML = '▲';
         button.setAttribute('id', 'toggleButton');
         dt.appendChild(button);

package/assets/js/collapse-meta-info.js

@@ -1,7 +1,7 @@
 /**
  * @file This file creates a collapsible meta info section for each term definition on the page. It is used to hide meta information about a term definition by default and show it when the user clicks the button.
  * @author Kor Dwarshuis
- * @version 0.0.1
+ * @version 0.0.2
  * @since 2025-02-16
  */
 
@@ -13,12 +13,22 @@ function createToggleButton(element) {
     toggleButton.title = 'Meta info';
 
     // Add event listener to the button
-    toggleButton.addEventListener('click', function () {
-        element.classList.toggle('collapsed');
-        if (element.classList.contains('collapsed')) {
-            this.textContent = 'ℹ️';
+    toggleButton.addEventListener('click', function(e) {
+        e.preventDefault();
+        e.stopPropagation();
+        
+        // Get the wrapper containing the meta info
+        const isCollapsed = element.classList.contains('collapsed');
+        
+        // Toggle the collapsed state
+        if (isCollapsed) {
+            // If collapsed, expand it
+            element.classList.remove('collapsed');
+            // Force reflow to ensure transition works properly
+            element.getBoundingClientRect();
         } else {
-            this.textContent = 'ℹ️';
+            // If expanded, collapse it
+            element.classList.add('collapsed');
         }
     });
 
@@ -36,25 +46,29 @@ function createToggleButton(element) {
 }
 
 // Find all elements with class 'collapsible' and make them collapsible
-document.addEventListener('DOMContentLoaded', function () {
+document.addEventListener('DOMContentLoaded', function() {
     const collapsibles = document.querySelectorAll('dl > dd:has(table)');
 
-    collapsibles.forEach(function (element) {
-        // Wrap content (excluding button) in a div for easy toggling
+    collapsibles.forEach(function(element) {
+        // Add meta-info-content-wrapper class
+        element.classList.add('meta-info-content-wrapper');
+        
+        // Wrap content in a div for proper spacing
         const wrapper = document.createElement('div');
+        wrapper.classList.add('meta-info-inner-wrapper');
 
         // Move all children except potential existing buttons into wrapper
         while (element.firstChild && element.firstChild !== element.querySelector('.meta-info-toggle-button')) {
             wrapper.appendChild(element.firstChild);
         }
 
-        if (!element.querySelector('.meta-info-toggle-button')) { // Check if already has a button from previous runs or other scripts
+        if (!element.querySelector('.meta-info-toggle-button')) { // Check if already has a button
             createToggleButton(element);
         }
 
         element.appendChild(wrapper);
 
-        // Optionally collapse by default on load (remove this line or modify as needed)
+        // Collapse by default on load
         element.classList.add('collapsed');
     });
 });

package/assets/js/create-term-filter.js

@@ -0,0 +1,61 @@
+/**
+ * @file This file creates an alphabet index for the terms
+ * @author Kor Dwarshuis
+ * @version 0.0.1
+ * @since 2024-09-19
+ */
+function createTermFilter() {
+    const terminologySectionUtilityContainer = document.getElementById("terminology-section-utility-container");
+
+    // Create checkboxes container
+    const checkboxesContainer = document.createElement('div');
+    checkboxesContainer.className = 'd-flex mt-0';
+    
+    // Create and configure checkbox for local terms
+    const localTermsCheckboxDiv = document.createElement('div');
+    localTermsCheckboxDiv.className = 'form-check me-3';
+    localTermsCheckboxDiv.innerHTML = `
+        <input class="form-check-input" type="checkbox" id="showLocalTermsCheckbox" checked>
+        <label class="form-check-label" for="showLocalTermsCheckbox">
+            Show local terms
+        </label>
+    `;
+    
+    // Create and configure checkbox for external terms
+    const externalTermsCheckboxDiv = document.createElement('div');
+    externalTermsCheckboxDiv.className = 'form-check ms-3';
+    externalTermsCheckboxDiv.innerHTML = `
+        <input class="form-check-input" type="checkbox" id="showExternalTermsCheckbox" checked>
+        <label class="form-check-label" for="showExternalTermsCheckbox">
+            Show external terms
+        </label>
+    `;
+    
+    // Add event listeners to checkboxes
+    localTermsCheckboxDiv.querySelector('#showLocalTermsCheckbox').addEventListener('change', function(event) {
+        if (!event.target.checked) {
+            document.querySelector('html').classList.add('hide-local-terms');
+        } else {
+            document.querySelector('html').classList.remove('hide-local-terms');
+        }
+    });
+    
+    externalTermsCheckboxDiv.querySelector('#showExternalTermsCheckbox').addEventListener('change', function(event) {
+        if (!event.target.checked) {
+            document.querySelector('html').classList.add('hide-external-terms');
+        } else {
+            document.querySelector('html').classList.remove('hide-external-terms');
+        }
+    });
+    
+    // Append checkboxes to container
+    checkboxesContainer.appendChild(localTermsCheckboxDiv);
+    checkboxesContainer.appendChild(externalTermsCheckboxDiv);
+    
+    // Add checkboxes to the terminology section utility container
+    terminologySectionUtilityContainer.appendChild(checkboxesContainer);
+}
+
+document.addEventListener("DOMContentLoaded", function () {
+    createTermFilter();
+});