Hauptmenü

Neuer Style: f18

Begonnen von rudolfkoenig, 07 Januar 2018, 14:51:18

Vorheriges Thema - Nächstes Thema

rudolfkoenig

Dafuer muss man CSS bemuehen.

Tobias

danke für die info.
für die div id "content" funkjtioniert das, aber das Menu, das Logo und das "Plus" ZEichen bekomme ich nicht weg, trotz angabe der div-id´s
#menuScrollArea, #menu, #menuScrollArea, #hdr, #logo, #content, .room {
    display: none;
}
Maintainer: Text2Speech, TrashCal, MediaList

Meine Projekte: https://github.com/tobiasfaust
* PumpControl v2: allround Bewässerungssteuerung mit ESP und FHEM
* Ein Modbus RS485 zu MQTT Gateway für SolarWechselrichter

rudolfkoenig

Zitataber das Menu, das Logo und das "Plus" ZEichen bekomme ich nicht weg,
Das muss irgendwie gehen, genau diese Elemente kann man doch auch bequem per Haken in den Einstellungen ausblenden.

Tobias

vielen Dank für die wertvollen Hinweise.
Ich habe es jetzt fast hinbekommen. Es ist alles ausgeblendet. Das Menu auch. Leider ist zwar das Menü ausgeblendet, der Platz des Menüs ist aber weiterhin da.
Bekomme ich diesen Raum ebenfalls noch frei?

[code]define WEB_Dashboard2 FHEMWEB 8084 global
attr WEB_Dashboard2 Css #ddtable, #detLink, .makeTable, .motd {\
    display: none;;\
}\
\
#content {\
    background-color:rgba(0,0,0,0);;\
}
attr WEB_Dashboard2 DbLogExclude .*
attr WEB_Dashboard2 comment http://192.168.10.10:8084/dashboard2?cmd=style%20select#
attr WEB_Dashboard2 editConfig 0
attr WEB_Dashboard2 endPlotNow 1
attr WEB_Dashboard2 endPlotToday 1
attr WEB_Dashboard2 forbiddenroom input,save
attr WEB_Dashboard2 hiddenroom devSpecHelp, forumCopy, rawDef, style iconFor, style showDSI, delete
attr WEB_Dashboard2 longpoll 1
attr WEB_Dashboard2 plotsize 560,125
attr WEB_Dashboard2 styleData {\
"f18": {\
  "Pinned.menu": "true",\
  "hidePin": "true",\
  "cols.bg": "444444",\
  "cols.fg": "f8f8e0",\
  "cols.link": "278727",\
  "cols.evenrow": "444444",\
  "cols.oddrow": "444444",\
  "cols.header": "E0E0C8",\
  "cols.menu": "D7FFFF",\
  "cols.sel": "A0FFFF",\
  "cols.inpBack": "FFFFFF",\
  "savePinChanges": true,\
  "rightMenu": false,\
  "hideMenu": true,\
  "widePortrait": false,\
  "fixedInput": false,\
  "hideLogo": true,\
  "hideInput": true,\
  "hideTextInput": true,\
  "showDragger": false,\
  "Pos.style_list_Styles": {\
   "left": 0,\
   "top": 0,\
   "width": 248,\
   "height": 361.233334,\
   "oTop": 20,\
   "oLeft": 0\
  },\
  "Pos.style_list_f18_special": {\
   "left": 0,\
   "top": 382.566650390625,\
   "width": 248,\
   "height": 134.233334,\
   "oTop": 40,\
   "oLeft": 0\
  },\
  "Pos.style_list_f18__Room_specific": {\
   "left": 0,\
   "top": 558.5833129882812,\
   "width": 248,\
   "height": 549.233334,\
   "oTop": 40,\
   "oLeft": 0\
  },\
  "snapToGrid": false\
}\
}
attr WEB_Dashboard2 stylesheetPrefix f18
attr WEB_Dashboard2 webname dashboard2
#   BYTES_READ 853086
#   BYTES_WRITTEN 1229357638
#   CFGFN     
#   CONNECTS   1296
#   CSRFTOKEN  csrf_272378653236606
#   DEF        8084 global
#   FD         31
#   FUUID      63ff0cde-f33f-99a0-b57d-d75829ffcb4002e0
#   NAME       WEB_Dashboard2
#   NR         10126
#   NTFY_ORDER 50-WEB_Dashboard2
#   PORT       8084
#   STATE      Initialized
#   TYPE       FHEMWEB
#   .attraggr:
#   .attrminint:
#   READINGS:
#     2023-03-01 09:29:18   state           Initialized
#
setstate WEB_Dashboard2 2023-03-01 09:29:18 state Initialized

[/code]
Maintainer: Text2Speech, TrashCal, MediaList

Meine Projekte: https://github.com/tobiasfaust
* PumpControl v2: allround Bewässerungssteuerung mit ESP und FHEM
* Ein Modbus RS485 zu MQTT Gateway für SolarWechselrichter

rudolfkoenig

Mit CSS kann man die Elemente auch verschieben und vergroessern.
In diesem Fall geht vmtl. um das left Attribut bei #content.

Tobias

#455
Ja,
im Quelltext sieht es so aus:
<div id='content' >
Im Inspector sieht es so aus:
<div id="content" class="slim animated" style="left: 138px; top: 10px;">

bedeutet, durch irgendetwas und irgendwo wurden die positionsangaben gesetzt. Und diese finde ich nicht damit ich sie anpassen kann. :(

Ich kann es auch versuchen im CSS vom f18 zu setzen, aber das hat leider keinen Effekt
#content {
    background-color:rgba(0,0,0,0);
    position: absolute;
    left: 0px;
    top: 0px;
}
Maintainer: Text2Speech, TrashCal, MediaList

Meine Projekte: https://github.com/tobiasfaust
* PumpControl v2: allround Bewässerungssteuerung mit ESP und FHEM
* Ein Modbus RS485 zu MQTT Gateway für SolarWechselrichter

Tobias

Habs hinbekommen, das kleine aber feine !important hat gefehlt.
Damit wird jetzt alles korrekt ausgeblendet und angezeigt und ich kann die DOIF Charts sauber im FTUI einbinden :)

#ddtable, #detLink, .makeTable, .motd {
    display: none;
}

#content {
    background-color:rgba(0,0,0,0);
    left: 0px !important;
    top: 0px !important;
}
Maintainer: Text2Speech, TrashCal, MediaList

Meine Projekte: https://github.com/tobiasfaust
* PumpControl v2: allround Bewässerungssteuerung mit ESP und FHEM
* Ein Modbus RS485 zu MQTT Gateway für SolarWechselrichter

Damian

#457
Wäre es nicht einfacher dein Chart im Status anzuzeigen (Attribut ui_State)? Den kannst du bestimmt (ohne Devicenamen) auch im FTUI darstellen
Programmierte FHEM-Module: DOIF-FHEM, DOIF-Perl, DOIF-uiTable, THRESHOLD, FHEM-Befehl: IF

kennymc.c

Mir ist aufgefallen, dass auf schmaleren Bildschirmen wie denen von Smartphones alle columns trotzdem nebeneinander statt untereinander dargestellt werden, obwohl die horizontale Auflösung dafür nicht ausreicht. Das macht vieles unlesbar. Gibt es dafür eine Lösung? Wrap columns on small screen und Show all columns in portrait mode ändert bei mir nicht wirklich etwas. Hab leider nicht wirklich Ahnung von CSS, aber da es schon im Default f18 Style nicht funktioniert, frage ich mal hier nach.

DasQ

kann ich bestätigen, schaut komisch aus. ;D

getest auf iphone7pro in firefox
Fhem on MacMini/Ubuntu.
Absoluter Befürworter der Konsequenten-Kleinschreibung https://de.wikipedia.org/wiki/Kleinschreibung
Infos zu Klimawandel http://www.globalcarbonatlas.org

DasQ

also eben mir mal den effekt am PC angeschaut und habs mit einem mediaquery eintag gefixt ähhh flext siehe screenshot
Fhem on MacMini/Ubuntu.
Absoluter Befürworter der Konsequenten-Kleinschreibung https://de.wikipedia.org/wiki/Kleinschreibung
Infos zu Klimawandel http://www.globalcarbonatlas.org

kennymc.c

Sieht bei mir genauso aus wie vorher, wenn ich das bei Additional Css hinzufüge.
@media screen and (max-width: 480px) and (orientation: portrait)
#content > table {
    width: 100%;
    table-layout: flex;
    }

DasQ

#462
da funktionierts auch nicht drin. (die wird vermutlich per selktor überschrieben)
mußt hard in die f18style.css einbaun.

habs jetzt mal probehalben so gemacht. auf safari, firefox und chrome auf nem iphone7pro siehe screenshots (hab aber kein plan, ob das bei der f18 config, dann so aussehen soll. aber jetzt kann man es lesen.)
Fhem on MacMini/Ubuntu.
Absoluter Befürworter der Konsequenten-Kleinschreibung https://de.wikipedia.org/wiki/Kleinschreibung
Infos zu Klimawandel http://www.globalcarbonatlas.org

kennymc.c

Habs mal getestet und von fixed auf flex gestellt aber damit werden die columns nur nicht mehr zusammengequetscht. Dafür muss man horizontal scrollen was ja nicht der Sinn ist. Sieht bei mir nicht wie auf den Screenshots aus. Ab mindestens 3 Spalten wird es auch unübersichtlich auf kleinen Displays. Da wäre es besser columns ganz zu ignorieren.

DasQ

Die werden nicht zusammengequetscht, sondern überlappen sich nur.

Problem ist, das Tabellen immer Probleme machen, sobald sie den viewport sprengen.
Wäre da ein gridsystem dahinter würde das ganz anders interpretiert. Allerdings macht das symantisch oft kein Sinn in Tabellen.

Fakt ist, die beiden Häkchen (oben seccenshot) sind augenblicklich ohne echte Funktion.
Fhem on MacMini/Ubuntu.
Absoluter Befürworter der Konsequenten-Kleinschreibung https://de.wikipedia.org/wiki/Kleinschreibung
Infos zu Klimawandel http://www.globalcarbonatlas.org