Fix dropdown gallery filtering (#208)

* drop down menu without bullets

* css and remove ===

* make subtext black

* mess with javascript

* jv edits

* filtering working!

* fix card margins, tag titling, and clear all filters

* add all cookbooks back

* fix merge conflicts

* undo subtext changes

Author: jukent

site/_extensions/cookbook_gallery_generator.py

@@ -1,6 +1,5 @@
 from gallery_generator import build_from_repos, generate_menu, generate_repo_dicts
 
-
 def main(app):
 
     with open("cookbook_gallery.txt") as fid:
@@ -25,6 +24,5 @@ def main(app):
         repo_dicts, "index", title=title, subtext=subtext, menu_html=menu_html
     )
 
-
 def setup(app):
-    app.connect("builder-inited", main)
+    app.connect("builder-inited", main)

site/_extensions/gallery_generator.py

@@ -1,5 +1,6 @@
 import itertools, json, yaml, pathlib, subprocess, requests
 from truncatehtml import truncate
+import re
 
 
 def _grab_binder_link(repo):
@@ -113,14 +114,18 @@ def _generate_sorted_tag_keys(repo_dicts):
     return sorted(key_set)
 
 
+def _title_case_preserve(s):
+    return re.sub(r'\b(\w)', lambda m: m.group(1).upper(), s)
+
 def _generate_tag_set(repo_dicts, tag_key=None):
 
     tag_set = set()
     for repo_dict in repo_dicts:
         for k, e in repo_dict["tags"].items():
+            tags = [_title_case_preserve(t) for t in e]
             if tag_key and k != tag_key:
                 continue
-            for t in e:
+            for t in tags:
                 tag_set.add(t)
 
     return tag_set
@@ -132,20 +137,18 @@ def _generate_tag_menu(repo_dicts, tag_key):
     tag_list = sorted(tag_set)
 
     options = "".join(
-        f'<li><label class="dropdown-item checkbox {tag_key}"><input type="checkbox" rel={tag.replace(" ", "-")} onchange="change();">&nbsp;{tag}</label></li>'
+        f'<li><label class="dropdown-item checkbox {tag_key}"><input type="checkbox" rel={tag.replace(" ", "-").lower()} onchange="change();">&nbsp;{tag}</label></li>'
         for tag in tag_list
     )
 
     return f"""
-        <div class="dropdown">
-        
-        <button class="btn btn-sm btn-outline-primary mx-1 dropdown-toggle" type="button" id="{tag_key}Dropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
-        {tag_key.title()}
-        </button>
-        <ul class="dropdown-menu" aria-labelledby="{tag_key}Dropdown">
-        {options}
-        </ul>
-        </div>
+            :::{{dropdown}} {tag_key}
+            <div class="dropdown">
+                <ul>
+                    {options}
+                </ul>
+            </div>
+            :::
     """
 
 
@@ -200,12 +203,11 @@ def build_from_repos(
         tag_list = sorted((itertools.chain(*tag_dict.values())))
         tag_list_f = [tag.replace(" ", "-") for tag in tag_list]
         tags = [
-            f'<span class="badge bg-primary mybadges">{tag}</span>'
+            f'<span class="badge bg-primary mybadges">{_title_case_preserve(tag)}</span>'
             for tag in tag_list_f
         ]
         tags = "\n".join(tags)
-
-        # tag_class_str = " ".join(tag_list_f)
+        tag_classes = " ".join(tag_list_f)
 
         description = repo_dict["description"]
         ellipsis_str = '<a class="modal-btn"> ... more</a>'
@@ -214,53 +216,53 @@ def build_from_repos(
         if ellipsis_str in short_description:
             modal_str = f"""
             <div class="modal">
-            <div class="content">
-            <img src="{thumbnail_url}" class="modal-img" />
-            <h3 class="display-3">{cookbook_title}</h3>
-            {authors_str}
-            <p class="my-2">{description}</p>
-            <p class="my-2">{tags}</p>
-            <p class="mt-3 mb-0"><a href="{cookbook_url}" class="btn btn-outline-primary btn-block">Visit Website</a></p>
-            </div>
+                <div class="content">
+                    <img src="{thumbnail_url}" class="modal-img" />
+                    <h3 class="display-3">{cookbook_title}</h3>
+                    {authors_str}
+                    <p class="my-2">{description}</p>
+                    <p class="my-2">{tags}</p>
+                    <p class="mt-3 mb-0"><a href="{cookbook_url}" class="btn btn-outline-primary btn-block">Visit Website</a></p>
+                </div>
             </div>
             """
             modal_str = '\n'.join([m.lstrip() for m in modal_str.split('\n')])
         else:
             modal_str = ""
-            
-        new_card = f"""\
-                    :::{{grid-item-card}}
-                    :shadow: md
-                    :class-footer: card-footer
-                    <div class="d-flex gallery-card">
-                    <img src="{thumbnail_url}" class="gallery-thumbnail" />
-                    <div class="container">
-                    <a href="{cookbook_url}" class="text-decoration-none"><h4 class="display-4 p-0">{cookbook_title}</h4></a>
-                    <p class="card-subtitle">{authors_str}</p>
-                    <p class="my-2">{short_description} </p>
-                    </div>
-                    </div>
-                    {modal_str}
-                    
-                    +++
-                    
-                    <div class="tagsandbadges">
-                        {tags}
-                        <div>{status_badges}</div>
-                    </div>
-                    
-                    :::
-
-                    """
 
-        grid_body.append('\n'.join([m.lstrip() for m in new_card.split('\n')]))
+        new_card = f"""
+                        :::{{grid-item-card}}
+                        :shadow: md
+                        :class-footer: card-footer
+                        :class-card: tagged-card {tag_classes}
+
+                            <div class="d-flex gallery-card">
+                                <img src="{thumbnail_url}" class="gallery-thumbnail" />
+                                <div class="container">
+                                    <a href="{cookbook_url}" class="text-decoration-none"><h4 class="display-4 p-0">{cookbook_title}</h4></a>
+                                    <p class="card-subtitle">{authors_str}</p>
+                                    <p class="my-2">{short_description} </p>
+                                </div>
+                            </div>
+                            {modal_str}
+                            
+                            +++
+                            
+                            <div class="tagsandbadges">
+                                {tags}
+                                <div>{status_badges}</div>
+                            </div>
+                        :::
+                        """
 
+        grid_body.append('\n'.join([m.lstrip() for m in new_card.split('\n')]))
 
-    grid_body = "\n".join(grid_body)
 
     stitle = f"#### {subtitle}" if subtitle else ""
     stext = subtext if subtext else ""
 
+    grid_body = "\n".join(grid_body)
+
     grid = f"""
         # {title}
         
@@ -270,12 +272,12 @@ def build_from_repos(
         {menu_html}
         
         ::::{{grid}} 1
-        :gutter: 4
+        :gutter: 0
         
         {grid_body}
         
         <div class="modal-backdrop"></div>
-        <script src="/_static/custom.js"></script>
+        <script src="../html/_static/custom.js"></script>
     """
 
     grid = '\n'.join([m.lstrip() for m in grid.split('\n')])

site/_static/custom.css

@@ -153,3 +153,49 @@ main.banner-main #project-pythia {
 .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);
+}
+
+.bd-content .sd-card .sd-card-header {
+  background-color: var(--pst-color-panel-background) !important;
+}
+
+.sd-summary-content.sd-card-body.docutils {
+  position: absolute;
+  z-index: 100;
+}
+
+details.sd-dropdown summary.sd-card-header {
+  border: 0.2rem solid var(--pst-sd-dropdown-color) !important;
+  border-radius: calc(.25rem - 1px);
+}
+
+p {
+  color: black;
+}
+
+.sd-col.sd-d-flex-row.docutils.has-visible-card {
+  margin-bottom: 1rem;
+}