die sliders und die volume-buttons und equalizer-button sind nun auch immer auf einer zeile bei >=320 px. Auch bei allen anderen Sliders sind die icons links/rechts nicht mehr umgebrochen.
Leider musste ich feststellen, dass sich das mit bootstrap nicht umsetzen lässt, deshalb habe ich dafür konventionelle Divs und CSS verwendet. Bitte kontrolliert jeden Slider, ob er noch funktioniert und ob die Range und icons noch korrekt sind.
Wenn das Browser Fenster <=600 px wird, werden die Button-Texte im Header nicht mehr angezeigt. Dadurch wird es etwas weniger sperrig:
Diverse Farben im dark mode korrigiert
Icons im jstree Kontextmenu:
Neu wird bei einem Page refresh das zuletzt aktive Tab geladen
Was ich noch nicht hingekriegt habe, ist, dass der orange Hover-Effekt bei Touch screens nicht sticky sein darf (wenn man auf dem Smartphone auf den Darkmode-Knopf drückt, bleibt der Knopf orange, obwohl das nicht sein sollte). Das sollte sich gemäss How to remove :hover on touch devices? - Misc mit CSS lösen lassen, aber bei mir funktioniert nicht mal deren Beispiel . Ev. kann das ja jemand anders lösen, sonst lassen wir es so.
Desktop (FF 125)
Ich hab’s mir jetzt nochmal angeschaut: Gefällt mir sehr gut! Aber hast du im Einstellungen-Menü die einzelnen Unterpunkte (Neopixel, Deep Sleep…) zusammengerückt? Mir sind die irgendwie ein Tick zu weit zusammen, ich würde da bisschen Abstand halten.
Das funktioniert jetzt leider nicht mehr (obgleich ich zugeben muss, dass ich es beim letzten Mal auf dem Handy nicht getestet habe), da wird fast kein Text mehr angezeigt:
Vielen Dank für die vorgeschlagenen Änderungen. Folgendes ist mir aufgefallen:
Beim letzten und ersten Titel werden die deaktivierten Schaltflächen nicht nur ausgegraut (wie früher) sondern auch noch eingekästelt:
und
Und zwar im Dark und Tagmode. Das war früher nicht so, und finde ich optisch nicht so schön wie früher.
Die aktiven Tabs werden in beiden Modi noch unterschiedlich dargestellt:
Im Tagmodus erkennt man das aktive Tab nur an der Schriftfarbe (schwarz statt blau) und einem minimal helleren Hintergrund. Im Nachtmodus wurde der weiße Hintergrund des aktiven Tabs nicht ersetzt, sollte der Hintergrund dann nicht minimaler heller als Schwarz sein und die Schrift weiß?
Die Fortschrittsbalken, Uploadbalken und Einstellungsbalken, z.B.
sind ebenso noch wie im Tagmodus. Müssten die nicht grau werden?
Sonst ist mir nichts aufgefallen. Vielen Dank, dass die Symbole (z.B. laut/leiser) jetzt in einer Zeile sind! Das ist sehr schön. Schön finde ich auch, dass die Header etwas entsperrt wurden fürs mobile. Dadurch haben wir jetzt 2+3 Zeilen für den Header, toll wäre es, wenn wir nur noch 1+2 Zeilen hätten. Wer stellt z.B. permanent die Sprache um, braucht man das wirklich im Header?
Edit: Noch eine Kleinigkeit: Der „Log“ wird auf einem mobilen Bildschirm in etwas zu großer Schriftart ausgegeben (ggf. war das vorher aber auch schon). Man kann auch nicht rauszoomen, sondern nur reinzoomen, was den Text noch größer macht. Der Text unter „Info“ hat gefühlt eine etwas kleinere Schriftart.
Hab auch schon überlegt, dass man da vmtl vieles in ein dropdown Menü schieben könnte, weils nicht so arg oft verwendet wird. Reboot zB?
Aber das würd ich eher in einem neuen Thema andiskutieren, sonst wird die Baustelle hier nie fertig
Alles in allem: Wow! Danke für die viele Arbeit, das ist ein ordentliches Brett aber sieht auch schon sehr gut aus!
Sehe ich auch so. Also der Header ist noch eine eigene Baustelle die wir hier mal weglassen und später behandeln sollten. Bootstrap 5 + Dunkel-Modus ist schon fein genug!
Ansonsten sieht’s sehr gut aus, vielen Dank @CaCO3 das Du dran bleibst! Ich habe nur Kleinigkeiten:
CSS für Fortschrittsbalken Hell/Dunkel passt beim Firmware-Upload, aber nicht für Datei-Upload. Evt. kannst Du es angleichen?
Nach dem Laden der UI hatte der Datei-Root den Fokus. Weil beim Datei-Upload muss das Verzeichnis gewählt sein und es waren viele darüber gestolpert. Wäre fein wenn Du es so noch einbringen könntest. Siehe Ordner-Upload per Web - #4 von sfields
Vermutlich falscher Alarm, vorhin hatte ich das Problem, konischerwweise funktioniert es jetzt wie gewohnt:
Also nach dem Laden der Weboberfläche sollte der Root immer vorausgewählt sein & den Fokus haben. Dann kann man einfach Dateien auswählen & hochladen ohne zu stolpern…
Gefixt.
Aber dass der Titel fehlte, hasst Du nicht bemerkt
Fixed. und jetzt sogar wirklich deaktiviert, nicht nur grau
Uff, das war nicht einfach, da es nicht mit reinem CSS machbar war
Ich hoffe, es ist jetzt so ok.
Die Idee hatte ich ja auch schon, gab aber bis jetzt kein Feedback dazu.
Habe jetzt 1h investiert und versucht, das besser zu machen. aber es braucht extrem viel Javascript dafür und wird unübersichtlich. Deshalb würde ich es so belassen, wie es von Bootstrap vorgesehen ist.
Habe jetzt doch noch eine einfache Lösung gefunden.
Auch hier das gleiche Problem wie bei den Tabs.
Das müsste man wieder dynamisch anhand der Bildschirmbreite machen. Da wäre ich eher vorsichtig. Debugging macht man ja auch kaum am Smartphone.
Die Schriftart ist nicht die gleiche, daher die unterschiedliche Wahrnehmung (war vorher schon so).
Keine Ahnung, wieso das nicht gleich ist
Auch wenn ich die ganze Form vom FIleUpload rüber kopiere, ist es nicht so.
Das habe aber nicht ich rausgeworfen, ist auch in dev schon defekt!
Und der code ist immer noch so wie in deinem verlinkten fix! Bist Du sicher, dass das mal funktioniert hat?
Bei Valetudo sind viele Punkte in ein Hamburger-Menü-Icon ausgelagert. Das sieht für mich sowohl auf dem Desktop, als auch auf Mobil gefällig aus und bringt ordentlich Platz. Anfangs hatte ich Hoffnung da spicken zu können - leider wird das aber nix, da das Frontend in React geschrieben ist
Um bei Beispiel Valetudo zu bleiben - da haben die noch viel mehr da rein gekippt - die meisten anderen Settings nimmt man ja auch nicht so oft vor. Wenn es gewünscht ist, kann ich heute Abend mal einen Screenshot oder so machen.
Meine Kommentare bitte als Vorschlag/Input verstehen - Ich bin für jede Verbesserung dankbar. Leider bin ich nicht ansatzweise fit genug um das in einer vertretbaren Zeit selbst anzugehen. Unterm Strich reden wir hier ja über die Goldkante für Papa
Danke für deine neuen Änderungen. Die schwarzen Tabs passen jetzt deutlich besser zum Darkmode. Sehr schön.
Was mir noch aufgefallen ist:
Manche Boxen (Dropdownmenüs, Boxen zur Eingabe, usw) sind hart-weiß umrandet, andere grau-umrandet (so wie man es auch im Tagmodus hat und auch im Darkmode erwarten würde). Beispiel am Tab „RFID“:
Rot: hart-weiß
Grün: grau
Auch auf den anderen Tabs gibt es Boxen mit richtiger grauer Umrandung und solche mit hart-weißer.
Zum Rfid Tab, dort Datei-Browser: Wieso ist die Schriftfarbe hier grau für die Ordner/Dateien? Ich finde das passt nicht ganz zu der anderen Gestaltung der Seiten, und auch im Hellmodus sind ist dort die Schriftfarbe nicht grau sondern schwarz, von daher wäre doch weiß als Schriftfarbe im Darkmode hier passend?
Dadurch, dass es jetzt wirklich deaktiviert ist, gibt es folgende Regression: Ist man im 1. track, so kann man mit „previous“ nicht mehr auf Anfang des Files zurückspringen (das war früher möglich und funktioniert so bei allen Liedern, die länger als 3 Sekunden abgespielt wurden, dass mittels „previous“ nicht auf das letzte Lied, sondern auf den Dateianfang des jetzigen Lieds zurückgesprungen wird). Dadurch dass die Taste jetzt deaktiviert ist, geht das nicht mehr.
Ebenso konnte man bei Endlosschleife im letzten Track durch Drücken auf „next“ zum ersten Track springen auch das geht jetzt nicht mehr.
Das alte Verhalten hat aber jeweils dem Verhalten geglichen, wenn man auf der Box die jeweiligen Hardwarebutton gedrückt hat, von daher wäre es sicherlich wünschenswert, wenn dies wieder so wäre?
Nur noch zwei persönliche Gedanken:
A. Du hast jetzt die Sprache auf das Tab allgemein gelegt. Dort sind aber nur Einstellungen für die Box drin, die Sprache kann auf jeder websocket connection eine andere sein. Von daher weiß ich nicht, ob das 100% konsistent ist. Wenn das Hamburger-Menü bleiben soll (ggf. könnte man es aber auch nur nehmen, wenn der Bildschirm zu klein ist), wäre sowas vielleicht eine Option:
B. Ggf. könnte man jetzt den 3-zeiligen Header mit den Tabs (also der Header unter dem blauen Header) auf mobilen Geräten dadurch entsperren, dass nur die Symbole angezeigt werden. Aber ob das für alle User ausreicht? Auf ausreichend großen Bildschirmen sollten auf jeden Fall auch die Namen angezeigt werden.
Edit: Gerade noch aufgefallen:
4. Das Kontextmenü im Datei-Browser ist noch hell im Darkmodus:
Die Search File Box unter dem Datei-Browser ist deutlich kürzer als früher, oder ist das so beabsichtigt?
früher:
Zu Punkt 1:
Das ist bewusst so!
Im normalen Modus sind die editierbaren Felder (und das aktive Tab) weiss. Readonly-Felder und inaktive Tabs sind grau. Das ist bei den meisten Softwaren so.
Im Dark mode wird nun Weiss zu Schwarz und Grau zu etwas dünklerem grau. Das ist schon so definiert von Bootstrap, ich würde es nicht ändern.
Generell finde ich das Feld für den Dateiupload eher verwirrend. Wieso muss ich nsch der Datei/Ordner-Auswahl nochmals auf Upload klicken? Meiner Meinung nach unnötig. Aber das sollte man separat überdenken. Ich fände drag&drop auch cool als Alternative.
Zu Punkt 2 und 4:
Jstree bringt sein eigenes Theme mit. Für den Dark mode schalten wiir das einfach um: ESPuino/html/management.html at 66826bf7ccde5b603583581a088ffa0268526c0f · caco3/ESPuino · GitHub
Es könnte sein, dass es ein anderes, besser passendes Theme gibt, oder ev. kann man sein eigenes Theme erstellen. Da darf sich aber gerne jemand anders daran austoben.
Die beiden Buttons Datei/Ordner waren übrigens schon vorher grau. Das habe ich nicht geändert. Aber ich würde sie auch eher blau machen.
Zu Punkt 3:
Das macht das neue Bootstrap so. In beiden Version wird der button disabled, aber im alten bootstrap wurde offenbar trotzdem ein Event ausgelöst. Im neuen Bootstrap passiert nichts mehr (die Maus wird ja auch nicht mehr zu einer Hand). Eigentlich ist das neuere das normalerweise erwartete Verhalten. Das jetzt wieder „kaputt“ zu machen, finde ich doof. Wenn sich da jemand annehmen will, darf er das gerne machen. Ich verstehe deine Argumentation, will mich da aber nicht auch noch einarbeiten.
Zu Punkt A:
Da gebe ich dir voll recht, das General Tab ist nicht ideal, ich fand es aber das besten passende Tap. Ich kann mal versuchen, es ins Menü reinzunehmen. Muss mal schauen., ob sich das noch sauber bedienen lässt.
Die Struktur des Menüs sollte immer gleich sein, egal wie gross der Bildschirm ist. Das macht es einerseits einfacher zu bedienen, andererseits wäre es sehr kompliziert, beides gleichzeitig zu implementieren.
Zu Punkt B:
Das hatte ich vorher mal so drin (bei schmalem Bildschirm nur die Symbole anzeigen). aber es war schlecht formatiert, deshalb der Versuch mit dem menu. Meiner Meinung nach ist das recht gelungen und ich würde es gerne so lassen.
Zu Punkt 5:
Das ist bewusst so, damit bei schmalen Bildschirmen kein Zeilenumbruch nötig wird. Zudem ist das Feld so schon mehr als genug lang, es ist ja ein Filterfeld und da gibt man kaum mehr als einige wenige Zeichen ein (10 breite Buchstaben passen da jetzt rein).
Sowohl das erste als auch das zweite Feld ist editierbar, das erste hat allerdings eine weiße Boxumrandung, das zweite eine graue (ich meine also nicht den Inhalt der Box, sondern den Rand).
Also dieselben Arten von Boxen haben mal hart-weiße Ränder, mal graue. Und um die Vereinheitlichung von gleichen Boxen ging es mir unter 1. Ich würde sie alle mit grauem Rand machen, da erstens das deutlich besser aussieht (soll ja kein high-kontrast Thema sein), und zweitens sämtliche Dropdown Listen ebenfalls graue Ränder haben.
Und ja Im Dark mode wird nun Weiss zu Schwarz und Grau zu etwas dünklerem grau und deshalb finde ich die hartweißen Ränder um die Tabs auch unpassend, weil sie im Normalen Mode hellgrau sind, würde man hier ein dunkelgrau erwarten, also dieselbe Farben wie auch die Ränder der Boxen haben sollten.
hell:
(die hellweiße Linie und die Umrandung des aktiven Tabs in hellweiß passt im Darkmode nicht) Im hellen Modus haben die Linien um das aktive Tab dasselbe Grau wie die Linien um die Boxen, wieso haben dann im Darkmode die Linien um das aktive Tab und die Linien um die Boxen auf einmal andere Farben?
Eine Regression mit den letzten Änderungen habe ich noch festgestellt:
Die Tabs „FTP“, „MQTT“ & Bluetooth sind nur sichtbar wenn in der Firmware mit einkompiliert, jetzt sind sie aber immer sichtbar. Könnte es durch die Farbänderung der Tabs kaputtgegangen sein?
Ich finde das Hamburger-Menü super, es ist viel aufgeräumter & spart viel wertvollen Platz.
Für die Sprachumschaltung ein Vorschlag: Bis wir einen besseren Platz gefunden haben: Unter „Allgemein“ gaaaanz nach unten stellen.
Edit:
Da hat sich der Commit von @CaCO3 mit diesem Beitrag überschnitten. Ich finde es eine gute Lösung, so sieht es dann aus:
@sfields Ok, da habe ich dich wirklich falsch verstanden. Das war wieder so ein übergeordneter Style, sollte nun gefixt sein. Und zwar in Grau, so ist s nicht so aufdringlich, auch bei den Tabs.
Nein, das habe ich zum testen eingeblendet und aus versehen committed. Habs gerade gefiixt.
Hmm, bei allen meinen Browsern (Linux, Android) wirds korrekt angezeigt.
Ich habs jetzt aber durch das HTML Entity ç ersetzt, jetzt muss es überall korrekt sein.
. Ev. kann das ja jemand anders lösen, sonst lassen wir es so.
