Tablet UI - responsive Design (flexbox)

[ErzGabriel]

Jupp, websocket in FHEM und der FTUI eingestellt.

[jemu75]

Jupp, websocket in FHEM und der FTUI eingestellt.

Kommen im WEB (Entwicklermodus-Console) irgendwelche Fehlermeldungen an?

[ErzGabriel]

Ja, da steht immer longpoll nicht definiert.
Ich vermute, es liegt dadran, das ich nicht die neuste Version von FHEM nutze. Hatte letztens geupdatet und danach habe ich meine HA-Bridge nicht mehr zu laufen gekriegt und somit ein Backup genutzt um den alten Zustand wieder herzustellen. Da mein System komplett auf Alexa aufbaut und ich alles per Sprache über die HA-Bridge stellen kann, will ich nicht die Bridge opfern für ne neue FTUI.

[Phiolin]

Hat schon irgendwer raus bekommen, weshalb seit dem letzten Update die Zeilenabstände im mittleren Teil der Templates so groß geworden sind?
Ich habe jetzt eine ganze Weile die fhem-tablet-ui.css durchforstet, steige jedoch nicht dahinter, was setstate verändert hat.   

In der fhem-tablet-ui.css hat sich der Abschnitt "section" geändert.
Dort wird jetzt eine min-height/line-height von 4.3em definiert, was wohl das Problem verursacht.

Code Auswählen Erweitern

section {
    border-bottom: 1px solid #888;
    min-height: 4.5em;
    line-height: 4.3em
}

Hab es noch nicht hinbekommen, das einfach im user template wieder zu überschreiben...

[jemu75]

In der fhem-tablet-ui.css hat sich der Abschnitt "section" geändert.
Dort wird jetzt eine min-height/line-height von 4.3em definiert, was wohl das Problem verursacht.

Vielen Dank für den Hinweis! 
Ich habe die user-tablet-ui.css jetzt wie folgt angepasst. Anbei auch die komplette aktuelle user-tablet-ui.css
Damit sollten die Darstellungsprobleme auch mit den aktuellsten Versionen der Tablet-UI behoben sein.

Code Auswählen Erweitern


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


[Phiolin]

Klappt. Jetzt sieht es wieder besser aus.

[Augschburger]

@jemu75: Danke Dir (und @setstate) für Deine Arbeit mit den Flexboxen. Ich habe das mal für mich adaptiert und dabei folgendes festgestellt:
Auf einer Unterseite habe ich 2 RSS-Feeds nebeneinander mit je 12 Artikeln, die über ein entsprechendes Template generiert werden, also alles von Dir abgekupfert. 

Allerdings passt die Seite nicht auf mein Smartphone, die beiden vbox werden untereinander dargestellt, was ja gewünscht ist. Eine vbox (card) alleine ist aber schon höher als die Displayhöhe und es wird dummerweise mittendrin angefangen, es verschwindet also der Kopf und Schwanz oben und unten aus dem Viewport. Scrollen, schubsen, ziehen, alles hilft nix.

Ich kann das mit dem von Dir gepackten ZIP-File nachvollziehen, indem ich im FHEM eine Kopie des tablet-Verzeichnisses angelegt und Deine unveränderten Files dorthinein kopiert habe. Deine index.html am PC aufgerufen, das Browserfenster so breit gezogen, dass die Ansicht zweispaltig (+ Menü) ist und dann die Höhe des Browserfensters stark reduziert. In dem Moment, wenn in der rechten Spalte die beiden cards ("Komfort" und "Infos") maximal zusammengerutscht sind, wird rechts der Scrollbar angezeigt, und es verschwindet der Kopf und der Schwanz der Spalte oben und unten. Dummerweise ist der Scrollbar "zu kurz", man kann also nicht mehr nach ganz oben und unten scrollen...

Hast Du (oder setstate) eine Idee/Lösung dafür, wie man die vbox/card "oben antackert"? Ich bin leider Flexbox-technisch eine Niete, meine entsprechenden Versuche (unabhängig von FHEM) vor ein paar Monaten mit Hilfe von selfHTML waren entsprechend örks.

Angehängt noch ein Screenshot, da sieht man, wie die rechte (höhere) Spalte verschwunden ist, währen die linke gerade eben anfängt zu verschwinden.

[jemu75]

@jemu75: Danke Dir (und @setstate) für Deine Arbeit mit den Flexboxen. Ich habe das mal für mich adaptiert und dabei folgendes festgestellt:
Auf einer Unterseite habe ich 2 RSS-Feeds nebeneinander mit je 12 Artikeln, die über ein entsprechendes Template generiert werden, also alles von Dir abgekupfert. 

Allerdings passt die Seite nicht auf mein Smartphone, die beiden vbox werden untereinander dargestellt, was ja gewünscht ist. Eine vbox (card) alleine ist aber schon höher als die Displayhöhe und es wird dummerweise mittendrin angefangen, es verschwindet also der Kopf und Schwanz oben und unten aus dem Viewport. Scrollen, schubsen, ziehen, alles hilft nix.

Ich kann das mit dem von Dir gepackten ZIP-File nachvollziehen, indem ich im FHEM eine Kopie des tablet-Verzeichnisses angelegt und Deine unveränderten Files dorthinein kopiert habe. Deine index.html am PC aufgerufen, das Browserfenster so breit gezogen, dass die Ansicht zweispaltig (+ Menü) ist und dann die Höhe des Browserfensters stark reduziert. In dem Moment, wenn in der rechten Spalte die beiden cards ("Komfort" und "Infos") maximal zusammengerutscht sind, wird rechts der Scrollbar angezeigt, und es verschwindet der Kopf und der Schwanz der Spalte oben und unten. Dummerweise ist der Scrollbar "zu kurz", man kann also nicht mehr nach ganz oben und unten scrollen...

Hast Du (oder setstate) eine Idee/Lösung dafür, wie man die vbox/card "oben antackert"? Ich bin leider Flexbox-technisch eine Niete, meine entsprechenden Versuche (unabhängig von FHEM) vor ein paar Monaten mit Hilfe von selfHTML waren entsprechend örks.

Angehängt noch ein Screenshot, da sieht man, wie die rechte (höhere) Spalte verschwunden ist, währen die linke gerade eben anfängt zu verschwinden.

Hallo,

mir ist dieses Problem ebenfalls bekannt. Als ich meine Lösung gebaut habe, haben sich die Seiten sehr gut auf das jeweilige Display angepasst. Wenn eine Card im Querformat mehr Inhalt hatte als die Höhe es hergegeben hat, dann konnte diese gescrollt werden.

Es gab nun zwischenzeitlich ein Update, bei dem setstate recht viel umgebaut hat. Ich hatte ihn persönlich schon mal angeschrieben und gefragt, wie wir gemeinsam an einer Lösung weiterarbeiten können. Habe jedoch leider keine Antwort erhalten, sodass ich inzwischen wieder auf einer älteren Version der Tablet UI arbeite. Wenn es meine Zeit zulässt werde ich die Anpassungen in CSS aber mal erstellen, so dass man auch wieder mit der aktuellen Version der Tablet UI meine Lösung nutzen kann.

Sorry, dass ich für den Moment erstmal nicht weiter helfen kann. 

[holle75]

... bei mir hat "damals" ein

Code Auswählen Erweitern

.page .vbox {
    justify-content: initial;
}

in der my.css geholfen. Probier doch mal?!

H.

[Augschburger]

Hab es in die user-tablet-ui.css eingefügt und es funktioniert!   

Dankeschön sagt
  Hans-Jörg

[Augschburger]

Es gibt immer noch Probleme mit unerreichbaren Bereichen, wenn ich das iPhone von Hoch- auf Querformat drehe - ist aber nicht so wild, dann lass ich es halt. 

Weil mir das "sanfte" Scrollen beim iPhone gefehlt hat, habe ich mich mal aufgeschlaut. Mit diesem Schnipsel in der user-tablet-ui.css verhält es sich wieder Apple-like:

Code Auswählen Erweitern


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


[eppi]

Hallo
Hat jemand mit der Vorlage template_call.html & content_phone.html eine Anrufliste eingebunden? Ich habe die Vorlage aus dem zip genommen, jedoch bekomme einfach nichts angezeigt. In FHEM habe ich den FB_CALLMONITOR und die FB_CALLLIST definiert und wird auch entsprechend angezeit und funktioniert seit Jahren. Aber eben in FTUI scheitere ich...
Hat jemand einen Schnipsel für mich?
Danke vielmals!

[Augschburger]

Läuft bei mir. 

content_phone.html

Code Auswählen Erweitern


<!DOCTYPE html>
<html>
<body>
    <div class="page" id="content_phone">
<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>Anrufe</header>
<section>
<div data-template="template_call.html" data-parameter='{"var_device":"Anrufliste","var_call":"1"}'></div>
</section>
<section>
<div data-template="template_call.html" data-parameter='{"var_device":"Anrufliste","var_call":"2"}'></div>
</section>
<section>
<div data-template="template_call.html" data-parameter='{"var_device":"Anrufliste","var_call":"3"}'></div>
</section>
<section>
<div data-template="template_call.html" data-parameter='{"var_device":"Anrufliste","var_call":"4"}'></div>
</section>
<section>
<div data-template="template_call.html" data-parameter='{"var_device":"Anrufliste","var_call":"5"}'></div>
</section>
<section>
<div data-template="template_call.html" data-parameter='{"var_device":"Anrufliste","var_call":"6"}'></div>
</section>
<section>
<div data-template="template_call.html" data-parameter='{"var_device":"Anrufliste","var_call":"7"}'></div>
</section>
<section>
<div data-template="template_call.html" data-parameter='{"var_device":"Anrufliste","var_call":"8"}'></div>
</section>
<section>
<div data-template="template_call.html" data-parameter='{"var_device":"Anrufliste","var_call":"9"}'></div>
</section>
</div>
</div>
</div>
</div>
</body>

</html>


template_call.html

Code Auswählen Erweitern


<!DOCTYPE html>
<html>
<head>
<!-- FHEM Tablet UI V2.6 -->
<!-- Template für fhem Phone Modul -->
</head>
<body>
<div class="row">
<div class="cell left-align left-space">
<div data-type="symbol" data-device="var_device" data-get="var_call-state"
data-icons='["mi-call_missed","mi-call_missed_outgoing","mi-call_received","mi-call_made","mi-call_made","mi-call_received","oa-phone_call","oa-phone_call"]'
data-get-on='["=> X","<= X","=> ((o))","<= ((o))","<=","=>","<= [=]","=> [=]"]'
data-on-colors='["#ad3333","#ad3333","#3399ff","#33ad33","#3399ff","#33ad33","#3399ff","#33ad33"]' class="big compressed"></div>
</div>
<div class="cell-80 left-align">
<div data-type="label" data-device="var_device" data-get="var_call-name" class="big"></div>
<div data-type="label" data-device="var_device" data-pre-text="(" data-post-text=")" data-get="var_call-number" class="inline"></div>
<div data-type="label" data-device="var_device" data-get="var_call-timestamp" class="inline"></div>
</div>
<div class="cell">
</div>
<div class="cell right-space">
</div>
</div>
</body>
</html>


[eppi]

Läuft bei mir. 

Danke vielmals. Ich habe es genauso übernommen, somit liegt der Fehler bei mir in der FHEM Definition. Könntest du mir deine Definiton in FHEM (list) kurz posten, damit ich überprüfen kann?
Besten Dank!

[eppi]

Läuft Ich hatte in der Anrufliste das attr create-readings nicht auf 1 gesetzt. Danke vielmals für deine Hilfe