Neuer Style: f18

[rudolfkoenig]

Bitte das Css FHEMWEB-Attribut entfernen. Ich habe noch keine Idee, wie man das automatisiert machen koennte, da der Benutzer ja selbst in Css was reinschreiben kann.

[DarkT]

Ich habe mal ne Frage zum Thema Dashbaord und f18.

Kannst Du da was zu sagen Rudolf?

[rudolfkoenig]

Eigentlich ist Dashboard nicht meine Baustelle, es scheint aber aktuell verwaist (bzw. nicht intensiv betreut) zu sein, genauso wie FLOORPLAN.
Ich habe vor in f18 was dafuer zu tun, weiss aber noch nicht in welcher Form, wollte die dashboard Dateien eigentlich nicht anfassen.

[DarkT]

Eigentlich ist Dashboard nicht meine Baustelle, es scheint aber aktuell verwaist (bzw. nicht intensiv betreut) zu sein, genauso wie FLOORPLAN.
Ich habe vor in f18 was dafuer zu tun, weiss aber noch nicht in welcher Form, wollte die dashboard Dateien eigentlich nicht anfassen.

Ok, das klingt zumindest schon mal gut. Gibt es denn eine Alternative zu Dashboard? Kannst Du HIlfe gebrauchen? Und wenn ja in welcher Form?

[rudolfkoenig]

Gibt es denn eine Alternative zu Dashboard?

Mit vergleichbarer Funktionalitaet mW noch nicht.
Welche Dashboard Features verwendest du, und warum?

Kannst Du HIlfe gebrauchen? Und wenn ja in welcher Form?

Um die Farben anzupassen braucht man die Liste der CSS Selektor / Farbe Paare, das kann man mit der JS-Console rausfinden.
Die Bloecke pinnbar zu machen ist mir im Moment noch zu viel.

[DarkT]

Mit vergleichbarer Funktionalitaet mW noch nicht.
Welche Dashboard Features verwendest du, und warum?

Eigentlich nicht so viel.... ich wollte mir halte eine schöne Startseite mit allen nützlichen Infos machen.
Eventuell geht das auch anders?

-> s. Bild (Dash.png)

Um die Farben anzupassen braucht man die Liste der CSS Selektor / Farbe Paare, das kann man mit der JS-Console rausfinden.
Die Bloecke pinnbar zu machen ist mir im Moment noch zu viel.

Fehlerhaft sind zur Zeit:

Code Auswählen Erweitern



## Ein Tab
## 2 -> s. Dash.jpg

#dashboard .dashboard_widgetheader {
    background: none repeat scroll 0 0 #F0F0D8;
}

## Haupttab
## 1 -> s.Dash.jpg

#dashboard .dashboard_tabnav {
    background: #e9e9c8 !important;
}

## Knopf in der Tab-Bar zum Umschalten zwischen den einzelenen Tabs
## 4 -> s. Dash.jpg

#dashboard .ui-widget-header .ui-state-active {
    border: 1px solid #101110;
    background: #c2c2b5;
    font-weight: normal;
    color: #278727;
}

## Knopf in der Tab-Bar zum Umschalten zwischen den einzelenen Tabs
## 3 -> s. Dash.jpg

#dashboard .ui-widget-header .ui-state-default {
    border: 1px solid #278727;
    background-color: #d5d5b7;
    font-weight: normal;
    color: #F0F0dd;
}


Wenn man die 4 Tags anpasst, dann erhält man das Erbenis -> dash_neu (siehe Anhang)

[rudolfkoenig]

Danke fuer die Selektoren. Mit Farbe habe ich eine aus den in "f18 special" auswaehlbaren Farben gemeint, das habe ich jetzt selbst dazugedichtet und eingecheckt. Mehr als Farbanpassung wollte ich nicht.
Da ich nur fhem.cfg.demo als Beispiel habe, kann sein, dass ich was uebersehen habe.

[DarkT]

Danke fuer die Selektoren. Mit Farbe habe ich eine aus den in "f18 special" auswaehlbaren Farben gemeint, das habe ich jetzt selbst dazugedichtet und eingecheckt. Mehr als Farbanpassung wollte ich nicht.
Da ich nur fhem.cfg.demo als Beispiel habe, kann sein, dass ich was uebersehen habe.

Sorry da habe ich wohl was falsch verstanden, aber Danke!

[Damian]

Wenn ein Modul die Eigenschaft

Code Auswählen Erweitern

$hash->{FW_addDetailToSummary} = 1;

nutzt, um Details unter der Statuszeile anzuzeigen, dann fehlt eine Abgrenzungslinie um Module, die gruppiert sind, besser von einander zu trennen (siehe Anhang).

Um eine klarere Trennung zu erreichten, könnte man in f18style.css hinter der Zeile 23

Code Auswählen Erweitern

  border-bottom: 1px solid gray;

einfügen.

Wenn es nicht für alle gewünscht ist, dann möchte ich bitten die Eigenschaft zumindest für das DOIF-Modul (in f18style.css hinter der Zeile 25)

Code Auswählen Erweitern

table.block.wide.uiTabledoif { border-bottom: 1px solid gray; }

einzufügen.

Im Anhang Darstellung ohne Linie und mit Linie

[nils_]

/mitlesemerker


sehr schick bisher!!


nur interessehalber:
wie kommt der name f18 zustande?
jahreszahl?

[DarkT]

Und das Dashboard sieht jetz tauch wieder super aus. Danke Rudolf

[rudolfkoenig]

Um eine klarere Trennung zu erreichen, könnte man in f18style.css hinter der Zeile 23

Code Auswählen Erweitern

border-bottom: 1px solid gray;
einfügen.

Danke, mir gefaellt es auch besser so, habs eingcheckt.

[Markus Bloch]

Hallo Rudi,

gibt es einen Grund, warum Du mir die Tabellen in der mobilen Ansicht auf 2 Spalten abschneidest?

Code Auswählen Erweitern

@media screen and (orientation: portrait) {
  body.small table.block tr td:nth-child(n+3) { width: 0px; display: none; }
  body.small #content > table { width: 100%; }
}


Was kann ich dagegen tun?

Gruß
Markus

[rudolfkoenig]

gibt es einen Grund, warum Du mir die Tabellen in der mobilen Ansicht auf 2 Spalten abschneidest?

Ja: "normale" Tabellen haben mehr Inhalt pro Spalte, und viele Spalten mit viel Inhalt schaut auf einem schmalen Bildschirm haesslich aus. Vermutlich sollte ich die Abschaltung optional machen.

Was kann ich dagegen tun?

Geraet quer halten.

[Markus Bloch]

Ja: "normale" Tabellen haben mehr Inhalt pro Spalte, und viele Spalten mit viel Inhalt schaut auf einem schmalen Bildschirm haesslich aus. Vermutlich sollte ich die Abschaltung optional machen.

Die Idee an sich finde ich gut. Ich würde es nur etwas variabel gestalten, so dass man als Modulmaintainer der eine SummaryFn und DetailFn in FHEMWEB anbindet sowas steuern kann (evtl. als CSS class). Einen konkreten Vorschlag habe ich gerade nicht zur Hand. Ich könnte mir vorstellen in so einem Fall für FB_CALLLIST vorstellen bestimmte Spalten durchaus auszublenden. Da jedoch die Spaltenreihenfolge durch den User veränderbar ist, müsste ich die zu entfernenden Spalten durch eine CSS-Klasse bspw. flaggen.

Geraet quer halten.

Stimmt, beim studieren deines CSS-Statements bin ich auch drauf gekommen.