interessantes Konzept für die Formatierung von Listen, wenn es um die Darstellung von z.B. Datumsrelevanten Daten geht.
Beispiel an Contao mit modtwitterreader. Eine Erweiterung um aus Twitter einen feed zu lesen. Wie der genau funktioniert, weiß ich noch nicht. Aber hier geht es erst einmal um die Ergebnisdarstellung
<div class“mod_twitterreader“></div>
Zur weiteren Strukturierung gibt es das html-Element <article>
<article class=“even“></article>
Die Klasse „even“ und „odd“ einfach nur um Zeilenwechsel mit z.B. anderen Hintergrundfarben zu definieren
Ein weiteres HTML-Element ist <header>
<header class=“xxxx“>
</header>
Statt einem <Hx> zu verwenden, reicht es hier einfach mal <header> zu verwenden. Alle Headerelemente zum Artikel sollen gleich dargestellt werden
Dann gibt es da ein schönes neues HTML-5 Element für die Darstellung von Zeit <time>. Wenn das richtig formatiert wird, können Suchmaschinen das leichter lesen.
<time datetime=\"Tue Dec 15 20:02:20 +0000 2015\">15<b>Dez</b></time>
Der Inhalt von datetime kann sehr einfach durch php erzeugt werden. Dazu aber später.
Was zwischen dem öffnenden und schließendem tag steht, bleibt einem selbst überlassen. Der ist „nur“ für den Lesbarkeit des Menschen notwendig. Ich habe hier den Tag und in fett den Monat gewählt.
Alles zusammen sieht dann in etwa so aus:
<div class“mod_twitterreader“>
<article class=“event“>
<header class=“xxxx“>
<time datetime=\"Tue Dec 15 20:02:20 +0000 2015\">15<b>Dez></b>
</time>
</header>
<p>Inhalt des Artikels</p>
</article>
</div>
Folgender Screenshot zeigt die Liste unformatiert
Nun ist das ganze noch nicht so richtig interessant. Ganz normale HTML-Geschichten. Jetzt kommt aber die CSS-Formatierung dazu. Da wird es spannend.
Erst mal die einfachste Formatierung. die \"Bold\" Section.
.mod_twitterreader time>b {padding:0.2em 0 0 0; display:block; font-size:0.5em;}
Der wichtige Teil hier ist das \"display:block\". Da <b> ein \"inline\" Element ist, brauche ich hier ein Block-Element, damit die beiden Texte untereinander stehen.
Jetzt der etwas komplexere Teil. Die Formatierung von \"time\". Ist auch ein Element, wie jedes andere. Keine besondere Funktion für das Frontend.
.mod_twitterreader time
{
padding: 0.5em 0 0.5em 0;
font-size:1.5em;
font-weight:600;
line-height:1;
left:0;
width:15%;
position:absolute;
text-align:center;
-moz-border-radius:10px;
-webkit-border-radius:10px;
border-radius:10px;
-moz-box-shadow:0 2px 8px #444;
-webkit-box-shadow:0 2px 8px #444;
box-shadow:0 2px 8px #444;
background: rgb(204,204,204);
background: -moz-linear-gradient(top, rgba(204,204,204,1) 0%, rgba(244,247,247,1) 34%, rgba(255,255,255,1) 63%, rgba(204,204,204,1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(204,204,204,1)), color-stop(34%,rgba(244,247,247,1)), color-stop(63%,rgba(255,255,255,1)), color-stop(100%,rgba(204,204,204,1)));
background: -webkit-linear-gradient(top, rgba(204,204,204,1) 0%,rgba(244,247,247,1) 34%,rgba(255,255,255,1) 63%,rgba(204,204,204,1) 100%);
background: -o-linear-gradient(top, rgba(204,204,204,1) 0%,rgba(244,247,247,1) 34%,rgba(255,255,255,1) 63%,rgba(204,204,204,1) 100%);
background: -ms-linear-gradient(top, rgba(204,204,204,1) 0%,rgba(244,247,247,1) 34%,rgba(255,255,255,1) 63%,rgba(204,204,204,1) 100%);
background: linear-gradient(top, rgba(204,204,204,1) 0%,rgba(244,247,247,1) 34%,rgba(255,255,255,1) 63%,rgba(204,204,204,1) 100%);filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=\'#cccccc\', endColorstr=\'#cccccc\',GradientType=0 );
}
Von dem ganzen Teil sind für die eigentliche Formatierung nur die ersten acht Zeilen wichtig
Das Ergebnis sieht noch nicht ganz so prickelnd aus. Der Inhaltstext wird vom Datum überlappt. Aber das ist ganz einfach zu korrigieren. Einfach einen linken Rand für den \"content\" Bereich einstellen.
.mod_twitterreader .content {
padding:0;
margin-left:17%;
}
Und schon folgt das nächste Ergebnis. Das ist dann endgültig das richtige.