Header/Footer feste Breite und zentrieren

Ziffernblock commented 7 months ago

Header und Footer sollten die Möglichkeit einer festen Breite bekommen und dann mit dem Content zentriert werden, so dass links und rechts Ränder entstehen. Das Problem bisher ist, dass Header und Footer immer auf 100% des Browserfensters skalieren - was teilweise sehr unzugänglich ist. Wenn dann noch der Content zentriert wird (statt linksbündig), entstehen zwischen Inhalten des Headers und dem Inhalt des Content teilweise absurde Abstände.

patrowe commented 7 months ago

Akzeptanzkriterium:

für die Komponenten lux-app-header-ac und lux-app-footer wurden die Properties lux-centered und lux-max-width eingeführt
über die Config besteht die Möglichkeit, diese Properties für beide Komponenten gleichzeitig zu setzen.

patrowe commented 6 months ago

Die Anforderungen wurden umgesetzt. @DSeifer bitte testen.

Test 1. Testvorbereitung:

Die angehängten Zweige für die Lux-Components und das Lux-Components-theme auschecken.
Das Theme lokal bauen und lokal mit den Components verlinken
Das Demo öffnen und einen Bildschirm mit mindestens 1600px Bildschirmbreite für den Test wählen.
Die Seite "Konfiguration" öffnen (auf dieser Seite der Demo wurde der Content-Bereich für Testzwecke Zentriert und mit einer Max-Width versehen).

2. Testdurchführung

in der Datei app.module.ts folgenden code ergänzen und speichern
zu Erwartendes Ergebnis: Die Inhalte im Footer und Header werden zentriert angezeigt und die Margins rechts und links werden größer
jetzt in der Datei app.module.ts weiteren code ergänzen und speichern
zu Erwartendes Ergebnis: Der Inhalt von Header und Footer werden auf einen schmaleren Bereich zugeschnitten (Der Content behält sein Breite)

DSeifer commented 6 months ago

Test

... unter Windows 10 Enterprise 22H2 (19045.4046) und MacOS 14.3.1 mit den jeweils aktuellen Browserversionen und in beiden Themes getestet:

MacOS Safari, Firefox, Chrome, Edge -> OK

Windows Edge, Firefox -> eingeschränkt OK

Bemerkung In der Standardbreite unter Windows auf dem NB nicht wirklich zu testen, da dieser nur eine max. Breite von 1920px hat, wovon für die Browserränder vermutlich bereits soviel abgeht, dass die Zentrierung nicht erkennbar ist. Müsste ich am Dienstag im Büro ggf. nochmal unter Windows nachtesten.

DSeifer commented 6 months ago

Nachgetestet unter Windows am großen DELL-Monitor: OK

IHK-GfI / lux-components

Header/Footer feste Breite und zentrieren #423

Test