| ... | ... | @@ -8,12 +8,12 @@ Damit wurde ein Ziel in den User-Stories festgelegt, welches auch mit Entwürfen |
|
|
|
|
|
|
|
*Grundsätzliche Funktionsweise*
|
|
|
|
|
|
|
|
Umgesetzt ist die Anforderung mittels verschiedener HTML-Dateien, in welchen sich die entsprechenden Container befinden die für die jeweiligen Versionen gebraucht werden. Je nach Bildschirmgröße oder Auswahl des/der Benutzers/Benutzerin werden die Container in die verwendete HTML-Datei geschrieben und somit die Website verändert. Bei einer `window.innerWidth < 500` wird immer die mobile Version angezeigt, indem die Container der indexSM.html in die index.html gefügt werden und falls an der Url noch kein Hash-Code dran hängt, der Hash-Code #map an die Url angehangen wird. Damit bei der mobilen Version nur ein Fenster angezeigt wird, werden alle Container der Fenster auf `display: none` gesetzt und nur das Fenster dessen Name in der Url als Hash-Code steht wird angezeigt.
|
|
|
|
Bei der Version für große Bildschirme (>500px Breite) wird entsprechend die indexBIG.html verwendet. In dieser ist zusätzlich ein Button mit dem man über die Methode `activateMobileVersion()` auf die mobile Version springen kann. Damit kann die nutzende Person auch auf einem großen Gerät die mobile Version mit nur 1 Fenster nutzen. Falls dann doch wieder zurück auf die Einstiegsversion gewechselt werden soll, besteht im Menü die Auswahl von `Desktop Version`. Beim Auswählen dieses Menüpunkts wird zurück auf die Desktop Version gewechselt. Wichtig zu erwähnen ist, dass der Menüpunkt `Desktop Version` nur im Menü angezeigt wird, wenn der Bildschirm auch die entsprechende Breite hat.
|
|
|
|
Umgesetzt ist die Anforderung mittels verschiedener HTML-Dateien, in welchen sich die entsprechenden Container befinden, die für die jeweiligen Versionen gebraucht werden. Je nach Bildschirmgröße oder Auswahl des/der Benutzers/Benutzerin werden die Container in die verwendete HTML-Datei geschrieben und somit die Website verändert. Bei einer `window.innerWidth < 500` wird immer die mobile Version angezeigt, indem die Container der indexSM.html in die index.html gefügt werden und falls an der Url noch kein Hash-Code dran hängt, der Hash-Code #map an die Url angehangen wird. Damit bei der mobilen Version nur ein Fenster angezeigt wird, werden alle Container der Fenster auf `display: none` gesetzt und nur das Fenster dessen Name in der Url als Hash-Code steht wird angezeigt.
|
|
|
|
Bei der Version für große Bildschirme (>500px Breite) wird entsprechend die indexBIG.html verwendet. In dieser ist zusätzlich ein Button mit dem man über die Methode `activateMobileVersion()` auf die mobile Version springen kann. Damit kann die nutzende Person auch auf einem großen Gerät die mobile Version mit nur 1 Fenster nutzen. Falls dann doch wieder zurück auf die Einstiegsversion gewechselt werden soll, besteht im Menü die Möglichkeit `Desktop Version` auszuwählen. Beim Auswählen dieses Menüpunkts wird zurück auf die Desktop Version gewechselt. Wichtig zu erwähnen ist, dass der Menüpunkt `Desktop Version` nur im Menü angezeigt wird, wenn der Bildschirm auch die entsprechende Breite hat.
|
|
|
|
|
|
|
|
*Konfiguration des Schaltflächensymbols*
|
|
|
|
|
|
|
|
Der erwähnte Button zum Wechseln auf die mobile Version -wenn man auf der Desktop Version ist- ist ein einfacher Button mit der `class=“mobilVerBtn“` welcher über den Klassennamen im CSS angesprochen werden kann oder direkt im HTML noch verändert werden kann.
|
|
|
|
Der erwähnte Button zum Wechseln auf die mobile Version -wenn man auf der Desktop Version ist- ist ein einfacher Button mit der `class=“mobilVerBtn“`, welcher über den Klassennamen im CSS angesprochen werden kann oder direkt im HTML noch verändert werden kann.
|
|
|
|
|
|
|
|
|
|
|
|
[(Zurück zum Inhalt des Endberichts)](https://gitlab.fbg-hsbo.de/web3dscans/web3dscans1/wikis/Endbericht) |
