SideBarMenu

Überblick Visual Style Guide

Tabellen

Stud.IP verfügt über ein einheitliches und einfach gehaltenes Tabellenlayout, das für alle tabellarischen Darstellungen verwendet werden soll. Kernelemente sind dabei ein sehr einfach zu verwendendes CSS und eine angenehme und unaufdringliche grafische Gestaltung.

Eine Tabelle ist ungefähr so aufgebaut, wie in diesem Beispiel der Teilnehmerseite:

Aufbau & Elemente

Jede Tabelle setzt sich zusammen aus einer Beschriftung (Label) für die gesamte Tabelle, die Kopfzeile mit den Spaltenbeschriftungen, optionale Trenner-Zeilen, um Segmente in Tabellen gegeneinander abzugrenzen, eine Fußzeile und die normalen Tabellenzeilen. Tabellen selbst sind transparent, die Hintergrundfarbe (in Stud.IP einfaches Weiß) scheint durch.

Grundsätzlich bauen sich die Spalten wie folgt auf:

  • Bereich für Bulk-Aktionen: Wenn Bull-Aktionen vorgesehen sind, nehmen diese die erste Spalte auf. Die erste Spalte besteht in diesem Fall aus Chdeckboxen, in der Kopfzeile ist eine Checkbox für das Aktivieren aller Chechboxen vorzusehen.
  • Icon: Das passende Icon für das Objekt
  • Name/Bezeichnung: Der Name des Objektes, dass die Tabellenzeile repräsentiert. Üblicherweise ist der Name klickbar, wenn dadurch der Zugriff auf das Objekt ermöglicht wird (etwa Download im Dateibereich, Link in die Veranstaltung auf der Seite "Meine Veranstaltungen"
  • weitere Spalten mit Namen des Autors/Erstellers, weitere Metadaten eines Objektes
  • Aktionsspalte: Diese nimmt entweder bis zu drei Aktionselemente (in Form von Icons) auf, oder, wenn mehr als drei Aktionen möglich sind, das Aktionsmenu. Dieses hier ist hier definiert:

Der Klick auf den Header einer Spalte sortiert diese, sofern sinnvoll möglich. Ein weiterer Klick kehrt diese Sortierung um.

Aktionselemente finden sich außerdem an folgenden Stellen:

  • Elemente, die sich auf die gesamte Tabelle beziehen: Oberhalb der Tabelle (Label-Zeile) in Form von Icons/Aktionsmenu.
  • Elemente die sich auf eine Zeile beziehen: Pro Spalte auf der rechten Seite in Form von Icons/Aktionsmenu.
  • Elemente, die sich auf ausgewählte Zeilen beziehen: Im Footer der Seite mit dazu gehörigen Checkboxen auf der linken Seite in jeder Tabellenzeile (Die Checkbox in der Tabellenkopfzeile neben den Überschriften der Spalten markiert alle sichtbaren Zeilen der Tabelle).

CSS

Das folgende Beispiel verdeutlicht eine simple Tabelle, die nach aktuellen Vorgaben aufgebaut ist:

<table class="default">
_____<caption>
__________<span class="actions">
__________<!-- Bereich für Aktions-Icons, die die gesamte Tabelle umfassen -->
__________</span>
_____TutorInnen
_____</caption>
_____<colgroup>
__________<col width="20">
__________<col>
_____<col width="80">
_____</colgroup>
_____<thead>
__________<tr class="sortable">
_______________<th>Nr.</th>
_______________<th>Nachname, Vorname</th>
_______________<th style="text-align: right">Aktionen</th>
__________</tr>
_____</thead>
_____<tbody>
__________<tr>
_______________<td style="text-align: right">01</td>
_______________<td>Kater, Cornelis</td>
_______________<td><!-- Bereich für Aktions-Icons, die die Zeile Tabelle umfassen --></td>
__________</tr>
_____</tbody>
_____<tfoot>
__________<tr>
_______________<td colspan="3">
_______________<!-- Bereich für Aktions-Icons, die die gesamte Tabelle umfassen -->
_______________</td>
__________</tr>
_____</tfoot>
</table>@@

Das Beispiel zeigt, das relativ wenige CSS-Stile verwendet werden müssen, um das Standard-Design von Stud.IP zu erhalten. Die Tabelle wird als Default-Klasse definiert, dadurch ergibt sich bereits der größte Teil des Aussehens. Im Beispiel nicht gezeigt wird ist eine eigene Klassen namens collapsable, die in einem <tboby>-Element zugewiesen wird, wenn Tabellen in sich gegliederte (und auch zuklappbare) Bereiche aufweisen.

Weitere Hinweise:

  • Jede Tabelle muss ein Label führend, das die Tabelle klar benennt
  • Weitere Gestaltungselemente sollen nicht eingeführt werden (ggf. bitte Rücksprache mit der GUI-Gruppe halten)
  • Tabellenbereiche können auf- und zuklappbar gestaltet werden
  • Hierarchische Tabellenstrukturen sind zukünftig nicht mehr vorgesehen. Stattdessen soll das das Auswählen eines Knotens (der in der Regel einer Zeile entspricht) die nächste Ebene springen, die dann vollständig angezeigt wird (übergeordnete Ebene werden ausgeblendet). Beispiel dafür ist die Umsetzung des Dateibereiches ab der Version Stud.IP 4.0
  • Dieses neue Tabellenlayout gilt lediglich für rein tabellarische Darstellungen. Systembereiche, die bisher Tabellen genutzt haben, um den allgemeinen Seitenaufbau zu beeinflussen, dürfen nicht au die diese Stile umgestellt werden. Hier empfiehlt sich, entweder das bestehe Aussehen (zunächst) beizubehalten oder ohne HTML-Tabellenstrukturen neue aufzubauen. In der Regel sind Forms hier die bessere Alternative.

Letzte Änderung am 26.06.2017 15:41 Uhr von ckater.