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

Begonnen von xanker, 24 Juni 2019, 20:28:37

Vorheriges Thema - Nächstes Thema

xanker

Zitat von: Maui am 29 Juni 2019, 13:58:14
Kann leider nicht genauer erklären warum langweilig. Vermutlich der weiße Hintergrund.
Man kann doch unter "Select style" komplett selbst bestimmen wie die Farben sein sollen. Als Presets habe ich bewusst einen hellen und einen dunklen Style erstellt...und in der nächsten Version kommt noch ein Preset mit den "hübschen" Standard FHEM Farben dazu ;D

Zitat von: Maui am 29 Juni 2019, 13:58:14
Was mir auffällt, das beim Anpassen eines Attributs mein Browser die Eingabebox ranzoomt und ich danach wieder händisch raus zoomen muss wenn ich fertig bin.
Kann man das irgendwie umgehen?
Also ich versuche zb setList zu setzen, sobald ich in die Textbox klicke wird auf die Breite der Textbox rangezoomt und dabei bleibt es bis ich raus zoome.
Welchen Browser verwendest du? Smartphone oder Desktop? Ich kann das "Problem" mit Chrome/Firefox und Windows sowie Android nicht nachstellen. Evtl. eine Einstellung in deinem Browser?

Zitat von: Maui am 29 Juni 2019, 13:58:14
Ach und gute Arbeit.
Vielen Dank  :)
Maintainer vom flex Style.
Intel NUC mit fhem in Docker Container | Homematic | SIGNALduino 433MHz | HUE Bridge | Harmony HUB | lepresenced | alexa-fhem ...

Maui

Ah ok danke. Hatte nur den Thread überflogen und da klang es als wäre es erst in der Mache mit den Farben.

Hab grad nochmal genauer geguckt. Ist nicht die Textbox sondern schon vorher beim select des Attributes.
iOS und der Browser dürfte egal sein, da das select Barrel überall gleich ist.

Ich häng mal 2 Screens an. Der rechte Rahmen rutscht beim 2. raus durch zoomen.

xanker

Zitat von: Maui am 29 Juni 2019, 14:14:49
Ah ok danke. Hatte nur den Thread überflogen und da klang es als wäre es erst in der Mache mit den Farben.

Hab grad nochmal genauer geguckt. Ist nicht die Textbox sondern schon vorher beim select des Attributes.
iOS und der Browser dürfte egal sein, da das select Barrel überall gleich ist.

Ich häng mal 2 Screens an. Der rechte Rahmen rutscht beim 2. raus durch zoomen.
Da werde ich mal einen Blick drauf werfen, das lässt sich sicher verhindern. Safari bzw. iOS/macOS kann ich leider nicht testen, da mir Apple nicht ins Haus kommt  ;D Ich bin also auf solche Bugreports angewiesen. Dass sich die ganzen Browser nicht mal auf einen Standard einigen können.
Interessant ist auch dass der Safari (wie auch Firefox) Tabellen Ränder richtig rendert. Die sind bei dir nämlich ungleich Dick, was eigentlich nicht sein sollte. Beim Chrom wird ein 1px Rand nicht in jedem Fall gleich dick gerendert, weswegen ich das im CSS Code angepasst habe, dadurch wird es jetzt beim Safari/Firefox falsch dargestellt, das muss ich noch Browser-spezifisch gestalten.
Maintainer vom flex Style.
Intel NUC mit fhem in Docker Container | Homematic | SIGNALduino 433MHz | HUE Bridge | Harmony HUB | lepresenced | alexa-fhem ...

Maui

Ich weiß nicht ob es hilft aber mit f18 gibt es das Problem nicht unter iOS

xanker

Gibt ein großes Update. Jetzt können eigene Style-Presets erstellt werden. Das Menü bleibt auf Wunsch immer ausgeblendet. Die Commandbar dient als Device-Suche und hat eine Command-History (Pfeiltasten hoch/runter). Zudem sollten die Tabellen Ränder jetzt bei allen Browsern eine konstante Breite haben.

Zitat von: Maui am 29 Juni 2019, 17:25:55
Ich weiß nicht ob es hilft aber mit f18 gibt es das Problem nicht unter iOS
Kannst du es nochmal testen. Ich habe nun etwas an den Select-Boxen gändert, bin mir aber nicht sicher ob das Einfluss auf dein Problem hat.
Maintainer vom flex Style.
Intel NUC mit fhem in Docker Container | Homematic | SIGNALduino 433MHz | HUE Bridge | Harmony HUB | lepresenced | alexa-fhem ...

Maui

Hat sich am Zoom leider nix geändert.
Aber die neuen Funktionen sind echt top.
Ich werde wohl erstmal bei flex. bleiben  8)

Gruß
Maui

xanker

Zitat von: Maui am 29 Juni 2019, 22:05:00
Hat sich am Zoom leider nix geändert.
Versuche mal die Version aus dem Anhang (nur JS, an der CSS Datei hat sich nichts geändert). Jetzt dürfte eigentlich nicht mehr gezoomt werden, zudem sollte die Select Boxen jetzt auch richtig im Safari gestyled werden (und nicht mehr grau sein).

Zitat von: Maui am 29 Juni 2019, 22:05:00
Aber die neuen Funktionen sind echt top.
Ich werde wohl erstmal bei flex. bleiben  8)
Na das freut mich doch  8)
Maintainer vom flex Style.
Intel NUC mit fhem in Docker Container | Homematic | SIGNALduino 433MHz | HUE Bridge | Harmony HUB | lepresenced | alexa-fhem ...

ThomasMagnum

Hallo Xanker,

vielen Dank für die schnellen Fehlerbehebungen! Die Plots werden bei mir nun korrekt angezeigt.
Zwei Kleinigkeiten habe ich nun aber doch noch gefunden.

1. Einige Readinggroups werden nicht richtig angezeigt, sonder sind zur Überschriftenzeile hin verschoben. Anbei ein Screenshot der "Wettervorhersage" im Vergleich zum Style f18.
Die rg vom Modul CallList ist ebenfalls verschoben. Evtl. liegt das einfach an der hohen Gesamtbreite der rg.

2. Die Icongröße ist im Vergleich zum f18 etwas kleiner. Ich kann jetzt nicht zuordnen ob das dem flex Style zuzuzordnen ist und gewünscht ist, oder ein Fehler ist.

Ansonsten noch mal vielen Dank für Deine Mühen und den tollen Style.

Gruß, Thomas

xanker

Zitat von: ThomasMagnum am 30 Juni 2019, 11:29:27
1. Einige Readinggroups werden nicht richtig angezeigt, sonder sind zur Überschriftenzeile hin verschoben. Anbei ein Screenshot der "Wettervorhersage" im Vergleich zum Style f18.
Die rg vom Modul CallList ist ebenfalls verschoben. Evtl. liegt das einfach an der hohen Gesamtbreite der rg.
Das liegt daran, dass die Tabellen nicht mehr als Tabellen interpretiert werden, jeder Zeile ist unabhängig von den anderen. Ich werde wohl für die Redings-Groups noch eine Option einbauen, dass man diese auch als Tabelle anzeigen kann. Sofern dann der Platz für den Inhalt der Zellen nicht mehr ausreicht, wird die Tabelle horizontal scrollbar.

Zitat von: ThomasMagnum am 30 Juni 2019, 11:29:27
2. Die Icongröße ist im Vergleich zum f18 etwas kleiner. Ich kann jetzt nicht zuordnen ob das dem flex Style zuzuzordnen ist und gewünscht ist, oder ein Fehler ist.
klar, das ist alles im Style definiert. Ich habe die Icons bewusst auf Texthöhe angepasst, da es sonst zu ungleich hohen Reihen kommt, oder man müsste alle Zeile unnötig höher machen. Ich finde aber die aktuelle Icongröße ist ausreichend. Falls gewünscht könnte ich auch eine Einstellung hinzufügen mit der man die Icongröße selbst bestimmen kann.
Maintainer vom flex Style.
Intel NUC mit fhem in Docker Container | Homematic | SIGNALduino 433MHz | HUE Bridge | Harmony HUB | lepresenced | alexa-fhem ...

Maui

Moin,

Hast du schon mal über eine leichtere Installation in Fhem inkl. Updates nachgedacht?
Also zb Fhem svn oder per Github?!

Gruß
Maui

xanker

Zitat von: ThomasMagnum am 30 Juni 2019, 11:29:27
1. Einige Readinggroups werden nicht richtig angezeigt, sonder sind zur Überschriftenzeile hin verschoben. Anbei ein Screenshot der "Wettervorhersage" im Vergleich zum Style f18.
Die rg vom Modul CallList ist ebenfalls verschoben. Evtl. liegt das einfach an der hohen Gesamtbreite der rg.
Problem ist mit dem neusten Update behoben, Readings-Groups werden jetzt regulär als Tabelle behandelt.

Zitat von: Maui am 30 Juni 2019, 15:44:43
Hast du schon mal über eine leichtere Installation in Fhem inkl. Updates nachgedacht?
Also zb Fhem svn oder per Github?!
Ziel ist es schon, dass es der Style ins offizielle Repo schafft. Vorab wollte ich aber die größten Bugs beseitigen. So langsam wäre das aber angebracht  :)
Maintainer vom flex Style.
Intel NUC mit fhem in Docker Container | Homematic | SIGNALduino 433MHz | HUE Bridge | Harmony HUB | lepresenced | alexa-fhem ...

Maui

Zitat von: xanker am 30 Juni 2019, 16:05:01
Ziel ist es schon, dass es der Style ins offizielle Repo schafft. Vorab wollte ich aber die größten Bugs beseitigen. So langsam wäre das aber angebracht  :)
Schön. Das macht das Update einfacher und senkt für viele die Schwelle beim Ausprobieren.

ThomasMagnum

Hallo xanker,

nach dem Update werden die rgs sauber dargestellt bzw. sind horizontal scrollbar.

Zwei Fragen sind mir jetzt noch gekommen.

1. Kann man eine identische Verhaltensweisen auch für die Plots implementieren? Im Style f18 ist dies so gelöst und erhöht in meinen Augen die Lesbarkeit der gesamten Seite, insbesondere natürlich auf Smartphones oder kleinen Devices.

2. Ich habe mal zwei Vergleichscreenshots von f18 und flex erstellt. Im f18 werden auf schmallen Bildschirmen gewisse Informationen nicht dargestellt (z.b. WebCMD). Wäre ein solches Verhalten auch in flex denkbar? Auch dies erhöht in meinen Augen die Lesbarkeit auf kleinen Displays.
Die Möglichkeit eine setlist zu nutzen aollte allerdings erhalten bleiben (siehe Beispiel "speicher-f18vs.flex").

Ich befürchte das sind Wünsche die nur schwer umzusetzen sind  :-[

Gruß, Thomas

Gruß, Thomas

binford6000

#43
Hallo Sebastian,
ich habe für mein Wand-Tablet einen extra Raum erstellt wo unterschiedlichste Devices zu finden sind.
Dieser Raum läuft momentan unter f18 mit angepasster CSS.
Zum Test habe ich mal ein neues FHEMWEB mit flextouchpad erstellt zum direkten Vergleich (siehe Screenshots).

Was mir so auffällt:

  • Die Symbole sind viel kleiner
  • Die RC vom SONOSPLAYER wird neben Slebigen angeziegt: TOP! Leider nur viel zu klein und damit unbedienbar
  • Die Symbole vom WeatherasHTML sind viel zu klein
  • Der QR-Code vom Gäste-WLAN ist auch viel zu klein

Hier noch der CSS-Code. Er stammt aus einem der f18 Threads hier im Forum. Weiß aber nicht
mehr woher...  :o
@import url('https://fonts.googleapis.com/css?family=Roboto:300,300i,400,400i,500,500i,700,700i,900,900i');

html, body, html * {
  font-family: 'Roboto';
}

@font-face {
  font-style: normal;
  font-weight: 300;
}

body, input, select, textarea {
    font-weight: 400;
    font-size: 14px;
}

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

input.maininput {
    border-width: 0px;
    height: 20px;
    color: #333333;
}

input[type="text"] {
    -webkit-appearance: none;
    padding: 2px;
}

body.touch a {
    font-size: 16px;
}

#menuBtn {
    position: absolute;
    top: 14px;
    left: 10px;
    width: 28px;
    height: 28px;
    filter: brightness(3);
}

*:focus {
    outline: none;
}

div.pinHeader {
    color: white;
    height: 18px;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    padding: 5px 8px 5px 8px;
}

div.pinHeader a {
    color: white !important;
}

svg:not([fill]):not(.jssvg) {
    fill: #B0BEC5 !important;
    height: 25px;
    width: 25px;
    padding-right: 10px;
}

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

table.block.wide {
    font-weight: 300;
}

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

td {
    padding: 0px;
}

div#content > table {
    width: 100%;
}

div#content::-webkit-scrollbar {
    display: none;
}

div#menu {
    width: 200px;
}

div#menu::-webkit-scrollbar {
    display: none;
}

div#menu > table, div#content > table {
    border-collapse: collapse;
    width: 100%;
}

div#menu > .col_header {
    fill: #3373a6;
    font-size: 14px;
}

div#menu > .col_header:before {
    content: "Menü";
}

div#menu tr {
    border-width: 0px;
    background-color: #494949;
}

div#menu tr tr:hover {
    background-color: #3373a6;
}

div#menu tr:last-child {
    border-bottom: none !important;
}

.room tr > td {
    padding: 4px 8px 4px 8px;
}

div#menu a {
    color: #fff ! important;   
    padding-left: 5px;
    display: block;
}

body.touch #menu table.room div {
    padding: 4px;
}

.slider {
    background-color: #DDDDDD;
    border-radius: 5px;
    margin: 30px 0px 10px 0px;
    height: 4px;
}

.colorpicker_bri .slider {
    background-image: -webkit-linear-gradient(left, rgb( 150, 150 ,150), rgb(255,255,255) ) !important;
    background-image: -moz-linear-gradient(left, rgb( 0, 0 ,0), rgb(255,255,255) ) !important;
    background-image: -ms-linear-gradient(left, rgb( 0, 0 ,0), rgb(255,255,255) ) !important;
    background-image: -o-linear-gradient(left, rgb( 0, 0 ,0), rgb(255,255,255) ) !important;
    background-image: linear-gradient(left, rgb( 0, 0 ,0), rgb(255,255,255) ) !important;
}

.handle {
    font-size: 13px;
    color: white !important;
    position: relative;
    width: 45px;
    height: 20px;
    padding: 0px;
    background: #3373a6;
    border-radius: 8px;
    border-width: 0px;
    bottom: 32px;
}

.handle:before {
    content: '';
    position: absolute;
    border-style: solid;
    border-width: 5px 5px 0;
    border-color: #CCCCCC transparent;
    display: block;
    width: 0;
    bottom: -4px;
    left: 17px;
}

.handle:after {
    content: '';
    position: absolute;
    border-style: solid;
    border-width: 8px;
    border-radius: 8px;
    border-color: #3373a6;
    box-shadow: 0px 0px 0px 2px white;
    display: block;
    width: 0;
    bottom: -23px;
    left: 14px;
}

.sysmon table tr td {
    padding: 2px;
}

.makeSelect form {
    padding: 5px;
    display: flex;
    align-items: center;
}

.makeSelect {
    display: flex;
    float: left;
    /* clear: left; */
    height: 35px;
    background: #333333;
    width: 100%;
}

.get, .set, .attr {
    margin-bottom: 0px;
}

.downText {
    margin-top: 0px;
}

input[type="text"] {
    color: #FFFFFF;
}

.textField_widget input {
    border: 0px;
}

input.multiple_widget {
   border: 0px;
}

div#devSpecHelp {
    background: #333333;
    width: 100%;
    padding-top: 5px;
    margin-bottom: 0px;
}

.SVGplot * {
    padding-top: 5px;
}

.border {
    stroke: #fff !important;
    fill: #333333 !important;
}
input#md_freeText {
    color: #000000;
}

.room div:hover svg path {
    fill: #FFFFFF;
}

.roomBlock3 div, .roomBlock5 div {
  height: 30px;
  text-transform: uppercase;
  font-weight: 300;
  line-height: 30px;
  overflow: hidden;
}

.roomBlock1 div, .roomBlock2 div, .roomBlock4 div {
  height: 25px;
  text-transform: uppercase;
  font-weight: 300;
  line-height: 25px;
  overflow: hidden;
  display: flex;
}

canvas.flot-base {
    width: 100% !important;
}

.panel-title {
    -webkit-box-pack: left !important;
    -ms-flex-pack: left !important;
    justify-content: left !important;
    padding: 4px !important;
}

input.maininput {
    border-radius: 10px;
    border: 1px solid #000000;
}

table.block.wide.readings.wrapcolumns td:nth-last-child(1) {
    width: 200px;
    text-align: right;
    padding-right: 4px;
}

.dval a {
    color: #a6a033 !important;
}

table.block.wide.internals.wrapcolumns a {
    color: #a6a033 !important;
}

a#DEFa {
    padding: 4px;
}
.rc_body {
background: #111111;
}


Vielleicht hilft dir die Gegenüberstellung von f18 zu flex etwas  ;)
Sag Bescheid wenn ich noch was testen soll.

VG Sebastian

xanker

Zitat von: ThomasMagnum am 01 Juli 2019, 09:31:59
1. Kann man eine identische Verhaltensweisen auch für die Plots implementieren? Im Style f18 ist dies so gelöst und erhöht in meinen Augen die Lesbarkeit der gesamten Seite, insbesondere natürlich auf Smartphones oder kleinen Devices.
2. Ich habe mal zwei Vergleichscreenshots von f18 und flex erstellt. Im f18 werden auf schmallen Bildschirmen gewisse Informationen nicht dargestellt (z.b. WebCMD). Wäre ein solches Verhalten auch in flex denkbar? Auch dies erhöht in meinen Augen die Lesbarkeit auf kleinen Displays.
Die Möglichkeit eine setlist zu nutzen aollte allerdings erhalten bleiben (siehe Beispiel "speicher-f18vs.flex").
Hi Thomas, war beides kein Problem und ist in der aktuellen Version eingebaut (Einstellungssache): "plotMinWidth" erlaubt eine minimale Plot-Breite anzugeben, sofern der Inhalt dann nicht komplett dargestellt werden kann, wird der Plot horizontal scrollbar. "hideWebcmdOnSmallScreen" erlaubt das ausblenden von den Webcmds, dies ist so implementiert, dass bei unter 800px Breite die Webcmds ausgeblendet werden, die nicht mehr angezeigt werden können, bei unter 500px Breite werden dann alle Webcmds ausgeblendet unabhängig davon ob sie theoretisch noch Platz in der Reihe haben würden.

Zitat von: binford6000 am 01 Juli 2019, 11:54:30
Was mir so auffällt:

  • Die Symbole sind viel kleiner
  • Die RC vom SONOSPLAYER wird neben Slebigen angeziegt: TOP! Leider nur viel zu klein und damit unbedienbar
  • Die Symbole vom WeatherasHTML sind viel zu klein
  • Der QR-Code vom Gäste-WLAN ist auch wiel zu klein
Sag Bescheid wenn ich noch was testen soll.
Das werde ich mir anschauen, ich habe die Selektoren für die Icons wohl nicht strikt genug gesetzt, daher werden alle Icons auf die gleiche Größe gedrückt wie z.B. das Device Icon. Sofern ich noch Informationen brauchen sollte, melde ich mich.
Maintainer vom flex Style.
Intel NUC mit fhem in Docker Container | Homematic | SIGNALduino 433MHz | HUE Bridge | Harmony HUB | lepresenced | alexa-fhem ...