... | ... | @@ -2,13 +2,13 @@ |
|
|
|
|
|
*Autorin: Pia Melina Rolf*
|
|
|
|
|
|
*Grundsätzliche Funktionsweise*
|
|
|
**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 vorgeschlagen, welches dies ermöglicht. Das Design soll ein Hauptfenster beinhalten, das 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` und 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*
|
|
|
**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 Änderung 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.
|
|
|
|
... | ... | |