[Projekt] MDCSS v2: Material Design CSS Version 2

[Uhula]

@Tirador Umlaute in Namen vermeide ich (Jahrzehnte lange Prog-Erfahrung), meine Küche heißt Kueche Insofern habe ich es nicht getestet. Lässt sich aber im Script sicher leicht einbauen bei der Übernahme des page-Namens in das HTML-Element. Merke ich mir mal.

[Tirador]

@BoehserWolf Deine Übersicht ist klasse und genau das was ich auch noch bauen wollte. Kannst Du deine Arbeit zur Verfügung stellen. Den Look finde ich auch super und finde deinen Vorschlag toll, wenn dies in das CSS zurückfliessen würde.

[BoehserWolf]

@Tirador Habe meinen Export im Thread https://forum.iobroker.net/topic/31335/material-design-css-mdcss-v2-vis-views-zur-inspiration/38 gepostet.

[ratte-rizzo]

@Dominik-F
Es tut mir leid, ich bin zu blöd. Ich bekomme das dark theme nicht hin. Auch nicht mit Deinem Quelltext. Muss ich noch etwas an einer anderen stelle ändern? Im Editor ist es brav dunkel, aber nicht in Echt.

Hat noch jemand eine Idee?

Dank & Gruß
Daniel

[Dominik F.]

@ratte-rizzo

Du musst auf jeden Fall links oben ins Menü und dann den Punkt Einstellungen anklicken. Dort kannst du die Farben einstellen. Hier ein Beispiel meiner Einstellungen dort:

[psifactory]

@ratte-rizzo Genau an der Front habe ich gestern auch bis zur Verzweiflung gekämpft
@Uhula solltest du eventuell mal für diejenigen die das Prinzip noch nicht verstanden haben in den Post#1 aufnehmen.
Kurze Frage noch: Custom CSS packe ganz unten ins Stylesheet? Bis jetzt hat das eigentlich ganz gut geklappt.

[ratte-rizzo]

@psifactory und @Uhula
Okay, jetzt hab ich es. Der Hinweis mit dem Menü zur Einstellung war der Trick.

Außerdem: Diese Einstellungen gibts im MD_Simple Beispiel nicht!!! Da ich das einfache Beispiel verwendet hab, konnte ich natürlich lange suchen...

[mickym]

@Uhula
Ich hoffe, ich nerve hier nicht wegen den IOS - Geräten und ich weiß ja, dass Du keine Apple Geräte zuhause hast - aber vielleicht möchte der eine oder andere ja Deine tolle Arbeit auch auf diesen Geräten anzeigen und ich denke mal, dass Du mit der letzten Modifikation auf der richtigen Spur bist, aber es gibt noch einiges anderes was auf den IOS-Geräten nicht korrekt angezeigt wird. Das mit den Shapes hat auf jedenfall geklappt, aber wahrscheinlich muss in dieser Richtung noch mehr verändert werden.
Grundsätzlich werden manche Dinge - immer noch nur in rechteckiger Form angezeigt. I

Die Details verpacke ich hier mal - damit das Posting nicht so lang wird.

Spoiler

Ich bin mir zwar immer noch nicht sicher, dass das alles mit dem Safari zu tun hat, da es sich mit dem Google Browser auf dem iPad identisch - aber eben unterschiedlich zum Windows Rechner verhält (dort wird alles korrekt angezeigt) - vielleicht nutzt aber auch der Google Browser auf dem iPad die gleiche Maschine unten drunter.

Erst mal der Test des Demo Projektes:

1. Die Shapes werden nun tatsächlich korrekt angezeigt.
2. Bei den Flows wird weiterhin ein rechteckiger Rahmen um den Flow angezeigt.
3. Ebenfalls bei den Bars - die spitz zulaufen
4. Bei den Glow- Pulse Effekten sind die auch alle rechteckig und passen sich nicht der Form des Widgets an.

Da Bilder mehr als 1000 Worte sagen - hier mal ein paar Screenshots.

Erst mal die Verbesserung von 2.2 ==> 2.3

==> v 2.3

Referenz Bars Windows PC

so schaut es auf dem iPad aus:

Generell scheinen auch die Effekte rechteckig zu sein

Ich hoffe - ich kann mit den Rückmeldung etwas helfen.

Gruß Mic

[psifactory]

@Uhula
Kurz noch eine Frage: kann man die CSS Variablen an dieser Stelle dazu missbrauchen und ein Hintergrundbild zu übergeben?

"primary_color":"",

[chhe]

@Uhula

Ich habe mir die MD_Demo mal heruntergeladen und importiert. Ich habe nämlich aktuell, dass ich die Cards nicht zusammenklappen kann. Dies funktioniert weder in der MD_Demo noch in der von Dominik F. bereitgestellten Vis

Kannst du mir weiterhelfen?

[Uhula]

@ratte-rizzo Im MD_Simple habe ich auf die komplexere Konfiguration verzichtet und stattdessen die Farben direkt im abar-View im mdui-config-Widget eingetragen. Aber es stimmt, die Doku muss angepasst werden.

[Uhula]

@mickym danke dir. Safari kann ohne -webkit- mit den clip-path Angaben nicht umgehen, ich habe alle für die Baranzeige ergänzt. Mit dem Blinken/Flash/Pulse kann ich so nichts anfangen, ich sehe nur, dass der box-shadow leicht anders dargestellt wird.

[Uhula]

@psifactory Nein, leider nicht. Aber das Bild kannst du z.B. in jedem contXXXX View einfügen, zb mit dem basic-image Widget. Dem gibst du einen z-index von 1 und die CSS class "mdui-noflex", alle cardXXX die du auch einfügst erhalten einen z-index = 2.
Im MD-Demo für contStart angewendet:

[Uhula]

@chhe Wenn du den 2 Jahre alten "Material Design Widget Adapter" installiert hast, der stört, da dort die MDCSS v1.8 enthalten sind. Auch kann es sein, dass der Material Design Adapter von Scrounger stört (habe ich aber noch nicht selbst ausprobiert, nur an anderer Stelle einen Hinweis gelesen).

[mickym]

@Uhula said in [Projekt] MDCSS v2: Material Design CSS Version 2:

@mickym danke dir. Safari kann ohne -webkit- mit den clip-path Angaben nicht umgehen, ich habe alle für die Baranzeige ergänzt. Mit dem Blinken/Flash/Pulse kann ich so nichts anfangen, ich sehe nur, dass der box-shadow leicht anders dargestellt wird.

Nun es ist eigentlich genauso - dass hier bei den Effekten Rechtecke angezeigt werden.

Ich habe hier alles kleine runde Buttons erstellt und zeige die nun mit dem "glow" Effekt an.

Normal schaut das so aus:

auf dem iPad so:

Für mich ist das das gleiche Problem - dass hier nicht der Form gefolgt wird. Ist kein Effekt aktiv - wird das normal angezeigt (s. unteres Bild ganz rechts)

[Uhula]

@Tirador sagte in [Projekt] MDCSS v2: Material Design CSS Version 2:

Ich habe jetzt mal auf den neuen Tag mdui-page-title umgestellt.
Dabei habe ich noch ein Problem mit Sonderzeichen im HTML.

Ab MDCSS v2.4 geändert: mdui-page-name und mdui-page-title verarbeiten nun auch Umlaute korrekt

[Uhula]

@mickym Da musst du mir helfen, dass kann ich hier nicht nachstellen. Für das rote Blinken ergänze mal in der Projekt-CSS am Ende die CSS aus (a) oder (b) oder (c) :

(a)

.mdui-red-blink   {
  animation: mdui-red-blink-ani 1s linear infinite;
  -webkit-animation: mdui-red-blink-ani 1s linear infinite;
}
@keyframes mdui-red-blink-ani  {
  0%,50% {filter: drop-shadow(0px 0px 4px #F44336) drop-shadow(0px 0px 4px #F44336) drop-shadow(0px 0px 4px #F44336); }
  51% {filter: none;}
}

(b)

.mdui-red-blink   {
  animation: mdui-red-blink-ani 1s linear infinite;
}
@keyframes mdui-red-blink-ani  {
  0%,50% {filter: drop-shadow(0px 0px 4px #F44336) drop-shadow(0px 0px 4px #F44336) drop-shadow(0px 0px 4px #F44336); 
        -webkit-filter: drop-shadow(0px 0px 4px #F44336) drop-shadow(0px 0px 4px #F44336) drop-shadow(0px 0px 4px #F44336); }
  51% {filter: none;
        -webkit-filter: none;}
}

(c)

.mdui-red-blink   {
  animation: mdui-red-blink-ani 1s linear infinite;
  -webkit-animation: mdui-red-blink-ani 1s linear infinite;
}
@keyframes mdui-red-blink-ani  {
  0%,50% {filter: drop-shadow(0px 0px 4px #F44336) drop-shadow(0px 0px 4px #F44336) drop-shadow(0px 0px 4px #F44336); 
          -webkit-filter: drop-shadow(0px 0px 4px #F44336) drop-shadow(0px 0px 4px #F44336) drop-shadow(0px 0px 4px #F44336); }
  51% {filter: none;
       -webkit-filter: none;}

}

Was funktioniert?

[mickym]

@Uhula Leider bewirkt keine der 3 Varianten eine Veränderung. - Blinken weiterhin alle 3 aber weiter quadratisch.

[chhe]

@Uhula said in [Projekt] MDCSS v2: Material Design CSS Version 2:

@chhe Wenn du den 2 Jahre alten "Material Design Widget Adapter" installiert hast, der stört, da dort die MDCSS v1.8 enthalten sind. Auch kann es sein, dass der Material Design Adapter von Scrounger stört (habe ich aber noch nicht selbst ausprobiert, nur an anderer Stelle einen Hinweis gelesen).

Habe den "Material Design Widget Adapter" deinstalliert. Leider brachte dies keinen Erfolg.
Den anderen genannten Adapter hatte ich nicht installiert.

[Pittini]

@chhe sagte in [Projekt] MDCSS v2: Material Design CSS Version 2:

Habe den "Material Design Widget Adapter" deinstalliert. Leider brachte dies keinen Erfolg.

Kann sein dass es trotzdem nicht geht, aber lösch mal den Browsercache, das hatte bei zweien meiner Betatester geholfen.