Improve appearance of pattern rendering dropdown

FallingColors · Mar 29, 2024 · 7817a43 · 7817a43
1 parent 253627c
commit 7817a43
Show file tree

Hide file tree

Showing 2 changed files with 40 additions and 17 deletions.
diff --git a/doc/src/hexdoc_hexcasting/_templates/index.css.jinja b/doc/src/hexdoc_hexcasting/_templates/index.css.jinja
@@ -70,4 +70,10 @@ img.spell-viz {
   cursor: pointer;
 }
 
+.spell-settings-dropdown {
+  position: absolute;
+}
 
+.spell-settings-toggle {
+  font-size: large;
+}
diff --git a/doc/src/hexdoc_hexcasting/_templates/pages/hexcasting/manual_pattern.html.jinja b/doc/src/hexdoc_hexcasting/_templates/pages/hexcasting/manual_pattern.html.jinja
@@ -3,29 +3,46 @@
 {% block inner_body %}
   <details class="details-collapsible">
     <summary class="collapse-details collapse-spell"></summary>
-    <li class="dropdown">
-      <a
-        href=""
-        class="dropdown-toggle"
-        data-toggle="dropdown"
-        role="button"
-        aria-haspopup="true"
-        aria-expanded="false"
-      >{{ _("hexdoc.renderer.renders")}} <span class="caret"></span></a>
-      <ul class="dropdown-menu dropdown-menu-left render-dropdowns"></ul>
-    </li>
 
-    <li class="dropdown">
-      <a
+    <div class="dropdown spell-settings-dropdown">
+      <span
         href=""
-        class="dropdown-toggle"
+        class="dropdown-toggle spell-settings-toggle"
         data-toggle="dropdown"
         role="button"
         aria-haspopup="true"
         aria-expanded="false"
-      >{{ _("hexdoc.renderer.palettes")}} <span class="caret"></span></a>
-      <ul class="dropdown-menu dropdown-menu-left palette-dropdowns"></ul>
-    </li>
+      >
+        <i class="bi bi-gear-fill"></i>
+      </span>
+
+      <ul class="dropdown-menu">
+        <li class="dropdown-submenu">
+          <a
+            href=""
+            class="dropdown-toggle"
+            data-toggle="dropdown"
+            role="button"
+            aria-haspopup="true"
+            aria-expanded="false"
+          >{{ _("hexdoc.renderer.renders")}}</a>
+          <ul class="dropdown-menu dropdown-menu-left render-dropdowns"></ul>
+        </li>
+
+        <li class="dropdown-submenu">
+          <a
+            href=""
+            class="dropdown-toggle"
+            data-toggle="dropdown"
+            role="button"
+            aria-haspopup="true"
+            aria-expanded="false"
+          >{{ _("hexdoc.renderer.palettes")}}</a>
+          <ul class="dropdown-menu dropdown-menu-left palette-dropdowns"></ul>
+        </li>
+      </ul>
+    </div>
+
     {% for pattern in page.patterns %}
       <canvas
         class="spell-viz"