Tablet UI - responsive Design (flexbox)

eppi · 13 Oktober 2017, 19:53:11

Ich habe noch eine Frage. Bei meinen Rollladen möchte ich noch zusätzlich ein Stop-Icon einbauen zu den bestehenden Auf und Ab:

Code Auswählen

<!DOCTYPE html>
<html>
<head>
	<!-- FHEM Tablet UI V2.6 -->
	<!-- Template ffür Homematic Funk Jalousieaktur Unterputz HM-LC-Bl1PBU-FM -->
</head>
<body>
	<div class="row">
		<div class="cell left-align left-space">
			<div data-type="symbol" data-device="var_device" data-get="pct" data-states='["0","1"]' data-colors='["red","green"]' data-icon="oa-fts_shutter_20" class="big compressed"></div>
		</div>
		<div class="cell-80 left-align">
			<div class="big">var_name</div>
			<div data-type="label" data-device="var_device" data-substitution='["on","Status: oben","off","Status: unten","auf","Status: oben","ab","Status: unten","undefined","Status: teilweise oben / unten"]' class="inline"></div>
		</div>
		<div class="cell right-align">
			<div data-type="push" data-device="var_device" data-get="state" data-set-on="ab" data-background-icon="mi-arrow_drop_down" data-icon="mi-arrow_drop_down" class="small"></div>
		</div>
		<div class="cell right-space">
			<div data-type="push" data-device="var_device" data-get="state" data-set-on="auf" data-background-icon="mi-arrow_drop_up" data-icon="mi-arrow_drop_up" class="small"></div>
		</div>
	</div>
</body>
</html>

Wenn ich nun einen weiteren Div einbaue, schiebt es die drei Icon in die Mitte... Ich vermute, das die Zelle zuwenig Platz hat für 3 Icons. Kann ich das einstellen?
Danke

Augschburger · 14 Oktober 2017, 11:03:46

Ich hab's mal probiert:
Die Material Icons habe ich ersetzt durch Font Awesome, weil ich bei mi- auf die Schnelle keinen Stop-Knopf gefunden habe.
Des Weiteren habe ich das Background-Icon auf "" gesetzt, weil sonst die "compressed" Class nicht funktioniert hat (geile Effekte, riecht nach Bug, nicht nach Feature $:-\$ ). Compressed wollte ich, damit links und rechts von den Icons weniger Rand verschwendet wird.
Beim Stop-Icon habe ich es weggelassen, damit man es auch mit Wurschtfingern vielleicht noch trifft (eigene Erfahrungen).

Dann habe ich die 2. Cell auf 20% und die 3. auf 60% gesetzt. Klingt komisch, funktioniert aber so. Wie schon erwähnt: Flexbox und ich - wir haben uns noch nicht gefunden. 1995 mit <table> war alles einfacher.

Code Auswählen


  <div class="row">
		<div class="cell left-align left-space">
			<div data-type="symbol" data-device="var_device" data-get="pct" data-states='["0","1"]' data-colors='["red","green"]' data-icon="oa-fts_shutter_20" class="compressed"></div>
		</div>
		<div class="cell-20 left-align">
			<div class="big">Kinderzimmer</div>
			<div data-type="label" data-device="var_device" data-substitution='["on","Status: oben","off","Status: unten","auf","Status: oben","ab","Status: unten","undefined","Status: teilweise oben / unten"]' class=""></div>Status: halboffen
		</div>
		<div class="cell-60 right-align">
			<div data-type="push" data-device="var_device" data-get="state" data-set-on="ab" data-background-icon="" data-icon="fa-caret-down" class="compressed inline" style=""></div>
			<div data-type="push" data-device="var_device" data-get="state" data-set-on="auf" data-background-icon="" data-icon="fa-stop" class="tiny inline"></div>
			<div data-type="push" data-device="var_device" data-get="state" data-set-on="auf" data-background-icon="" data-icon="fa-caret-up" class="compressed inline" style=""></div>
		</div>
		<div class="cell right-align">
		</div>
	</div>

Achja, das class="big" beim ganz linken Icon hab ich auch rausgenommen, das wird sonst größer als die anderen Icons.

eppi · 15 Oktober 2017, 09:12:53

Zitat von: Augschburger am 13 Oktober 2017, 09:56:39
Weil mir das "sanfte" Scrollen beim iPhone gefehlt hat, habe ich mich mal aufgeschlaut. Mit diesem Schnipsel in der user-tablet-ui.css verhält es sich wieder Apple-like:
Code Auswählen Erweitern
body { overflow-y: scroll; -webkit-overflow-scrolling: touch; }

Danke. Das ergibt bei mir ebenfalls das sanfte scrollen auf dem iPhone, aber dafür überdeckt es den "Back"-Button oben. Ist das bei dir auch so?
Danke

Augschburger · 15 Oktober 2017, 10:12:38

In welchem Browser? Beim Safari ist der Back-Button unten (und funktioniert eh nicht richtig auf den Seiten).
Ich kann nur über das Menü vernünftig navigieren - und das scrollt nicht mit, sondern klebt oben unter der Adresszeile (die auch nicht wegscrollt - finde ich doof).

eppi · 15 Oktober 2017, 10:18:30

Zitat von: Augschburger am 15 Oktober 2017, 10:12:38
In welchem Browser? Beim Safari ist der Back-Button unten (und funktioniert eh nicht richtig auf den Seiten).
Ich kann nur über das Menü vernünftig navigieren - und das scrollt nicht mit, sondern klebt oben unter der Adresszeile (die auch nicht wegscrollt - finde ich doof).

Festgestellt habe ich es auf dem iPhone (aktuelles iOS 11.x). Den Backbutton im Safari wird bei mir nicht mehr anzeigt, da ich den Link auf dem Homescreen abgelegt habe (apple-mobile-web-app-capable). Ich kann aber auch damit leben jeweils zurück zugehen über das Menue. Ein flüssiges scrollen ist mir wichtiger. Danke

Master_Nick · 22 Oktober 2017, 13:41:04

@jemu75 Ich habe mich reichlich bedient in deinem Code

Sehr hilfreich vielen Dank!

Eine Sache würde ich gerne Ändern und habe es bisher nicht geschafft - ich möchte gerne, dass Menü auch schaltbar (nicht dauerhaft sichtbar) im Landscape Modus eines Mobilen Gerätes.
Habe schon das JQuery durchforstet ohne etwas zu finden (das mir was gesagt hätte) und auch die CSS und index Datei.

Mag mir jemand helfen

?

holle75 · 22 Oktober 2017, 13:58:23

Moinsen Nick, durchforste mal den ganzen Thread. Irgendwo habe ich beschrieben wie du über das Verändern der Media-Queries das Menu entsprechend der Pixelbreite in der css definieren kannst.

Master_Nick · 22 Oktober 2017, 19:10:09

Gefunden hab ich deinen Beitrag und auch durchgeführt

481px mhhh so ganz versteh ich das nicht - soll es heißen ab einer größe von 481 wird das Menü angezeigt? Also z.B. mein S7 Edge hat deutlich mehr und es wird im landscape immer noch angezeigt. Muss ich es nun auf 2561px hoch setzen damit es dort richtig ist?

Habe es mit 2560 und 2561 getestet - es bleibt dabei, das Menü im landscape bleibt ausgeklappt.

Mein Ziel wäre es auch im landscape den Menüknopf zu haben um das Menü erst zu öffnen.

holle75 · 22 Oktober 2017, 19:21:04

es gibt mehrere Stellen in der fhem-tablet-ui.css .... geh das ganze File durch, such die entsprechenden Media queries und schau was sich bei welchen Größen ändert .

Mmh, also 2000px und größer ?? was ist das für ein Mobile device???

das hier vorgeschlagene geht schon recht tief in die Materie. Wie gut kennst du dich aus? Alle Stellen rauszusuchen übersteigt gerade meine zeitlichen Möglichkeiten. In Firefox und Chrome gibt es die Web Developer Tools, da kannst du mit bestimmten Bildschirmgrößen testen und siehst was wie passiert. Sorry, dass ich gerade nicht mehr beisteuern kann.

Master_Nick · 22 Oktober 2017, 19:24:57

Vielen Dank

Also ich hab einfach mal nach den Pixeln des Bildschirmes von S7 Edge gesucht Wiki sagt da:

ZitatDer Bildschirm des S7 Edge ist mit 5,5 Zoll Diagonale 0,4 Zoll größer als der des Galaxy S7.[3] Beide Geräte verwenden AMOLED-Technik mit 1.440 × 2.560 Pixeln

Daraus ergäbe sich nun bei mir wenn ich es landscape nutze eine Nutzfläche von 2560px

Ich bin noch in der Phase try end Error :-D Aber die Dev Tools kenne ich - wahrscheinlich wird es dann das eben genannte ... try and error :-D

Der magische Wert laut Dev Tools ist 481 ab da kommt das Menü ^^ Ich such mal.

Okay hab den großen Hammer geschwungen ALLE 480px und den 481 auf 2560px gesetzt in der fhem-tablet-ui.css und schon geht es

Menü ist eingeklappt im Landscape - ob das S7 Edge nun wirklich diese Menge Pixel im Browser angibt... keine Ahnung. Vielen Dank!

Soo habe es genau eingrenzen können mit 732px hat es im Landscape einen Knopf fürs Menü mit 731px nicht.

somansch · 05 November 2017, 12:51:07

Hallo jemu75,

erstmal VIELEN DANK für dein Template und deine Mühen. Ich mage die Dynamik und den schmalen Code durch die Templates

. Bin seit 4 Wochen dabei, mein FTUI entsprechend umzustellen. Habe auch die Fixes aus diesem Thread umgesetzt.

Jedoch gibt es ein Problem, welches ziemlich nervig ist: Die Zellenanordnung in Reihen

In deinen Templates verwendest du drei Zellen als Workaround. Ich habe zwei Templates für "Pollen" und "Geburtstage", welche vier Zellen benötigen. Ich bekomme es mit keinerlei Kombination von fixen Zellbreiten, Linksausrichtung o.ä. hin, dass alles schön sauber untereinander ausgerichtet ist

.

Hier mal mein "Pollen" Content (content_weather_pollen) zum Nachstellen:

Code Auswählen

<!DOCTYPE html>
<html>
<body>
   <div class="page" id="content_weather_pollen">
		<div class="phone-back-btn">
			<div data-type="link" data-url="#content_weather.html" data-load="#content2_weather" data-color="white" data-icon="mi-chevron_left" class="large"></div>
		</div>
		
		<div class="hbox">
			<div class="vbox phone-width">
				<div class="card lift">
					<header>Pollenflug</header>
					<section>
						<div data-template="template_weather_pollen.html" data-parameter='{"var_name_a":"Ahorn","var_name_b":"Ambrosia","var_name_c":"Beifuss","var_name_d":"Birke"}'></div>
					</section>
					<section>
						<div data-template="template_weather_pollen.html" data-parameter='{"var_name_a":"Brennessel","var_name_b":"Buche","var_name_c":"Eiche","var_name_d":"Erle"}'></div>
					</section>
					<section>
						<div data-template="template_weather_pollen.html" data-parameter='{"var_name_a":"Esche","var_name_b":"Fichte","var_name_c":"Flieder","var_name_d":"Gaensefuss"}'></div>
					</section>
					<section>
						<div data-template="template_weather_pollen.html" data-parameter='{"var_name_a":"Graeser","var_name_b":"Hafer","var_name_c":"Hasel","var_name_d":"Holunder"}'></div>
					</section>
					<section>
						<div data-template="template_weather_pollen.html" data-parameter='{"var_name_a":"Hopfen","var_name_b":"Kiefer","var_name_c":"Linde","var_name_d":"Loewenzahn"}'></div>
					</section>
					<section>
						<div data-template="template_weather_pollen.html" data-parameter='{"var_name_a":"Mais","var_name_b":"Nessel","var_name_c":"Pappel","var_name_d":"Platane"}'></div>
					</section>
					<section>
						<div data-template="template_weather_pollen.html" data-parameter='{"var_name_a":"Raps","var_name_b":"Roggen","var_name_c":"Rotbuche","var_name_d":"Spitzwegerich"}'></div>
					</section>
					<section>
						<div data-template="template_weather_pollen.html" data-parameter='{"var_name_a":"Tanne","var_name_b":"Ulme","var_name_c":"Weide","var_name_d":"Weizen"}'></div>
					</section>
				</div>
			</div>
			<div class="vbox phone-width">
				<div class="card lift">
					<header>Karte</header>
					<section>
						<div class="row">
							<div class="center" data-type="image" data-url="http://www.wetteronline.de/?fcdatstr=20150414&amp;gid=DL&amp;iid=DL&amp;img=true&amp;paraid=Max&amp;pid=p_city_pollen&amp;sid=Map" data-size="100%"></div>
						</div>
					</section>
				</div>
			</div>
		</div>
	</div>
</body>
</html>

...und "Pollen" Template (template_weather_pollen):

Code Auswählen

<!DOCTYPE html>
<html>
<head>
	<!-- FHEM Tablet UI V2.6 -->
	<!-- Template für Pollenflug -->
</head>
<body>
	<div class="row">
		<div class="cell left-space">
			<div class="big compressed" data-type="symbol" data-device="POLLEN" data-get="var_name_a" data-icons='["fa-forumbee","fa-forumbee","fa-forumbee"]' data-get-on='["1","2","3"]' data-on-colors='["yellowgreen","yellow","red"]'></div>
			<div class="large">var_name_a</div>
		</div>
		<div class="cell">
			<div class="big compressed" data-type="symbol" data-device="POLLEN" data-get="var_name_b" data-icons='["fa-forumbee","fa-forumbee","fa-forumbee"]' data-get-on='["1","2","3"]' data-on-colors='["yellowgreen","yellow","red"]'></div>
			<div class="large">var_name_b</div>
		</div>
		<div class="cell">
			<div class="big compressed" data-type="symbol" data-device="POLLEN" data-get="var_name_c" data-icons='["fa-forumbee","fa-forumbee","fa-forumbee"]' data-get-on='["1","2","3"]' data-on-colors='["yellowgreen","yellow","red"]'></div>
			<div class="large">var_name_c</div>
		</div>
		<div class="cell right-space">
			<div class="big compressed" data-type="symbol" data-device="POLLEN" data-get="var_name_d" data-icons='["fa-forumbee","fa-forumbee","fa-forumbee"]' data-get-on='["1","2","3"]' data-on-colors='["yellowgreen","yellow","red"]'></div>
			<div class="large">var_name_d</div>
		</div>
	</div>
</body>
</html>

Wer hat eine Lösung? Wo liegt das Problem?

Danke im Voraus,
Andreas

holle75 · 05 November 2017, 14:10:01

Code Auswählen

<section>
						<div class="row">
							<div class="cell-25">
								<div data-type="symbol" data-device="Container_SENSOR_Tor" data-states='["sensor_closed","sensor_open"]' data-colors='["blue","red"]'  data-icon="ftui-door" class="big compressed"></div>
								<div data-type="label">Container</div>
							</div>
							<div class="cell-25">
								<div data-type="symbol" data-device="Magazzino_SENSOR_Tor" data-states='["sensor_closed","sensor_open"]' data-colors='["blue","red"]'  data-icon="ftui-door" class="big compressed"></div>
								<div data-type="label">Magazzino</div>
							</div>
							<div class="cell-25">
								<div data-type="symbol" data-device="Einfahrt_SENSOR_Tor" data-states='["sensor_closed","sensor_open"]' data-colors='["blue","red"]'  data-icon="oa-fts_sliding_gate" class="big compressed"></div>
								<div data-type="label">Einfahrt</div>
							</div>							
							<div class="cell-25">
								<div data-type="symbol" data-device="Einfahrt_SENSOR_Tor" data-states='["sensor_closed","sensor_open"]' data-colors='["blue","red"]'  data-icon="oa-fts_sliding_gate" class="big compressed"></div>
								<div data-type="label">Einfahrt</div>
							</div>		
						</div>
					</section>

... als Beispiel für eine section.

Wobei cell-25 im css dann so definiert ist.

Code Auswählen

.cell-25 {
    width: 25%;
}

Sollte gehen. Vielleicht mußt du auch auf 24% runter.

somansch · 05 November 2017, 14:33:29

Funktioniert leider nicht.

Hier das angepasste Template:

Code Auswählen

<!DOCTYPE html>
<html>
<head>
	<!-- FHEM Tablet UI V2.6 -->
	<!-- Template für Pollenflug -->
</head>
<body>
	<div class="row">
		<div class="cell-25">
			<div class="big compressed" data-type="symbol" data-device="POLLEN" data-get="var_name_a" data-icons='["fa-forumbee","fa-forumbee","fa-forumbee"]' data-get-on='["1","2","3"]' data-on-colors='["yellowgreen","yellow","red"]'></div>
			<div class="large">var_name_a</div>
		</div>
		<div class="cell-25">
			<div class="big compressed" data-type="symbol" data-device="POLLEN" data-get="var_name_b" data-icons='["fa-forumbee","fa-forumbee","fa-forumbee"]' data-get-on='["1","2","3"]' data-on-colors='["yellowgreen","yellow","red"]'></div>
			<div class="large">var_name_b</div>
		</div>
		<div class="cell-25">
			<div class="big compressed" data-type="symbol" data-device="POLLEN" data-get="var_name_c" data-icons='["fa-forumbee","fa-forumbee","fa-forumbee"]' data-get-on='["1","2","3"]' data-on-colors='["yellowgreen","yellow","red"]'></div>
			<div class="large">var_name_c</div>
		</div>
		<div class="cell-25">
			<div class="big compressed" data-type="symbol" data-device="POLLEN" data-get="var_name_d" data-icons='["fa-forumbee","fa-forumbee","fa-forumbee"]' data-get-on='["1","2","3"]' data-on-colors='["yellowgreen","yellow","red"]'></div>
			<div class="large">var_name_d</div>
		</div>
	</div>
</body>
</html>

Und hier die Erweiterung in der "user-tablet-ui.css":

Code Auswählen

/* Anpassung Ausrichtung von Zellen */
.cell-25 {
    width: 25%;
}

Habe es auch mal mit 24% und 20% probiert. Leider keine Auswirkung

Vielleicht liegt es an der Verwendung innerhalb eines Templates?

holle75 · 05 November 2017, 16:12:49

div vbox phone-width
div card-lift
div section
div cell-25
div cell-25
usw, insgesamt width 99-100%

sollte der Aufbau sein. Ob du auf der content Page oder im jeweiligen template diese Abfolge aufbaust ist dir überlassen. Aber die Reihenfolge sollte es im generierten html später haben. Irgendwo muß ja die 100% width die dann aufgeteilt wird definiert werden

Edit: oops, sorry, eben erst richtig in deinen Code oben geschaut. Hast du ja so. Mmh, dann fällt mir spontan auch nichts ein.

holle75 · 05 November 2017, 16:20:38

noch ein Vorschlag:

template

Code Auswählen

<!DOCTYPE html>
<html>
<head>
	<!-- FHEM Tablet UI V2.6 -->
</head>
<body>
	<div class="hdm-flexbox-container">		
		<div class="hdm-flexbox-item-13">
			<div data-type="switch" data-device="var_device" data-get-on="auto" data-get-off="on|off" data-set-on="auto" data-set-off="" data-icon="mi-gps_fixed" data-on-color="blue" data-off-color="#aaa" data-background-icon="fa-square-o" data-on-background-color="blue" data-off-background-color="#aaa" class="small"></div>
			<div data-type="label">Auto</div>
		</div>
		<div class="hdm-flexbox-item-13">
			<div data-type="switch" data-device="var_device" data-get-on="on" data-get-off="auto|off" data-set-on="on" data-set-off="" data-icon="mi-gps_not_fixed" data-on-color="green" data-off-color="#aaa" data-background-icon="fa-square-o" data-on-background-color="green" data-off-background-color="#aaa" class="small"></div>
			<div data-type="label">An</div>
		</div>
		<div class="hdm-flexbox-item-13">
			<div data-type="switch" data-device="var_device" data-get-on="off" data-get-off="on|auto" data-set-on="off" data-set-off="" data-icon="mi-gps_off" data-on-color="red" data-off-color="#aaa" data-background-icon="fa-square-o" data-on-background-color="red" data-off-background-color="#aaa" class="small"></div>
			<div data-type="label">Aus</div>
		</div>
		<div class="right-align hdm-flexbox-item-50 right-space">
			<div class="big">var_name</div>
			<div class="small">var_description</div>	
		</div>
	</div>
</body>
</html>

content

Code Auswählen

<div class="card lift">					
					<header>Beregner Automatik</header>
					<section>
						<div data-template="template_beregnung.html" data-parameter='{"var_device":"Beregner_01_Zitronen","var_name":"Zitronen","var_description":"Zitrus Hain"}'></div>
					</section>
					<section>
						<div data-template="template_beregnung.html" data-parameter='{"var_device":"Beregner_02_CampeggioUnten","var_name":"Camping Unten","var_description":"Beet Camping"}'></div>
					</section>
					<section>
						<div data-template="template_beregnung.html" data-parameter='{"var_device":"Beregner_03_Blauregen","var_name":"Blauregen","var_description":"Wiese oberhalb Tettoia, Blauregen"}'></div>
					</section>
					<section>
						<div data-template="template_beregnung.html" data-parameter='{"var_device":"Beregner_04_HinterKueche","var_name":"Hinter Tettoia","var_description":"Wiese unterhalb Tettoia"}'></div>
					</section>
					<section>
						<div data-template="template_beregnung.html" data-parameter='{"var_device":"Beregner_05_CampeggioOben","var_name":"Camping Oben","var_description":"Wiese, Lavendel Camping oben"}'></div>
					</section>
					<section>
						<div data-template="template_beregnung.html" data-parameter='{"var_device":"Beregner_06_Waschhaus","var_name":"Waschhaus","var_description":"Wiese, Lavendel unterhalb Camping"}'></div>
					</section>
					<section>
						<div data-template="template_beregnung.html" data-parameter='{"var_device":"Beregner_07_Magazzino","var_name":"Magazzino","var_description":"Zaun Eingang, Pflanzen Magazzino"}'></div>
					</section>
					<section>
						<div data-template="template_beregnung.html" data-parameter='{"var_device":"Beregner_08_ZaunTettoia","var_name":"Zaun Tettoia","var_description":"Zaun hinter Tettoia"}'></div>
					</section>
				</div>

usw

css

Code Auswählen

/* hdm flexbox */
.hdm-flexbox-container {
	display: -webkit-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;

	-ms-flex-align: center;
	-webkit-align-items: center;
	-webkit-box-align: center;
	align-items: center;

	-webkit-box-pack: justify;
	-moz-box-pack: justify;
	-ms-flex-pack: justify;
	-webkit-justify-content: space-between;
	justify-content: space-between;
}
.hdm-flexbox-item {
	-webkit-box-flex: 1 1 auto;
	-moz-box-flex: 1 1 auto;
	width: auto;
	-webkit-flex: 1 1 auto;
	-ms-flex: 1 1 auto;
	flex: 1 1 auto;
}
.hdm-flexbox-item-13 {
	-webkit-box-flex: 1 1 13%;
	-moz-box-flex: 1 1 13%;
	width: 13%;
	-webkit-flex: 1 1 13%;
	-ms-flex: 1 1 13%;
	flex: 1 1 13%;
}
.hdm-flexbox-item-30 {
	-webkit-box-flex: 1 1 30%;
	-moz-box-flex: 1 1 30%;
	width: 30%;
	-webkit-flex: 1 1 30%;
	-ms-flex: 1 1 30%;
	flex: 1 1 30%;
}
.hdm-flexbox-item-50 {
	-webkit-box-flex: 1 1 50%;
	-moz-box-flex: 1 1 50%;
	width: 50%;
	-webkit-flex: 1 1 50%;
	-ms-flex: 1 1 50%;
	flex: 1 1 50%;
}
/* hdm flexbox */

die ganzen -moz -ms - webkit kannst du wenn keine Devices der Richtung genutzt werden weglassen.

Ist responsive und ob du dann 3,4 oder 5 Bereiche basteln möchtest unterliegt deinen Anpassungen

EDIT: MISTE, falschen Bereich im content kopiert gehabt. Jetzt richtig