Page 1 of 1
mobile Ansicht - verändert
Posted: Wed Apr 13, 2022 5:16 am
by Ralph
Guten Morgen, ich habe etwas an der mobilen Ansicht gespielt und die oberen Buttons sowie die Uhr Zentriert. Aktuell suche ich noch eine Idee das Dropdown - Menü zu Zentrieren.
Persönlich finde ich das bei einem Smartphone zentriert ein tacken schicker. ( aber das ist nur meine Meinung
)
So sieht es dann aus:
Und hier mal der veränderte Code der CSS.
1. finde .clock und ersetzte ganze Klasse durch
Code: Select all
.clock {
height: 250px;
position: absolute;
/*left: 0px;*/
border: solid 1px gray;
overflow-x: hidden;
overflow-y: hidden;
display: flex;
justify-content: center;
align-items: center;
}
2. finde .menu und ersetzte ganze Klasse durch
Code: Select all
.menu {
height: 50px;
width: 100%;
margin: 0%;
padding: 2%;
top: 0px;
/*left: 0px;*/
border: 1px;
position: absolute;
display: flex;
justify-content: center;
align-items: center;
}
Ich suche noch die Lösung das Layer Dopdown zu zentrieren ...
Final ist das hier jetzt aber noch nicht, ich werden das noch so gestalten, das nur Smartphones diese Zentrierte Ansicht nutzen können. Tablets und PC's nicht.
Re: mobile Ansicht - UPDATE I
Posted: Wed Apr 13, 2022 6:20 am
by Ralph
Ersten kleines Update
DIE OBRIGEN ÄNDERUNGEN ZURÜCKNEMEN ODER NICHT EINSETZTEN
Bei dieser Ausführung ist gewährleistet das die zentrierte Ansicht nur auf Smartphones angezeigt wird, auf Tablets und PC's nicht. Ich würde den Layer gerne noch zentrieren, muss aber erst verstehen die der HTML Code Dynamisch erstellt wird, wohl über das javacript. Hier muss ich den Layer in eine eigene, verschachtelte Klasse legen. Mal sehen
Wer sich das nicht Zutraut, dem habe die originale und modifizierte CSS angehängt. Bitte beachten, zum verwenden die vorhandene style.css umbenennen, neue css bitte in das html Verzeichniss laden.
@teddy, wie kann an die Uhr einstellen? Die geht 1min 40 Sec vor ....
finde:
Code: Select all
@media (max-width: 649px) {
.menu_config,
.menu_config_visible,
.menu_add,
.menu_configbutton {
display: none;
}
}
ersetzte durch:
Code: Select all
@media only screen and (max-width: 649px) {
/* For Smartphone: */
.clock {
height: 250px;
position: absolute;
/*left: 0px;*/
border: solid 1px gray;
overflow-x: hidden;
overflow-y: hidden;
display: flex;
justify-content: center;
align-items: center;
}
.menu {
height: 50px;
width: 100%;
margin: 0%;
padding: 2%;
top: 0px;
/*left: 0px;*/
border: 1px;
position: absolute;
display: flex;
justify-content: center;
align-items: center;
}
.menu_config, .menu_config_visible, .menu_add, .menu_configbutton {
display: none;
}
}
Re: mobile Ansicht - verändert
Posted: Wed Apr 13, 2022 4:14 pm
by _DB_
Hallo Ralph,
vielen Dank für Deine Vorarbeit. Momentan läuft bei mir alles über den Pi - aber definitiv werde ich irgendwann (eher früher als später) auch das Smartphone einsetzen.
Da kommen mir Deine Tipps doch sehr gelegen!
Ein JavaScript-Buch habe ich mir schon einmal angeschafft.
Bis dahin - viele Grüße aus Herne - Detlef
Re: mobile Ansicht - UPDATE I
Posted: Fri Apr 15, 2022 3:26 pm
by teddy
Ralph wrote: ↑Wed Apr 13, 2022 6:20 am
@teddy, wie kann an die Uhr einstellen? Die geht 1min 40 Sec vor ....
Die Uhr zeigt eigentlich die Zeit des Clients an. Bei dir vermutlich das SmartPhone. Wenn die Zeit da falsch eingestellt ist, ist auch die Zeit in RailControl falsch. Dass aber die Zeit beim SmartPhone falsch ist ist eher unüblich.
Gruss
Teddy
Re: mobile Ansicht - verändert
Posted: Fri Oct 21, 2022 2:01 pm
by teddy
Hallo Ralph
Ich musste im Zuge der mehreren Fahrregler einiges an CSS rumbasteln. Dabei ist die Uhr auch etwas verrutscht und deine Anregungen zum Zentrieren passen irgendwie nicht mehr so richtig rein. Dafür können nun zwei oder sogar drei Fahrregler nebeneinander auf einem SmartPhone angezeigt werden (zumindest im Querformat).
Gruss
Teddy
Re: mobile Ansicht - verändert
Posted: Thu Dec 01, 2022 9:55 pm
by Ralph
