Neuer Style: f18

tomspatz · 01 August 2018, 10:41:07

Zitat
@ToM_Tom, @tomsspatz, @DarkT, @Amenophis86: bin nicht sicher, ob es euch bewusst ist, dass in der alten Version der Inhalt nicht ganz auf dem Bildschirm passt, und man rechts scrollen kann/muss.

Meine Meinung:
Auf dem Tablett, oder ganz besonders auf dem Smartphone, verzichte ich bewusst auf alles mögliche an, Details, Einstellungen etc. Halte dort nur das was absolut nötig ist für die Bedienung die man, oder frau

mit einem Smartphone tun sollte, dürfte.

So gibt es eine aufgeräumte Bedienoberfläche auf dem Smartphone. Programmierungen etc. gehören in Ruhe am Schreibtisch.

jetzt steinigt mich

LG
Tom

Amenophis86 · 01 August 2018, 12:06:03

Ich steinige dich nicht, sondern stimme dir zu. Aber ab und an will man trotzdem mal schnell ein Blick auf ein bestimmtes Reading werfen, weil man zB nur mit dem Handy an dem Standort sehen kann, ob es sich auch verändert, wenn ich zB einen Bewegungsmelder teste oder so. Daher sollte es die Möglichkeit der Detailansicht geben. Für die reine Bedienung, welche du meinst sehe ich eher Dinge wie FTUI für Zuständig.

@Rudi: Nein war mir nicht bewusst, aber ich finde es so trotzdem angenehmer. Es sieht einfach aufgeräumter aus. Alternative wäre, dass man die Sortierung ändern, Name des Readings oben, Inhalt des Readings darunter. Ist natürlich wesentlich mehr Aufwand und es geht hier "nur" um Ästhetik.

tomspatz · 01 August 2018, 12:12:21

ZitatDaher sollte es die Möglichkeit der Detailansicht geben.

ganz einfache Kiste zweite WEB Instanz.

@rudolfkoenig
Wenn ich einen Wunsch zu f18 frei hätte.....
Preset colours: default light dark custom

LG
Tom

ToM_ToM · 01 August 2018, 12:35:02

Zitatbin nicht sicher, ob es euch bewusst ist, dass in der alten Version der Inhalt nicht ganz auf dem Bildschirm passt, und man rechts scrollen kann/muss.

Doch, das habe ich in einem Raum. Finde das aber okay. Ich sehe das als Backend und nicht als System wo man permanent etwas schaltet. Aber es ist sicher Geschmackssache.
In Entwicklungsumgebungen wie Visual Studio, Eclipse, etc... kann man ja auch den automatischen Zeilenumbruch einstellen. Ich persönlich nutze das dort aber nicht, da es für mich schwieriger lesbar ist.
Mag aber sein dass einige die Variante mit dem Umbruch schöner finden. Wird also Geschmackssache sein und bleiben.

blecher-at · 01 August 2018, 19:09:04

Zitat von: rudolfkoenig am 01 August 2018, 08:58:59
@blecher-at: habs versucht f18style.css nach deiner Anleitung umzubauen, aber damit sind die Spalten 3+ auch in landscape weg. Vielleicht habe ich die Anleitung schlecht umgesetzt, kannst du bitte einen konkreten Patch schicken.Ich wuerde die Klasse small auf body aber weiterhin behalten.

Im angehängten Patch hängt es jetzt korrekterweise an breite und landscape mode.
Ein paar andere Verbesserungen sind noch drinnen
- paddings verhalten sich jetzt korrekt (v.a. im fixed mode), icons sind vertikal korrekt zentriert
- column collapsing habe ich als config switch eingebaut (die meinugen im forum was schöner ist gehen ja auseinander - nun ist es ein switch am room)
- fixedInput mit css gelöst, nicht mit js, damit braucht man den hack ("// Wonder, why its needed") nicht mehr

jkriegl · 02 August 2018, 16:14:26

Bekomme jetzt bei SVGs graue horizontale Scrollbalken obwohl genug Platz vorhanden ist. Erst wenn man noch breiter macht, verschwinden diese.
plotsize 480,240, Passt das Ganze nicht ins Fenster ist unten ein aktiver Scrollbalken. (firefox)

rudolfkoenig · 03 August 2018, 12:17:03

@blecher-at: ich habe generell Probleme mit Patches der Sorte "fixt alles / aendert vieles", weil ich die Auswirkung jeder Zeile verstehen will. Da ich Deine Hilfe aber schaetze, habe ich es versucht zu uebernehmen.

Folgendes habe ich geandert:- Text und Voreinstellung fuer wrapped. Laut Feedback hier ist "die meinugen [...] gehen ja auseinander" euphemistisch

- das Logo haengt 1-2 Pixel noch weiter runter, das habe ich zum Anlass genommen, Logo und Menu Position anzupassen.
- es gibt keinen vertikalen Abstand mehr zwischen den Menu-Abschnitten. Das vermisse ich zwar, aber da ich nach 10Minuten nicht rausgefunden habe, wer dafuer zustaendig ist, habe ich es gelassen.
Unter iOS/Safari mit fixedInput hat das Logo position:absolute, was zu einer falschen Animation beim vertikalen scrollen fuehrt, das muss ich noch anschauen.

@jkriegl: ich kann es nicht nachstellen. Der SVG muss in einer Gruppe sein, und ich vermute, es wurde vorher per dragging bewegt. Stoert unter iOS/Android/OSX kaum, da hier die Scrollbars nur beim Scrollen eingeblendet werden. Falls ich es naeher anschauen soll, bitte mir eine genaue Anlietung fuers Nachstellen geben.

blecher-at · 04 August 2018, 23:33:52

Zitat von: rudolfkoenig am 03 August 2018, 12:17:03
@blecher-at: ich habe generell Probleme mit Patches der Sorte "fixt alles / aendert vieles", weil ich die Auswirkung jeder Zeile verstehen will. Da ich Deine Hilfe aber schaetze, habe ich es versucht zu uebernehmen.

Folgendes habe ich geandert:- Text und Voreinstellung fuer wrapped. Laut Feedback hier ist "die meinugen [...] gehen ja auseinander" euphemistisch
- das Logo haengt 1-2 Pixel noch weiter runter, das habe ich zum Anlass genommen, Logo und Menu Position anzupassen.
- es gibt keinen vertikalen Abstand mehr zwischen den Menu-Abschnitten. Das vermisse ich zwar, aber da ich nach 10Minuten nicht rausgefunden habe, wer dafuer zustaendig ist, habe ich es gelassen.
Unter iOS/Safari mit fixedInput hat das Logo position:absolute, was zu einer falschen Animation beim vertikalen scrollen fuehrt, das muss ich noch anschauen.

War aber nicht böse gemeint, geschmäcker sind nunmal verschieden.
Vertikaler Abstand zwischen den Menüs war eigentlich ein seiteneffekt vom browser-default td-padding. (und anderer effekte wie dass die header und content nicht vertikal alignt waren, und zwischen browsern nicht konsistent)
das von mir eingefügte "td {padding: 0;}" setzt das auf 0 zurück, und setzt dann nur dort ein padding wo explizit gewünscht.

Ich dachte nicht dass der abstand zwischen den menüs intentional war, sah mit dem doppelten border für mich wie ein bug aus.

Code Auswählen

"#menu > table td {
    padding-top: 2px;
}"

stellt für das menü wieder den alten style her.

rudolfkoenig · 05 August 2018, 09:02:42

Danke, habe die Zeile eingebaut.

gloob · 05 August 2018, 09:37:29

Gibt es eine Möglichkeit die aktuelle Änderung am Menü mit einem Additional CSS wieder zu überschreiben / rückgängig zu machen?

Die schwarzen Linien zwischen den Räumen meine ich.
Ohne die Linien war das übersichtlicher.

blecher-at · 06 August 2018, 20:43:05

Wird jquery-ui von f18 wirklich noch benötigt? Nur für modale errordialoge, aber das sollte man mmn ohnehin anders lösen (natives css/js und gut ist)
Problem mit jquery-ui: es erzeugt einen dom-reflow bevor der body und f18.js gelaufen ist. dadurch flackert die UI beim reload/navigieren.

rudolfkoenig · 07 August 2018, 08:21:31

@gloob: sicher, die Werte aus "Additional CSS" haben Vorrang.

@blecher-at: zunaechst: ich habe kein Problem jquery-ui rauszuschmeissen, wenn jemand mir hilft die benutzte Funktionalitaet zu ersetzen. Mir faellt ein:
- dialog
- draggable
- widget/mouse, benutzt von touch-punch
Leider kann ich nicht so recht sagen, wo es sonst noch verwendet wird, habe keine Methode gefunden, zuverlaessig nach jquery-ui Funktionen zu suchen.

Warum verursacht jquery-ui ein dom reflow?

Wenn ich "dom reflow" verstanden habe, dann verursacht f18 selbst sowas mit der optionalen Anzeige von Menu/Logo/Eingabezeile, und meine einzige Idee es zu vermeiden diese Attribute in FHEMWEB zu setzen, was ich ungern mache, da ich f18 und FHEMWEB nicht so stark verbinden moechte.

blecher-at · 09 August 2018, 12:15:53

Zitat von: rudolfkoenig am 07 August 2018, 08:21:31
Warum verursacht jquery-ui ein dom reflow?

Wenn ich "dom reflow" verstanden habe, dann verursacht f18 selbst sowas mit der optionalen Anzeige von Menu/Logo/Eingabezeile, und meine einzige Idee es zu vermeiden diese Attribute in FHEMWEB zu setzen, was ich ungern mache, da ich f18 und FHEMWEB nicht so stark verbinden moechte.

das problem mit f18 lässt sich lösen wenn man das f18-styleattribut vom body in ein metatag verschiebt. dann kann man das css ausserhalb von read() generieren und es flickert garnicht. hatte das schon am laufen aber dann spielte mir jqueryui dazwischen.
einzige einschränkung: im 1. frame werden dann die knubbel zum verstecken noch nicht nicht gerendert, die kommen im 2. frame (ready) dazu. das aber smooth.

warum jquery-ui genau einen reflow macht müsste ich noch rausfinden.

l2r · 09 August 2018, 15:40:15

hallo zusammen,

bei mir wird seit dem letzten Update beim Menü ein horizontaler und ein vertikaler Scrollbalken eingeblendet.
Vorher war das nicht so. Wie kann ich die Breite ändern, damit die Balken verschwinden?

Gruß Michael

blecher-at · 09 August 2018, 19:25:49

Zitat von: l2r am 09 August 2018, 15:40:15
bei mir wird seit dem letzten Update beim Menü ein horizontaler und ein vertikaler Scrollbalken eingeblendet.
Vorher war das nicht so. Wie kann ich die Breite ändern, damit die Balken verschwinden?

Kann es sein, dass du "fixed menu and input" aktiviert hast, das menü aber nicht auf deinen screen passt? zumindest nur dann kann ich deinen shot reproduzieren. passt das menü nicht auf den screen würde ich fixed menu nicht verwenden.

Code Auswählen


body.fixedInput #menu { overflow: visible; }

löst das problem, dann sind aber manche menüeinträge für immer unsichtbar.

Code Auswählen


body.fixedInput #menu { overflow-x: hidden; overflow-y: auto;}

dann hat man zumindest nur einen vertikalen scroll.