mobile Ansicht - verändert

Fehlt RailControl eine Funktion oder hat jemand neue Ideen?
Post Reply
User avatar
Ralph
Posts: 4
Joined: Mon Feb 07, 2022 4:41 pm

mobile Ansicht - verändert

Post 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:

Image

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.
..:: roters-web ::.. lifestyle|blog|modellbahn...

Es grüßt der Ralph ....
User avatar
Ralph
Posts: 4
Joined: Mon Feb 07, 2022 4:41 pm

Re: mobile Ansicht - UPDATE I

Post 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 :shock:

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;
	}
}
Attachments
style_original.css
Originale Variante
(13.34 KiB) Downloaded 97 times
style.css
Modifizierte Variante
(13.77 KiB) Downloaded 86 times
..:: roters-web ::.. lifestyle|blog|modellbahn...

Es grüßt der Ralph ....
User avatar
_DB_
Posts: 103
Joined: Wed May 20, 2020 8:20 pm
Location: Herne - Germany

Re: mobile Ansicht - verändert

Post 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
Märklin H0 Gleisbox aufgepeppt -
RailPi V2 mit Gerds 'can2lan', Teddy's 'RailControl', CdB Modulen, Gustavs 'CANguru-System'
und DCC-EX - vorzugsweise für die LGB und zum Testen
User avatar
teddy
Site Admin
Posts: 428
Joined: Thu May 07, 2020 2:39 pm
Contact:

Re: mobile Ansicht - UPDATE I

Post 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
User avatar
teddy
Site Admin
Posts: 428
Joined: Thu May 07, 2020 2:39 pm
Contact:

Re: mobile Ansicht - verändert

Post 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
User avatar
Ralph
Posts: 4
Joined: Mon Feb 07, 2022 4:41 pm

Re: mobile Ansicht - verändert

Post by Ralph »

Modellbauhütte machte mich noch auf einige Fehler aufmerksam, daher jetzt der 3. Versuch ;)

Aber Ich bin soweit gut zufrieden, jetzt ;)
Für kleine Displays oder niedrige Auflösungen wird keine Uhrzeit und kein Status gezeigt.

Anbei einige Screenshots:

Image

Image

Image

Image

Image
Attachments
style.css
(14.79 KiB) Downloaded 56 times
..:: roters-web ::.. lifestyle|blog|modellbahn...

Es grüßt der Ralph ....
Post Reply