Tablet UI - responsive Design (flexbox)

[magentouser]

@choetzu

sorry kam jetzt erst wieder dazu, jep so funktioniert es perfekt.

danke

[choetzu]

Die genaue Lösung habe ich gerade nicht parat, aber ich meine das geht über einen Wert im CSS. Dabei wird eingestellt, ab welcher Bildschirmbreite das Menü immer angezeigt wird. Diesen Wert müsstest du vergrößern.
Vielleicht hilft Dir das ja schon weiter.

danke. hmm, ich habe jetzt in der user-tablet-ui.css sämtliche Werte angepasst und getestet was passiert. leider ohne Erfolg.. Weisst du evtl. in welcher CSS das steht?

Code Auswählen Erweitern

/* FHEM Tablet UI 2.6 - eigene Anpassungen */

/* Phone-Header und Phone-Backbutton Definition */
.phone-header {
display: none;
}

.phone-back-btn {
display: none;
}

/* Men¸breite und Zeilenabstand der Men¸punkte korrigiert*/
@media screen and (max-width: 900px) and (min-width: 480px) {
.menu {
width: 90px !important;
}
}

/* Men¸leiste oben auf Bildschirmbreite angepasst, damit keine Elemente mehr ¸berdeckt werden */
@media screen and (max-width: 480px) {
.menu ~ main > .page {
padding-left: 0px;
padding-top: 40px;
}
.phone-header {
        top: 0px;
        left: 0px;
height: 40px;
width: 100%;
position: absolute;
background: #1D1F20;
z-index: 4;
display: block;
}
.phone-back-btn {
        top: 0px;
        left: 0px;
height: 39px;
width: 39px;
        position: absolute;
        background: #1D1F20;
padding-top: 0.31em;
z-index: 5;
display: block;
}
}


/* Schriftfarbe grau*/
.tomy {
    color: #999999;
}

/* Schriftfarbe blau*/
.tomy2 {
    color: #337ab7;
}

/* Header Hintergrundfarbe und Schriftgrˆfle korrigiert */
.card > header {
    background-color: #e6e6e6;
font-size: 125%;
}

/* Weather Iconfarbe korrektur */
.weather:before {
    color: #337ab7;
}

/* Chart Farben und Text Korrekturen */
.chart-background {
fill: #fff !important;
}
.gridlines {
   stroke: #222222 !important;
}
.text.axes {
    fill: #222222 !important;
font-size: smaller;
    font-family: "Helvetica Neue", "Helvetica", "Open Sans", "Arial", sans-serif;
    -webkit-font-smoothing: antialiased;
}
.legend {
font-size: smaller;
    font-family: "Helvetica Neue", "Helvetica", "Open Sans", "Arial", sans-serif;
    -webkit-font-smoothing: antialiased;
}

/* Section Korrektur f¸r die Hˆhen */
section {
    padding-top: 10px;
    padding-bottom: 10px;
    line-height: 1.6em;
}

[Standarduser]

Sorry, ich hab das auch nicht griffbereit.
Ich kann da leider nur auf die Forensuche verweisen. Setstate hat das in irgendeinem Beitrag schonmal genauer erklärt.

[topa_LE]

Hallo,

großes Lob für die Arbeit !! Bin auch die Sache am Umbauen. Hab da ein kleines Problem mit der content_phone und dem Template dazu.

in der template_call steht:

Code Auswählen Erweitern

div data-type="symbol" data-device="var_device" data-get="var_call-state"

Muss dort der Device Name angepasst werden? data-device="var_device" , oder macht man das alles in der content_phone.

Mein Device Name für die Call Liste heißt = Anrufliste. Hab schon einiges probiert. Komme da nicht weiter ...

mein Eintrag in der content_phone:

Code Auswählen Erweitern

<section>
<div data-template="template_call.html" data-parameter='{"var_device":"Anrufliste","var_call":"5"}'></div>
</section>

[Gunther]

Das machst Du in der content_phone mit Deiner Bezeichnung Anrufliste. (Zum var_device eintragen)

[topa_LE]

siehe oben mein Eintrag in der content_phone. So hatte ich es ja auch gemacht, wird leider nix angezeigt.

Da fehlt scheinbar noch etwas. Kann mir einer eine funktionierende Config für die Fritzbox posten. Da müssen doch noch anders wie hier die default Dateien die readings noch angepasst werden, oder nicht?

[loungelizard]

Hallo zusammen,
ich stelle auch gerade auf das flexbox-Beispiel um - Danke für die super Arbeit!
Ich habe aber auch wie einige hier das Problem, dass Boxen, die mehr Inhalt haben, als dargestellt werden kann oben und unten abgeschnitten sind. Scrollen kann ich auch nicht. Ich teste für ein altes 1024x600 Tablet, das Ergebnis ist in Tablet und entsprechend angepasstem Firefox identisch.
(Siehe Screenshots)

Könnt ihr mir einen Tipp geben, wie ich das Problem so löse, dass die Seiten korrekt scrollbar sind?

Cheers, Florian

---
Update 23.12.

hab's gefunden: in der fhem-tablet-ui.css habe ich die folgende Anpassung vorgenommen:

/* Flexbox layout */

.hbox,
.vbox,
.box,
.has_vbox {
    display: flex !important;
    justify-content: flex-start;
    align-items: flex-start;
    height: 100%;
    width: 100%;
}

[choetzu]

Sorry, ich hab das auch nicht griffbereit.
Ich kann da leider nur auf die Forensuche verweisen. Setstate hat das in irgendeinem Beitrag schonmal genauer erklärt.

danke. Die Forensuche hilft mir nicht weiter. Ich habe lediglich folgendes gefunden: Offensichtlich war das ursprünglich so, dass unabhängig vom Device das Menu immer analog Smartphone war, also immer eingeklappt. Siehe hier: https://forum.fhem.de/index.php/topic,56460.msg653719.html#msg653719

ich wäre um Hilfe dankbar, komme nicht weiter. danke.

[Standarduser]

Ach guck an, da hast du ja schon auf den richtigen Thread verlinkt.
Schau mal diesen Post und die darauf folgenden Antworten.
https://forum.fhem.de/index.php/topic,56460.msg584669.html#msg584669

Mehr kann ich leider auch nicht dazu beitragen. Sorry.

[choetzu]

Ach guck an, da hast du ja schon auf den richtigen Thread verlinkt.
Schau mal diesen Post und die darauf folgenden Antworten.
https://forum.fhem.de/index.php/topic,56460.msg584669.html#msg584669

Mehr kann ich leider auch nicht dazu beitragen. Sorry.

danke, ich habe das nun gefühlte 1000 mal gelesen und komm trotzdem nicht weiter.  dabei habe ich sowohl min=1300 wie auch mit max=1300. Das alles hat nichts gebracht. Reden wir vom selben? Ich möchte dass das Menue in KEINER Grösse aufklappt. Es soll immer zugeklappt sein, wie beim Smartphone...

Hmm, vermutlich bin ich einfach zu blöd...komisch nur, dass es am Anfang so war, gemäss den Bildern aus https://forum.fhem.de/index.php/topic,56460.msg653719.html#msg653719

[pscl]

Geniales Design 

Passe meins auch gerade an. Mit einer Dropdown auswahl habe ich gerade optische Probleme. Vielleicht kann jemand helfen.
Der "<section>" Bereich wird nicht gross genug beim öffnen des Dropdown

Code Auswählen Erweitern

<!DOCTYPE html>
<html>
<head></head>
<body>
<div class="page" id="content_wohnzimmer">
<div class="hbox">
<div class="vbox phone-width">
<div class="card lift">
<header>Christmas</header>
<section>
<div class="sheet">
<div class="row">
<div class="cell-1-2">
<div class="left-align left-space" onclick="if ($('#dropturm').is(':hidden')) { $('#dropturm').slideDown(250); $('#dropdownturm > i.fa').addClass('fa-rotate-180'); } else { $('#dropturm').slideUp(250); $('#dropdownturm > i.fa').removeClass('fa-rotate-180'); }"
id="dropdownturm">Turm
<i class="fa fa-angle-double-down big cell"></i>
</div>
</div>
<div class="cell-1-4 small right-align"
data-type="push"
data-device="Turm"
data-set="ct"
data-set-on="380"
data-icon="fa-paint-brush"
data-off-background-color="#FFFFFF">
</div>
<div class="cell-1-4">
<div class="small right-align right-space"
data-type="switch"
data-device="Turm"
data-get="state"
data-get-on="!off"
data-get-off="off"
data-set-on="on"
data-set-off="off"
data-on-color="#eee"
data-off-color="#eee">
</div>
</div>
</div>
</div>
<div id="dropturm">
<div class="sheet">
<div class="row">
<div class="cell-12">
<div data-type="push"
data-set="rgb"
data-device="Turm"
data-set-on="D6FF6D"
data-icon="fa-paint-brush"
data-off-background-color="#D6FF6D"
class="tiny">
</div>
</div>
<div class="cell-12">
<div data-type="push"
data-set="rgb"
data-device="Turm"
data-set-on="B28CFD"
data-icon="fa-paint-brush"
data-off-background-color="#B28CFD"
class="tiny">
</div>
</div>
<div class="cell-12">
<div data-type="push"
data-set="rgb"
data-device="Turm"
data-set-on="99D2EF"
data-icon="fa-paint-brush"
data-off-background-color="#99D2EF"
class="tiny">
</div>
</div>
<div class="cell-12">
<div data-type="push"
data-set="rgb"
data-device="Turm"
data-set-on="6795FC"
data-icon="fa-paint-brush"
data-off-background-color="#6795FC"
class="tiny">
</div>
</div>
<div class="cell-12">
<div data-type="push"
data-set="rgb"
data-device="Turm"
data-set-on="FFC12B"
data-icon="fa-paint-brush"
data-off-background-color="#FFC12B"
class="tiny">
</div>
</div>
<div class="cell-12">
<div data-type="push"
data-set="rgb"
data-device="Turm"
data-set-on="ct"
data-icon="fa-paint-brush"
data-off-background-color="#FFFFFF"
class="tiny">
</div>
</div>
</div>
<div class="row">
<div class="cell-12">
<div class="tiny">Grün</div>
</div>
<div class="cell-12">
<div class="tiny">Lila</div>
</div>
<div class="cell-12">
<div class="tiny">Blau</div>
</div>
<div class="cell-12">
<div class="tiny">Türkis</div>
</div>
<div class="cell-12">
<div class="tiny">Gelb</div>
</div>
<div class="cell-12">
<div class="tiny">Kaltweiss</div>
</div>
</div>
<div class="row">
<div class="cell-12">
<div data-type="push"
data-device="HUEDevice4"
data-set="bri"
data-set-on="90"
data-set-on="6795FC"
data-get-off="!on"
data-on-color="green"
data-icon="white"
data-off-background-color="#6795FC"
class="tiny white">
<div data-type="label" class="tiny white">30</div>
</div>
</div>
<div class="cell-12">
<div data-type="push"
data-device="HUEDevice4"
data-set="bri"
data-set-on="140"
data-set-on="6795FC"
data-get-off="!on"
data-on-color="green"
data-icon="transparent"
data-off-background-color="#6795FC"
class="tiny">50
<div data-type="label" class="tiny white">60</div>
</div>
</div>
<div class="cell-12">
<div data-type="push"
data-device="HUEDevice4"
data-set="bri"
data-set-on="200"
data-set-on="6795FC"
data-get-off="!on"
data-on-color="green"
data-icon="transparent"
data-off-background-color="#6795FC"
class="tiny">75
<div data-type="label" class="tiny white">75</div>
</div>
</div>
<div class="cell-12">
<div class="tiny">Türkis</div>
</div>
<div class="cell-12">
<div class="tiny">Gelb</div>
</div>
<div class="cell-12">
<div class="tiny">Kaltweiss</div>
</div>
</div>
</div>
</div>
</section>
</div>
<div class="card lift">
<header>Wetter</header>
</div
</div>
</div>
</body>
</html>




Sehe ich auch so!
bastle auch gerade dran rum. Ich finde auch deine Dropdown Lösung echt spitze! Ich kann dir da leider auch nicht helfen, hätte aber eine Frage dazu...
Wie krieg ich das hin, dass die Boxen default eingeklappt sind? Kenne mich da einfach zu wenig aus und suche anscheinend auch an den falschen Stellen...

[setstate]

danke, ich habe das nun gefühlte 1000 mal gelesen und komm trotzdem nicht weiter.  dabei habe ich sowohl min=1300 wie auch mit max=1300. Das alles hat nichts gebracht. Reden wir vom selben? Ich möchte dass das Menue in KEINER Grösse aufklappt. Es soll immer zugeklappt sein, wie beim Smartphone...

Hmm, vermutlich bin ich einfach zu blöd...komisch nur, dass es am Anfang so war, gemäss den Bildern aus https://forum.fhem.de/index.php/topic,56460.msg653719.html#msg653719

Man muss im Header einen Link zur User css setzen (nach der fhem-tablet-ui.css)

Code Auswählen Erweitern

<link rel="stylesheet" href="css/fhem-tablet-ui-user.css" />

Und den Teil für kleine Displays aus der css in diese Datei kopieren

Code Auswählen Erweitern


    .menu~main>.page {
        padding-left: 0px;
    }
    .menu {
        width: 230px !important;
        box-shadow: 0 0 0 100em rgba(0, 0, 0, 0);
        transform: translate3d(-230px, 0, 0);
        -webkit-transform: translate3d(-230px, 0, 0);
        transition: all 0.3s ease-in-out;
    }
    .menu .menu-trigger {
        width: 40px;
        height: 40px;
        position: absolute;
        left: 100%;
        background: #1D1F20;
    }
    .menu .menu-trigger:before,
    .menu .menu-trigger:after {
        content: '';
        width: 50%;
        height: 2px;
        background: #fff;
        border-radius: 10px;
        position: absolute;
        top: 45%;
        left: 50%;
        transform: translate3d(-50%, -50%, 0);
        -webkit-transform: translate3d(-50%, -50%, 0);
    }
    .menu .menu-trigger:after {
        top: 55%;
        transform: translate3d(-50%, -50%, 0);
        -webkit-transform: translate3d(-50%, -50%, 0);
    }
    .menu.show {
        transform: translate3d(0, 0, 0);
        -webkit-transform: translate3d(0, 0, 0);
        box-shadow: 0 0 0 100em rgba(0, 0, 0, 0.6);
    }


[SirMarco]

Sehe ich auch so!
bastle auch gerade dran rum. Ich finde auch deine Dropdown Lösung echt spitze! Ich kann dir da leider auch nicht helfen, hätte aber eine Frage dazu...
Wie krieg ich das hin, dass die Boxen default eingeklappt sind? Kenne mich da einfach zu wenig aus und suche anscheinend auch an den falschen Stellen...

Folgendes in deiner Custom CSS anpassen:

Code Auswählen Erweitern


#dropturm {
display: none;
}


[choetzu]

Man muss im Header einen Link zur User css setzen (nach der fhem-tablet-ui.css)

Code Auswählen Erweitern

<link rel="stylesheet" href="css/fhem-tablet-ui-user.css" />

Und den Teil für kleine Displays aus der css in diese Datei kopieren

Code Auswählen Erweitern


    .menu~main>.page {
        padding-left: 0px;
    }
    .menu {
        width: 230px !important;
        box-shadow: 0 0 0 100em rgba(0, 0, 0, 0);
        transform: translate3d(-230px, 0, 0);
        -webkit-transform: translate3d(-230px, 0, 0);
        transition: all 0.3s ease-in-out;
    }
    .menu .menu-trigger {
        width: 40px;
        height: 40px;
        position: absolute;
        left: 100%;
        background: #1D1F20;
    }
    .menu .menu-trigger:before,
    .menu .menu-trigger:after {
        content: '';
        width: 50%;
        height: 2px;
        background: #fff;
        border-radius: 10px;
        position: absolute;
        top: 45%;
        left: 50%;
        transform: translate3d(-50%, -50%, 0);
        -webkit-transform: translate3d(-50%, -50%, 0);
    }
    .menu .menu-trigger:after {
        top: 55%;
        transform: translate3d(-50%, -50%, 0);
        -webkit-transform: translate3d(-50%, -50%, 0);
    }
    .menu.show {
        transform: translate3d(0, 0, 0);
        -webkit-transform: translate3d(0, 0, 0);
        box-shadow: 0 0 0 100em rgba(0, 0, 0, 0.6);
    }


Hallo

herzlichen Dank, das hat auf Anhieb gut geklappt!! Jedoch 2 Punkte sind noch suboptimal:
-Siehe Bild, es gibt keinen schwarzen Balken oben wie in der Phone-Grösse. Das Nav-Icon überdeckt den Inhalt
-Wenn ich das Menu aufrufe und etwas auswähle, klappt das Menue nicht automatisch zu.

Kann man das noch fixen, dann wäre es perfekt!! Herzlichen dank.

Lg c

[pscl]

Folgendes in deiner Custom CSS anpassen:

Code Auswählen Erweitern


#dropturm {
display: none;
}


Ah vielen Dank!