🎯 Kleine Module - Vollständige Übersicht
Status: Alle kleinen Module vollständig migriert!
📊 Migration Status: Kleine Module ✅ VOLLSTÄNDIG!
11
Module erstellt
8
Dateien
100%
Abgeschlossen
✅ Vollständig migriert:
- trenner.pug - 1 Modul
- share.pug - 1 Modul
- toolbox.pug - 1 Modul
- marquee.pug - 1 Modul
- advert-flow.pug - 3 Module
- listing-filter.pug - 1 Modul (advanced)
- listing-bootstrap-filter.pug - 1 Modul
- listing-bootstrap-readmore.pug - 1 Modul
🎉 Gesamt-Fortschritt:
- ✅ content.pug - 27 Module (100%)
- ✅ listing-flow.pug - 12 Module (100%)
- ✅ listing-table.pug - 5 Module (100%)
- ✅ headers.pug - 3 Module (100%)
- ✅ banners.pug - 4 Module (100%)
- ✅ teaser-flow.pug - 18 Module (100%)
- ✅ metainfo2.pug - 6 Module (100%)
- ✅ Kleine Module - 11 Module (100%)
- Gesamt: 86 Module komplett migriert!
✅ 1. module__trenner.html
Einfacher horizontaler Trenner (HR-Element)
Verwendung:
✅ 2. module__share.html
Social Media Share Buttons (Facebook, Twitter, LinkedIn, E-Mail)
✅ 3. module__toolbox.html
Toolbox mit 9 Tool-Links und Icons
Innovatives Forschungsprojekt
Verwendung:
Innovatives Forschungsprojekt
✅ 4. module__marquee.html
Marquee Slider mit automatischem Scroll (benötigt Flickity JS)
Innovativ Forschen Vernetzen
Verwendung:
Innovativ Forschen Vernetzen
⚠️ Hinweis: Benötigt Flickity.js und main.js (initMarqueeSliders)
✅ 5. Advert-Flow Module (3 Stück)
5a. module__advert-magazin.html
Magazin-Werbung mit Illustration + Text + Extra-Info
03·2018 »Himmel«
Die beste der möglichen Welten...
...umfasst.
Fallbeispiele. Wenn Meteoriten die Erde treffen.
.
Die Sonne: Ein Blick in die Glaskugel
.
Alles ist erleuchtet. Vom Verlust der Nacht.
.
Die Sonne: Ein Blick in die Glaskugel
.
Alles ist erleuchtet. Vom Verlust der Nacht.
5b. module__advert-abo.html
Abo-Werbung mit Text + Illustration
Das leibniz-Printmagazin mit spannenden Artikel, Fotoreportagen und Portraits aus Wissenschaft und Gesellschaft erscheint dreimal jährlich.
5c. module__advert-custom.html
Custom-Werbung mit Hintergrundbild
Verwendung:
03·2018 »Himmel«
Die beste der möglichen Welten...
...umfasst.
Fallbeispiele. Wenn Meteoriten die Erde treffen.
.
Die Sonne: Ein Blick in die Glaskugel
.
Alles ist erleuchtet. Vom Verlust der Nacht.
Das leibniz-Printmagazin mit spannenden Artikel, Fotoreportagen und Portraits aus Wissenschaft und Gesellschaft erscheint dreimal jährlich.
Innovativ
Wie die Leibniz-Forschungsmuseen unser Kulturerbe erhalten
✅ 6. module__listing-filter-advanced.html
Advanced Filter-Collapse mit Selects, Checkboxes und Buttons (aus listing-filter.pug)
ℹ️ Hinweis: Es gibt bereits module__listing-filter.html (einfache Version aus listing-flow.pug).
Diese hier ist die erweiterte Version mit Formularfeldern.
Verwendung:
⚠️ Hinweis: Benötigt JavaScript für Collapse-Funktionalität (.js-collapse)
✅ 7. module__listing-bootstrap-filter.html
Bootstrap Table Filter (vereinfacht, mit Placeholder)
Ergebnisse filtern:
###FILTER###
Verwendung:
Ergebnisse filtern:
###FILTER###
✅ 8. module__listing-bootstrap-readmore.html
Simple "Mehr laden" Button für Bootstrap Tables
Verwendung:
🔧 Technische Details & Dependencies
JavaScript Dependencies:
- Flickity.js - Für marquee.html (automatischer Scroll)
- Collapse JS - Für listing-filter.html und listing-bootstrap-filter.html
- main.js - initMarqueeSliders() für Marquee-Funktionalität
CSS Klassen:
.module-wrapper- Container für Module.share,.share-link- Social Share Buttons.module-toolbox- Toolbox Container.marquee,.slider-marquee- Marquee Slider.advert-magazin,.advert-abo,.advert-custom- Werbebanner.listing-filter,.js-collapse- Filter-Collapse
Gulpfile Macros (benötigt):
icon(name, size)- Icon-Helperph2(aspect, color, text)- Placeholder-Helper_chance,_casual- Fake-Data Generatoren
🎯 Status: Fast fertig!
Alle Haupt-Module sind migriert! 🎉
Noch optional zu migrieren:
- bootstrap-table.pug - Spezielle Bootstrap Table Implementierungen (~2 Module)
- Falls nicht benötigt, können diese übersprungen werden