Pia Melina4.5.1 Mechanismus zum Tauschen der Anzeigefenster
Autorin: Pia Melina Rolf
Vollbild
Grundsätzliche Funktionsweise
Um den Nutzenden alle Informationen auf einen Blick möglichst flexibel zur Verfügung zu stellen, wurde im Abschnitt 3.2 der Dokumentation bereits in den User Storys ein Web-Design für ein großen Bildschirm vorgeschlagen, welches dies ermöglicht. Das Design soll ein Hauptfenster beinhalten, dass 2/3 des Bildschirms einnimmt. Neben dem Hauptfenster sollen übereinander 2 weitere kleinere Fenster zu sehen und bedienen sein. Die beiden kleineren Fenster sollen einen Button besitzen, welcher bei Klicken den Inhalt des kleineren Fensters auf das Hauptfenster verlegt und der Inhalt des Hauptfensters in einem kleinen Fenster angezeigt wird.
Umgesetzt ist dies durch verschiedene Klassennamen an den 3 Sektionen (<div class=“box“></div>): Karte, Model-Viewer, Steckbrief.
Die 2 Klassennamen sind box--main und box--side. Diese haben die Bedeutungen Hauptfenster und kleineres Nebenfenster. Durch das Klicken des angesprochenen Buttons wird der Klassenname box--side durch den Klassennamen box--main bei der jeweiligen Sektion ersetzt und die Sektion mit dem Klassennamen box--main wird zur Klasse box--side. Dadurch werden die Größe und die Position der Sektionen neu berechnet und auf das vorgerechnete Gitter gelegt.
Konfiguration des Schaltflächensymbols
Das optische Erscheinungsbild des Buttons lässt sich flexibel gestalten. Da die Funktionalität mit den drei Fenstern gleichzeitig, nur für große Bildschirme sinnvoll ist, gibt es die Buttons auch nur in der HTML-Datei für große Bildschirme (indexBIG.html). Die Buttons der Klasse biggerButton haben ein innenliegendes Element, dass durch verschiedene Elemente ersetzt werden kann (bspw. Bilder, Text, Links). In der aktuellen Ausbaustufe ist das Element ein Icon (<i></i>) mit einem Expandierungs-Symbol. Das Symbol wird durch die Klassennamen fa fa-expand festgelegt und kann einfach durch andere Klassennamen der Bootstrapsymbole ausgetauscht werden. Es ist wichtig zu beachten, dass für einheitliche Symbole bei Änderungen das Element an 3 Stellen geändert werden muss, da es 3 Fenster und somit 3 Buttons gibt, auch wenn nur 2 Buttons gleichzeitig angezeigt werden.
mobile Version
Grundsätzliche Funktionsweise
Auf kleineren Bildschirmen ist es nicht sinnvoll mehrere Fenster gleichzeitig anzuzeigen. Deshalb gibt es für kleine Bildschirme wie Handys eine mobile Version in der über ein Menü ausgewählt werden kann, welches der 3 Sektionen - Karte, Model-Viewer und Steckbrief - angezeigt werden soll. Über das Menü kann jederzeit eine andere Sektion ausgewählt werden.
Die technische Umsetzung beruht auf mobilen Containern die nur angezeigt (display = initial) werden, wenn der entsprechende Menüpunkt ausgewählt wurde und als hash code an die url geschrieben wurde. Die anderen Sektionen werden in der Zeit ausgeblendet (display = none) und werden erst angezeigt, wenn sie im Menü ausgewählt wurden.
Konfiguration des Menüsymbols
Das Symbol des Burgermenüs wird in der Datei indexSM.html innerhalb des Link-Tags mit der Funktion showHideMenu (<a onclick = "showHideMenu()"></a>) über das Icon gesetzt. Das Symbol wird durch die Klassennamen fa fa-bars festgelegt und kann einfach durch andere Klassennamen der Bootstrapsymbole ausgetauscht werden.