FTUI Layout mit Flexbox

dancatt · 03 März 2017, 11:19:31

Hallo zusammen,

ich habe eine Frage zum ersten Post hier im Thread.

Ich möchte gerne dass mein Menü so aussieht wie aus dem ersten Post. Das heißt jeder Menüeintrag entspricht einer Kachel. Diese Seite soll dann der Startseite entsprechen. Jede Kachel hat eventuell noch mal eine kleine Info zusätzlich. Beim Klick auf eine Kachel wird die entsprechende neue Seite geladen und alle Kacheln werden dann horizontal oben dargestellt (2017-03-03 11_06_41-FHEM-Tablet-UI.png). Funktionieren tut das alles mit einer Realisierung mit pagebutton, aber dann muss ich auf jeder Seite leider den kompletten <head> einbinden.

Besser funktioniert es, wenn ich in der index.html eigentlich alles zusätzlich im Element <nav> einbinde und unterhalb des Elements <main> entsprechend die container lade:

Code Auswählen

<main>
<nav class="menu">
  <ul>
    <li>
      <div data-type="pagebutton" data-on-color="orange" class="bigger"
           data-url="#home.html" data-load="#home" data-active-pattern="(.*/||.*#home.html)" data-icon="fa-home"></div>
    </li>
    <li>
      <div data-type="pagebutton"  data-on-color="orange" class="bigger"
           data-url="#heizung.html" data-load="#heizung" data-active-pattern="(.*/||.*#heizung.html)" data-icon="oa-sani_heating"></div>
    </li>
     <li>
      <div data-type="pagebutton" data-on-color="orange" class="bigger"
           data-url="#umwelt.html" data-load="#umwelt" data-active-pattern="(.*/||.*#umwelt.html)" data-icon="fa-cloud"></div>
    </li>
  </ul> 
</nav>

  <div class="page" id="home"></div>
  <div class="page" id="heizung"></div>
  <div class="page" id="umwelt"></div>
</main>

aber dann sehe ich natürlich links das Menü was ich ja nicht möchte (2017-03-03 11_10_17-FHEM-Tablet-UI.png). Zusätzlich dazu werden alle Seiten untereinander dargestellt, erst home, dann heizung und dann umwelt.

Wie kann ich das denn am geschicktesten realisieren dass das Menü auf der Startseite in Form von Kacheln dargestellt wird?

Vielen Dank.

Gruß Daniel

jemu75 · 28 Juni 2017, 21:20:55

Hallo setstate,

du schreibst ganz oben folgendes.

Zitat von: setstate am 09 August 2016, 01:44:23
oder: Auf dem Desktop-Browser ist links ein volles Menü, auf dem Tablet ein schmales und auf dem Telefon nur ein Slideout-Menu je nach Bedarf. Alles mit nur einer Seite.

Ich arbeite schon eine ganze Weile mit dem Flexboxlayout. Funktioniert bei mir bis auf div. Kleinigkeiten in Verbindung mit data-template alles prima. Nun bin ich nochmal das Thema Menü angegangen und habe die oben stehende Aussage gefunden. Bei mir wird das Menü derzeit, egal auf welchem Screen, immer als Slideoutmenü angezeigt. Wie muss ich das Menü schreiben, damit es wie von dir beschrieben auf den jeweiligen Screen reagiert?

Anbei ein paar Bilder wie es im Moment aussieht.

Danke Dir schon mal!

setstate · 29 Juni 2017, 13:06:51

Das ist vom jeweiligen Gerät abhängig. Die Min und Max Breite für die jeweiligen Modi sind im CSS fest definiert. Im Firefox Menü unter EntwicklerTools gibt es Bildschirmgröße testen. Da kann man das testen.

jemu75 · 29 Juni 2017, 19:57:12

Habe das schon getestet. Jedoch kommt, egal bei welcher Auflösung immer das selbe Menü. Anbei mal meine Index.html. Vielleicht habe ich dort ja schon was falsch gemacht?

Code Auswählen


<!DOCTYPE html>
<html>

<head>
	<!-- FHEM Tablet UI V2.6 -->

    <link rel="icon" href="favicon.ico" type="image/x-icon">
    <title>Smart Home</title>

	<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <meta name="mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-capable" content="yes">

    <meta name='gridster_disable' content='1'>
    <meta name='gridster_resize' content='0'>

	<meta name="debug" content="3"> <!-- verbose level 1-6 = output to console;0 = not output -->
	<meta name='toast' content='0'>

    <!-- define your personal style here, it wont be overwritten  -->
 
	<style>
		#header-nav {
			height: 40px;
			width: 100%;
			top: 0;
			left: 0;
			-webkit-box-shadow: 0px 3px 5px rgba(150, 150, 150, 0.49);
			-moz-box-shadow: 0px 3px 5px rgba(150, 150, 150, 0.49);
			box-shadow: 0px 3px 5px rgba(150, 150, 150, 0.49);
		}
		
		header.fixed#header-nav + main#panel {
			margin-top: 45px;
		}
		
		main#panel.slideout-panel {
			display: block;
			position: absolute;
			height: auto;
			bottom: 0;
			top: 0;
			left: 0;
			right: 0;
		}	
	</style>

	<script src="js/fhem-tablet-ui.js" defer></script>
</head>

<body>
    <nav id="menu">
        <div data-type="link" class="large top-space left-space-2x"
           data-width="150"
           data-color="white"
           data-text-align="left"
           data-load="div#content0"
           data-url="#cont_main.html"
           data-active-color="blue"
           data-active-pattern="(.*index.html|.*#cont_main.html)">Start</div>
        <div data-type="link" class="large top-space left-space-2x"
           data-width="150"
           data-color="white"
           data-text-align="left"
           data-load="div#content1"
           data-url="#cont_thermo.html"
           data-active-color="blue"
           data-active-pattern="(.*#cont_thermo.html)">Heizung</div>
		<div data-type="link" class="large top-space left-space-2x"
           data-width="150"
           data-color="white"
           data-text-align="left"
           data-load="div#content2"
           data-url="#cont_weather.html"
           data-active-color="blue"
           data-active-pattern="(.*#cont_weather.html)">Umgebung</div> 
		<div data-type="link" class="large top-space left-space-2x"
           data-width="150"
           data-color="white"
           data-text-align="left"
           data-load="div#content3"
           data-url="#cont_light.html"
           data-active-color="blue"
           data-active-pattern="(.*#cont_light.html)">Licht und Schalter</div> 
		<div data-type="link" class="large top-space left-space-2x"
           data-width="150"
           data-color="white"
           data-text-align="left"
           data-load="div#content4"
           data-url="#cont_doors.html"
           data-active-color="blue"
           data-active-pattern="(.*#cont_doors.html)">T&uuml;ren und Fenster</div> 
		<div data-type="link" class="large top-space left-space-2x"
           data-width="150"
           data-color="white"
           data-text-align="left"
           data-load="div#content5"
           data-url="#cont_blinds.html"
           data-active-color="blue"
           data-active-pattern="(.*#cont_blinds.html)">Jalousien</div> 
		<div data-type="link" class="large top-space left-space-2x"
           data-width="150"
           data-color="white"
           data-text-align="left"
           data-load="div#content6"
           data-url="#cont_smoke.html"
           data-active-color="blue"
           data-active-pattern="(.*#cont_smoke.html)">Rauchmelder</div> 
		<div data-type="link" class="large top-space left-space-2x"
           data-width="150"
           data-color="white"
           data-text-align="left"
           data-load="div#content7"
           data-url="#cont_cam.html"
           data-active-color="blue"
           data-active-pattern="(.*#cont_cam.html)">&Uuml;berwachung</div> 
		<div data-type="link" class="large top-space left-space-2x"
           data-width="150"
           data-color="white"
           data-text-align="left"
           data-load="div#content8"
           data-url="#cont_test.html"
           data-active-color="blue"
           data-active-pattern="(.*#cont_test.html)">Test</div> 
	</nav>

	<header id="header-nav" class="big bg-gray fixed row">
		<div data-type="slideout" data-position="left" data-icon-color="white" class="cell-10 notouch"></div>
		<div id="linkname" class="cell left-align"></div>
	</header>

	<main id="panel" class="">
		<div class="page" id="content0"></div>    
		<div class="page" id="content1"></div>    
		<div class="page" id="content2"></div>    
		<div class="page" id="content3"></div>    
		<div class="page" id="content4"></div> 
		<div class="page" id="content5"></div>   
		<div class="page" id="content6"></div>   
		<div class="page" id="content7"></div> 
		<div class="page" id="content8"></div>
	</main>
</body>

</html>

jemu75 · 29 Juni 2017, 22:12:53

Hallo setstate,

ich habe das mit dem responsive Menü jetzt soweit hinbekommen. Der Fehler lag im Menü meiner index.html (siehe meine letzte Antwort)

Das responsive Menü reagiert jetzt korrekt bei Bildschirmbreite unter 480px (kleines "Slideout-Menü") und bei größer 900px (breites Menü 180px mit Symbol und Schrift am linken Fensterrand. Probleme hat das responsive Menü bei einer Breite zwischen 480px und 900px. Hier bleibt das Menü am linken Rand und es wird nur noch das Symbol ohne Text angezeigt. (soweit wie erwartet) Jedoch wird bei mir das Menü selbst nicht schmaler, obwohl es laut fhem-tablet-ui.css auf 90px runter gehen müsste. Somit überdeckt das (ungewollt) den Content, da der auf "padding-left: 90px" ausgerichtet wird.

Kannst du dir das bitte mal in der fhem-tablet-ui.css ansehen. Ich vermute hier einen Fehler, da index_flex_demo_menu.html genau dasselbe Verhalten aufweist.

Danke Dir schon mal!

jemu75 · 29 Juni 2017, 22:22:38

Fehler in der fhem-tablet-ui.css gefunden

Zeile 833-835
statt:

Code Auswählen


   .menu {
        width: 90px;
    }

geht es mit:

Code Auswählen


   .menu {
        width: 90px !important;
    }

Quant · 30 Juni 2017, 16:07:53

@jemu75 Kannst Du Deine korrigierte index.html hier nochmal zur Verfügung stellen - und vielleicht auch beispielhaft eine eingebundene Content-Seite?

Danke!

jemu75 · 30 Juni 2017, 21:58:24

Hallo,

anbei der aktuelle Arbeitsstand. Ich habe vorerst mal in der test.html unter <style>...</style> den vermeintlichen Bug korrigiert. Der Part kann später sicher wieder raus, falls setsate das ebenso sieht

test.html

Code Auswählen


<!DOCTYPE html>
<html>

<head>
	<link rel="icon" href="favicon.ico" type="image/x-icon" />
	
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <meta name="mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="debug" content="2"> <!-- verbose level 1-6 = output to console;0 = not output -->

    <script src="js/fhem-tablet-ui.js" defer></script>

	<style>
	@media screen and (max-width: 900px) and (min-width: 480px) {
		.menu {
			width: 90px !important;
		}
	}
	</style>
	
    <title>FHEM-Tablet-UI</title>
</head>

<body>
	<nav class="menu">
		<div class="menu-trigger"></div>
		<header class="">Menu</header>
        <ul>
			<li>
				<div data-type="link" data-url="#cont_test.html"
				data-color="white"
				data-width="115"
				data-load="#content1"
				data-text-align="left"
				data-active-pattern="(.*test.html|.*#cont_test.html)"
				data-icon="fa-home" class="large"><span>Heizung</span></div>
			</li>
			<li>
				<div data-type="link" data-url="#cont_test1.html"
				data-color="white"
				data-width="115"
				data-load="#content2"
				data-text-align="left"
				data-active-pattern="(.*#cont_test1.html)"
				data-icon="mi-lightbulb_outline" class="large"><span>Licht</span></div>
			</li>
			<li>
				<div data-type="link" data-url="#cont_test2.html"
				data-color="white"
				data-width="115"
				data-load="#content3"
				data-text-align="left"
				data-active-pattern=".*(#cont_test2.html)"
				data-icon="fa-align-justify" class="large"><span>Jalousien</span></div>
			</li>
		</ul>
	</nav>
 	
	<main>
		<div class="page" id="content1"></div>
		<div class="page" id="content2"></div>
		<div class="page" id="content3"></div>
	</main>
</body>
</html>

cont_test.html

Code Auswählen


<!DOCTYPE html>
<html>
<body>
    <div class="page" id="content1">
		<div class="hbox">
			<div class="vbox phone-width">
				<div class="card">
					<header>Standard Box 10</header>
					<div data-template="widget_HM-thermo_test.html" data-parameter='{"var_device1":"HM_xxxxxx","var_temp_day":"22.0","var_temp_night":"17.0","var_device2":"HM_xxxxx_xx_xx"}'></div>
				</div>
				
				<div class="card">
					<header>Standard Box 10</header>
					<div data-template="widget_HM-thermo_test.html" data-parameter='{"var_device1":"HM_xxxxx","var_temp_day":"21.0","var_temp_night":"17.0","var_device2":"HM_xxxxx_xx_xx"}'></div>
				</div>

				<div class="card">
					<header>Standard Box 10</header>
					<div data-template="widget_HM-thermo_test.html" data-parameter='{"var_device1":"HM_xxxxx","var_temp_day":"21.0","var_temp_night":"17.0","var_device2":"HM_xxxxx_xx_xx"}'></div>
				</div>
			</div>

			<div class="vbox phone-width">
				<div class="card">
					<header>Standard Box 10</header>
					<div data-template="widget_HM-thermo_test.html" data-parameter='{"var_device1":"HM_xxxxx","var_temp_day":"22.0","var_temp_night":"17.0","var_device2":"HM_xxxxx_xx_xx"}'></div>
				</div>
				
				<div class="card">
					<header>Standard Box 10</header>
					<div data-template="widget_HM-thermo_test.html" data-parameter='{"var_device1":"HM_xxxxx","var_temp_day":"21.0","var_temp_night":"17.0","var_device2":"HM_xxxxx_xx_xx"}'></div>
				</div>

				<div class="card">
					<header>Standard Box 10</header>
					<div data-template="widget_HM-thermo_test.html" data-parameter='{"var_device1":"HM_xxxxx","var_temp_day":"21.0","var_temp_night":"17.0","var_device2":"HM_xxxxx_xx_xx"}'></div>
				</div>
			</div>
		</div>
	</div>
</body>

</html>

widget_HM_thermo_test.html

Code Auswählen


<!DOCTYPE html>
<html>
<head>
	<!-- FHEM Tablet UI V2.6 -->
	<!-- Widget für Homematic Funk Wandthermostat HM-TC-IT-WM-W-EU -->
</head>
<body>
		<div class="row">
			<div class="cell">
				<div data-type="symbol" data-device="var_device2" data-states='["off","on"]' data-colors='["blue","red"]'  data-icon="fa-thermometer-3" class="big"></div>
			</div>
			<div class="cell-50 left-align">
				<div data-type="label" data-device="var_device1_Climate" data-get="measured-temp" data-unit="&deg;C" class="bigger thin inline"></div>
				<div data-type="label" data-device="var_device1_Climate" data-get="humidity" data-unit="%" class="bigger thin inline"></div>
			</div>
			<div class="cell">
				<div data-type="symbol" data-device="var_device1" data-get="desired-temp" data-states='["var_temp_night","var_temp_day"]' data-icons='["fa-moon-o","mi-wb_sunny"]' data-colors='["grey","blue"]' class="small newline"></div>
				<div data-type="label" data-device="var_device1" data-get="desired-temp" data-unit="&deg;C" class="small newline"></div>
			</div>
			<div class="cell right-space">
				<div data-type="checkbox" data-device="var_device1_Climate" data-get="desired-temp" data-set="desired-temp" data-get-on="var_temp_day" data-get-off="var_temp_night" data-set-on="var_temp_day" data-set-off="var_temp_night" class="blue"></div>
			</div>
		</div>
</body>
</html>

till24 · 10 August 2017, 11:57:19

Hallo zusammen,

ich habe für mehrere Räume ca. 5 Messwerte. Jeden Raum habe ich in eine Card "gepackt". Auf dem Handy werden die einzelnen Räume (quasi Kästen) untereinander angezeigt. Soweit alles gut. Nun würde ich gerne folgendes realisieren:
Es sollen immer nur 2 der 5 Werte angezeigt werden, so dass die "Liste" kürzer wird und ich auf dem Handy alle Räume auf dem Display sehe, ohne scrollen zu müssen. Nun möchte ich per Klick (zum Beispiel auf den head-Bereich oder auf ein Symbol) die restlichen Werte "ausklappen", also den Kasten wieder auf volle Größe bringen. Ist so etwas möglich?

Vielen Dank schonmal!

grossmaggul · 27 August 2017, 15:47:23

Mal noch ein anderes Problem, ich versuche mich gerade am Flexlayout, bekomme da aber einen Rotor nicht richtig eingebunden.

So sieht's aus:

Code Auswählen


<div class="vbox">
    <div class="hbox phone-width">

<div class="card">....</div>

 <div class="card">
        <header class="lightblue">Wind/Druck</header>
        <!------------->
        <!--- Wind ---->
        <!------------->
            
        <div data-type="rotor" class="fade">
         <ul>
           <li>
             <div data-type="wind_direction" 
                 data-device="Wetter" 
                 data-direction="wind_direction" 
                 data-speed="wind_speed" 
                 data-size="70"
                 class="cell top-space">
             </div>    
             <div data-type="symbol" 
                    data-device="Wetter" 
                    data-get="wind" 
                    data-icon="oa-weather_wind" 
                    data-on-color="lightblue"
                    data-off-color="lightblue"
                    class="inline">
             </div>
             <div data-type="label" 
                    data-device="Wetter" 
                    data-get="wind_speed" 
                    data-unit=" km/h"
                    class="inline">
             </div>
          </li>
          <li>
            <div data-type="knob"
                 data-device="wu_weather"
                 data-get="pressure"
                 data-min="900"
                 data-max="1080"
                 data-unit="hPa"
                 data-fgcolor="lightblue"
                 class="small readonly top-space">
            </div>
            <div data-type="label"
                 data-device="wu_weather"
                 data-pre-text="Trend "
                 data-get="pressure_trend"
                 class="top-narrow">
            </div>
           </li>     
          </ul>
     <div class="card">....</div>
     <div class="card">....</div>
         </div>    
      </div>
<div class="card">....</div>
<div class="card">....</div>

Die Box ist dann irgendwie verschoben (siehe Bild)

Ich nehme an es hat was mit den <ul><li> Tags zu tun.

Oder mache ich da was falsch?

gm

grossmaggul · 29 August 2017, 20:08:24

Keiner ne Idee?

devil77 · 30 August 2017, 08:41:59

Hallo, womit berabeitest Du deine hmtl und css Dateien? Probier mal das ganze mit notepad++ zu machen. Das kannst Du ganz schnell sehen
wo deine div, ul, li... Blöcke anfangen und enden.

So wie es aussieht ist der div nicht richtig definiert, da er scheinbar noch zwei andere mit einschließt.

Code Auswählen


<div class="card">  ------------> Anfang DIV
        <header class="lightblue">Wind/Druck</header>
        ......       
     <div class="card">....</div>
     <div class="card">....</div>
         </div> ----------------> Ende DIV

grossmaggul · 30 August 2017, 22:12:25

Danke für Deine Antwort.

ZitatHallo, womit berabeitest Du deine hmtl und css Dateien?

Mit Brackets, der zeigt die Verschachtelungen an, notepad++ läuft auf meinem Mac nicht.

Kann sein, daß ich nicht alles kopiert habe um es übersichtlich zu halten, ein fehlendes </div> scheint nicht das Problem zu sein.

Ich versuche es noch einmal etwas übersichtlicher, es gibt noch mehr "cards", ich habe jetzt nur mal die rausgezogen um die es geht.

Zitat

<main id="home">
<div class="vbox">
<div class="hbox phone-width">
<div class="card">
<header class="lightblue">Wind/Druck</header>
<div data-type="rotor" class="fade">
<ul>
<li>
<div data-type="wind_direction"
data-device="Wetter"
data-direction="wind_direction"
data-speed="wind_speed"
data-size="70"
class="cell top-space">
</div>
<div data-type="symbol"
data-device="Wetter"
data-get="wind"
data-icon="oa-weather_wind"
data-on-color="lightblue"
data-off-color="lightblue"
class="inline">
</div>
<div data-type="label"
data-device="Wetter"
data-get="wind_speed"
data-unit=" km/h"
class="inline">
</div>
</li>
<li>
<div data-type="knob"
data-device="wu_weather"
data-get="pressure"
data-min="900"
data-max="1080"
data-unit="hPa"
data-fgcolor="lightblue"
class="small readonly top-space">
</div>
<div data-type="label"
data-device="wu_weather"
data-pre-text="Trend "
data-get="pressure_trend"
class="top-narrow">
</div>
</li>
</ul>
</div>
</div>
</div>
</div>

Jetzt müßte es stimmen und damit gibt es das oben gezeigte Bild.

setstate · 30 August 2017, 22:42:19

Ich würde jeder Card eine feste Höhe geben

Code Auswählen

<div class="card" style="height:200px">

grossmaggul · 31 August 2017, 00:34:28

Danke, jetzt klappt's!

FTUI Layout mit Flexbox

Quant

till24