Design Grundstruktur

← zurück zum Design Wiki

Verantwortlicher: Sebastian Seitz

In dem Dokument Grundstruktur werden verschiedene Ebenen und Views aus Sicht des HTML-Entwurfs dargestellt.

#Main ##Theater

Der Theaterbereich ist der eigentliche Hauptbereich der Web App. In diesem wird das jeweils benötigte Overlay "Aktuelle Route", "Top 7", "Offline Routen" oder die Karte angezeigt. Die nicht benötigten Overlays und auch Pop-Up Fenster befinden sich über der Main View und werden bei Bedarf nach unten geschoben.

Der Theaterbereich ist blau markiert. Darüber zu sehen sind die Pop-Up Fenster und Overlays, welche eingeschoben werden, wenn man auf Route teilen oder Route speichern drückt. Im nachfolgenden Bild kann man dies sehr gut erkennen:

So sieht das 3D-Modell der WebApp aus, wenn eines der Pop-Up Fenster geöffnet ist:

##Theater Head Die Theater Head liegt über dem Theatre Bereich und unterteilt sich in zwei Elemente.

###Theater Head Topbar Die Theater Head Topbar zeigt den "Go Happy" Schriftzug und den Refresh, Menu und Maps Button.

###Theater Head Subbar Die Theater Head Subbar zeigt die drei Bedienelemente zur Einblendung der Overlays "Aktuelle Route", "Top 7" und "Offline Routen".

##Sidebar

Die Sidebar liegt hinter dem Theater und erscheint im Viewport sobald, das Event .sidebar-is-open getriggert wurde. Das Theater verschiebt sich nach rechts und gibt den Blick auf die Sidebar frei.

###Sidebar Head Topbar

Die Sidebar Head Topbar ist im Element Sidebar enthalten und zeigt und zeigt die Überschrift "Optionen" an.

###Sidebar Theater

Das Sidebar Theater enthält die Einstellungselemente für die aktuelle Route und ist ebenfalls in der Sidebar enthalten.

#Startscreen Die Startscreen Ebene ist separat zur Main Ebene und wird komplett ausgeblendet sobald der "Go Happy" Button gedrückt wurde. Sie enthält den Button und den Startscreen Footer mit dem "Powered by Foursquare" Logo.

#Impressum Das Impressum wird mit Hilfe der Klasse "e__fullscreen" über die aktuelle Ebene geschoben und füllt den kompletten aktuellen Viewport. ##Impressum Header Der Impressums Header enthält die Überschrift der Impressums Seite. ##Impressum Content Impressum Content enthält den Inhalt des Impressums.