Responsive Design mit data-template

jemu75 · 24 Juni 2017, 15:45:24

Hallo in die Runde,

ich teste schon eine kleine Ewigkeit mit data-template rum. Im Grundansatz mache ich folgendes: Es gibt eine index.html. Diese bildet zugleich mein Menü und verweist auf verschiedene "Content-Seiten". In den Content-Seiten arbeite ich wiederum mit data-template, da ich viele Aktoren wie Thermostate, Rollläden, Lichtschalter mehrfach einsetze und somit den HMTL-Code schlank halten möchte. Im folgenden liefere ich als Beispiel mal den Code meiner index.html, einer Content-Seite sowie eines Templates. Das Grundproblem liegt darin, dass sich sie Kacheln zwar in der Breite anpassen, nicht aber in der Höhe. Ich habe in den Klassen hbox, vbox und card schon mit den Eigenschaften full-height, phone-width, lift rumprobiert. Aber eine wirkliche Veränderung gab es dadurch nicht. Hat jemand eine Idee, wie sich die Kachelhöhe auch an den Screen anpassen lässt?

index.html

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>

Content-Test-Seite:

Code Auswählen


<!DOCTYPE html>
<html>
<body>
    <div class="page" id="content8">
		<div class="hbox">
			<div class="vbox">
				<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_43D88B_Sw_03"}'></div>
				<div data-template="widget_HM-thermo_test.html" data-parameter='{"var_device1":"HM_xxxxxx","var_temp_day":"21.0","var_temp_night":"17.0","var_device2":"HM_3E6DFE_Sw_04"}'></div>
				<div data-template="widget_HM-thermo_test.html" data-parameter='{"var_device1":"HM_xxxxxx","var_temp_day":"21.0","var_temp_night":"17.0","var_device2":"HM_3E6DFE_Sw_03"}'></div>
				<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_43D8A2_Sw_02"}'></div>
			</div>
			<div class="vbox">
				<div data-template="widget_HM-thermo_test.html" data-parameter='{"var_device1":"HM_xxxxxx","var_temp_day":"21.0","var_temp_night":"17.0","var_device2":"HM_3E6DFE_Sw_02"}'></div>
				<div data-template="widget_HM-thermo_test.html" data-parameter='{"var_device1":"HM_xxxxxx","var_temp_day":"21.0","var_temp_night":"17.0","var_device2":"HM_43D88B_Sw_02"}'></div>
			</div>
		</div>
	</div>
</body>
</html>

Template-Seite:

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="card">
		<header class="normal bold">Test</header>
		<div class="sheet">
			<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>
		</div>
	</div>
</body>
</html>

lewej · 29 Oktober 2017, 18:34:29

Hi,
konntest du das Problem lösen können.

Gruss
lewej

jemu75 · 31 Oktober 2017, 11:06:20

Zitat von: lewej am 29 Oktober 2017, 18:34:29
Hi,
konntest du das Problem lösen können.

Gruss
lewej

Ja Problem ist inzwischen gelöst. Siehe dazu auch https://forum.fhem.de/index.php/topic,76306.msg681752.html#msg681752

FHEM Forum

Responsive Design mit data-template

jemu75

lewej

jemu75