Autor Thema: Tablet UI - responsive Design (flexbox)  (Gelesen 45515 mal)

Offline mericon

  • New Member
  • *
  • Beiträge: 36
Antw:Tablet UI - responsive Design (flexbox)
« Antwort #165 am: 08 Dezember 2020, 12:17:13 »
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.

Offline SirMarco

  • Full Member
  • ***
  • Beiträge: 181
Antw:Tablet UI - responsive Design (flexbox)
« Antwort #166 am: 08 Dezember 2020, 12:59:05 »
Welche Seite möchtest Du denn mit einem Template öffnen?
Die room_wohnkueche.html?

Offline Gunther

  • Hero Member
  • *****
  • Beiträge: 1560
  • Perl? Copy & Paste... ;-)
Antw:Tablet UI - responsive Design (flexbox)
« Antwort #167 am: 08 Dezember 2020, 13:56:44 »
Sehe ich genauso
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

Offline mericon

  • New Member
  • *
  • Beiträge: 36
Antw:Tablet UI - responsive Design (flexbox)
« Antwort #168 am: 08 Dezember 2020, 20:19:27 »
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  :)
« Letzte Änderung: 08 Dezember 2020, 21:20:41 von mericon »

Offline sig10680

  • Jr. Member
  • **
  • Beiträge: 84
Antw:Tablet UI - responsive Design (flexbox)
« Antwort #169 am: 17 Februar 2021, 10:26:23 »
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

Offline jemu75

  • Developer
  • Sr. Member
  • ****
  • Beiträge: 676
    • FHEM App
Antw:Tablet UI - responsive Design (flexbox)
« Antwort #170 am: 12 März 2021, 14:45:00 »
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.  :)

 

decade-submarginal