Vorlage:Buchbox: Unterschied zwischen den Versionen

← Zum vorherigen Versionsunterschied Zum nächsten Versionsunterschied →

Version vom 16. Juli 2025, 10:08 Uhr

   Standort:  • Handbuch • Version: 2.3

     <button onclick="document.getElementById('fade-toc').classList.toggle('shown');" class="btn btn-sm btn-outline-secondary">
       Inhaltsverzeichnis anzeigen / ausblenden
     </button>

<style> .toc-fade {

 opacity: 0;
 max-height: 0;
 transition: opacity 0.6s ease, max-height 0.6s ease;
 overflow: hidden;
 margin-top: 0.5em;

} .toc-fade.shown {

 opacity: 1;
 max-height: 400px;

} </style>

@@ Zeile 1: / Zeile 1: @@
-<div style="display:flex; margin:0; padding:0; border:none; line-height:1; background:none;">
+<!-- Horizontale Linie oben -->
-   <!-- Bild (400px, direkt am Rand) -->
+<hr style="margin:3px 0; height:1px; background:#ddd; border:none;">
-   <div style="flex:0 0 400px; margin:0; padding:0; background:none;">
+<!-- Flex-Container: Bild links, Text + TOC rechts -->
+<div style="display: flex; align-items: flex-start; gap: 1rem;">
+   <!-- Buchcover (400px) -->
+   <div style="flex: 0 0 auto;">
      [[Datei:Home-fachbuch.png|400px|class=img-responsive]]
    </div>
-   <!-- Metadaten + TOC-Lösung -->
+   <!-- Rechte Seite: Standort + TOC -->
-   <div style="flex:1; margin-left:10px; padding:0; background:none;">
+   <div style="flex: 1 1 auto;">
-    <!-- Standortangaben (1-zeilig) -->
-     <div style="margin:0; padding:0; font-size:0.9em; line-height:1.2; background:none;">
+     '''Standort:''' [[Kategorie:Technik]] • [[Buch::Handbuch]] • '''Version:''' 2.3
-      '''Standort:''' [[Kategorie:Technik]] • [[Buch::Handbuch]] • '''Version:''' 2.3
-    </div>
-     <!-- TOC mit Toggle -->
+     <!-- Button zum Umschalten -->
-     <div>
+     <div style="margin-top: 0.5em;">
-       <button class="btn btn-sm btn-outline-secondary mb-2" type="button" data-bs-toggle="collapse" data-bs-target="#toc-box">
+       <button onclick="document.getElementById('fade-toc').classList.toggle('shown');" class="btn btn-sm btn-outline-secondary">
          Inhaltsverzeichnis anzeigen / ausblenden
        </button>
+    </div>
-      <div id="toc-box" class="collapse show" style="max-height:400px; overflow-y:auto;">
+    <!-- TOC-Container mit Fade -->
-        <div class="small">
+    <div id="fade-toc" class="toc-fade" style="max-height: 400px; overflow-y: auto;">
-          __TOC__
+      __TOC__
-        </div>
-      </div>
      </div>
    </div>
 </div>
-<!-- Horizontale Trennlinie -->
+<!-- Horizontale Linie unten -->
 <hr style="margin:3px 0; height:1px; background:#ddd; border:none;">
+<!-- CSS: Fade-Effekt -->
+<style>
+.toc-fade {
+  opacity: 0;
+  max-height: 0;
+  transition: opacity 0.6s ease, max-height 0.6s ease;
+  overflow: hidden;
+  margin-top: 0.5em;
+}
+.toc-fade.shown {
+  opacity: 1;
+  max-height: 400px;
+}
+</style>