Wiki: Cards auf Portalseiten

[Matthias Scharwies]

Servus!

Hallo Matthias Scharwies,

so langsam kommt es mir wie ein Selbstgespräch vor

ja, sorry. Meine Zeit ist im Moment knapp bemessen. Heute ist ein Regentag, da geht's mal.

Bei uns 36° - regnen tut's erst heut' nach um 5 und da wsl. nur woanders.

Wie heißt's so schön: nit zusammejeschisse is jenuch jelobt 😉. Aber ein paar Kotbröckchen hätte ich. Abgesehen von einem großen Lob für die Fleißarbeit und Kreativität, mit der Du das angegangen bist.

Das Layout für die Karten braucht noch ein bisschen Feintuning, find ich,

Ja!

in "Standalone SVGs" ist z.B. eine große Lücke zwischen Überschrift und Rest.

Problem ist wohl die Anordnung - jede Reihe legt die Höhe fest und die große Text in SVG-Card in Kombination mit den Unterseiten „sprengt“ das Layout. (Da will ich bis Mittwoch ein kleineres Icon erstellen und dann alles einheitlich haben.

Dann wird es aber trtzdem kleinere Cards mit nur 2 Unterseiten und längere haben (Im CSS-Bereich haben Flexblox und Grid 8 -Unterseiten)

Das liegt daran, dass es kein Template für die rows gibt. Ich hab mal in den DevTools ein "grid-template-rows: auto 1fr" eingesetzt, dann sieht es besser aus.

Sollte man nicht auch versuchen, ein einheitliches Layout für die Karten zu haben? Du hast jetzt Cards, wo die Überschrift eine Spalte belegt, und andere, wo sie so breit ist, dass sie 2 Spalten braucht. Das steuerst Du mit der teaser-Klasse - eine schlechte Namenswahl für diesen Zweck.

Der ist eigentlich für einen längeren Text unten gedacht. @TS hatte ja an einen kleinen attention-getter a la "Was die Browserhersteller iIhnen nicht zeigen wollen" "Wie sie Ihre Elemente tunen können".

Wenn man die Icons nur 80px und die (Über)-schrift/ den Titel (.card a b) "nur" 1.2em groß macht, müsste es auch so gehen.

Also:

• template-rows sollte verwendet werden
• Die Cards sollten über eine Vorlage generiert werden
• Layout-Optionen dann per Vorlagenparameter.

Nein! Dann muss man immer wieder mit Parametern operieren - wenn dann sollte alles optional sein - auch wenn die Kombo Titel und Icon gesetzt scheint. Ob dann 2-8 Unterseiten als Liste oder einen Teasertext, müsste man eben sehen.

Beispielsweise sollte man sowohl beim HTML-Einstieg als auch bei der "Trennung von ..." keine Unterseiten anzeigen (HTML#weitere_Tutorials)

Ich stelle mir das so vor:

{{card |titel=Kartenvorlage |titel_breit=Kartenvorlagenüberschrift |bild=kartenbild.svg |alt=Ein Kartenbild |Text Text Text Text Text Text |footer=Kartenfooter-Text, der über die ganze Breite geht }}

titel oder titel_breit wird alternativ verwendet. Der footer ist ebenfalls optional. Bild und vor allem der alt-Text für's Bild sind Pflicht

Ja, aber imho eben ohne Vorlage, sondern eben über HTML und dann in Klassen im CSS

Ich frage mich dann auch, ob Grid das richtige Layoutmodell ist. Ich fände es eigentlich besser, wenn das Bild gefloatet würde, damit der Kartentext im Zweifelsfall um das Bild herumfließen kann.

Könnte man ja auch mit

.card img {
  width: 80px;
  float:right;
}

erreichen.

Wenn man dann die Bilder floatet, könnte man auf alles HTML innerhalb von

<div class="card"> ... </div>

verzichten.

Ich bastele mal ein bisschen, aber jetzt muss ich erstmal wieder vom PC weg.

Wir könnten das ja am Mittwochabend besprechen.

Herzliche Grüße

Matthias Scharwies