[HowTo] "responisve" layout

[Scrounger]

Hallo zusammen,

da ich gestern endlich mal dazu gekommen bin, mit meiner neuen VIS anzufangen, hab ich mir gleich mal die Frage gestellt, wie ich ein "responsiv" layout hinbekomme, damit ich eine VIS für Desktop, Tablet und Handy bauen kann.
Hab dann ein bissle herumgespielt und denke eine ganz nette Lösung gefunden.
Diese möchte ich natürlich mit Euch teilen. Evtl. habt ihr ja noch bessere Ansätze gefunden oder Ideen bzgl. Optimierung.

Ziel war ein 3 spaltiges Layout zu realisieren, was dann auf den unterschiedlichen Geräten wie folgt aussieht:

Desktop:

Tablet Landscape (Querformat):

Tablet Portrait (Hochkant):

Handy:

Die Umsetzung ist etwas tricky, da ich hier mit verschachtelten view in widget Widgets arbeiten musste.

Als erstes müssen die einzelnen Items erstellt werden. Ich hab das mal am Beispiel Cards gemacht.
Die Card muss den Bildschrim füllen, d.h. width: 100% ggf abzgl. Abstand vom Rand, der später auch der Abstand der einzelnen Cards in der gesamt View darstellt. Alle weiteren Widgets in dieser View müssen dann natürlich auch entsprechend varaible hinzugefügt werden.

Dann hab ich mir drei weitere Views erstellt - die Spalten.
Den Spalten hab ich dann view in widget Widgets für jede Card hinzugefügt und folgende Klasse zugewiesen:

View:

.my-view-flex-container {
    display: flex !important;
    justify-content: center;
    align-items: flex-start;
    align-content: flex-start;
    background-color: #fafafa;
    flex-wrap: wrap !important;
}

View in Widget

.my-view-in-widget-flex-item {
    position: relative !important;
    left: 0 !important;
    top: 0 !important;
    min-width: var(--mobil-width) !important;
    width: calc(100% / var(--number-of-colums)) !important;
    background-color: #fafafa;
    flex-grow: 1 !important;
}

Als letztes hab ich dann die finale View erstellt, in der ich die drei view in widget erstellt habe und dort die Views der Spalten zuweise. Damit das ganze funktioniert müssen noch folgende css klassen zugewisen werden:

View:

.my-view-flex-container {
    display: flex !important;
    justify-content: center;
    align-items: flex-start;
    align-content: flex-start;
    background-color: #fafafa;
    flex-wrap: wrap !important;
}

view in widget:

.my-view-flex-container-column {
    position: relative !important;
    left: 0 !important;
    top: 0 !important;
    min-width: var(--mobil-width) !important;
    width: calc(100% / var(--number-of-colums)) !important;
    height: auto !important;
    background-color: #fafafa;
    flex-grow: 1 !important;
}

Und schon hab ich das "responsiv" Layout wie oben in den Screenshots dargestellt.
Bitte nicht wundern, der VIS Editor kommt mit der Darstellung manchmal durcheinander, dann müsst ihr einfach neuladen (F5)

Schaut euch am besten das angehängte Beispiel-Projekt an.
2019-12-31-responsive_example.zip

Hier gibt es als css auch die Möglichkeit die min-width für mobil devices zu konfigurieren und falls eine andere Anzahl an Spalten haben möchtet, könnt ihr diese auch entsprechend einstellen. Geht alles über die css root klasse:

:root {
    --mobil-width: 360px;
    --number-of-colums: 3;
}

Noch ein Tip:
Am besten sieht das ganze aus, wenn ihr die Views mit den Spalten gleichmäßig füllt, d.h. die Summe alle Cards (Items) in den Spalten sollten am Ende die gleiche Höhe haben.

[Sempre]

@Scrounger

Vielen Dank für das Tutorial und somit die Möglichkeit "einfach" ein responsive Design zu schaffen. Ich hatte schon öfter die Überlegung ob ich meine VIS nun für ein Tablet optimiere und dann für mein Handy einfach eine zusätzliche baue.

Nun kann ich mit diesem Tutorial meine bereits begonnene VIS sauber bauen und anschließend habe ich diese sogar responsive, sofern sich das Tablet (Auflösung) ändert bzw. ich die VIS am PC anschaue. Generell habe ich auch das dreispaltige Layout hinbekommen, was mir gerade nur nicht klar ist wie ich das mit der Widget "Top App Bar Navigation Drawer" schaffe. Also das Layout zu übernehmen, denn dieses packt die 3 Spalten untereinander, was generell logisch ist, da ich ja die CSS Klasse "my-view-flex-container" nicht zuweise. Wenn ich dies mache zerhaut es aber leider die Navbar, hast du hier nen Tipp?

Hier ein Screenshot ohen CSS Klasse:

Mit CSS Klasse sieht es so aus:

Hier noch ein Screenshot von der View, welche eingebunden ist:

[Scrounger]

Der Trick hierbei ist, dass die View mit den Spalten als View ins view in widget 8 aufgenommen wird.

Ich hab das Beispiel Projekt um die TopAppBar erweitert, da siehst du wie ich es gemacht habe.
2019-12-31-responsive_example.zip

[Sempre]

@Scrounger

Danke für die Antwort, aber scheinbar stimmt mit dem Projekt noch etwas nicht, ich sehe zumindest keine TopAppBar und bin auch noch nicht ganz dahinter gestiegen wie du das machst.

Edit: Ich hab es nun doch verstanden, jedoch erscheinen die einzelnen Cards noch nicht auf der Main. Ich habe den Z-index oder sowas in Verdacht. Muss nun mal suchen wie ich das hinbekomme

[Sempre]

@Scrounger

Das mit dem "view in widget 8" funktioniert generell, bedeutet aber das ich für jeden Navigationspunkt eine zusätzliche View machen muss mit dem "view in widget 8" in welchem ich dann die eigentliche Gesamtview angebe richtig?
Den auf der Hauptview, welche in dem Projekt gestartet wird funktioniert das 3-spaltige Layout, gehe ich aber dann über den Navigationspunkt der TopAppBar stimmt es nicht mehr, da die View selber ja nur die normalen "view in widget" Widgets beinhaltet .

Das ist alles nicht so einfach scheint mir und bedeutet jede Menge umbau/arbeit. Vor allem wenn ich dann auch noch mit den Cards arbeite, denn für alles eine eigene Card macht es nicht "kleiner".

[Scrounger]

Hab jetzt ein Widget erstellt, wodurch man sich die Views für die Spalten sparen kann.
Alle Infos dazu findet ihr hier:

https://forum.iobroker.net/topic/26925/test-adapter-material-design-widgets-v0-2-x/364

[Sempre]

@Scrounger hab’s gesehen, vielen vielen Dank das ist top. Ich werde heute Abend mal schauen ob ich das Wideget einfach in meine aktuelle VIS bekomme. Ich werd dir dann Bescheid geben