Cards im Wiki

[Matthias Scharwies]

Servus!

Hallo Matthias,

die Titelfarbe ist drin damit man ggf. eine Card-Wüste visuell etwas auflockern kann.

Ja, schon. Aber Stylesheets wurden doch erfunden, um Elemente mit einer Funktion durchgängig einheitlich und damit gut erkennbar zu gestalten.

Am einfachsten wäre es, die normale Link-, bzw. Textfarbe zu nehmen, damit wir beim Dark Mode dann eben umschalten können. Bunte Cards sollten die Ausnahme bleiben, die einen Akzent setzen, aber eben nicht 3x4 Cards mit 12 verschiedenen Farben. Nur .neu soll eben einen grünen Hintergrund bekommen, bei dem aber auch die Standardfarbe passt.

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.

Das wäre eine Idee. Aber ich glaube, dass mit dem „Disziplin halten“ ist gut!

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…

Das macht ja das SVG, oder nicht?

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.

Mist - ich kann kein Deutsch mehr - die Umrandung ist schwarz, aber eben nicht blau.

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.

OK! Verstanden! (Das gleiche Problem habe ich grad mit einer Card „SEO“, die ich wsl. nie wieder brauche. Anstelle eines SVG setze ich da:

inhalt=<span style="font-size:8em;font-weight:bold;color:green">SEO</span>

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.

Ah! Mist, das mit den 100% Breite kriegen wir ohne Klasse und damit Parameter nicht hin.

Trotzdem würde ich gerne überlegen, ob wir uns deshalb nicht auf

• Icon oben rechts oder
• Vollbild absolut positioniert

einigen sollten.

@JürgenB @Felix Riesterer Was denkt ihr?

"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.

Ja, aber eigentlich geht's auch ohne die Klasse, oder?

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?

Nein, einfach nur:

inhalt=irgendein Inhalt in Wikisyntax - siehe oben der span

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?

Genau!

Nur eine Card-Vorlage!

Nur diese Parameter

link

titel

icon / logo /das sehe ich ein

vollbild / falls wir das mit dem bild sein lassen

inhalt

background

color

Spalte

Zeile

Herzliche Grüße

Matthias Scharwies