Cards im Wiki

[Rolf B]

Hallo Matthias,

die Titelfarbe ist drin damit man ggf. eine Card-Wüste visuell etwas auflockern kann. Gerade wenn eine Hintergrundfarbe ins Spiel kommt, muss man was für den Kontrast tun können. Gut, dann müsste das Ding eher "farbe" heißen und für alle Texte auf der Card gelten. Aber wenn man mit den Hintergrundfarben Disziplin hält, kann man darauf schon verzichten.

Die orange Linkfarbe ist ja ein Relikt aus dem braunen Theme des Jahres 2010

Okay. Also weg mit can-glow und als Markierung für eine aktive Card (hover/focus) nur noch ein Outline und ein Box-Shadow für die Card? Und den Titel unterstreichen? Das macht die Cards formaler. Und langweiliger…

Die dritte Card für den Seiteninspektor wird bei :hover schwarz!

Whut? Bei mir wird der Titel unterstrichen und die Card bekommt die schwarze Outline. Ein Cache-Problem? Am Fuchs liegt's nicht, gerade probiert.

icon und logo sind Synonyme

Njein. Der Unterschied zwischen icon und logo ist, dass icon IMMER ein Bild einbindet und eine Breite vorgibt. Erstellt wird ein linkfreies img-Element mit den Klassen can-glow und icon. Die Breite ist 35% der Card, maximal 4em. Mit logo wird hingegen ein leeres div mit float:right und der can-glow Klasse gesetzt. Der Inhalt ist frei. D.h. icon ist die für Bilder optimierte Version von logo, mit logo musst Du mehr selbst tun und hast damit mehr Freiheiten. Deine "CSS-Nesting" Card wäre ohne logo nicht machbar gewesen bzw. ich hätte dann ein SVG erstellen müssen und als icon einbinden.

Das gilt auch für "bild". Es erzeugt ein linkloses Image mit der Klasse teaser (die ist historisch aus deinen div-Cards entstanden) und img.teaser wird im CSS auf 100% Breite gesetzt. "vollbild" erstellt den gleichen Inhalt, ist aber zusätzlich ein Schalter, der den Titel auf position:absolute setzt. Meine erste Idee war, diesen Schalter eigenständig zu haben (titel-absolut=1 oder so), aber dieser Modus ergibt keinen Sinn, wenn man Inhaltstext auf der Karte hat, darum bin ich davon wieder ab.

Evtl. einfach die Konvention, dass alle SVG-Icons der Kategorie:Icon das gleiche Seitenverhälntis haben sollten?

Es gibt ja zwei Bildtypen auf Cards: Icons (oben rechts, Teil des Titel) und Bilder (unten, volle Breite). Icons sind eher quadratisch oder im Hochformat, während Bilder bei "Normalcards" Querformat haben. Ein Bildformat für die Card-Bilder löst es auch nicht unbedingt, denk an "Bilder im Internet", da ist bewusst ein flaches Bild drin.

Der teaser-Parameter ist historisch gewachsen. Der Inhalt ist freier Wikitext und wird über dem Card-Bild dargestellt (sofern eins da ist). Er kann auch etwas länger sein und eine Liste bilden. Der Teaser ist auf etlichen deiner Cards vorhanden. Er wird automatisch in ein <p class="teaser"> gesetzt, ist als Einzeiler gedacht und wird unter dem Card-Bild dargestellt.

Ich möchte eigentlich vermeiden, dass man die Klassen, die das Cardverhalten steuern, im Wikitext kennen und zuordnen muss. Wer die Card-Vorlage verwendet, sollte von der Konstruktion der Cards möglichst nichts mitbekommen und schon gar nicht die verwendeten Klassen kennen.

Ich könnte "bild" und "teaser" entfernen und alle Inhalte über inhalt= zuordnen (oder dann sogar wieder auf {{{1}}} zurückgehen). Dann müsste ich aber mindestens eine Subvorlage {{Card/Bild|Foo.svg}} machen, die das img-Element korrekt erzeugt und beklasst. Ist das so viel hilfreicher?

Eine Card/Vollbild-Vorlage als Inhaltsvorlage könnte man auch machen. Im CSS würde man dann mit

.card:has(.vollbild) .titel {
   position:absolute;
}

arbeiten.

Ich könnte auch "icon" entfernen und eine Vorlage Card/Icon erstellen. Dann würde man

  logo={{Card/Icon|Foo.svg}}|

schreiben. Aber ist das alles bequemer für den Nutzer? Die Vorlage soll bequem zu verwenden sein, nicht bequem zu erstellen.

Das Erstellen von mehreren Card-Vorlagen oder Subvorlagen wollte ich ja eigentlich vermeiden. Eine einzige Vorlage gibt einen stringenteren Rahmen vor. Ist es so wichtig, möglichst wenige Parameter zu haben?

Rolf