Tabelle

Tabellen

Frontend

table.png

Per Klick auf eine der Blöcke kann der Inhalt bearbeitet werden. Auch wird die Spalte ausgewählt und gib einem am unteren Rand ein kleines Fenster mit einigen Optionen wie z.B.:

Zeile darüber einfügen

Zeile darunter einfügen

Zeile löschen

Spalte links einfügen

Spalte rechts einfügen

Spalte löschen

kontextmenu.png

Per Rechtsklick bekommt man ein kontextmenu mit erweiterten Optionen, inklusive den darüber genannten. Außerdem besitzt der Block einen Abstand von 32px zu den darunterliegenden Blöcken.

Ab einer Fensterbreite unter 768px (auch mobil) ändert sich die Ansicht der Tabelle im Frontend. 

Tabelle normal (Fensterbreite größer als 768px)

tabelle normal

Tabelle responsive (Fensterbreite kleiner als 768px)

tabelle_mobil

In der mobilen Tabellenansicht werden jeweils 2 Spalten der Tabelle angezeigt. Kann man nicht weiter nach links "scrollen", dann wird der Pfeil transparent. Klickt man auf den rechten Navigationspfeil, dann wird um die Hälfte der Bildschirmbreite nach rechts gescrollt. Somit wird dann die nächste Spalte sichtbar. 
Der Spaltentitel scrollt immer mit, sobald die Spaltentitel an der unterhalb der Navigation verschwindet. Die Navigationspfeile erscheinen ein wenig früher. 
Die Navigationspfeile sowie die Spaltentitel verschwinden wieder, sobald man an der letzten Zeile der Tabelle angelangt ist.
Ist das Fenster größer als 768px, dann wird die Tabelle wieder wie vorher angezeigt und die Navigationspfeile verschwinden. 
Außerdem ändert sich die Farbe der Navigationspfeile, sowie der von den Spaltentitel je nach Mandant.

warning
Damit das mobile Layout greift, muss die Titelzeile vorhanden sein!

Backend

Texte können über einen Klick auf eine Spalte oder Zeile bearbeitet werden.

CSS-Klasse:

.headline-1 {

height55px;

width283px;

color#FFFFFF;

font-family: Lato;

font-size24px;

font-weight900;

line-height30px;

}