dropdown gallery changes (ProjectPythia#444)

* dropdown gallery  changes

* fix indent

* [pre-commit.ci] auto fixes from pre-commit.com hooks

for more information, see https://pre-commit.ci

* dark theme changes

* dark theme cards

* them to theme

* rm accidental link color chagne

---------

Co-authored-by: pre-commit-ci[bot] <66853113+pre-commit-ci[bot]@users.noreply.github.com>

Author: jukent

portal/_extensions/gallery_generator.py

@@ -1,5 +1,6 @@
 import itertools
 import pathlib
+import re
 
 from truncatehtml import truncate
 
@@ -9,13 +10,22 @@ def _generate_sorted_tag_keys(all_items):
     return sorted(key_set)
 
 
+def _title_case_preserve(s):
+    return re.sub(r'\b(\w)', lambda m: m.group(1).upper(), s)
+
+
+def _make_class(s):
+    return re.sub(r'^\d+', '', s.replace(' ', '-').lower())
+
+
 def _generate_tag_set(all_items, tag_key=None):
     tag_set = set()
     for item in all_items:
         for k, e in item['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
@@ -26,20 +36,18 @@ def _generate_tag_menu(all_items, 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.capitalize()}</label></li>'
+        f'<li><label class="dropdown-item checkbox {tag_key}"><input type="checkbox" rel={_make_class(tag)} 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>
+            :::
         """
 
 
@@ -71,10 +79,9 @@ def build_from_items(items, filename, title='Gallery', subtitle=None, subtext=No
         tag_list = sorted((itertools.chain(*item['tags'].values())))
         tag_list_f = [tag.replace(' ', '-') for tag in tag_list]
 
-        tags = [f'<span class="badge bg-primary">{tag}</span>' for tag in tag_list_f]
+        tags = [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)
 
         author_strs = set()
         affiliation_strs = set()
@@ -108,51 +115,52 @@ def build_from_items(items, filename, title='Gallery', subtitle=None, subtext=No
         if ellipsis_str in short_description:
             modal_str = f"""
             <div class="modal">
-            <div class="content">
-            <img src="{thumbnail}" class="modal-img" />
-            <h3 class="display-3">{item["title"]}</h3>
-            {authors_str}
-            <br/>
-            {affiliations_str}
-            <p class="my-2">{item['description']}</p>
-            <p class="my-2">{tags}</p>
-            <p class="mt-3 mb-0"><a href="{item["url"]}" class="btn btn-outline-primary btn-block">Visit Website</a></p>
-            </div>
+                <div class="content">
+                    <img src="{thumbnail}" class="modal-img" />
+                    <h3 class="display-3">{item["title"]}</h3>
+                    {authors_str}
+                    <br/>
+                    {affiliations_str}
+                    <p class="my-2">{item['description']}</p>
+                    <p class="my-2">{tags}</p>
+                    <p class="mt-3 mb-0"><a href="{item["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}" class="gallery-thumbnail" />
-        <div class="container">
-        <a href="{item["url"]}" class="text-decoration-none"><h4 class="display-4 p-0">{item["title"]}</h4></a>
-        <p class="card-subtitle">{authors_str}<br/>{affiliations_str}</p>
-        <p class="my-2">{short_description} </p>
-        </div>
-        </div>
-        {modal_str}
+        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}" class="gallery-thumbnail" />
+                        <div class="container">
+                            <a href="{item["url"]}" class="text-decoration-none"><h4 class="display-4 p-0">{item["title"]}</h4></a>
+                            <p class="card-subtitle">{authors_str}<br/>{affiliations_str}</p>
+                            <p class="my-2">{short_description} </p>
+                        </div>
+                    </div>
+                    {modal_str}
 
-        {tags}
+                    +++
 
-        :::
+                    {tags}
 
-        """
+                    :::
 
-        grid_body.append('\n'.join([m.lstrip() for m in new_card.split('\n')]))
+                    """
 
-    grid_body = '\n'.join(grid_body)
+        grid_body.append('\n'.join([m.lstrip() for m in new_card.split('\n')]))
 
     stitle = f'#### {subtitle}' if subtitle else ''
     stext = subtext if subtext else ''
 
+    grid_body = '\n'.join(grid_body)
     grid = f"""\
         {title}
         {'=' * len(title)}
@@ -163,12 +171,12 @@ def build_from_items(items, filename, title='Gallery', subtitle=None, subtext=No
         {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')])

portal/_static/custom.css

@@ -144,3 +144,69 @@ div.horizontalgap {
   height: 1px;
   width: 0px;
 }
+
+.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;
+}
+
+.sd-col.sd-d-flex-row.docutils.has-visible-card {
+  margin-bottom: 1rem;
+}
+
+html[data-theme="dark"] h1.display-1 {
+  color: white;
+}
+
+html[data-them="dark"] h4.display-4.p-0 {
+  color: black !important;
+}
+
+html[data-theme="dark"] .sd-card-body.docutils {
+  background-color: white;
+}
+
+html[data-theme="dark"] .container p {
+  color: black !important;
+}