Tests: Tabellenkopf beim Scrollen fixieren (sticky header)

[fbufbi]

Ausgangslage: Lehrpersonen sind heutzutage im Schulhaus mit ihrem Laptop (entweder von der Schule gestellt oder BYOD) unterwegs. Eine angefragte Schule gibt die Grösse dieser Laptops mit 13,3 Zoll an.

Use cases:

• Die Mittelschulen führen Jahrespromotionen und berechnen daher die Fachnote über alle Tests des Schuljahres. Damit sammelt sich eine hohe Anzahl an Tests pro Fach an.
• Beim Scrollen geht heute die Übersicht (Bezeichnung der Tests) verloren, weil der Tabellenkopf verschwindet. Das Risiko steigt, einen falschen Test zu bearbeiten.

SOLL für die Anzeige auf Tablet/Laptop & Desktop (nicht auf Mobile):

• Fixierung des Tabellenkopfs beim Scrollen (Position zum Fixieren zu besprechen)

Beispiel: GymBivo, l1 > Tests im Fach Englisch-S3, 27a

[hupf]

Update was ich noch geändert habe im Vergleich zur Demo vom Daily am 19.6.:

• Header über dem linken, sticky Teil mit den Schüler:innennamen wird nun auch vertikal fixiert, es steht also immer die korrekte Spaltenüberschrift über der jeweiligen Spalte:
  
• Dazu habe ich noch den Button «Mittelwert als Note setzen» horizontal fixiert, damit er nicht wegscrollt (siehe obiger Screenshot).
• Wenn man das Fenster resized hat, konnte es passieren, das wegen der Veränderung des Evento Portal Layouts (Hamburger Menü) der sticky Header nicht mehr zuoberst positioniert war. Diese Positionierung wird nun auch aktualisiert.

Aus meiner Sicht wäre es so ready-to-merge.

[fbufbi]

@hupf Folgendes Problem:
ab 616 bis und mit 809 Pixel: komisches Scrollverhalten

1. Kopf verdoppelt sich für kurze Zeit beim Scrollen nach unten.
2. Beim Weiterscrollen nach unten löst sich die Verdoppelung wieder auf (ok). Eine graue Linie bliebt aber "mittendrin" stehen.

Edit: Folgender Punkt wurde gestrichen: ab 616 bis und mit 892 Pixel: Tabelle praktisch unbrauchbar wegen Fixierung
Grund: Auf PROD ist der Verhalten heute schon so. Neue Story erfasst für Backlog.

[hupf]

@fbufbi Der linke Teil der Tabelle welcher fixiert wird, hat nun eine fixe Breite, dies macht die Umsetzung technisch wesentlich einfacher und fixed den Visual Bug.

[fbufbi]

Test OK