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

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

Vorheriges Thema - Nächstes Thema

Maui

Klappt noch nicht.
Es betrifft wirklich nur das Menü und auch nur von Portrait zu Landscape.
Was mir noch aufgefallen ist: beim scrollen ans Ende bleibt er gerne mal kleben wenn man noch weiter scrollt. Hängt vielleicht mit dem smooth zusammen. Ist schwer zu erklären. Wenn man am Ende ist und weiter scrollt dann kommt man erstmal ein paar Sekunden nicht mehr hoch. Meine Vermutung wäre, er scrollt weiter nach unten ins nichts nach?!

Gruß
Maui

xanker

Zitat von: Maui am 04 Juli 2019, 11:45:04
Klappt noch nicht.
Es betrifft wirklich nur das Menü und auch nur von Portrait zu Landscape.
Was mir noch aufgefallen ist: beim scrollen ans Ende bleibt er gerne mal kleben wenn man noch weiter scrollt. Hängt vielleicht mit dem smooth zusammen. Ist schwer zu erklären. Wenn man am Ende ist und weiter scrollt dann kommt man erstmal ein paar Sekunden nicht mehr hoch. Meine Vermutung wäre, er scrollt weiter nach unten ins nichts nach?!
Ich habe das Menü nun nochmal neu strukturiert, ich hoffe dadurch ist das Problem nun gelöst. Zuvor waren die Menü Icons innerhalb des scrollbaren Menü Elements, aber fixiert an der Oberseite, ich könnte mir vorstellen, dass das evtl. das Problem war.
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 04 Juli 2019, 16:55:40
Ich habe das Menü nun nochmal neu strukturiert, ich hoffe dadurch ist das Problem nun gelöst. Zuvor waren die Menü Icons innerhalb des scrollbaren Menü Elements, aber fixiert an der Oberseite, ich könnte mir vorstellen, dass das evtl. das Problem war.
Ist behoben Danke. Das kleben ist allerdings noch da.
Ich schaue morgen mal auf einem Androiden ob das ein iOS Ding ist.

xanker

Zitat von: Maui am 04 Juli 2019, 18:36:43
Ist behoben Danke. Das kleben ist allerdings noch da.
Ich schaue morgen mal auf einem Androiden ob das ein iOS Ding ist.
Also ich kann unter Android und Windows kein solches "kleben" feststellen. Ist das nur beim Menü, oder auch beim Hauptinhalt?
Maintainer vom flex Style.
Intel NUC mit fhem in Docker Container | Homematic | SIGNALduino 433MHz | HUE Bridge | Harmony HUB | lepresenced | alexa-fhem ...

Maui

Moin so jetzt konnte ich unter Android auch testen.
Ist ein reines iOS Ding allerdings im Menü als auch auf der Hauptseite möglich.
Gefühlt tritt es nur dann auf, wenn man schon am Ende des Inhalts (gescrollt) ist und dann noch mal nachscrollt.
Bei der css tricks Seite kann ich das nicht nachstellen, da dort sich dann die Hauptseite bewegt.
@binford: kriegst du so ein kleben auch hin?

Gruß
Maui

xanker

Zitat von: Maui am 05 Juli 2019, 11:01:39
Moin so jetzt konnte ich unter Android auch testen.
Ist ein reines iOS Ding allerdings im Menü als auch auf der Hauptseite möglich.
Gefühlt tritt es nur dann auf, wenn man schon am Ende des Inhalts (gescrollt) ist und dann noch mal nachscrollt.
Bei der css tricks Seite kann ich das nicht nachstellen, da dort sich dann die Hauptseite bewegt.
@binford: kriegst du so ein kleben auch hin?
Also Google hilft mir da auch nicht weiter, ich finde nichts dazu. Das liegt aber allein schon daran, dass ich nicht weiß wie man dieses Problem am besten benennt. Ich kann mir auch nicht vorstellen an was das liegen könnte.

Ich habe jetzt mal per Javascript einen Check eingebaut: sofern schon bis ganz nach unten gescrollt wurde, werden weitere "scroll-down-Events" unterdrückt. Evtl. hilft das?!
Maintainer vom flex Style.
Intel NUC mit fhem in Docker Container | Homematic | SIGNALduino 433MHz | HUE Bridge | Harmony HUB | lepresenced | alexa-fhem ...


xanker

#82
Zitat von: Maui am 06 Juli 2019, 23:07:04
Hat leider nicht geholfen.
Könnte es evtl das hier sein?

https://stackoverflow.com/questions/39692337/div-scrolling-freezes-sometimes-if-i-use-webkit-overflow-scrolling

Da lag ich gar nicht mal so falsch mit meiner Idee, nur habe ich die "scroll" Events gecancelt anstatt die "touchmove" Events. Ich habe es in einer leicht modifizierten Version eingebaut, ich hoffe das Problem ist damit nun gelöst! Falls nicht, muss ich die Scroll-Richtung doch per "touchstart" Event bestimmen. Einfach mal testen :)

Edit: Habe es nun doch per touchstart-Event gemacht, da das doch wichtig ist!
Maintainer vom flex Style.
Intel NUC mit fhem in Docker Container | Homematic | SIGNALduino 433MHz | HUE Bridge | Harmony HUB | lepresenced | alexa-fhem ...

Maui

#83
Moin ich denke wir haben's bald aber ist leider noch nicht behoben. Hat aber auch bei mir keine Priorität da es ja "selbstverschuldet" ist.

Edit: Sorry geht doch schon. Mein Fehler. Hatte zuletzt mit Firefox unter iOS getestet aber mit Safari klappt es jetzt.

Gruß
Maui

xanker

Zitat von: Maui am 07 Juli 2019, 21:38:49
Moin ich denke wir haben's bald aber ist leider noch nicht behoben. Hat aber auch bei mir keine Priorität da es ja "selbstverschuldet" ist.

Edit: Sorry geht doch schon. Mein Fehler. Hatte zuletzt mit Firefox unter iOS getestet aber mit Safari klappt es jetzt.
Freut mich, dass es jetzt funktioniert  :)

Zitat von: Esjay am 29 Juni 2019, 11:45:42
Ich würde mir 2 Sachen wünschen wollen, wenn irgendwann mal die Muse da ist.
Einmal wäre das ein dragging active wie bei f18, sowie ein kleines Lupen Symbol, worüber sich Devices suchen lassen.
Ich habe nun eine Option hinzugefügt, dass sich die Tabellen auch nebeneinander (in zwei Spalten) anordnen, sofern genug Platz ist. Meiner Meinung nach ist das die bessere Alternative zum "dragging active", zum einen sortiert sich alles selbst um den vorhandenen Platz so sinnvoll wie möglich zu nutzen und zudem wird die mobile Ansicht nicht zerstört. Anstatt dem "Lupen Symbol" ist seit gewisser Zeit auch schon die Funktion eingebaut, dass man Devices über die Commandline suchen kann.
Maintainer vom flex Style.
Intel NUC mit fhem in Docker Container | Homematic | SIGNALduino 433MHz | HUE Bridge | Harmony HUB | lepresenced | alexa-fhem ...

choetzu

Hallo, super toller Style. Genau richtig für Anfänger wie mich.

Fragen:
- in einem Raum werden die ersten 2 Tabellen ohne Abstand aufgelistet?
- wie kann ich die Farbe des Pfeils (siehe Kreis) ändern?
- wie kann ich den Abstand der Zeilen im Menu verkleinern sowie die Schrift verkleinern?

danke für die Hilfe.

Lg C
Raspi3, EnOcean, Zwave, Homematic

xanker

Zitat von: choetzu am 08 Juli 2019, 21:35:07
Hallo, super toller Style. Genau richtig für Anfänger wie mich.
Vielen Dank. Aber 998 Beiträge und über 3 Jahre Mitglied, klingt nicht nach Anfänger  ;)

Zitat von: choetzu am 08 Juli 2019, 21:35:07
- in einem Raum werden die ersten 2 Tabellen ohne Abstand aufgelistet?
- wie kann ich die Farbe des Pfeils (siehe Kreis) ändern?
- wie kann ich den Abstand der Zeilen im Menu verkleinern sowie die Schrift verkleinern?
- Sollte mit der aktuellen Version nicht mehr auftreten
- Danke, war ein Fehler im Code. Der Pfeil bekommt jetzt die gleiche Farbe wie der Text
- Ich habe nun die "scalePage" Einstellung bearbeitet, sodass nun Werte zwischen 0,7 und 1,5 möglich sind. Somit lässt sich die ganze Seite zwischen 70% und 150% skalieren, das ist mMn besser als nur die Schriftgröße zu ändern. Dies funktioniert allerdings nicht mit dem Firefox. Oder geht es dir ausschließlich um das Menü? Dann könnte ich auch noch eine Option hinzufügen.
Maintainer vom flex Style.
Intel NUC mit fhem in Docker Container | Homematic | SIGNALduino 433MHz | HUE Bridge | Harmony HUB | lepresenced | alexa-fhem ...

Icinger

Guten Morgen,

habe jetzt auch flex probiert.
Sieht gut aus, allerdings werden in manchen Räumen die Devices 2-3mal angezeigt.

Screenshots anbei. (Habe teilweise auf sehr klein gezoomt, um alles auf das Bild zu bekommen)
Betrifft sowohl Chrome unter Linux als auch Chrome unter Android 8 auf meinem Galaxy S7

lg, Stefan
Verwende deine Zeit nicht mit Erklärungen. Die Menschen hören (lesen) nur, was sie hören (lesen) wollen. (c) Paulo Coelho

xanker

#88
Zitat von: Icinger am 09 Juli 2019, 05:00:26
Sieht gut aus, allerdings werden in manchen Räumen die Devices 2-3mal angezeigt.
Hmm, da scheint was ordentlich schief zu gehen. Bei mir werden keine doppelten Devices angezeigt, nicht mal unter "Everything"...und ich habe immerhin über 300 Devices.

Um die Tabellen (korrekt) nebeneinander anzuzeigen, werden alle in ein div verschoben. Dies ist nötig, da Readingsgroups im HTML an einer ganz anderen stelle sind wie Groups. An der Stelle muss irgendwo die Ursache des Problems sein. Ich habe nochmal ein Update commited bei dem nun striktere Selektoren verwendet werden. Evtl. hilft das?!

Zudem sollten die gruppierte Readingsgroups die volle Breite haben, bei dir füllt die Readingsgroup nicht die komplette Group-Tabelle aus. Auch deine Plots sind viel zu klein, das kann jetzt aber evtl. auch nur am Zoom liegen.

Grundlegend würde ich sagen, dass die Probleme an zusätzlichem CSS/JS Code liegen. Hast du im FHEMWEB Device zusätzliche CSS/JS Dateien definiert? Die überlagerte Uhr im Menü lässt mich das vermuten.
Maintainer vom flex Style.
Intel NUC mit fhem in Docker Container | Homematic | SIGNALduino 433MHz | HUE Bridge | Harmony HUB | lepresenced | alexa-fhem ...

Icinger

#89
Hier mal ein list von meinem WEB. Ansich denke ich, ist nix "schlimmes" drinnen, was das verurchsachen kann.
Hab grad vorhin auch mal testweise das JavaScript-Attribut gelöscht, Cache gelöscht und neu geladen. --> Keine Änderung.
Dass irgendwo was anderes einstrahlt, kann theoretisch schon möglich sein, mein FHEM ist jetzt über ca. 7 Jahre gewachsen :D Also durchaus möglich, dass irgendwo noch Leichen rumlungern


   PORT       8083
   STATE      Initialized
   TYPE       FHEMWEB
   READINGS:
     vor 9 Tagen   state           Initialized
Attributes:
   CssFiles   raumbaum/raumbaum.css
   DbLogExclude .*
   JavaScripts codemirror/fhem_codemirror.js nicedates/fhem_nicedates.js pgm2/clock.js pgm2/hm.js
   codemirrorParam {"jumpToLine" :true}
   column     Pool:PoolTechnik|PoolLog Erdgeschoß:Wohnzimmer,Küche,D_Schlafzimmer,Sonstiges,Strom_Licht,Fenster|Temp_WZ,Wetterstation|global
   FD         6
   FUUID      5c59c845-f33f-d004-64d0-014993da0dbdb2c3
   NAME       WEB
   NR         10
   NTFY_ORDER 50-WEB
   PORT       8083
   STATE      Initialized
   TYPE       FHEMWEB
   READINGS:
     2019-06-30 19:19:21   state           Initialized
Attributes:
   CssFiles   raumbaum/raumbaum.css
   DbLogExclude .*
   JavaScripts codemirror/fhem_codemirror.js nicedates/fhem_nicedates.js pgm2/clock.js pgm2/hm.js
   codemirrorParam {"jumpToLine" :true}
   column     Pool:PoolTechnik|PoolLog Erdgeschoß:Wohnzimmer,Küche,D_Schlafzimmer,Sonstiges,Strom_Licht,Fenster|Temp_WZ,Wetterstation|Heizung,Vorschau Technik:Diagramme,Strom|Temps,Wasser,Heizung,rg_StromVerbrauch System:Cubietruck,Cubie2,Defines|Stats2,Stats Wetter:Vorschau,Wolkenmovie,Radar|48StdWetter,Unwetter Information:Information,Verkehr|Wetterstation|Vorschau,Kalender
   confirmJSError 0
   csrfToken  none
   defaultRoom Information
   editConfig 1
   hiddenroom FHEMWEB,DashboardRoom,ProfileRoom
   iconPath   fhemSVG:default:openautomation:fhemSVG
   longpoll   1
   menuEntries Restart FHEM,cmd=shutdown+restart,Update FHEM,cmd=update,Updatecheck,cmd=update+check
   nicedatesParam {"locale" : "de", "mode" : "fromNow","verbose" : "4"}
   plotfork   1
   sortRooms  Information Erdgeschoß Garten Pool Wetter Kalender System Technik
   styleData  {
"f18": {
  "Pinned.menu": "true",
  "hidePin": true,
  "cols.bg": "444444",
  "cols.fg": "CCCCCC",
  "cols.link": "FF9900",
  "cols.evenrow": "333333",
  "cols.oddrow": "111111",
  "cols.header": "222222",
  "cols.menu": "111111",
  "cols.sel": "333333",
  "cols.inpBack": "444444",
  "savePinChanges": true,
  "showDragger": true,
  "Pos.style_list_Styles": {
   "left": 0,
   "top": 0,
   "width": 300,
   "height": 396,
   "oTop": 20,
   "oLeft": 0
  },
  "Pos.style_list_f18_special": {
   "left": -1,
   "top": 411,
   "width": 300,
   "height": 134,
   "oTop": 40,
   "oLeft": 0
  },
  "Pos.style_list_f18__Room_specific": {
   "left": 0,
   "top": 594,
   "width": 300,
   "height": 481,
   "oTop": 40,
   "oLeft": 0
  },
  "hideLogo": false,
  "fixedInput": false,
  "Pos.Room_Pool_grp_PoolTechnik": {
   "left": 0,
   "top": 0,
   "width": 353,
   "height": 308,
   "oTop": 20,
   "oLeft": 0
  },
  "Pos.Room_Pool_grp__PoolTechnik": {
   "left": 0,
   "top": 20,
   "width": 366,
   "height": 269,
   "oTop": 40,
   "oLeft": 0
  },
  "Pos.Room_Pool_grp_PoolLog": {
   "left": 360,
   "top": 21,
   "width": 426,
   "height": 290,
   "oTop": 40,
   "oLeft": 0
  },
  "Pos.Room_Pool_svgZoomControl": {
   "left": 0,
   "top": 351,
   "width": 1765,
   "height": 0,
   "oTop": 0,
   "oLeft": 0
  },
  "Pos.Room_Pool_SVG_PoolLog_1": {
   "left": 0,
   "top": 537,
   "width": 1765,
   "height": 164,
   "oTop": -164,
   "oLeft": 0
  },
  "Pos.Room_Pool_SVG_PoolLog_2": {
   "left": 0,
   "top": 719,
   "width": 1765,
   "height": 164,
   "oTop": -164,
   "oLeft": 0
  },
  "Pos.Room_Pool_SVG_PoolLog_3": {
   "left": 0,
   "top": 901,
   "width": 1765,
   "height": 164,
   "oTop": -164,
   "oLeft": 0
  }
},
"flex": {
  "colorPreset": {},
  "title": "fhem",
  "myUtilsFileName": "myUtils.pm",
  "plotMinWidth": "250px",
  "plotMaxWidth": "100%",
  "scalePage": "1",
  "showClock": false,
  "showRebootButton": true,
  "showUpdateButton": true,
  "showUpdateCheckButton": true,
  "showRereadIconsButton": true,
  "showRawInputButton": true,
  "showSaveButton": true,
  "showRoomDeviceName": true,
  "showMenuAlways": true,
  "enableCommandHistory": true,
  "enableDeviceSearch": true,
  "showReadingsGroupAsTable": true,
  "hideWebcmdOnSmallScreen": false,
  "colorOptionsDetailed": false,
  "color": {
   "HeaderBG": "#06A",
   "HeaderIcon": "#FFF",
   "HeaderText": "#FFF",
   "HeaderBorder": "#06A",
   "MenuBG": "#000",
   "MenuBorder": "#06A",
   "MenuIcon": "#FFF",
   "MenuRoomIcon": "#FFF",
   "MenuText": "#FFF",
   "MenuHoverLink": "#06A",
   "MainBG": "#000",
   "TableHeaderBG": "#06A",
   "TableHeaderText": "#FFF",
   "TableBorder": "#06A",
   "TableOdd": "#000",
   "TableEven": "#222222",
   "TableText": "#e3e3e3",
   "TableHoverRow": "#333333",
   "TableHoverLink": "#06A",
   "TableNewEvent": "#F00",
   "TableIcon": "#06A",
   "SetGetAttrBG": "#333333",
   "SubmitButtonBG": "#06A",
   "SubmitButtonBorder": "#06A",
   "SubmitButtonText": "#FFF",
   "WidgetBorder": "#06A",
   "WidgetText": "#e3e3e3",
   "WidgetHighlight": "#06A",
   "plotBG": "#EEE",
   "plotBorder": "#06A",
   "plotText": "#e3e3e3",
   "plotGrid": "#555",
   "plotMarker": "#F00",
   "plotLine0": "#F00",
   "plotLine1": "#0F0",
   "plotLine2": "#00F",
   "plotLine3": "#F0F",
   "plotLine4": "#A52A2A",
   "plotLine5": "#000",
   "plotLine6": "#808000",
   "plotLine7": "#808080",
   "plotLine8": "#FF0",
   "plotLinePasted": "#000"
  },
  "showTablesSideBySide": true
}
}
   stylesheetPrefix flex
   widgetOverride singularReadings:textFieldNL-long column:textFieldNL-long devStateIcon:textFieldNL-long


Dass die Plots eher klein sind, liegt daran, dass ich sie in der Breite begrenzt habe, das passt schon, da kann flex nix dafür :D
Wobei sich da auch wieder was auftut:
In der Device-Ansicht wird der Plot mega aufgeblasen, trotz
attr plotsize 380,180
Siehe Screenshot

Ausserdem (keine Ahnung, ob du das ändern kannst, wurde vielleicht auch eh schon hier besprochen) werden breite Readingsgroups nicht umgebrochen, sondern rechts einfach abgeschnitten.

lg, Stefan

Edit: Falscher Screenshot :)
Verwende deine Zeit nicht mit Erklärungen. Die Menschen hören (lesen) nur, was sie hören (lesen) wollen. (c) Paulo Coelho