Attempt checkboxes

.gitignore

@@ -1,2 +1,4 @@
 _build
 *.pyc
+
+.vscode/

_static/custom.css

@@ -0,0 +1,209 @@
+:root {
+    --pst-color-border: rgba(0, 0, 0, 0.125) !important;
+  }
+
+  .bd-main .bd-content .bd-article-container {
+    max-width: 100%;  /* default is 60em */
+  }
+  .bd-page-width {
+    max-width: 100%;  /* default is 88rem */
+  }
+
+  .sd-card-footer {
+    background: rgba(var(--spt-color-gray-100), 1) !important;
+    padding: 4px;
+  }
+
+  main.banner-main #project-pythia {
+      padding-top: 1rem;
+      padding-bottom: 1rem;
+    }
+
+    main.banner-main #project-pythia p {
+      font-size: 1.4rem;  /* default: 1.25rem */
+      /* font-weight: 700; default: 300 */
+    }
+
+    main.banner-main #project-pythia a,
+    main.banner-main #project-pythia a:visited {
+      color: rgba(var(--spt-color-light), 1);
+      text-decoration: underline dotted rgba(var(--spt-color-gray-400), 1);
+    }
+
+    main.banner-main #project-pythia a.headerlink:hover {
+      color: #DDD;
+    }
+
+    main.banner-main #project-pythia a.btn-light {
+      color: rgba(var(--pst-color-primary), 1)
+    }
+
+    .modal {
+      display: none;
+      position: fixed;
+      background: #f8f9fa;
+      border-radius: 5px;
+      padding: 3rem;
+      width: calc(100% - 8rem);
+      height: auto !important;
+      max-height: calc(100% - 8rem);
+      overflow: scroll;
+      top: 4rem;
+      left: 4rem;
+      z-index: 20001;
+    }
+
+    .modal-backdrop {
+      display: none;
+      position: fixed;
+      background: rgba(0, 0, 0, 0.5);
+      top: 0;
+      left: 0;
+      height: 100vh;
+      width: 100vw;
+      z-index: 20000;
+    }
+
+    .modal-btn {
+      color: #1a658f;
+      text-decoration: none;
+    }
+
+    .modal-img {
+      float: right;
+      margin: 0 0 2rem 2rem;
+      max-width: 260px;
+      max-height: 260px;
+    }
+
+    .gallery-menu {
+      margin-bottom: 1rem;
+    }
+
+    .gallery-card div.container {
+      padding: 0 0 0 1rem;
+    }
+
+    .gallery-thumbnail {
+      display: block;
+      float: left;
+      margin: auto 0;
+      padding: 0;
+      max-width: 160px;
+      background: transparent !important;
+    }
+
+    .card-subtitle {
+      font-size: 0.8rem;
+    }
+
+    .my-2 {
+      color: inherit;
+    }
+
+    .text-decoration-none {
+      text-decoration: none;
+      color: inherit;
+    }
+
+    @media (max-width: 576px) {
+      .modal {
+        padding: 2rem;
+        width: calc(100% - 4rem);
+        max-height: calc(100% - 4rem);
+        top: 2rem;
+        left: 2rem;
+      }
+
+      .modal-img {
+        display: none;
+      }
+
+      .gallery-card {
+        flex-direction: column;
+      }
+
+      .gallery-thumbnail {
+        float: none;
+        margin: 0 0 1rem 0;
+        max-width: 100%;
+      }
+
+      .gallery-card div.container {
+        padding: 0;
+      }
+
+      .gallery-return-btn {
+        padding-bottom: 1rem;
+      }
+    }
+
+    div.horizontalgap {
+      float: left;
+      overflow: hidden;
+      height: 1px;
+      width: 0px;
+    }
+
+  .badge.mybadges {
+    margin-bottom: 0;
+    font-weight: 0;
+  }
+
+  .tagsandbadges {
+    padding: 0 0;
+  }
+
+  .dropdown ul {
+    list-style: none;
+    padding: 0;
+    margin: 0;
+  }
+
+  .dropdown-item {
+    display: block;
+  }
+
+  .dropdown-item input[type="checkbox"] {
+    margin-right: 0.5em;
+  }
+
+  details.sd-dropdown {
+    box-shadow: none !important;
+  }
+
+  details.sd-dropdown summary.sd-card-header + div.sd-summary-content {
+    background-color: white !important;
+    border: 0.2rem solid var(--pst-sd-dropdown-color) !important;
+    border-radius: calc(.25rem - 1px);
+  }
+
+  .sd-summary-content.sd-card-body.docutils {
+    position: absolute;
+    z-index: 100;
+  }
+
+  details.sd-dropdown:not([open])>.sd-card-header {
+    background-color: white !important;
+    border: 2px solid #1a648f !important;
+    color: #1a648f;
+    border-radius: .5rem;
+  }
+
+  details.sd-dropdown[open]>.sd-card-header {
+    background-color: #1a648f !important;
+    color: white;
+    border-radius: .5rem;
+  }
+
+  p {
+    color: black;
+  }
+
+  main.bd-content #main-content a {
+    color: #1a648f;
+  }
+
+  .sd-col.sd-d-flex-row.docutils.has-visible-card {
+    margin-bottom: 1rem;
+  }

_static/custom.js

@@ -0,0 +1,92 @@
+function getClassOfCheckedCheckboxes(checkboxes) {
+    var tags = [];
+    checkboxes.forEach(function (cb) {
+      if (cb.checked) {
+        tags.push(cb.getAttribute("rel"));
+      }
+    });
+    return tags;
+  }
+
+  function change() {
+    console.log("Change event fired.");
+    var domainsCbs = document.querySelectorAll(".domains input[type='checkbox']");
+    var packagesCbs = document.querySelectorAll(".packages input[type='checkbox']");
+
+    var domainTags = getClassOfCheckedCheckboxes(domainsCbs);
+    var packageTags = getClassOfCheckedCheckboxes(packagesCbs);
+
+    var filters = {
+      domains: domainTags,
+      packages: packageTags
+    };
+
+    filterResults(filters);
+  }
+
+  function filterResults(filters) {
+    console.log("Filtering results...");
+    var rElems = document.querySelectorAll(".tagged-card");
+
+    rElems.forEach(function (el) {
+      var isVisible = true; // Assume visible by default
+
+      // Check if the element has any domain or package filter
+      if (filters.domains.length > 0 || filters.packages.length > 0) {
+        var hasMatchingDomain = filters.domains.length === 0 || filters.domains.some(domain => el.classList.contains(domain));
+        var hasMatchingPackage = filters.packages.length === 0 || filters.packages.some(package => el.classList.contains(package));
+
+        // The element should be visible if it matches any filter within each category
+        isVisible = hasMatchingDomain && hasMatchingPackage;
+      }
+
+      // Toggle visibility based on the result
+      if (isVisible) {
+        el.classList.remove("d-none");
+        el.classList.add("d-flex");
+      } else {
+        el.classList.remove("d-flex");
+        el.classList.add("d-none");
+      }
+    });
+
+    // Update the margins after filtering
+    updateMargins();
+  }
+
+  var checkboxes = document.querySelectorAll('input[type="checkbox"]');
+  checkboxes.forEach(function (checkbox) {
+    checkbox.addEventListener("change", change);
+  });
+
+  function updateMargins() {
+    const columns = document.querySelectorAll('.sd-col.sd-d-flex-row.docutils');
+
+    columns.forEach(column => {
+      // Check if this column has any visible cards
+      const hasVisibleCard = Array.from(column.children).some(child => !child.classList.contains('d-none'));
+
+      // Toggle a class based on whether there are visible cards
+      if (hasVisibleCard) {
+        column.classList.add('has-visible-card');
+      } else {
+        column.classList.remove('has-visible-card');
+      }
+    });
+  }
+
+  function clearCbs() {
+    // Select all checkbox inputs and uncheck them
+    var checkboxes = document.querySelectorAll('input[type="checkbox"]');
+    checkboxes.forEach(function(checkbox) {
+      checkbox.checked = false;
+    });
+
+    change(); 
+  }
+
+  // Initial call to set up correct margins when the page loads
+  document.addEventListener('DOMContentLoaded', updateMargins);
+
+  console.log("Script loaded.");
+

myst.yml

@@ -20,3 +20,6 @@ site:
   options:
     hide_toc: true
     hide_outline: true
+html:
+  extra_head:
+    - <script src="_static/custom.js"></script>