v3.0.1 midi-icons von shutter/smallshut werden nicht immer "sauber" umgebrochen

[knx75knx]

Hallo zusammen,

ich bin u.a. mit smartVISU gerade frisch umgestiegen von v2.8 auf v3.0.1 und meine alle notwendigen Portierungen erfolgreich umgesetzt zu haben.
(Frisch umgestiegen = SmartHomeNG, smartVISU, Knxd, enocean & 1-wire auf einer neuen SD-Karte installiert nach Komplettanleitung von SmartHomeNG)

• Bei device.smallshut fällt mir jedoch auf, das die (midi) Buttons sich überlappen, wenn das Browserfenster zu klein wird.
  In der Größe mini klappt der Seitenumbruch wie erwartet.
• Bei deivce.shutter ragen die rechten beiden Buttons (pos1 & pos2) aus dem Block hinaus, bevor der Umbruch eingeleitet wird.

Zunächte dachte ich, das in meinem HTML Dateien etwas nicht richtig umgesetzt habe. Aber auch in den offiziellen Beispielen findet sich das Verhalten.

Hier im Forum hatte ich noch keinen Beitrag entdeckt, der sich mit diesem Phänomen beschäftigt hat.
Daher hier die Frage: Ist das noch ein Bug auf der css-Seite, oder liegt es doch in meiner Hand das mit style-Attributen auf der HTML-Seite in den Griff zu bekommen?

Das verhalten habe ich im Browser Safari von macOS und iOS, als auch unter Win10 mit Edge getestet.

Für einen Tipp wäre ich dankbar. Bin in der Welt der Webseitenprogrammierung nicht beheimatet,
was bedeutet das ein Durcharbeiten der Problematik ohne einen Tipp von Außen doch auch Tage in Anspruch nimmt.

Viele Grüße
Andre

Bildschirmfoto 2021-03-06 um 18.10.13.png

[wvhn]

Das smallshut Widget ist in der Tat nicht für midi Buttons ausgelegt. Einsatzzweck ist vor allem eine saubere Tabellendarstellung, in der man mehrere Shutter untereinander setzen kann. Das klappt bis zur Größe 'icon' ganz gut, aber auch das war aber schon eine langwierige Fummelei mit den css Styles und den Umbrüchen.

Wenn Du nur einen Shutter in dem Block hast, kannst Du die Beschriftung und die Buttons einzeln von Hand setzen. Da sind die Abstände flexibler.

Wenn Du überall die Größe midi verwendest, kannst Du alternativ in der visu.css die Breiten für die Klassen ui-shut-txt und ui-shut-btn verändern, um die Abstände der Buttons zu vergrößern.

Device.shutter muss ich mir ansehen. Generell ist die Größe midi halt ein Exot, der nirgends so recht ins Raster passt, insbesondere wenn das Design halbwegs responsive auch auf Tablets und Smartphones passen soll.

Gruß
Wolfram

P.S: wenn Du nur die 3 Buttons für den Shutter hast, ist eine Control Group vielleicht die beste Alternative. Siehe Inline Doku > Buttons # Grouping

[knx75knx]

Hallo Wolfram,

danke für die Hinweise 🤗.

Über mini und midi hab ich mir gar nicht groß Gedanken gemacht/getestet.
Habe mir die mini-buttons nur kurz angesehen und dachte mir, das die Wurstfinger besser zu Midi passen.
Das heißt aber nicht, das mini nicht genauso gut für mich funktionieren würden.
Ein kurzer Hinweis in der Doku das midi-buttons in Zusammenhang mit smallshut nicht vorgesehen sind, ist genauso hilfreich wie ausreichend 😀

Das mir der visu.css hab ich noch nicht verstanden. Ich rate jetzt mal: Die visu.css ist optional und kann Einstellungen auf globaler Ebene vornehmen, die ich ansonsten extra in jeder einzelnen html pflegen müsste?!

Zu device.shutter muss ich noch dazusagen, das ich (unfairer Weise) beide shutter in eine Table gepackt habe, um sie nebeneinander darzustellen.
Wenn ich jeden Shutter in einen Block packe, sieht der Umbruch ganz ordentlich aus !

Ich habe jetzt erstmal jetzt alle smallshut-Rolläden in die Group-Variante umgepackt. Das smallshut-Thema ist damit für mich erstmal erledigt.👍


Gruß
Andre

[wvhn]

Hallo Andre,

die meisten Stile der Visu sind global in der ./pages/base/base.css definiert, nicht in den htmls. In der visu.css im Ordner Deiner Visu-Seiten kannst Du zusätzliche Stile definieren oder vorhandene überschreiben. Das hat den Vorteil, dass dies bei einem Update der SV erhalten bleibt - im Gegensatz zu eigenen Änderungen an den "offiziellen" Dateien. Die Änderungen gelten dann global, sofern Du sie nicht mit bestimmten Tag-IDs verknüpfst.

Mit den Stilen kannst Du spielen, indem Du im Browser mit Rechtsklick auf einen der Buttons klickst und "dieses Element untersuchen" auswählst. Es öffnen sich dann die Entwicklertools. Du kannst dort sehen, wo welche Eigenschaften des Elements definiert sind und kannst diese auch live verändern. Letzteres allerdings nur für die aktuelle Anzeige, d.h. die Quellen werden nicht verändert.

Wenn man mehrere Shutter in einem Block anzeigen will, kann man das shutter-Widget aus dem example3 verwenden, das auf Github auch im Repository "smartvisu-newstuff" zu finden ist. Shutter.two ist z.B. auf zwei Shutter in einem Block ausgelegt, shutter.three auf drei. Ob das für die Wurstfinger-Buttons auch passt, müsstest Du ausprobieren

Gruß
Wolfram