Tablet UI - responsive Design (flexbox)

Begonnen von jemu75, 06 September 2017, 14:37:10

Vorheriges Thema - Nächstes Thema

mericon

Zitat von: SirMarco am 08 Dezember 2020, 12:13:02
Du hast in der index.html als ID:
<div class="page" id="detail_kueche1"></div> aber in der room.html
<div class="page" id="room_wohnkueche">

Das musst du anpassen, sonst kann er die Page nicht öffnen

Grüsse

Wenn ich das mache lädt der mir den ganzen Raum nicht mehr.

SirMarco

Welche Seite möchtest Du denn mit einem Template öffnen?
Die room_wohnkueche.html?

Gunther

FHEM@Proxmox@Nuc: TabletUI als User-Interface (4 Wandtablets) / IOs per ser2net gekapselt
Homematic: Heizung, Fenster, Bewegung | Jeelink: Temperatur | Z-Wave: Bewegung, Temperatur | FS20: Temperatur, Fenster | Viessmann-Heizung eingebunden

mericon

#168
Sorry für meine späte Reaktion.

Mein Aufbau ist folgender:

Aus der Hauptseite rufe ich die room_wohnkueche.html auf in der sich das Template_switch_hue befindet. Aus dem Templaten soll dann die detail_kueche1 aufgerufen werden.


Edit: gerade nochmal alle Dateien durch geguckt und das Beispiel aus dem Forum angesehen und den Fehler gefunden. Hatte das komplett falsch aufgebaut. Danke für eure Hilfe  :)

sig10680

Hallo in die Runde,

ich habe schon seit 1 Jahr diese Oberfläche. Sie ist wirklich toll.
Jetzt sind einige neue Unterseiten dazu gekommen und das Menü wird immer Länger.
Besteht die Möglichkeit des Scrollens im Menü. Derzeit wird zb. im Querformat nicht alles angezeigt (Siehe Bild).

Ich habe diverses schon probiert aber nicht wirklich eine Lösung gefunden!
Habt ihr da einen hilfreichen Tip?

<!DOCTYPE html>
<html>

<!-- FHEM Tablet UI 2.6 -->

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

    <meta name="fhemweb_url" content="http://xxxxxxx/fhem/">
    <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="3"> <!-- verbose level 1-6 = output to console;0 = not output -->
<meta name='toast' content='0'> <!-- keine Ausgabe von Protokollmeldungen -->

<link rel="stylesheet" href="../css/fhem-mobil-ui.css" />
<link rel="stylesheet" href="user-tablet-ui.css" />
  <link rel="stylesheet" href="user-tablet-ui-user.css" />
<script src="../js/fhem-tablet-ui.js" defer></script>

    <title>SmartHome</title>
</head>

<body>
<div class="phone-header"></div>

<nav class="menu">
<div class="menu-trigger"></div>
<header>Menu</header>
        <ul>
<li>
<div data-type="link" data-url="#content_home.html"
data-color="white"
data-active-color="blue"
data-width="115"
data-load="#content_home"
data-text-align="left"
data-active-pattern="(.*index.html|.*#content_home.html)"
data-icon="fa-home" class="large"><span>Home</span></div>
</li>
<li>
<div data-type="link" data-url="#content_heating.html"
data-color="white"
data-active-color="blue"
data-width="115"
data-load="#content_heating"
data-text-align="left"
data-active-pattern=".*(#content_heating.html)"
data-icon="fa-thermometer-3" class="large"><span>Heizung</span></div>
</li>
<li>
<div data-type="link" data-url="#content_light.html"
data-color="white"
data-active-color="blue"
data-width="115"
data-load="#content_light"
data-text-align="left"
data-active-pattern=".*(#content_light.html)"
data-icon="mi-lightbulb_outline" class="large"><span>Licht</span></div>
</li>
<li>
<div data-type="link" data-url="#content_steckdose.html"
data-color="white"
data-active-color="blue"
data-width="115"
data-load="#content_steckdose"
data-text-align="left"
data-active-pattern=".*(#content_steckdose.html)"
data-icon="mi-power" class="large"><span>Steckdosen</span></div>
</li>
<li>
<div data-type="link" data-url="#content_contact.html"
data-color="white"
data-active-color="blue"
data-width="115"
data-load="#content_contact"
data-text-align="left"
data-active-pattern=".*(#content_contact.html)"
data-icon="fa-windows" class="large"><span>Fenster/T&uuml;ren</span></div>
</li>
<li>
<div data-type="link" data-url="#content_door.html"
data-color="white"
data-active-color="blue"
data-width="115"
data-load="#content_door"
data-text-align="left"
data-active-pattern=".*(#content_door.html)"
data-icon="oa-fts_sliding_gate" class="large"><span>Tore</span></div>
</li>
<li>
<div data-type="link" data-url="#content_wassermelder.html"
data-color="white"
data-active-color="blue"
data-width="115"
data-load="#content_wassermelder"
data-text-align="left"
data-active-pattern=".*(#content_wassermelder.html)"
data-icon="fs-humidity" class="large"><span>Wassermelder</span></div>
</li>
<li>
<div data-type="link" data-url="#content_cam.html"
data-color="white"
data-active-color="blue"
data-width="115"
data-load="#content_cam"
data-text-align="left"
data-active-pattern=".*(#content_cam.html)"
data-icon="mi-videocam" class="large"><span>Kameras</span></div>
</li>
      <li>
<div data-type="link" data-url="#content_technik.html"
data-color="white"
data-active-color="blue"
data-width="115"
data-load="#content_technik"
data-text-align="left"
data-active-pattern=".*(#content_technik.html)"
data-icon="oa-it_network" class="large"><span>Technik</span></div>
</li>
      <li>
<div data-type="link" data-url="#content_e3dc.html"
data-color="white"
data-active-color="blue"
data-width="115"
data-load="#content_e3dc"
data-text-align="left"
data-active-pattern=".*(#content_e3dc.html)"
data-icon="oa-measure_photovoltaic_inst" class="large"><span>Solar</span></div>
</li>
      <li>
<div data-type="link" data-url="#content_verbrauch.html"
data-color="white"
data-active-color="blue"
data-width="115"
data-load="#content_verbrauch"
data-text-align="left"
data-active-pattern=".*(#content_verbrauch.html)"
data-icon="fa fa-cog" class="large"><span>Verbrauch</span></div>
</li>
<li>
<div data-type="link" data-url="#content_weather.html"
data-color="white"
data-active-color="blue"
data-width="115"
data-load="#content_weather"
data-text-align="left"
data-active-pattern=".*(#content_weather.html)"
data-icon="oa-weather_cloudy" class="large"><span>Wetter</span></div>
</li>
<li>
<div data-type="link" data-url="#content_uwz.html"
data-color="white"
data-active-color="blue"
data-width="115"
data-load="#content_uwz"
data-text-align="left"
data-active-pattern=".*(#content_uwz.html)"
data-icon="fa fa-exclamation-triangle" class="large"><span>Unwetter</span></div>
</li>


</ul>
</nav>

<main>
<div class="page" id="content_home"></div>
<div class="page" id="content_heating"></div>
<div class="page" id="content_light"></div>
<div class="page" id="content_contact"></div>
<div class="page" id="content_wassermelder"></div>
<div class="page" id="content_blinds"></div>
<div class="page" id="content_blinds_detail"></div>
<div class="page" id="content_phone"></div>
<div class="page" id="content_cam"></div>
<div class="page" id="content_settings"></div>
<div class="page" id="content_steckdose"></div>
<div class="page" id="content_door"></div>
<div class="page" id="content_uwz"></div>
<div class="page" id="content_weather"></div>
    <div class="page" id="content_technik"></div>
    <div class="page" id="content_e3dc"></div>
    <div class="page" id="content_verbrauch"></div>
</main>
</body>
</html>


MFG
Sig10680

jemu75

Ich möchte mich nach längerer Zeit gern zurückmelden und euch gern auf mein aktuelles Projekt zum Thema responsive Design (flexbox) informieren.
Ich habe es hier https://forum.fhem.de/index.php/topic,119470.0.html im Forum veröffentlicht und wer Lust hat, kann sich das gern mal anschauen.  :)