Wir hatten ja neulich bereits ein UI-Update der Login-Seite (#3887), und nun kommen weitere Updates im Backend.
Navigationsleiste (navbar)
Die Navigationsleiste ist kleiner geworden, nur noch 50 px statt 70 px. Das spart etwas Platz im Viewport, was vor allem deshalb interessant ist, weil die Navbar nun auch fixed positioniert ist. Sie scrollt also nicht mehr aus dem Viewport raus.
Warum fixed? Ich könnte mir vorstellen, dass wir sie demnächst nochmal anfassen und dafür sorgen, dass sie Slots für Inhalte bereitstellt. Diese könnten etwa in Richtung Quick Navigation oder Minibar gehen.
Sidebar
Auch die Sidebar ist nun fixed und bringt eine eigene Scrollbar mit. Damit steht sie immer gut sichtbar im Viewport und verlängert die Seite nicht unnötig, wenn die Inhalte mal nur kurz sind.
Loading bar
Aufgrund der fixed Navigationsleiste bot sich an, auch den alten AJAX-Loader zu ersetzen. Dieser war bisher »blocking«, deckte also den gesamten Viewport leicht gräulich ab, solange Inhalte dynamisch nachgeladen wurden. Die Animation war etwas langsam.
Die neue Loading Bar ist nur noch eine Leiste und nicht mehr blocking. Sie klebt unten an der neuen Navbar und ist damit sehr dezent. Sie erscheint erst nach 200 ms, so dass schnell ladende Seiten sie gar nicht erst sehen, und sie bleibt dann mindestens 500 ms, damit sie nicht flickert.
Mobile
Auf kleinen Viewports ist die neue Navbar nicht dauerhaft fixed, sondern sie löst sich nach einem zurückgelegten Scrollweg von aktuell 80 px vom oberen Bildschirmrand ab und scrollt dann aus dem Viewport raus. Das spart etwas Platz auf kleinen Displays.
Weil die Navbar aber auch den Menü-Button (Hamburger) enthält, wird sie zwingend zur Navigation benötigt. Deshalb kommt sie nach 80 px in die entgegengesetzte Richtung wieder in den Viewport hineingescrollt und steht wie zuvor fixed.
Ein Klick auf den Hamburger fährt von der Seite die fixed Sidebar rein. Bewusst mit sehr schneller Animation übrigens (300ms). Gleichzeitig deckt ein dezentes Backdrop-Element den Inhalt der Seite ab, um zu vermeiden, dass Komponenten dort angeklickt werden können, auf die wir bei offener Sidebar eingehen müssten.
Bei offener Sidebar ändert sich auch der Inhalt der Navbar oben. Das REDAXO-Logo verschwindet, und es erscheinen stattdessen die Infos des angemeldeten Nutzers samt Logout-Button.
Das ist in gewisser Weise eine etwas temporäre Lösung, um nicht zu viel gleichzeitig zu implementieren. Denn die Navbar würde ich zukünftig gerne noch weiter verbessern!
Und schlieĂźlich: Scrollt die Navbar raus, nimmt sie auch die Loading bar mit. Diese steht dann ganz oben am Viewport.
Sonstiges
- Customizer-Plugin leicht aktualisiert, damit es besser mit der neuen Navbar umgesehen kann.
Erledigt (Stand 13.01.2020)
Inzwischen wurden einige nebenläufige Features in separaten PRs behandelt. Alles ab hier also ist bereits erledigt:
Sidebar
Die Navigationspunkte und Trennlinien nehmen in der Breite nun die gesamte Sidebar ein, haben also kein margin mehr nach links und rechts.
Wir hatten das Thema mit den Icons schonmal, und ich habe es nochmal mit reingenommen: Sie stehen nun zentriert (mittels Font Awesomes fa-fw
-Klasse) und damit weniger unbeholfen. Nicht umsonst bietet Font Awesome diesen Style an.
Neue PJAX-Library
Die aktuell genutzte PJAX-Library (jquery-pjax) benötigt jQuery und wird seit langer Zeit nicht mehr gepflegt. Als Alternative hat sich offenbar MoOx/pjax etabliert, die ohne jQuery auskommt und noch etwas flexibler ist. Sie hat den schönen Vorteil, nicht nur einen einzelnen Container dynamisch befüllen zu können, sondern gleich mehrere Container. Damit können wir wie oben beschrieben zukünftig z. B. auch die Navbar dynamisieren.
Technisch wurden in den Templates ein paar Inhalte obsolet, die zuvor bei rex_request::isPJAXRequest()
eingebracht worden sind. Das neue PJAX greift sich eigenständig den passenden Content. Weiter sind isPJAXRequest()
und isPJAXContainer()
nun obsolet und wurden als deprecated markiert.
Mit dem neuen PJAX sind zudem weitere Seiten dynamisch ladbar, die es zuvor nicht ohne weiteres waren. So habe ich etwa auch in der package.yml von structure/content nun pjax aktiviert.
GrĂĽneres GrĂĽn
Im Slack haben wir immer wieder von Leuten gelesen, die das alte Grün nicht mögen. Es war auch etwas speziell. Vielleicht gefällt euch dieser Vorschlag eines neuen Grüns besser?
Alt:
Neu:
Typo
Die Lucida Grande muss weg. Sie ist alt, steht typografisch ungeschickt, und man hat sich an ihr längst leidgesehen. Best Practice ist heute, keinen dedizierten Webfont mitzuliefern, wenn es nicht unbedingt sein muss, sondern stattdessen auf die Systemschriften (»System font stack«) zu setzen.
Und weil Lucida aber sehr groß läuft, habe ich die Basisschriftgröße von 14 px auf 15 px erhöht.
Sonstiges
- Dem REDAXO-Logo-SVG eine eigene CSS-Klasse (
rex-redaxo-logo
) spendiert, damit man es anfassen und stylen kann. Die Ausgabe des Logos angepasst, so dass nicht mehr ein <img>
verwendet wird, das anschließend mittels JS in ein SVG umgebaut wird. Stattdessen wird das SVG nun direkt ausgegeben (mittels rex_file::get(rex_path::coreAssets(…))
), und das zugehörige JS ist obsolet. (Hat den schönen Nebeneffekt, dass das Logo unmittelbar nach Seitenaufruf nicht mehr »flackert«.)
- Kleiner Bootstrap-Bugfix: Höhe von Input-Feldern mit Buttons angeglichen (#3962)
- Bugfixes auf der Login-Page. Diese Anpassung muss zwingend mit in 5.12, auch wenn der Rest dieses PRs nicht gewĂĽnscht sein sollte.
- Bugfix im JS von structure/content:
rex:ready
benutzen, damit das Event nach einem PJAX-Request erneut feuert.
- Formulare können nun mittels CMD/STRG + Enter abgeschickt werden (#791).
- Alerts innerhalb von Tabellen optimiert, sieht man am besten beim Aktivieren oder Deaktiveren von AddOns.