Neuer Style: flex. Flexibel für alle Geräte

[choetzu]

Was stellst du dir genau vor unter "Individualisierung" vor? Frei definierbare Icons/Commands

Nein, dass man die Standarticons ändern kann im Menu, siehe Bild 1

Und für was ein Home icon

so ähnlich wie im Darkstyle, dort gibt es ein Logo(Hier FHEM). Dies ist in deinem Style nicht vorgesehen. Aber das ist nun wirlich nice to have...
Edit: uns so siehst du auch, was ich mit den Rundungen in der Navi, resp. Menue gemeint habe

[FunkOdyssey]

Ich habe heute erstmals dein Skin getestet und bin begeistert.
Ein spiele gerade ein wenig mit dem font-weight rum, da mir die Schrift teilweise zu fett ist. Besteht die Möglichkeit, in der Raumansicht den Fettdruck optional zu machen, aber in der Detailansicht (zur Abgrenzung der Internals & Co.) den Fettdruck aktiv zu lassen oder eine alternative Hervorhebung der ersten Spalte? Ich schätze, dass das schwierig werden könnte, oder?

Die Schriftgröße in den SVG-Plots finde ich sehr extrem und weicht irgendwie vollständig vom Rest ab. Kann man da noch etwas machen?

Siehe:

Code Auswählen Erweitern

#svg_title .title
.legend
.y2label und .ylabel

Kann man bei den table.room evtl. ein "margin-bottom: 1em;" einbauen, um die Blöcke im Menü voneinander abzugrenzen?



Nachtrag:
Abgesehen von der globalen Skalierung hat man auf die Schriftgrößen kleinen Einfluss, oder?
Ist so etwas in FHEMWEB realisierbar?

Noch eine Frage:
Könnte man die Menüpunkt mit einer Linie voneinander abgrenzen?

Folgendes sieht zu massiv aus:

Code Auswählen Erweitern

.room tr, .room tr td {
    display: block;
    border-bottom: 1px solid #ddd;
}

Und hiermit bekommt man Probleme mit den Untermenüs:

Code Auswählen Erweitern

#menu div {
    padding: 4px 8px;
    border-bottom: 1px solid #ddd;
}

Aber nur eine Idee.

[xanker]

Nein, dass man die Standarticons ändern kann im Menu, siehe Bild 1

Ich stehe auf dem Schlauch, wo sind da Icons auf deinem Screenshot?

so ähnlich wie im Darkstyle, dort gibt es ein Logo(Hier FHEM). Dies ist in deinem Style nicht vorgesehen. Aber das ist nun wirlich nice to have...

Hmm, generell kein Problem, fraglich ist nur wie/wo ich das integrieren soll. Die Menu Header hat (aus optischen Gründen) die gleiche Höhe wie die Commandline. Wenn man dort ein Logo unterbringt sieht das doch nicht mehr schön aus
Ich könnte es darunter platzieren, also zwischen den Menu Icons und den Raum-Blöcken, oder hast du einen Vorschlag?

Edit: uns so siehst du auch, was ich mit den Rundungen in der Navi, resp. Menue gemeint habe

Ich verstehe, aber mein Menü ist ja ganz anders aufgebaut, die Blöcke sind ja nur durch eine Linie getrennt, und eine Linie kann man ja schlecht abrunden 

[choetzu]

Ich stehe auf dem Schlauch, wo sind da Icons auf deinem Screenshot?

sorry die Verwirrung. Ich meine die Menue Icons .. Nun mit hoffentlich richtigem Screenprint

oder hast du einen Vorschlag?

Oder du machst das neue Home- Icon auf die Höhe der Commandline, gibst ein paar pixel an Höhe (nicht viel) und setzt die Menue-Icons etwas kleiner und vor die Raumübersicht... Das müsste man mal checken, ob dies optisch was hergibt. Wenn nicht, dann lieber drauf verzichten.. wie gesagt, nice to have

EDIT: Suboptima, da das Home_Icon dann auf Mobile nur ersichtlich ist, wenn man das Menue aufmacht. Evtl. wäre noch eine Option rechtsbündig bei der Commandline.. Aber ob das gut aussieht?

[xanker]

Ich habe heute erstmals dein Skin getestet und bin begeistert.

Das freut mich 

Ein spiele gerade ein wenig mit dem font-weight rum, da mir die Schrift teilweise zu fett ist. Besteht die Möglichkeit, in der Raumansicht den Fettdruck optional zu machen, aber in der Detailansicht (zur Abgrenzung der Internals & Co.) den Fettdruck aktiv zu lassen oder eine alternative Hervorhebung der ersten Spalte? Ich schätze, dass das schwierig werden könnte, oder?

Da du erste bist, baue ich das mal nicht fest ein, aber du erreichst das, mit folgendem CSS

Code Auswählen Erweitern

.roomoverview .odd > td:nth-child(1), .roomoverview .even > td:nth-child(1) { font-weight: normal }

Die Schriftgröße in den SVG-Plots finde ich sehr extrem und weicht irgendwie vollständig vom Rest ab. Kann man da noch etwas machen?

Naja, das hängt halt mit der Skalierung zusammen. Du kannst das Skalieren auch deaktivieren, indem du plotMinWidth/plotMaxWidth auf den gleichen Wert setzt (z.B. 800px). Die Größe des Plot Inhalts (also Liniendicke und Schriftgröße) und das Seitenverhältnis kannst du mit dem plotsize-Attribut (vom FHEMWEB device) beeinflussen. Wobei kleinere Werte in einen größeren Inhalt resultieren...einfach mal rumtesten.

Kann man bei den table.room evtl. ein "margin-bottom: 1em;" einbauen, um die Blöcke im Menü voneinander abzugrenzen?

Da überlege ich mir was, das werde ich irgendwie optional einbinden.

Abgesehen von der globalen Skalierung hat man auf die Schriftgrößen kleinen Einfluss, oder?
Ist so etwas in FHEMWEB realisierbar?

Generell könnte man natürlich die Schriftgröße per CSS (im FHEMWEB Device) ändern, allerdings ist das Layout so designed, dass die Widgets der Schrifthöhe gleich sind. Wenn man also nur die Schriftgröße ändert, hätte das unschöne Effekte, daher gibt es die "scalePage" Option. Was würdest du dir denn genau vorstellen?

Noch eine Frage:
Könnte man die Menüpunkt mit einer Linie voneinander abgrenzen?

Hmm, also mit Linien wäre das nicht gut, da die Blöcke ja schon mit einer Linie getrennt werden. Man könnte aber eine Zeilen-Färbung machen:

Code Auswählen Erweitern

.room tr:nth-child(2n) { background: #888 }
Die Farbe müsstest du natürlich manuell anpassen

[choetzu]

ui, mir ist noch was aufgefallen. Bei meinem Style ist die Iconwahl ein Graus... siehe Bild. Wie kann ich das ändern? oder ist das ein Bug?

lg c

[xanker]

EDIT: Suboptima, da das Home_Icon dann auf Mobile nur ersichtlich ist, wenn man das Menue aufmacht. Evtl. wäre noch eine Option rechtsbündig bei der Commandline.. Aber ob das gut aussieht?

Hmm...also ich sehe das schon richtig, dass es dir nur darum geht irgendwo ein kleines Logo zu platzieren? Ich überlege mir was...aber das Layout ist absolut nicht darauf ausgelegt...

ui, mir ist noch was aufgefallen. Bei meinem Style ist die Iconwahl ein Graus... siehe Bild. Wie kann ich das ändern? oder ist das ein Bug?

So sollte das nicht aussehen
Habe ich gefixed, ob du damit aber zufrieden bist? 
Es ist halt allgemein problematisch bei sooooo vielen Icons eine übersichtliche Darstellung zu finden.

[FunkOdyssey]

Da du erste bist, baue ich das mal nicht fest ein, aber du erreichst das, mit folgendem CSS

Code Auswählen Erweitern

.roomoverview .odd > td:nth-child(1), .roomoverview .even > td:nth-child(1) { font-weight: normal }

Danke. Hast du Lust den Link "additional CSS" wie im f18-Skin einzubauen. Dann spart man sich (auch bei weiteren Änderungen) den Weg zum FHEMWEB-Device.

Naja, das hängt halt mit der Skalierung zusammen. Du kannst das Skalieren auch deaktivieren, indem du plotMinWidth/plotMaxWidth auf den gleichen Wert setzt (z.B. 800px). Die Größe des Plot Inhalts (also Liniendicke und Schriftgröße) und das Seitenverhältnis kannst du mit dem plotsize-Attribut (vom FHEMWEB device) beeinflussen. Wobei kleinere Werte in einen größeren Inhalt resultieren...einfach mal rumtesten.

Nee, das war es leider nicht bzw. nicht direkt. Das SVG ist eigentlich auch in Ordnung. Legende habe ich dank deiner Tipss passend bekommen. Aber das Label oberhalb des SVGs ist riesig.

Da überlege ich mir was, das werde ich irgendwie optional einbinden.

Danke. Es gibt nämlich bestimmt ein paar Anwender mit mehreren Blöcken.

Generell könnte man natürlich die Schriftgröße per CSS (im FHEMWEB Device) ändern, allerdings ist das Layout so designed, dass die Widgets der Schrifthöhe gleich sind. Wenn man also nur die Schriftgröße ändert, hätte das unschöne Effekte, daher gibt es die "scalePage" Option. Was würdest du dir denn genau vorstellen?

Das wird zu komplex. Am besten auch per "additional CSS" übers FHEMWEB-Device.
Ich frage, weil mir die Schrift in vielen Styles viel zu groß ist. Das Menü benötigt auch einfach zu viel Platz. Ich habe mir damit beholfen, die Schriftgröße von 1.2em auf 1em zu ändern.

Code Auswählen Erweitern

#menu a {
    text-decoration: none;
    font-size: 1em;
    display: block;
    cursor: pointer;
}

Hmm, also mit Linien wäre das nicht gut, da die Blöcke ja schon mit einer Linie getrennt werden. Man könnte aber eine Zeilen-Färbung machen:

Code Auswählen Erweitern

.room tr:nth-child(2n) { background: #888 }
Die Farbe müsstest du natürlich manuell anpassen

Guter Tipp. Das macht jedoch spätestens beim ersten Untermenü Probleme, da die Alternierung dann nicht mehr passt. Ich werde mir selber etwas einfallen lassen. Danke.

[choetzu]

Hmm...also ich sehe das schon richtig, dass es dir nur darum geht irgendwo ein kleines Logo zu platzieren?

Ja, im Grunde schon. Doch ein Logo macht natürlich nur an prominenter Stelle Sinn.

Habe ich gefixed, ob du damit aber zufrieden bist? 

und ob. So passt es bestens!!! Herzlichen Dank Meister..

[xanker]

Danke. Hast du Lust den Link "additional CSS" wie im f18-Skin einzubauen. Dann spart man sich (auch bei weiteren Änderungen) den Weg zum FHEMWEB-Device.

Erledigt.

Nee, das war es leider nicht bzw. nicht direkt. Das SVG ist eigentlich auch in Ordnung. Legende habe ich dank deiner Tipss passend bekommen. Aber das Label oberhalb des SVGs ist riesig.

War in der Tat zu groß, danke, ist erledigt.

Ich frage, weil mir die Schrift in vielen Styles viel zu groß ist. Das Menü benötigt auch einfach zu viel Platz. Ich habe mir damit beholfen, die Schriftgröße von 1.2em auf 1em zu ändern.

Und was spricht dagegen alles kleiner zu skalieren? Oder hatte sich das mit der Schriftgröße jetzt explizit nur auf das Menü bezogen?

Habe einen Margin zu den Menü Blöcken hinzugefügt, gibt schon Sinn...

[choetzu]

xanker, geht bei dir die Räumesortierung problemlos? Ich habe auf Mac (safari/chrome/) und iPhone 8 (safari/chrome) getestet. Im Verschiebmodus ist der Cursor weiter unten als der Platz, wo es hinverschoben wird... Zudem habe ich Probleme einen Raum zu unterst vor einem Strich zu platzieren.. Bei dir auc?

Sorry, hoffentlich verständlich...

[xanker]

xanker, geht bei dir die Räumesortierung problemlos? Ich habe auf Mac (safari/chrome/) und iPhone 8 (safari/chrome) getestet. Im Verschiebmodus ist der Cursor weiter unten als der Platz, wo es hinverschoben wird... Zudem habe ich Probleme einen Raum zu unterst vor einem Strich zu platzieren.. Bei dir auc?

Joa, am PC funktioniert das etwas merkwürdig. Unter Android mit Touch funktioniert es hingegen optimal wie es sein soll. Ich vermute es hat was mit dem jquery Touch Punch Plugin zu tun (welches nötig ist für die korrekte Touch Steuerung). Ich werde das nochmal testen

[Gisbert]

Hallo Sebastian,

eine Merkwürdigkeit mit einem aktuellem Fhem incl. deinem style - es werden angepasste und zu große (zumindestens fürs Handy) angezeigt, s. Anhang, das gleiche gibt es auch in anderen Räumen.

Noch eine kleine Beobachtung. Wenn man eine Seite neu lädt auf dem Handy, dann springen die Einträge kurz in die falsche Ecke, dann in die richtige. Bei der Hintergrundfarbe der Diagramme lugt manchmal die hellgelbe Farbe des Standard-Fhem hervor.

Viele​ Grüße​ Gisbert​

[choetzu]

Hey Gisbert, hatte ich auch nach dem Update. Bei mir hat Cache-Löschen abhilfe gebracht!!

Lg C

[Gisbert]

Hallo choetzu,

das Cache leeren war es leider noch nicht, da muss wohl xanker ran.
In Chrome und Firefox tritt das identische Verhalten auf, und witzigerweise in Firefox auf dem PC/Large Screen ist die Größe genau andersherum.
Was auf dem Handy klein (gwünscht) ist, ist auf dem Desktopbildschirm groß und vice versa.

Viele Grüße Gisbert