details-menu class to avoid accidential details closure

Refs #1871 (comment)

datasette/templates/_close_open_menus.html

@@ -9,7 +9,7 @@
     if (target && target.tagName == 'DETAILS') {
         detailsClickedWithin = target;
     }
-    Array.from(document.getElementsByTagName('details')).filter(
+    Array.from(document.querySelectorAll('details.details-menu')).filter(
         (details) => details.open && details != detailsClickedWithin
     ).forEach(details => details.open = false);
 });

datasette/templates/base.html

@@ -19,7 +19,7 @@
 <div class="not-footer">
 <header><nav>{% block nav %}{% block crumbs %}{{ crumbs.nav(request=request) }}{% endblock %}
     {% set links = menu_links() %}{% if links or show_logout %}
-    <details class="nav-menu">
+    <details class="nav-menu details-menu">
         <summary><svg aria-labelledby="nav-menu-svg-title" role="img"
             fill="currentColor" stroke="currentColor" xmlns="http://www.w3.org/2000/svg"
             viewBox="0 0 16 16" width="16" height="16">

datasette/templates/database.html

@@ -13,7 +13,7 @@
 <div class="page-header" style="border-color: #{{ database_color(database) }}">
     <h1>{{ metadata.title or database }}{% if private %} 🔒{% endif %}</h1>
     {% set links = database_actions() %}{% if links %}
-    <details class="actions-menu-links">
+    <details class="actions-menu-links details-menu">
         <summary><svg aria-labelledby="actions-menu-links-title" role="img"
                 style="color: #666" xmlns="http://www.w3.org/2000/svg"
                 width="28" height="28" viewBox="0 0 24 24" fill="none"

datasette/templates/patterns.html

@@ -13,7 +13,7 @@
     <p class="crumbs">
         <a href="/">home</a>
     </p>
-    <details class="nav-menu">
+    <details class="nav-menu details-menu">
         <summary><svg aria-labelledby="nav-menu-svg-title" role="img"
             fill="currentColor" stroke="currentColor" xmlns="http://www.w3.org/2000/svg"
             viewBox="0 0 16 16" width="16" height="16">
@@ -96,7 +96,7 @@ <h2 class="pattern-heading">.bd for /database</h2>
 <section class="content">
     <div class="page-header" style="border-color: #ff0000">
         <h1>fixtures</h1>
-        <details class="actions-menu-links">
+        <details class="actions-menu-links details-menu">
             <summary><svg aria-labelledby="actions-menu-links-title" role="img"
                     style="color: #666" xmlns="http://www.w3.org/2000/svg"
                     width="28" height="28" viewBox="0 0 24 24" fill="none"
@@ -158,7 +158,7 @@ <h2 class="pattern-heading">.bd for /database/table</h2>
 <section class="content">
     <div class="page-header" style="border-color: #ff0000">
         <h1>roadside_attraction_characteristics</h1>
-        <details class="actions-menu-links">
+        <details class="actions-menu-links details-menu">
             <summary><svg aria-labelledby="actions-menu-links-title" role="img"
                     style="color: #666" xmlns="http://www.w3.org/2000/svg"
                     width="28" height="28" viewBox="0 0 24 24" fill="none"

datasette/templates/table.html

@@ -24,7 +24,7 @@
 <div class="page-header" style="border-color: #{{ database_color(database) }}">
     <h1>{{ metadata.title or table }}{% if is_view %} (view){% endif %}{% if private %} 🔒{% endif %}</h1>
     {% set links = table_actions() %}{% if links %}
-    <details class="actions-menu-links">
+    <details class="actions-menu-links details-menu">
         <summary><svg aria-labelledby="actions-menu-links-title" role="img"
                 style="color: #666" xmlns="http://www.w3.org/2000/svg"
                 width="28" height="28" viewBox="0 0 24 24" fill="none"