Version 2.8.42: sichtbare Pfeile an allem Aufklappbaren

apps/tesm/pyproject.toml

@@ -4,7 +4,7 @@ build-backend = "setuptools.build_meta"
 
 [project]
 name = "tesm"
-version = "2.8.41"
+version = "2.8.42"
 description = "TESM -- Verwaltung und Ueberwachung von PoE-Endgeraeten und Aruba-Switchen"
 requires-python = ">=3.11"
 dependencies = [

apps/tesm/src/tesm/templates/tesm/_dashboard_tiles.html

@@ -36,14 +36,13 @@
     {% if section.tiles %}
       <details class="card" data-tile-section="{{ section.key }}"
                data-persist="dash-{{ section.key }}" {% if section.key != 'disabled' %}open{% endif %}>
-        <summary class="card__header" style="cursor:pointer">
+        <summary class="card__header">
           <div class="flex-1">
             <div class="card__title">
               {{ pill(section.tiles | length, section.kind if section.kind != 'muted' else '') }}
               {{ section.label }}
             </div>
           </div>
-          {{ icon('chevron-down', size=16) }}
         </summary>
         <div class="card__body">
           <div class="grid grid--tiles">

apps/tesm/src/tesm/templates/tesm/dhcp.html

@@ -252,7 +252,7 @@
    Rollbereich innerhalb der scrollenden Seite -- und das Gesuchte ging darin
    unter. Jetzt liegt er hinter einem Klick, mit eigener Suche. #}
 <details class="card" data-persist="dhcp-katalog">
-  <summary class="card__header" style="cursor:pointer">
+  <summary class="card__header">
     <div class="flex-1">
       <div class="card__title">{{ icon('list', size=17) }} Optionskatalog</div>
       <div class="card__sub">
@@ -403,7 +403,7 @@
     {% for stil, bezeichnung, pfad in client_stile %}
       {% set konfig = client_konfig.get(stil) %}
       <details class="card__body pt-0">
-        <summary class="row row--tight" style="cursor:pointer">
+        <summary class="row row--tight">
           <strong class="fs-sm">{{ bezeichnung }}</strong>
           <span class="fs-xs faint mono">{{ pfad }}</span>
         </summary>
@@ -629,12 +629,11 @@
 
 {# -- Vorschau ---------------------------------------------------------- #}
 <details class="card" data-persist="dhcp-preview">
-  <summary class="card__header" style="cursor:pointer">
+  <summary class="card__header">
     <div class="flex-1">
       <div class="card__title">{{ icon('file-text', size=17) }} Erzeugte Kea-Konfiguration</div>
       <div class="card__sub">Vorschau &ndash; so würde die Datei geschrieben</div>
     </div>
-    {{ icon('chevron-down', size=16) }}
   </summary>
   <pre class="log-view">{{ preview }}</pre>
   {% if current_user.has('dhcp_config.execute') %}

packages/tesm-core/pyproject.toml

@@ -4,7 +4,7 @@ build-backend = "setuptools.build_meta"
 
 [project]
 name = "tesm-core"
-version = "2.8.20"
+version = "2.8.21"
 description = "Gemeinsames Anwendungsgeruest (Auth, RBAC, Navigation, Design-System, Migrationen) fuer TESM und TESM-Lizenzserver"
 requires-python = ">=3.11"
 dependencies = [

packages/tesm-core/src/tesm_core/static/tesm_core/css/components.css

@@ -1131,6 +1131,43 @@
     white-space: pre-wrap;
     word-break: break-word;
   }
+  /* ---------------------------------------------------------------------- #
+     Aufklappbares
+     ---------------------------------------------------------------------- #
+
+     Der native Marker eines <summary> verschwindet, sobald das Element ein
+     Flex-Container ist -- und genau das sind unsere Kartenkoepfe. Auf der
+     DHCP-Seite stand der Optionskatalog deshalb als Kasten da, dem man nicht
+     ansah, dass er sich oeffnen laesst.
+
+     Der Pfeil wird deshalb selbst gezeichnet: als Flex- bzw. Inline-Element,
+     das in beiden Faellen erscheint, in Akzentfarbe (das ist die Farbe, mit
+     der diese Oberflaeche "hier kannst du etwas tun" sagt) und mit einer
+     Drehung beim Oeffnen. Eine Stelle fuer alle Aufklapper -- Karten,
+     Vorschauen, Abschnitte. */
+  details > summary {
+    list-style: none;
+    cursor: pointer;
+  }
+  details > summary::-webkit-details-marker { display: none; }
+  details:not(.nav-tree) > summary::before {
+    content: "";
+    display: inline-block;
+    flex: 0 0 auto;
+    align-self: center;
+    width: 0;
+    height: 0;
+    margin-right: var(--sp-2);
+    border-left: 6px solid var(--accent);
+    border-top: 5px solid transparent;
+    border-bottom: 5px solid transparent;
+    transition: transform var(--dur) var(--ease);
+  }
+  details:not(.nav-tree)[open] > summary::before { transform: rotate(90deg); }
+  /* Der Navigationsbaum bringt seinen eigenen Winkel mit -- der bekommt
+     dieselbe Farbe, damit "aufklappbar" ueberall gleich aussieht. */
+  .nav-tree__chevron { color: var(--accent); }
+
   .log-view mark { background: var(--warning-soft); color: var(--warning); border-radius: 3px; }
 
   /* Stufen im laufenden Protokoll. Die Zuordnung der Farbrollen ist Absicht:

packages/tesm-core/src/tesm_core/templates/tesm_core/settings_web.html

@@ -73,12 +73,11 @@ blieb dadurch über Jahre bestehen und lieferte alle statischen Dateien als 404.
     </section>
 
     <details class="card" data-persist="nginx-preview">
-      <summary class="card__header" style="cursor:pointer">
+      <summary class="card__header">
         <div class="flex-1">
           <div class="card__title">{{ icon('file-text', size=17) }} Erzeugte nginx-Konfiguration</div>
           <div class="card__sub">Vorschau der Datei, die geschrieben würde</div>
         </div>
-        {{ icon('chevron-down', size=16) }}
       </summary>
       <pre class="log-view">{{ preview }}</pre>
     </details>