Neuer Style: f18

[Thyraz]

Sehr fein, gerade erst den Thread entdeckt.

Besonders die Möglichkeit einfach und schnell zusätzlichen CSS Code mit anzugeben gefällt mir sehr gut.
Jetzt noch ein Save Button für die selbst erstellten Presets und als Auswahl ein DropDown statt den 3 festen Links und ich bin glücklich. 

Die Puristen mögen vor Schock in Ohnmacht fallen:
Eine etwas schlankere Schrift, helle Farben und ein wenig mehr Whitespace um die Elemente stehen dem Webinterface gar nicht schlecht.

Additional CSS:

Code Auswählen Erweitern


@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 300;
  src: local('Lato Light'), local('Lato-Light'), url(https://fonts.gstatic.com/s/lato/v14/S6u9w4BMUTPHh7USSwiPGQ3q5d0.woff2) format('woff2');
}

body, input, select, textarea {
    font-family: 'Lato';
    font-weight: 300;
    font-size: 17px;
}

div.pinHeader {
    color: white;
    height: 21px;
    border-radius: 5px 5px 0px 0px;
    padding: 5px 8px 5px 8px;
}

input, textarea {
    border-style: solid;
    border-width: 2px;
    border-color: #DDDDDD;
    border-radius: 5px;
}

svg:not([fill]):not(.jssvg) {
    fill: #666666;
}

table.room, table.block.wide, table.fileList {
    border-top: 0px;
    border-bottom: 0px;
}

table.block.wide td > div {
    padding: 4px;
}

div[class^="menu_"] {
    padding: 4px;
}

.handle {
    color: #666666 !important;
    border-radius: 15px;
    border: 2px solid;
}


Ist nur ein Schnellschuss.
Keine Ahnung wie das auf Mobilgeräten aussieht oder wie hässlich das eine oder andere Wecmd / Device dadurch wird.
Aber das lässt sich ja sicher alles lösen.

Anpassungen an der Oberfläche sind mit dem neuen Style aber auf alle Fälle recht einfach umzusetzen.

[rudolfkoenig]

Schick, ich werde vermutlich ein paar Ideen ins "default" uebernehmen.

Achtung: da ich von relativer auf "absolute" Positionierung umstellen will (bzw. muss), kann sein, dass sich an der Struktur was aendern wird.

[raiderxxl]

Sieht ein bisschen aus wie Tasmota

Grüßle

Pascal

[P.A.Trick]

Sieht ein bisschen aus wie Tasmota

Grüßle

Pascal

Stimmt aber Tasmota ist einfach, klar und angenehm. Warum also nicht!?

[The-Holgi]

Hallo Rudolf,
erstmal vielen Dank für das neue style. Gefällt mir sehr gut und funktioniert auch auf dem PC mit Chrome und Firefox ohne Probleme.
Auf dem iPad mit Safari, ist mir aufgefallen, das sich der "Zustand" der Schalter in der Raumansicht nicht ändert bzw sich erst nach reload des Browsers ändert.
Auf der device Ebene funktioniert es wie gewohnt.

Gruß Holgi

[rudolfkoenig]

Das Problem sollte nichts mit dem Style zu tun haben, oder ich muss was dazulernen.
Es wuerde helfen, die JS-Konsole zu sehen, das ist aber mW nur mit Safari auf dem Mac moeglich.

[Phill]

Also, es gab zumindest früher in den Einstellungen->Entwicklereinstellungen die Möglichkeit die Debugkonsole zu aktivieren.

[The-Holgi]

Das geht wohl nur, wenn man das iPad mittels Kabel an einen Mac anschließt und hier dann über Safari
das Menu Entwickler auf dem iPad aktiviert.
Habe leider keinen Mac.
Im alten dark style funktioniert die Anzeige übrigens.
Edit: Mit dem iPhone und webphone funktioniert es auch wie es soll.
Habe auf dem iPad ios 11.3 beta, womöglich liegt es daran.

[rudolfkoenig]

Was fuer ein iOS ist das, und wie ist die longpoll Verbindung?
Haben auch andere Probleme mit einem iOS Geraet? Komme gerade nicht an einem dran.

[The-Holgi]

Ist ios 11.3 beta. longpoll habe ich alle Einstellungen (0,1 und websocket) probiert.
Wäre ja interessant ob andere iPad user ohne beta version das gleiche Problem haben.

[Thyraz]

Ja: "normale" Tabellen haben mehr Inhalt pro Spalte, und viele Spalten mit viel Inhalt schaut auf einem schmalen Bildschirm haesslich aus. Vermutlich sollte ich die Abschaltung optional machen.

Ich vote mal dafür.

[Thyraz]

Hab beschlossen den minimalistischen weiß/blau Style von ein paar Posts weiter oben mal weiter zu treiben.
Menu ist nun dunkel, Slider haben ein neues Aussehen und diverse Feinkorrekturen.

Will den Thread hier aber nicht weiter zweckentfremden, daher bei Interesse hier klicken:
https://forum.fhem.de/index.php/topic,84760.0.html

[schwatter]

Hat jemand eine Idee, wie der Background nicht abgeschnitten wird? Bei langen Listen passiert das heraus scrollen.

[ToKa]

Hallo Rudi,

mit Hilfe des CSS-Attributs ist man ja in der Gestaltung super flexibel. Vielen Dank für den neuen Style.

Ich habe mir für das f18 nun auch eigene svg CSS Dateien angelegt, um z.B. die Schriftart identisch einzustellen. Das funktioniert alles sehr gut. Wenn ich aber mit dem Pin einen Plot zuklappe und dann wieder öffne, ist die Hintergrundfarbe des Plots die Standardfarbe gelb. Die Schriftart bleibt OK. Woran kann das liegen, es passiert nämlich nur im Chrome? Mit Edge gibt es den Effekt nicht und im IE 11 werde die Pins leider nicht angezeigt. Die Funktionalität des Pins ist zwar vorhanden, aber nach dem Zuklappen nicht mehr, so dass ein Aufklappen nicht möglich ist.

Eine weitere Auffälligkeit ebenfalls nur im Chrome (unter Win und Android, Cache bereits mehrfach geleert) habe ich noch beim Wechsel zwischen den Räumen. Es wird der neue Raum ganz kurz im default style angezeigt, bevor dann meine eigenen CSS Einstellungen greifen. Kann man das Verhindern?

Beste Grüße
Torsten

[rudolfkoenig]

Wenn ich aber mit dem Pin einen Plot zuklappe und dann wieder öffne,

Im "Normalzustand" kann man Plots nicht per Pin zuklappen, vermutlich das der zusaetzliche Mechanismus fuer das Problem zustaendig.

Es wird der neue Raum ganz kurz im default style angezeigt, bevor dann meine eigenen CSS Einstellungen greifen.

Mit f18 werden die einstellbaren CSS-Prameter per JavaScript gesetzt, nachdem die Seite fertig geladen ist. Wenn das laenger dauert, dann sieht man die Farben von defaultCommon.css was dem default Style entspricht. Ich habe vor ein "durchsichtiges" f18style.css zu bauen (und defaultCommon nicht mehr zu verwenden), damit das Flimmern nicht auffaellt. Es gibt natuerlich auch andere Loesungen, mit entsprechend mehr Aufwand.