sections (mit blocks.js als layouter)

gaenseklein commented 6 years ago

Sections werden dazu benutzt, Teile der Seite/Slide zu einem Block zusammen zu fassen. Sie sind vor allem fürs Layout interessant, daher kam auch die Idee zu Sections - um ein einfaches Spaltenlayout schreiben zu können ohne auf Tabellen oder ähnlichen Murks zurück greifen zu müssen.

[x] Sections werden definiert durch ~~||section|| - tag~~ ´´´layout block.
[x] Sections werden interpretiert wie Seiten, es ist also mit MD-Code möglich, in ihnen weiter zu arbeiten und mehrere MD-Code Elemente so zu einem Block zusammen zu fassen.
[x] Sections können Links und Rechts positioniert werden wenn sie im Header "left" oder "right" stehen haben
[x] Sections können ebenso wie Slides Hintergrundbilder haben. Dazu muss die erste Zeile einer Section ein Bild sein
[x] Sections mit left/right header teilen sich die Seite horizontal auf (1/n-tel der Seite bei n Sections)
[x] Sections mit left/right header gehen bis zum vertikalen Ende der Seite
[x] Sections dürfen zwar MD-Code enthalten, aber der Code für neue Seite ist gesperrt ("---") da sonst das Parsen nicht mehr vernünftig laufen kann.

Layout/Positionierung: Um das Layout erweiterbar/änderbar zu halten wird es in eigenem Theme gehalten. Momentan genutztes Layout ist das blocks.js-Layout, wo per javascript ein css-grid aufgebaut wird, anhand dessen die einzelnen Elemente auf der Seite positioniert werden. Das sections.js - theme versieht die relevanten Datenblöcke mit der section-Klasse, sowie mit den Klassen "left" oder "right" wenn sie im header auftauchen. Der Rest der Logik erfolt im Layout-Theme (blocks.js). Das Layout der Section selbst wird momentan ebenso über die Logik des Layout-Themes gestaltet - dazu ruft das sections.js-Theme das jeweils aktive Layout-Theme (momentan nur blocks.js) auf und lässt es die Section layouten.

gaenseklein commented 6 years ago

Im Layout von block.js ist es nicht vorgesehen, mehr als Drei Vertikale Elemente nebeneinander zu haben. Daher führen vier Sections nicht zum gewünschten Effekt. Wenn mehr als drei vertikale Elemente gewünscht sein sollten muss das Layoutsystem dahingehend angepasst werden. Bis zu drei Elementen klappt die Aufteilung aber sehr gut. Darüber hinaus ist es möglich, durch gezieltes Verwenden von Sections verschiedene Aufteilungen der Seite zu erzielen:

Section mit 30% der Seite, weiterer Text mit 60%:

||section||left
asdf
||section||
weiterer Text

Section nach Rechts mit 30%:

||section||right
Text rechts, 30%
||section||
weiterer Text

Sections teilen sich die Seite zu 50%:

||section||left
linker Text
||section||
||section||right
rechter Text
||section||

Sections teilen sich die Seite zu einem Drittel:

||section||left
linker Text
||section||
||section||left
mittlerer Text
||section||
||section||left
rechter Text
||section

Auch wenn hier im letzten Beispiel nur left sind: Der Unterschied von left und right ist lediglich, dass section-right nach Rechts von allem positioniert wird, was nach der Section kommt (ähnlich zu einem float:right) - also aus der Reihenfolge gelöst wird und dann rechts daneben gepackt wird. Es ist für eine Zwei- oder Drei-Teilung der Seite eigentlich nicht nötig und kann der Übersicht halber verwendet werden wie im Beispiel davor.