Autor Thema: Neuer Style: flex. Flexibel für alle Geräte  (Gelesen 35878 mal)

Offline the ratman

  • Hero Member
  • *****
  • Beiträge: 2263
  • cosmoprolet & intelligenzdiabetiker
Antw:Neuer Style: flex. Flexibel für alle Geräte
« Antwort #630 am: 21 November 2019, 12:27:09 »
hiho,
da ich flex mittlerweile auch ernsthaft verwende, weil das ding einfach x mal besser als mein eigenes skin ist, fällt mir leider ne kleinigkeit auf:

ich verwende das modul proplanta mit 14 tage-vorhersage. beim auflisten des moduls kriegt er scheints timeouts. es erscheint (meist 2 mal) ein gelbes banner mit der frage, ob abgewartet oder abgebrochen werden soll. das laden der seite dauert ne halbe ewigkeit. wenn man mal "performance verbessern" anklickt, gehts problemlos auf meinem pc mit firefox.
könnte man da was dran drehen? ich denke, die java-scripten, die da ausgestellt werden, werden an anderer stelle benötigt, oder?

btw - auswirkungen (bis auf die wartezeit) hat das scheints keine weiteren auf fhem - somit ists nicht wirklich lebenswichtig, sondern eher als frage zu sehen.
→do↑p!dnʇs↓shit←

Offline PatrickR

  • Developer
  • Sr. Member
  • ****
  • Beiträge: 750
Antw:Neuer Style: flex. Flexibel für alle Geräte
« Antwort #631 am: 25 November 2019, 11:19:36 »
Hi!

Erstmal noch einen Herzlichen Dank für das Skin. Damit kommt FHEM endlich auch visuell in der heutigen Zeit an.

Aktuell steige ich von Chrome auf Firefox um und habe das Problem, dass die Darstellung von SVGs (in Gruppen) nicht korrekt ist. Der Titel wird in font-family: Times dargestellt und die Beschriftung der X-Achse ist nur noch in Ansätzen erkennbar. Unter Chromium sieht auf dem gleichen System alles perfekt aus.

Patrick
lepresenced - Tracking von Bluetooth-LE-Tags (Gigaset G-Tag) mittels PRESENCE

"Programming today is a race between software engineers striving to build bigger and better idiot-proof programs, and the universe trying to produce bigger and better idiots. So far, the universe is winning." - Rich Cook

Offline binford6000

  • Tester
  • Hero Member
  • ****
  • Beiträge: 1197
  • 🏠⚙️💡🛠📱
Antw:Neuer Style: flex. Flexibel für alle Geräte
« Antwort #632 am: 26 November 2019, 11:32:48 »
Hallo,
ich habe auch noch etwas gefunden. Beim Modul "MSwitch" wird die Liste der Geräte falsch dargestellt.

VG Sebastian
Proxmox mit: mariaDB, nextcloud, fhem, pihole, docker, bitwarden
fhem mit: deconz, CUL via ser2net, SONOS, alexa-fhem, homebridge, TelegramBot mit msgDialog, livetracking
Testumgebung: docker pull fhem/fhem

Offline PSI69

  • Full Member
  • ***
  • Beiträge: 172
Antw:Neuer Style: flex. Flexibel für alle Geräte
« Antwort #633 am: 26 November 2019, 12:47:52 »
Ich habe auch noch 'einen':

Der DEF Editor bei DOIFs ist von der Größe nicht mehr skalierbar - ich habe mir da gestern 'den Wolf' gescrollt und es war schwierig den Überblick im Code zu behalten (Catalina mit Firefox & Safari getestet, flex-Layout ist 2-spaltig).

Peter
FHEM 5.9 auf RPi 4 unter Buster mit inzwischen einem ganzen Zoo von Geräten...

Offline 16-BitMan

  • New Member
  • *
  • Beiträge: 9
Antw:Neuer Style: flex. Flexibel für alle Geräte
« Antwort #634 am: 26 November 2019, 13:22:36 »
Erstmal danke für diesen MEGA Style ;D.
Ich habe ein Problem mit "WEBLINKk" und "IFRAME". Wenn ich einen Raum betrete der z.B. das Webinterface meines Logitech Media Servers als IFRAME aufruft, öffnet sich der Raum nicht. Das FHEM Häuschen ist zu sehen und der Ladekreis dreht sich unendlich. Wenn man im Browser das Laden unterbricht, dann wird die Seite angezeigt. Gleiches Problem habe ich mit meinen WebCams die auch per IFRAME und WEBLINK dargestellt werden.

RAW als Beispiel:

defmod Tor_Kamera weblink iframe http://192.168.xxx.xxx:1234/videostream.cgi?user=xxx&pwd=xxx&resolution=32&rate=11
attr Tor_Kamera alias CAM
attr Tor_Kamera htmlattr width="640" height="480" frameborder="0" marginheight="0" marginwidth="0"  -webkit-border-radius: 10px;; -moz-border-radius: 10px;; border-radius: 10px;;"
attr Tor_Kamera room Toreinfahrt,WebCam

Ich hoffe jemand hat eine Lösung, denn der Style ist echt der HAMMER ;D

Offline Gisbert

  • Hero Member
  • *****
  • Beiträge: 1608
  • Das Ziel ist das Ziel !
Antw:Neuer Style: flex. Flexibel für alle Geräte
« Antwort #635 am: 28 November 2019, 07:03:52 »
Hallo,

ich nutze diesen Style auf dem Handy ausschließlich, d.h. nichts anderes mehr.
Mir ist aufgefallen, dass die vor/zurück kleiner/größer Buttons im Querfornat oberhalb der Diagramme ungünstig angeordnet sind, obwohl gerade im Querfirmat genügend Platz für eine einzeilige Anordnung ist.
Im Hochformat ist es einzeilig und wohl proportioniert.

Viele​ Grüße​ Gisbert​
Aktuelles Fhem auf HP ThinClient T610 | Debian10 | UniFi-Controller | Homematic, VCCU, HMUART | ESP8266, Platinen von Papa Romeo | Sonoff | 1-Wire-Temperatursensoren | Wlan-Kamera | SIGNALduino, Flamingo Rauchmelder FA21RF

Offline FunkOdyssey

  • Hero Member
  • *****
  • Beiträge: 1915
Antw:Neuer Style: flex. Flexibel für alle Geräte
« Antwort #636 am: 28 November 2019, 08:46:42 »
Nur zur Info: Das ist nicht nur auf dem Handy.

Offline 16-BitMan

  • New Member
  • *
  • Beiträge: 9
Antw:Neuer Style: flex. Flexibel für alle Geräte
« Antwort #637 am: 02 Dezember 2019, 14:08:05 »
Hallo,

ich nutze diesen Style auf dem Handy ausschließlich, d.h. nichts anderes mehr.
Mir ist aufgefallen, dass die vor/zurück kleiner/größer Buttons im Querfornat oberhalb der Diagramme ungünstig angeordnet sind, obwohl gerade im Querfirmat genügend Platz für eine einzeilige Anordnung ist.
Im Hochformat ist es einzeilig und wohl proportioniert.

Viele​ Grüße​ Gisbert​

Dafür habe ich als Workaround folgendes in die "Additional CSS code" settings des Styles eingetragen:

.roomoverview .odd > td.containsPlot .SVGlabel,.roomoverview .even > td.containsPlot .SVGlabel {
   width: 300px;

}

Funktioniert zu mindestens bei mir als workaround beim Android Tablet und IPhone. ;D
Hat jemand schon eine Idee wegen des Ladebildes bei WEBLINK IFRAME?

P.S. Hmmm, habe gerade festgestellt das auf meinem IPhone 6S (IOS13) die Iframes angezeigt werden... Microsoft Edge will am PC die Streams der WebCam downloaden und abspeichern... Ist ja schon mal ein Anhaltspunkt für mich als Leien..
« Letzte Änderung: 02 Dezember 2019, 14:24:26 von 16-BitMan »

Offline Gisbert

  • Hero Member
  • *****
  • Beiträge: 1608
  • Das Ziel ist das Ziel !
Antw:Neuer Style: flex. Flexibel für alle Geräte
« Antwort #638 am: 02 Dezember 2019, 19:37:53 »
Hallo 16-BitMan,

ich hab's eingetragen und Fhem gespeichert, allerdings sehe ich keine Veränderung.
Muss man Fhem neu starten, damit die Änderung wirksam wird? Das würde ich nicht erwarten, dass dies bei einer Änderung eines Attributes eines Devices notwendig ist.

Viele​ Grüße​ Gisbert​
Aktuelles Fhem auf HP ThinClient T610 | Debian10 | UniFi-Controller | Homematic, VCCU, HMUART | ESP8266, Platinen von Papa Romeo | Sonoff | 1-Wire-Temperatursensoren | Wlan-Kamera | SIGNALduino, Flamingo Rauchmelder FA21RF

Offline 16-BitMan

  • New Member
  • *
  • Beiträge: 9
Antw:Neuer Style: flex. Flexibel für alle Geräte
« Antwort #639 am: 02 Dezember 2019, 20:03:51 »
(https://uploads.tapatalk-cdn.com/20191202/06f6b46d275567470b55d1fd7543d0bc.jpg)

Nicht als Attribut im SVG sondern in den Skineinstellungen des Flex Stylesals. (Bild)

So sieht’s danach aus...

(https://uploads.tapatalk-cdn.com/20191202/8d01e6f4fd22f4b97dd7029cd131b4a3.jpg)


Gesendet von iPhone mit Tapatalk

Offline Gisbert

  • Hero Member
  • *****
  • Beiträge: 1608
  • Das Ziel ist das Ziel !
Antw:Neuer Style: flex. Flexibel für alle Geräte
« Antwort #640 am: 03 Dezember 2019, 07:36:13 »
Hallo 16-Bitman,

das ist schon klar, an welcher Stelle ich den additional CSS code eingeben muss. Ich hatte da schon 2 Zeilen eingetragen, um die Schriftgrößen der Bildüber- und -unterschriften anzupassen.

So sieht der Eintrag bei mir aus:
.SVGlabel:not([data-name=svgZoomControl]) a { font-weight: normal;; font-size: 0.7em;; }
.SVGplot text.title { font-weight: normal }
.roomoverview .odd > td.containsPlot .SVGlabel,.roomoverview .even > td.containsPlot .SVGlabel {
   width: 300px;

}

Muss da noch was verändert werden?
Viele​ Grüße​ Gisbert​
Aktuelles Fhem auf HP ThinClient T610 | Debian10 | UniFi-Controller | Homematic, VCCU, HMUART | ESP8266, Platinen von Papa Romeo | Sonoff | 1-Wire-Temperatursensoren | Wlan-Kamera | SIGNALduino, Flamingo Rauchmelder FA21RF

Offline Gisbert

  • Hero Member
  • *****
  • Beiträge: 1608
  • Das Ziel ist das Ziel !
Antw:Neuer Style: flex. Flexibel für alle Geräte
« Antwort #641 am: 03 Dezember 2019, 07:44:31 »
Noch als Ergänzung, selbst wenn ich meine 2 Zeile zur Änderung der Schriftgrößen der Bildüber/unterschrift lösche, ändert sich die Darstellung des plot control Rahmens nicht.
Aktuelles Fhem auf HP ThinClient T610 | Debian10 | UniFi-Controller | Homematic, VCCU, HMUART | ESP8266, Platinen von Papa Romeo | Sonoff | 1-Wire-Temperatursensoren | Wlan-Kamera | SIGNALduino, Flamingo Rauchmelder FA21RF

Offline 16-BitMan

  • New Member
  • *
  • Beiträge: 9
Antw:Neuer Style: flex. Flexibel für alle Geräte
« Antwort #642 am: 03 Dezember 2019, 08:54:25 »
Noch als Ergänzung, selbst wenn ich meine 2 Zeile zur Änderung der Schriftgrößen der Bildüber/unterschrift lösche, ändert sich die Darstellung des plot control Rahmens nicht.

Du hast recht, meine SVG war schon in einer Gruppenzuordnung. Eine SVG ohne Gruppenzuordnung braucht noch folgenden Eintrag in der additional CSS:


.roomoverview .odd > td.containsPlot .SVGlabel,.roomoverview .even > td.containsPlot .SVGlabel {
   width: 300px;

}

.SVGlabel[data-name=svgZoomControl] {
    max-width: 300px;
}



Nu stimmt die Ansicht bei mir unter IE EDGE, Chrome 78.0.3904.108 (Offizieller Build) (64-Bit), IOS 13 und Android 5.1.

Nu muss ich nur noch das Problem mit den Ladebildschirm bei meiner WebCam hinbekommen. ::)

Offline Gisbert

  • Hero Member
  • *****
  • Beiträge: 1608
  • Das Ziel ist das Ziel !
Antw:Neuer Style: flex. Flexibel für alle Geräte
« Antwort #643 am: 03 Dezember 2019, 18:44:27 »
Hallo 16-BitMan

so funktioniert es, und ich habe aus den ersten 300px 360px gemacht, was den schönen Effekt hat, dass die Scroll bar genauso breit wie die Diagramme ist.
Das ist für das Hochformat so, für das Querformat sieht die Scroll bar schon gut aus, lediglich die Länge ist jetzt kürzer wie die Diagramme.
Kann man das auch anpassen?

Viele​ Grüße​ Gisbert​

.roomoverview .odd > td.containsPlot .SVGlabel,.roomoverview .even > td.containsPlot .SVGlabel { width: 360px; }
.SVGlabel[data-name=svgZoomControl] { max-width: 360px; }
Aktuelles Fhem auf HP ThinClient T610 | Debian10 | UniFi-Controller | Homematic, VCCU, HMUART | ESP8266, Platinen von Papa Romeo | Sonoff | 1-Wire-Temperatursensoren | Wlan-Kamera | SIGNALduino, Flamingo Rauchmelder FA21RF

Offline 16-BitMan

  • New Member
  • *
  • Beiträge: 9
Antw:Neuer Style: flex. Flexibel für alle Geräte
« Antwort #644 am: 04 Dezember 2019, 10:33:54 »
Hallo 16-BitMan

so funktioniert es, und ich habe aus den ersten 300px 360px gemacht, was den schönen Effekt hat, dass die Scroll bar genauso breit wie die Diagramme ist.
Das ist für das Hochformat so, für das Querformat sieht die Scroll bar schon gut aus, lediglich die Länge ist jetzt kürzer wie die Diagramme.
Kann man das auch anpassen?

Viele​ Grüße​ Gisbert​

.roomoverview .odd > td.containsPlot .SVGlabel,.roomoverview .even > td.containsPlot .SVGlabel { width: 360px; }
.SVGlabel[data-name=svgZoomControl] { max-width: 360px; }

Versuch mal:

.roomoverview .odd > td.containsPlot .SVGlabel,.roomoverview .even > td.containsPlot .SVGlabel { width: -webkit-fill-available; }
.SVGlabel[data-name=svgZoomControl] { max-width: -webkit-fill-available; }

Ich habe leider diese Woche wohl keine Zeit mehr zu testen.

LG