[Projekt] MDCSS v2: Material Design CSS Version 2

[Mike Hellracer]

@Dominik-F
Danke das war es!
Aber war eine andere Zeile.

[ak1]

Wie kann ich die Farbe der Kopfzeile eine Card im Vollbild ändern.
In den Bildern seht ihr die Card zum BackItUp Log. Der Hintergrund des Kopfbereichs ist in einem helleren grau gehalten, wie bei allen meinen Karten mit dem von mir bevorzugten Farbschema.
Wenn ich die Karte dann allerdings in den Vollbildmodus bringe, entspricht die Hintergrundfarbe des Kopfbereichs der Hintergrundfarbe der gesamten Card.

Kann ich dies irgendwie ändern?

Danke und Gruß
ak1

[harrym]

@ak1 versuchs mal mit card-title-bg

[ak1]

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

@ak1 versuchs mal mit card-title-bg

Sorry, kannst Du kurz erklären, wie Du das meinst?

Denkst Du vielleicht an sowas?

mdui-title-green-bg

Das funktioniert bei der normalen Karte. Sobald ich die Karte jedoch in den Vollbildmodus schalte, weicht die gewählte Farbe der Hintergrundfarbe.

[Uhula]

@ak1 Nö, leider nicht. Das habe ich nicht vorgesehen, weil im Vollbild-Modus ja keine Notwendigkeit besteht mehrere Cards voneinander durch ihre Kopfzeilen unterscheiden zu müssen.

[ak1]

@Uhula
Danke für die Rückmeldung. Kein Problem.
Ich persönlich würde es für stimmiger und konsistenter halten, wenn die Farbgebung genauso wäre, wie bei einer Card im normalen Modus. Für mich ist der Vollbild-Modus weniger ein echtes Vollbild für den eigentlichen Inhalt der Card. Vielmehr sehe ich es als maximale Vergrößerung der Card, wobei z.B. Effekte wie mdui-card-raised und auch die Kopfzeile mit allen Bedienelementen erhalten bleiben. Eine optische Trennung der Card vom (am Rand sichtbaren Hintergrund - zumindest bei "raised") und eine optische Trennung des Kopfes mit Titelzeile und Bedienelementen vom Rest der Card, wäre in meinen Augen schicker.

Aber wie gesagt, kein echtes Problem und vielleicht auch einfach eine Geschmacksache.

[ak1]

Ich muss nochmal eine Frage stellen:
Ich habe hier eine Card ("Timer"), welche seltsam reagiert, wenn ich sie mit dem Expand Icon verkleinere.
Man sieht das im zweiten Bild. Das unterste Widget der Card hängt dann nämlich in der Kopfzeile. Dieses Widget ist eine jqui - Select Value List und hat die CSS Klasse mdui-select.

Hat jemand eine Idee, was hier falsch läuft?

[der-eine]

@ak1 kann es sein, dass der Inhalt der Card über 80px ist?

[ak1]

@der-eine Die Card hat eine Höhe von 4 (bis max. 6 Rows). Das Widget am unteren Rand hatte eine vertikale/Top Positionierung mittels:

calc(100% - 48px)

Vielleicht war das ein Problem. Ich habe das Widget nun vor der Tabelle positioniert. Und jetzt funktioniert alles.

Danke für Deine Rückmeldung!

[Mike Hellracer]

@Uhula
Hi, habe das Projekt 1:1 installiert aber ich bekomme einige Material Icons nicht angezeigt.
https://material.io/resources/icons/?icon=coronavirus&style=baseline
z.B. water_damage, contrsuction, coronavirus
aber es sind noch einige andere.
Aber z.B. funktionieren cake, home, help und info
hier noch meine Einträge aus der CSS
für die Material-Icons

Spoiler

@font-face {
 font-family: 'Material Icons';
 font-style: normal;
 font-weight: 400;
 src: url(/vis.0/MD_Mike/images/MaterialIcons-Regular.eot); /* For IE6-8 */
 src: url(/vis.0/MD_Mike/images/MaterialIcons-Regular.woff) format('woff'),
      url(/vis.0/MD_Mike/images/MaterialIcons-Regular.ttf) format('truetype');
      
}

und für die MaterialDesign-Icons

Spoiler

@font-face {
 font-family: "Material Design Icons";
 src: url("/vis.0/Mike_Prod/images/materialdesignicons-webfont.eot?v=5.5.55");
 src: url("/vis.0/Mike_Prod/images/materialdesignicons-webfont.woff?v=5.5.55") format("woff"), 
 url("/vis.0/Mike_Prod/images/materialdesignicons-webfont.ttf?v=5.5.55") format("truetype");
 font-weight: normal;
 font-style: normal;
}

[Chrunchy]

@Mike-Hellracer ich vermute mal, dass @Uhula nicht jedesmal die iconfont-dateien aktualisiert.
Du kannst sie hier herunterladen. Soweit ich das festgestellt habe, ist die .eot-Datei nur noch bis Version 3.0.2 vorhanden.

Pakage herunterladen und die Dateien aus dem Verzeichnis iconfont bzw. font in dein VIS-Verzeichnis kopieren.

[zahnheinrich]

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

Pakage herunterladen und die Dateien aus dem Verzeichnis iconfont bzw. font in dein VIS-Verzeichnis kopieren.

Das funktioniert nicht.
Du musst die downgeloadeten Dateien mit dem Vis Dateimanager in den Projektpfad uploaden

[Chrunchy]

@zahnheinrich Äh, ja... dachte es wäre klar, dass Dateien im Vis nur via Upload mittels Dateimananger hinzugefügt werden können. Sry etwas unglücklich (undeutlich) ausgedrückt.

[zahnheinrich]

@Chrunchy
Macht ja nix, alles gut

[Mike Hellracer]

@Chrunchy
klar war das schon. Jetzt habe ich nur ein Problem der Download link ist für die Material DESIGN Icons. (dafür habe ich schon eine aktuellere Version) Auch sind in der Zip nicht die ttf, waff und eot sondern nur die png. Oder mache ich was falsch?
Die Icons die nicht gehen kommen aus "Material Icons" und nicht aus "Material Design Icons"
wo bekomme ich da die aktuelle Version?

[Chrunchy]

@Mike-Hellracer ich hatte es so verstanden, dass die die verlinkten Dateien aus deinem Posting im ersten Spoiler haben wolltest...

url(/vis.0/MD_Mike/images/MaterialIcons-Regular.ttf) format('truetype');

Diese Datei ist in den Packages enthalten. In Version 4 im Verzeichnis font.
In Version 3.0.2 im Verzeichnis iconfont.

Die eot gibt es in Version 4 offensichtlich nicht mehr.

Hatte ich aber oben schon geschrieben.

[Mike Hellracer]

@Chrunchy
Hi, du hast recht. Ich habe die Datei jetzt mal von da herutergeladen und durch einen Konverter in eot, waff und waff2 gewandelt. alle wieder in das Projektverzeichnis hochgeladen. --> leider keine Änderung. Irgendwas muss noch veraltet sein.
Habe das MD_simple Projekt erneut importiert. --> dann im lnav "home" <-> "waves" getauscht. --> keine Anzeige.
wogegen "weekend" sofort funktioniert.
<i class="material-icons">waves_</i>Start ->geht nicht
<i class="material-icons">weekend_</i>Start ->geht

[Chrunchy]

@Mike-Hellracer Bei mir funktioniert waves, allerdings kann ich dir nicht genau sagen, wann ich zuletzt die fonts aktualisiert habe.

Versuch doch mal die fertigen Dateien aus Version 3.0.2. Da sind alle Dateien (.eot, .woff, .woff2 und .ttf) drin und du brauchst nichts konvertieren.

Aber auch ich hatte schon das eine oder andere Icon, was nicht angezeigt wurde. Habe die Suche nach der Ursache aber nach Update und einiger Zeit aber aufgegeben.

[Mike Hellracer]

@Chrunchy
Wird wahrscheinlich das nervenschonendste sein

[jmeister79]

Guten morgen,
ich hab jetzt seit nem Jahr das Theme drauf und find es einfach toll.
vor allem mit meiner alten HTML Erfahrung kann ich viel machen.

Leider hab ich ein Problem, dass ich nicht lösen kann:

Wenn ich ein Inputfeld hinzufüge um beispielsweise numerische Parameter zu verändern, dann sieht das anders aus als in deinen Demos. In den Demos hast Du da nur unterstrichene Schwarze Felder, ich hab da immer irgendwie nen Buttonbackground hinter. Auch wenn ich im Demo ein neues Input hinzufüge oder aus dem Demo das widget exportiere.
Alle CSS Eigenschaften werden von diesem "button effekt" überlagert. Selbst wenn ich eine eigene Klasse schaffe ist immer dieses Zeug davor!

LG
Nils