dsfdf

modules/boersenchecker/partials/dashboard.php

@@ -1,5 +1,7 @@
 <?php $ownerQuery = $isAdmin ? '?owner_sub=' . urlencode((string) $ownerSub) : ''; ?>
-<?= module_shell_header('boersenchecker') ?>
+<?= module_shell_header('boersenchecker', [
+    'title' => 'Depotverwaltung',
+]) ?>
 <div class="bc-app">
   <div class="bc-grid-bg">
     <div class="bc-shell bc-stack">
@@ -10,15 +12,6 @@
         <div class="bc-alert bc-alert--success"><?= e($notice) ?></div>
       <?php endif; ?>
 
-      <section class="module-box">
-        <div class="module-box-head">
-          <div>
-            <h1 class="module-title">Depotverwaltung</h1>
-            <p class="module-lead">Depots, Positionen und Kurs-Historien verwalten.</p>
-          </div>
-        </div>
-      </section>
-
       <?php if ($isAdmin): ?>
         <div class="bc-panel">
       <strong>Benutzer-Scope</strong>

modules/boersenchecker/partials/home.php

@@ -1,4 +1,6 @@
-<?= module_shell_header('boersenchecker') ?>
+<?= module_shell_header('boersenchecker', [
+    'title' => 'Depot-Ueberblick',
+]) ?>
 <div class="bc-app">
   <div class="bc-grid-bg">
     <div class="bc-shell bc-stack" data-bc-home data-chart-endpoint="<?= e($chartEndpoint) ?>">
@@ -20,8 +22,8 @@
       <section class="module-box">
         <div class="module-box-head">
           <div>
-            <h1 class="module-title">Depot-Ueberblick</h1>
+            <h2 class="module-box-title">Marktueberblick</h2>
-            <p class="module-lead">Depots, Aktien und Kursverlaeufe in einer Oberflaeche.</p>
+            <p>Depotauswahl, Aktienfokus und aktueller Kursabruf in einem Bereich.</p>
           </div>
         </div>
         <div class="bc-toolbar" style="margin-top:16px;">

modules/boersenchecker/partials/instruments.php

@@ -1,4 +1,6 @@
-<?= module_shell_header('boersenchecker') ?>
+<?= module_shell_header('boersenchecker', [
+    'title' => 'Aktienverwaltung',
+]) ?>
 <div class="bc-app">
   <div class="bc-grid-bg">
     <div class="bc-shell bc-stack">
@@ -9,15 +11,6 @@
         <div class="bc-alert bc-alert--success"><?= e($notice) ?></div>
       <?php endif; ?>
 
-      <section class="module-box">
-        <div class="module-box-head">
-          <div>
-            <h1 class="module-title">Aktienverwaltung</h1>
-            <p class="module-lead">Stammdaten der Aktien pflegen, Symbole suchen und manuelle Kurse verwalten.</p>
-          </div>
-        </div>
-      </section>
-
       <div class="grid" style="margin-top:1rem;">
     <div class="bc-panel">
       <strong>Aktie waehlen</strong>

public/assets/css/app.css

@@ -948,6 +948,10 @@ a {
   align-items: start;
 }
 
+.module-hero-top--compact {
+  align-items: center;
+}
+
 .module-hero-copy,
 .module-hero-actions {
   display: grid;
@@ -958,10 +962,6 @@ a {
   min-width: 0;
 }
 
-.module-hero-copy--compact {
-  min-height: 1px;
-}
-
 .module-title {
   margin: 0;
   font-size: clamp(1.45rem, 3vw, 2.2rem);
@@ -981,6 +981,7 @@ a {
   display: flex;
   flex-wrap: wrap;
   gap: 8px;
+  flex: 1 1 auto;
 }
 
 .module-button {
@@ -1036,6 +1037,16 @@ a {
   width: min(240px, 100%);
 }
 
+.brand-copy h1 .module-page-context {
+  display: inline;
+  margin-left: 0.35em;
+  color: var(--brand-accent-3);
+  font-size: 0.42em;
+  font-weight: 700;
+  letter-spacing: -0.01em;
+  vertical-align: middle;
+}
+
 .module-box,
 .module-box-soft,
 .module-box-table,
@@ -1111,4 +1122,8 @@ a {
   .module-hero-actions {
     width: 100%;
   }
+
+  .module-hero-top--compact {
+    align-items: stretch;
+  }
 }

src/App/functions.php

@@ -286,27 +286,8 @@ function module_shell_header(string $module, array $options = []): string
     $actions = is_array($options['actions'] ?? null) ? $options['actions'] : (is_array($design['actions'] ?? null) ? $design['actions'] : []);
     $tabs = is_array($options['tabs'] ?? null) ? $options['tabs'] : (is_array($design['tabs'] ?? null) ? $design['tabs'] : []);
 
-    $html = '<div class="module-shell"><div class="module-page-bg"><div class="module-page-stack">';
+    $renderActions = static function (array $actions): string {
-    $html .= '<header class="module-hero">';
+        $html = '';
-    $html .= '<div class="module-hero-top">';
-    if ($title !== '' || $description !== '' || !empty($options['show_eyebrow'])) {
-        $html .= '<div class="module-hero-copy">';
-        if (!empty($options['show_eyebrow'])) {
-            $html .= '<div class="eyebrow">' . e($eyebrow) . '</div>';
-        }
-        if ($title !== '') {
-            $html .= '<h1 class="module-title">' . e($title) . '</h1>';
-        }
-        if ($description !== '') {
-            $html .= '<p class="module-lead">' . e($description) . '</p>';
-        }
-        $html .= '</div>';
-    } else {
-        $html .= '<div class="module-hero-copy module-hero-copy--compact" aria-hidden="true"></div>';
-    }
-
-    if ($actions !== []) {
-        $html .= '<div class="module-hero-actions">';
         foreach ($actions as $action) {
             if (!is_array($action)) {
                 continue;
@@ -324,27 +305,68 @@ function module_shell_header(string $module, array $options = []): string
             }
             $html .= '<a class="' . e($class) . '" href="' . e($href) . '">' . e($label) . '</a>';
         }
+        return $html;
+    };
+
+    $html = '<div class="module-shell"><div class="module-page-bg"><div class="module-page-stack">';
+    $html .= '<header class="module-hero">';
+
+    if ($tabs !== [] || $actions !== []) {
+        $html .= '<div class="module-hero-top module-hero-top--compact">';
+        if ($tabs !== []) {
+            $html .= '<nav class="module-tabs" aria-label="Modulnavigation">';
+            foreach ($tabs as $tab) {
+                if (!is_array($tab)) {
+                    continue;
+                }
+                $label = trim((string) ($tab['label'] ?? ''));
+                $href = trim((string) ($tab['href'] ?? ''));
+                if ($label === '' || $href === '') {
+                    continue;
+                }
+                $isActive = !empty($tab['active']) || $href === $requestPath;
+                $class = $isActive ? 'module-button module-button--tab-active' : 'module-button module-button--tab';
+                $html .= '<a class="' . e($class) . '" href="' . e($href) . '">' . e($label) . '</a>';
+            }
+            $html .= '</nav>';
+        }
+        if ($actions !== []) {
+            $html .= '<div class="module-hero-actions">' . $renderActions($actions) . '</div>';
+        }
+        $html .= '</div>';
+    } elseif ($title !== '' || $description !== '' || !empty($options['show_eyebrow'])) {
+        $html .= '<div class="module-hero-copy">';
+        if (!empty($options['show_eyebrow'])) {
+            $html .= '<div class="eyebrow">' . e($eyebrow) . '</div>';
+        }
+        if ($title !== '') {
+            $html .= '<h1 class="module-title">' . e($title) . '</h1>';
+        }
+        if ($description !== '') {
+            $html .= '<p class="module-lead">' . e($description) . '</p>';
+        }
         $html .= '</div>';
     }
 
-    $html .= '</div>';
+    if ($title !== '') {
-    if ($tabs !== []) {
+        $moduleTitle = trim((string) ($design['title'] ?? ucfirst($module)));
-        $html .= '<nav class="module-tabs" aria-label="Modulnavigation">';
+        $script = '(function(){'
-        foreach ($tabs as $tab) {
+            . 'var root=document.querySelector(".home-hero[data-module-name=' . json_encode($module, JSON_UNESCAPED_UNICODE | JSON_UNESCAPED_SLASHES) . '] .brand-copy h1");'
-            if (!is_array($tab)) {
+            . 'if(!root){return;}'
-                continue;
+            . 'var old=root.querySelector(".module-page-context");'
-            }
+            . 'if(old){old.remove();}'
-            $label = trim((string) ($tab['label'] ?? ''));
+            . 'root.textContent=' . json_encode($moduleTitle, JSON_UNESCAPED_UNICODE | JSON_UNESCAPED_SLASHES) . ';'
-            $href = trim((string) ($tab['href'] ?? ''));
+            . 'var pageTitle=' . json_encode($title, JSON_UNESCAPED_UNICODE | JSON_UNESCAPED_SLASHES) . ';'
-            if ($label === '' || $href === '') {
+            . 'if(pageTitle&&pageTitle!==' . json_encode($moduleTitle, JSON_UNESCAPED_UNICODE | JSON_UNESCAPED_SLASHES) . '){'
-                continue;
+            . 'var span=document.createElement("span");'
-            }
+            . 'span.className="module-page-context";'
-            $isActive = !empty($tab['active']) || $href === $requestPath;
+            . 'span.textContent=" / "+pageTitle;'
-            $class = $isActive ? 'module-button module-button--tab-active' : 'module-button module-button--tab';
+            . 'root.appendChild(span);'
-            $html .= '<a class="' . e($class) . '" href="' . e($href) . '">' . e($label) . '</a>';
+            . '}'
-        }
+            . '})();';
-        $html .= '</nav>';
+        $html .= '<script>' . $script . '</script>';
     }
+
     $html .= '</header>';
 
     return $html;