Tablet UI - responsive Design (flexbox)

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

Vorheriges Thema - Nächstes Thema

australien

super, danke!

werde mich da mal einlesen.
raspberry pi3
signalduino, Shelly1, Shelly2, Sonos, Unifi
Amazon Fire Tablet 7 | Noname Android Tablet 10"

Gunther

Zitat von: holle75 am 02 Januar 2018, 13:12:03
Hallo Ihr, an dieser Problematik beiße ich mir gerade noch die Zähne aus.
ios 9 und auch bei mir bekomme ich diesen verflixten Back-Button einfach nicht oben links in die Ecke, dass er den System/Menu Button überdeckt. Dies passiert nur wenn man die og Modifikationen einbaut

body {
      overflow-y: scroll;
      -webkit-overflow-scrolling: touch;
    }


habs auch schon im Container, im html, im was weiß ich nicht alles probiert. Entweder das Iphone scrollt wie man es im Iphone gewohnt ist .... mit nicht wirklich funktionierendem Back-Button, ..... oder mit funktionierendem Back-Button und scrollen ist die Hölle. Irgendjemand?

Edit: erschwerend ist, dass das Problem nur auf dem iphone auftritt. Chrome, Firefox, egal ob auf PC oder Mac funktionierts. Nicht sehr hilfreich für die Suche ;)

Gibt es da schon eine Lösung?
Mein Problem derzeit: Scollen auf Iphone geht leider nicht wie sonst gewohnt (anstupsen und es läuft).
Backbutton auf Iphone vorhanden aber auf breitem Device nicht.
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

Gunther

Ich habe nun mal ein wenig rumprobiert (Achtung: Ich bin absoluter Laie in Sachen CSS und HTML).

Wenn ich die Schnipsel für das IOS-Scrollen einfüge, die ich überall im Web finde, funktioniert das weiche Scrollen auch aber überdeckt anscheinend den Backbutton.

Code für weiches Scollen:
overflow-y: scroll; /* has to be scroll, not auto */
      -webkit-overflow-scrolling: touch;


Warum das nun den Backbutton überdeckt weiß ich nicht.
Backbutton:
}
.phone-back-btn {
        top: 0px;
        left: 0px;
height: 39px;
width: 39px;
        position: absolute;
        background: #1D1F20;
padding-top: 0.31em;
z-index: 5;
display: block;
}


Sehen kann ich das, wenn ich den Backbutton auf
height: 50px
vergrößere

Dann schaut dieser hervor und kann genutzt werden.

Frage: Warum überdeckt das Scrollen die obere Zeile?
Kann ich mitteilen, was in "Vordergrund" und was im "Hintergrund" ist?
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

adrian

Hallo zusammen,
neuerdings, es gab wohl ein update, fährt am Android Smartphone die Navigationsleiste nicht mehr rein und verdeckt somit die linke Seite  meiner content-page.
wenn ich das Phone drehe auf "landscape" kann ich dafür nicht mehr nach oben scrollen. mir fehlen dann die obersten Zeilen.

auch wenn ich die orignal "index-html" aus der Zip-Datei, die im ersten Post enthalten ist verwende, kommen dennoch die gleichen fehler.
   
<link rel="stylesheet" href="css/fhem-mobil-ui.css" />   
   <link rel="stylesheet" href="css/hdm-user-tablet-ui.css" />     
   <link rel="stylesheet" href="user-tablet-ui.css" />



habt ihr ähnliche Phänomene? oder könnt ihr helfen?

SirMarco

Genau das Problem habe ich auch, das Menü fährt erst wieder ein wenn ich erneut auf den Menü Button klicke

Hast du eine Lösung gefunden?

adrian

Hallo SirMarco,
Leider nicht, ich hab schon die alten css von einem Backup wieder eingespielt, es mit den Originaldateien aus der ZipDatei des ersten Eintrages versucht. Nichts, ich bekomm diese "SmartphoneUI" nicht mehr so zum Fliegen.
Mir ist auch aufgefallen, dass die Charts auf dem Wetter-Untermenu nun mit einem scharzen Hintergrund dargestellt werden und keine Verläufe mehr erkennbar sind.
Bei mir fährt am Desktop die Navigationsbar gar nicht rein, ging glaub auch früher nicht und wäre für mich nicht tragisch, aber am Smartphone ist es genau das Feature was so toll war.
Wenn jemand ne Idee hat, bzw. noch die Orignal CSS und alles drum rum aus dem lib und js Ordner, dann bitte auch bereitstellen.
BITTE BITTE BITTE :-)

STING333

Hallo,
danke für die tolle Vorlage, hänge aktuell da dran das ich gerne die Breite der Menuleiste anpassen wollte und nur Icons ohne Text mittig.... leider bekomme ich weder die Breite eingestellt noch die Icons mittig.

Hat da einer eine gute Idee für mich wo ich meinen Denkfehler mache?!

Danke & Gruß
Gerhard
FHEM 5.8 auf RPi 3
Perl: v5.24.1

SirMarco

Hat jemand eine Idee wie ich das Menü auf dem Smartphone scrollbar machen kann?

Liebe Grüsse

djfflow

Hallo,

ich habe die Vorlage entsprechend angepasst und habe soviele Menüpunkte das gescrollt werden muss. Dies habe ich mit den Anpassungen von GeoCeKid hinbekommen. Leider verhält sich das dann so, dass die Menüleiste nur soweit mit der Hintergrundfarbe gefüllt wird wie der Monitor hoch ist. Alles was darüber hinaus geht, ist grau (siehe Anhang).
Wie kann man dieses Verhalten ändern, sodass alle Menüpunkte auf dem richtigen Hintergrund angezeigt werden?

FosCo

Hi, da ich das Thema https://forum.fhem.de/index.php/topic,104944.0.html nur für dieses Layout erstellt habe, verlinke ich die beiden Threads mal. Finde es deutlich bequemer so.

Lieben Dank auch an dieser Stelle nochmal für das Layout!
Es hat mir nicht nur ein wunderbares Gerüst verschafft, sondern auch den Umgang mit Templates gezeigt.

grossmaggul

Hallo,

ich versuche auch gerade meine FTUI Oberfläche von Gridster auf Flexbox umzustellen, dank dieses Fadens klappt das auch schon ganz gut.
Es hat sich mir aber eine Frage aufgedrängt, ist das Konstrukt...
<!DOCTYPE html>
<html>
<head>
<!-- FHEM Tablet UI V2.6 -->
<!-- Template für HUE Lampen -->
</head>
<body>
</body>
</html>

...bei den Templates überhaupt nötig? Die Templates werden doch soweit ich das verstanden habe in die content_X.html Seiten eingebunden, die dieses Konstrukt bereits enthalten.
Oder handelt es sich bei den Templates um eigenständige Seiten?

Und noch eine Frage, ich habe versucht das Menü schmaler zu machen, führt aber auf dem Smartfon dazu, daß der Content um das breite Menü nach rechts gerückt ist und dafür die rechte Seite um diesen Teil abgeschnitten ist.

gm
FHEM auf Debian Buster Server, 2 x nanoCUL868, 1xnanoCUL465; Homematic, MAX, MiLight, HUE,  2 x Gosund SP1

mericon

Zitat von: Gunther am 01 Januar 2019, 21:26:36
Habe es gelöst. So sieht mein Detail-Template nun aus.

Falls auch jemand die Draugr-Lösung nachbaut: WICHTIG ist es auch die Subseiten in die index.html reinzubauen. Da habe ich mir eine halbe Stunde die Zähne dran ausgebissen.

<!DOCTYPE html>
<html>

<head>
<!-- FHEM Tablet UI V2.6 -->
<!-- Template fuer Einstellungen von farbige HUE-Birnen / Gruppen -->
</head>

<body>

<div class="hbox">
<div class="vbox phone-width">
<div class="card lift" header="test">
<header>var_name</header>

<!-- Status / Schalter -->
<section>
<div class="row">
<div class="cell-10 left-align left-space">
<div data-type="symbol" data-icon="mi-lightbulb_outline" data-color='["blue"]' class="big compressed"></div>
</div>
<div class="cell left-align left-space">
<div class="big">Power</div>
<div data-type="label" data-device="var_device" data-get="onoff" data-substitution='["0","Aus","1","An"]' class="top-narrow-2x"></div>
</div>
<div class="cell-90">
</div>
<div class="cell right-space">
<div data-type="checkbox" data-device="var_device" data-device="var_device" data-get="onoff" data-set-on="on" data-set-off="off" data-get-on="1" data-get-off="0" class="small blue"></div>
</div>
</div>
</section>

<!-- Helligkeit -->
<section>
<div class="row">
<div class="cell-10 left-align left-space">
<div data-type="symbol" data-icon="mi-brightness_5" data-color="#aaaaaa" class="big compressed"></div>
</div>
<div class="cell left-align left-space">
<div class="big">Helligkeit</div>
<div data-type="label" data-device="var_device" data-get="pct" data-unit="%" class="top-narrow-2x"></div>
</div>
<div class="cell-90">
</div>
<div class="cell right-space">
<div data-type="slider" data-device="var_device" data-get="pct" data-set="pct" class="horizontal blue"></div>
</div>
</div>
</section>

<!-- Farbe / Farbtemperatur -->
<section>
<div class="row">
<div class="cell-10 left-align left-space">
<div data-type="symbol" data-icon="fa-thermometer-half" data-color="#aaaaaa" class="big compressed"></div>
</div>
<div class="cell left-align left-space">
<div class="big">Farbe</div>
<div data-type="label" data-device="var_device" data-get="rgb" class="top-narrow-2x"></div>
</div>
<div class="cell-90">
</div>
<div class="cell right-space">
<div data-type="popup" data-height="240px" data-width="240px" data-draggable="false">
<div data-type="symbol" data-device="var_device" data-icon="fa-circle" data-on-color="var_device:rgb" data-off-color="var_device:rgb"></div>
<div class="dialog">
<header>Farbe</header>
<div data-type="colorwheel" data-device="var_device" data-get="rgb" data-set="rgb"></div>
</div>
</div>
</div>
</div>
</section>
</div>
</div>
</div>
</body>

</html>


Irgendwie funktioniert das bei mir nicht so richtig .

Habe jetzt den Eintrag in der Index gemacht aber die Detailseite bleibt leer.

<div class="Page" id="kueche1"></div>

Kannst du mir da einen Tip geben?

Gunther

Zeig doch mal die Index, die Content und die Template-Seiten (Code)
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

#163
Index


<!DOCTYPE html>
<html>

<!-- FHEM Tablet UI 2.6 -->

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

    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=2.0, user-scalable=yes" />
    <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='1'> <!-- keine Ausgabe von Protokollmeldungen -->

<link rel="stylesheet" href="css/fhem-mobil-ui.css" />
<link rel="stylesheet" href="user-tablet-ui.css" />
<script src="js/fhem-tablet-ui.js" defer></script>
<script defer>var wvcDevices = {'12345': 'Tablet'}; var wvcUserCssFile="webviewcontrol.css"</script>
    <script src="/fhem/pgm2/cordova-2.3.0.js" defer></script>
    <script src="/fhem/pgm2/webviewcontrol.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="Default large"><span>Home</span></div>
</li>
<li>
<div data-type="link" data-url="#content_media.html"
data-color="white"
data-active-color="blue"
data-width="115"
data-load="#content_media"
data-text-align="left"
data-active-pattern="(.*index.html|.*#content_media.html)"
data-icon="fa-music" class="large"><span>Media</span></div>
</li>
<li>
<div data-type="link" data-url="#room_schlafzimmer.html"
data-color="white"
data-active-color="blue"
data-width="115"
data-load="#room_schlafzimmer"
data-text-align="left"
data-active-pattern="(.*index.html|.*#room_schlafzimmer.html)"
data-icon="fa-bed" class="large"><span>Eltern</span></div>
</li>
<li>
<div data-type="link" data-url="#room_wohnkueche.html"
data-color="white"
data-active-color="blue"
data-width="115"
data-load="#room_wohnkueche"
data-text-align="left"
data-active-pattern="(.*index.html|.*#room_wohnkueche.html)"
data-icon="fa-couch" class="large"><span>Wohnk&uuml;che</span></div>
</li>
<li>
<div data-type="link" data-url="#content_chart.html"
data-color="white"
data-active-color="blue"
data-width="115"
data-load="#content_chart"
data-text-align="left"
data-active-pattern=".*(#content_chart.html)"
data-icon="mi-show_chart" class="large"><span>Grafiken</span></div>
</li>
<li>
<div data-type="link" data-url="#content_phone.html"
data-color="white"
data-active-color="blue"
data-width="115"
data-load="#content_phone"
data-text-align="left"
data-active-pattern=".*(#content_phone.html)"
data-icon="mi-phone" class="large"><span>Anrufe</span></div>
</li>
<li>
<div data-type="link" data-url="#content_settings.html"
data-color="white"
data-active-color="blue"
data-width="115"
data-load="#content_settings"
data-text-align="left"
data-active-pattern=".*(#content_settings.html)"
data-icon="mi-settings" class="large"><span>Einstellungen</span></div>
</li>
</ul>
</nav>

<main>
<div claa="page" id="1"></div>
<div class="page" id="content_home"></div>
<div class="page" id="room_schlafzimmer"></div>
<div class="page" id="content_light"></div>
<div class="page" id="content_media"></div>
<div class="page" id="content_contact"></div>
<div class="page" id="content_blinds"></div>
<div class="page" id="content_blinds_detail"></div>
<div class="page" id="room_wohnkueche"></div>
<div class="page" id="content_weather"></div>
<div class="page" id="content_phone"></div>
<div class="page" id="content_cam"></div>
<div class="page" id="content_chart"></div>
<div class="page" id="content_settings"></div>
<div class="page" id="detail_kueche1"></div>
</main>
</body>
</html>


Room


<!DOCTYPE html>
<html>
<body>
    <div class="page" id="room_wohnkueche">
<div class="phone-back-btn">
<div data-type="link" data-url="#content_home.html" data-load="#content_home" 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>Licht</header>
<section>
            <div data-template="template_switch_hue.html" data-parameter='{"var_device":"HUEDevice2","var_name":"Kueche 1","var_url":"detail_kueche1"}'></div>
          </section>

</section>
</div>
</div>
<div class="vbox phone-width">
<div class="card lift">
<header>Rollos</header>
<section>
<div data-template="template_blind.html" data-parameter='{"var_device":"Rollo_WZ","var_name":"Wintergarten"}'></div>
</section>
<section>
<div data-template="template_blind.html" data-parameter='{"var_device":"Rollo_WZ_Tuer","var_name":"Wintergarten T&uuml;r"}'></div>
</section>

</div>
</div>
</div>
</div>
</body>
</html>
ml>
</section>
<section>
<div data-template="template_blind.html" data-parameter='{"var_device":"Rollo_WZ_Tuer","var_name":"Wintergarten T&uuml;r"}'></div>
</section>
</div>
</div>
</div>
</div>
</body>
</html>.html" data-parameter='{"var_device":"Rollo_WZ_Tuer","var_name":"Wintergarten T&uuml;r"}'></div>
</section>
</div>
</div>
</div>
</div>
</body>
</html>ce":"Rollo_WZ_Tuer","var_name":"Wintergarten T&uuml;r"}'></div>
</section>

</div>
</div>
</div>
</div>
</body>
</html>
a-parameter='{"var_device":"Rollo_WZ_Tuer","var_name":"Wintergarten T&uuml;r"}'></div>
</section>
</div>
</div>
</div>
</div>
</body>
</html>


Template_switsch_hue

<!DOCTYPE html>
<html>

<head>
<!-- FHEM Tablet UI V2.6 -->
<!-- Template fuer HUE-Birnen / Gruppen -->
</head>

<body>
<div class="row">
<div class="cell left-align left-space">
<div data-type="switch" data-device="var_device" data-get="onoff" data-set-on="on" data-set-off="off" data-get-on="1" data-get-off="0" class="small blue"></div>
</div>
<div class="cell-80 left-align">
<div class="big">var_name</div>
</div>
<div class="cell">
</div>
<div class="cell">
<div data-type="link" data-url="#var_url.html" data-load="#var_url"  data-active-pattern=".*(#var_url.html)" data-color="black" data-fade-duration="0">
<div data-type="symbol" data-color="gray" data-icon="mi-chevron_right" class="compressed"></div>
</div>
</div>
</div>
</body>

</html>


detail_kueche1


<!DOCTYPE html>
<html>

<head>
<!-- FHEM Tablet UI V2.6 -->
<!-- Template fuer Einstellungen von farbige HUE-Birnen / Gruppen -->
</head>

<body>

<div class="hbox>
<div class="vbox phone-width">
<div class="card lift" header="test">
<header>var_name</header>

<!-- Status / Schalter -->
<section>
<div class="row">
<div class="cell-10 left-align left-space">
<div data-type="symbol" data-icon="mi-lightbulb_outline" data-color='["blue"]' class="big compressed"></div>
</div>
<div class="cell left-align left-space">
<div class="big">Power</div>
<div data-type="label" data-device="var_device" data-get="onoff" data-substitution='["0","Aus","1","An"]' class="top-narrow-2x"></div>
</div>
<div class="cell-90">
</div>
<div class="cell right-space">
<div data-type="checkbox" data-device="var_device" data-device="var_device" data-get="onoff" data-set-on="on" data-set-off="off" data-get-on="1" data-get-off="0" class="small blue"></div>
</div>
</div>
</section>

<!-- Helligkeit -->
<section>
<div class="row">
<div class="cell-10 left-align left-space">
<div data-type="symbol" data-icon="mi-brightness_5" data-color="#aaaaaa" class="big compressed"></div>
</div>
<div class="cell left-align left-space">
<div class="big">Helligkeit</div>
<div data-type="label" data-device="var_device" data-get="pct" data-unit="%" class="top-narrow-2x"></div>
</div>
<div class="cell-90">
</div>
<div class="cell right-space">
<div data-type="slider" data-device="var_device" data-get="pct" data-set="pct" class="horizontal blue"></div>
</div>
</div>
</section>

<!-- Farbe / Farbtemperatur -->
<section>
<div class="row">
<div class="cell-10 left-align left-space">
<div data-type="symbol" data-icon="fa-thermometer-half" data-color="#aaaaaa" class="big compressed"></div>
</div>
<div class="cell left-align left-space">
<div class="big">Farbe</div>
<div data-type="label" data-device="var_device" data-get="rgb" class="top-narrow-2x"></div>
</div>
<div class="cell-90">
</div>
<div class="cell right-space">
<div data-type="popup" data-height="240px" data-width="240px" data-draggable="false">
<div data-type="symbol" data-device="var_device" data-icon="fa-circle" data-on-color="var_device:rgb" data-off-color="var_device:rgb"></div>
<div class="dialog">
<header>Farbe</header>
<div data-type="colorwheel" data-device="var_device" data-get="rgb" data-set="rgb"></div>
</div>
</div>
</div>
</div>
</section>
</div>
</div>
</div>
</body>

</html>

SirMarco

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