Bislang waren die Öffnungszeiten strikt von Mo-So aufsteigend sortiert. Dies hat sich geändert! Ab sofort wird der aktuelle Tag immer als erstes angezeigt, gefolgt von den nächsten Tagen. Das hat bei Smartphones den Vorteil, dass man nicht nach unten scrollen muss wenn man für heute oder morgen die Öffnungszeiten wissen möchte.
via GIPHY
via GIPHY
Technik-Tipp
Die Anordnung der Wochentage - wer ist der erste, zweite usw. - erfolgt auf der Client-Seite. Die Flexbox-Elemente erhalten auf dem Server via PHP ihre Pos1 - Pos7 Position (CSS Klasse), der Client sortiert dann gemäß der 'order' Eigenschaft die einzelnen Tage ein.
Die HTML-Reihenfolge ist nicht die selbe Reihenfolge, wie die Darstellung am Display! Der Freitag mit der Klasse 'Pos1' kommt im HTML erst an 5ter Position. Über die zugehörige CSS Definition können Flexbox-Items (die Elemente innerhalb einer Flexbox) sortiert werden:
Mit 'order:1' wird der Freitag als Nummer 1 angezeigt, die restlichen Tage bekommen auch ihre passende Klasse zugewiesen (Pos2 - Pos7).
Wer sich weiter mit Flexbox beschäftigen will, findet bei Chris Coyier und seiner genialen Seite CSS-Tricks alles was ich immer schon über Flexbox wissen wollte.
 |
| Das dazugehörige HTML-Gerüst |
Die HTML-Reihenfolge ist nicht die selbe Reihenfolge, wie die Darstellung am Display! Der Freitag mit der Klasse 'Pos1' kommt im HTML erst an 5ter Position. Über die zugehörige CSS Definition können Flexbox-Items (die Elemente innerhalb einer Flexbox) sortiert werden:
 |
| und die passende CSS-Klasse |
Wer sich weiter mit Flexbox beschäftigen will, findet bei Chris Coyier und seiner genialen Seite CSS-Tricks alles was ich immer schon über Flexbox wissen wollte.
Kommentare
Kommentar veröffentlichen