fix(ui): fix collapse issue with libraries that contain spaces in the…

… name (#268)
LizardByte · Dec 12, 2023 · 81191f0 · 81191f0
1 parent 92425f7
commit 81191f0
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 5 deletions.
diff --git a/Contents/Code/webapp.py b/Contents/Code/webapp.py
@@ -229,6 +229,7 @@ def cache_data():
 
         # add each section to the items dict
         items[section.key] = dict(
+            key=section.key,
             title=section.title,
             agent=section.agent,
             items=[],

diff --git a/Contents/Resources/web/templates/home.html b/Contents/Resources/web/templates/home.html
@@ -15,17 +15,17 @@
 
         {% for section in items %}
         <!-- Library sections -->
-        <section class="py-5 offset-anchor" id="{{ items[section]['title'] }}">
+        <section class="py-5 offset-anchor" id="section_{{ items[section]['key'] }}">
             <div class="row">
                 <div class="col-12 d-flex justify-content-between align-items-center">
                     <!-- Section title -->
                     <h1 class="text-white">{{ items[section]['title'] }}</h1>
                     <!-- Collapse/Expand button -->
                     <h2><a class="text-black" role="button" data-bs-toggle="collapse"
-                           data-bs-target="#{{ items[section]['title'] }}_collapse" aria-expanded="false"
-                           aria-controls="{{ items[section]['title'] }}_collapse"
+                           data-bs-target="#section_{{ items[section]['key'] }}_collapse" aria-expanded="false"
+                           aria-controls="section_{{ items[section]['key'] }}_collapse"
                            onclick="toggleArrow(this)">
-                           <i class="text-white fas fa-caret-up" id="{{ items[section]['title'] }}_arrow"></i>
+                           <i class="text-white fas fa-caret-up" id="section_{{ items[section]['key'] }}_arrow"></i>
                     </a></h2>
                 </div>
             </div>
@@ -90,7 +90,7 @@ <h2><a class="text-black" role="button" data-bs-toggle="collapse"
             <!-- table -->
             <div class="row">
                 <div class="col-12">
-                    <div class="collapse show" id="{{ items[section]['title'] }}_collapse">
+                    <div class="collapse show" id="section_{{ items[section]['key'] }}_collapse">
                         <table class="table table-sm table-bordered border-dark caption-top">
                             <caption>{{ items[section]['title'] }}</caption>
                             <tr class="d-flex table-dark">