search

iobroker-community-adapters / responsive-design-initiative

Repo for responsive design action items.
0 stars 1 forks source link

Vorschlag: Umgang mit Tabellen bei geringer Bildschirmbreite (xs,sm?) #10

Open oweitman opened 3 days ago

oweitman commented 3 days ago
Wenn bspw bei einem Mobilgerät hochkant gehalten eine Tabelle dargestellt werden soll, welche uU mehrere Spalten hat (>2) dann funktioniert das meist nicht gut. ggfs kann man horizontal scrollen, schön ist das aber nicht. Spaltenheader1 Spaltenheader2 Spaltenheader3
Value1.1 Value1.2 Value1.3
Value2.1 Value2.2 Value2.3

Dazu habe ich folgenden Vorschlag

Alternative A) jsonConfig erkennt entweder vollautomatisch oder auch per zusätzlichem Properties, bei welchen Auflösungen die Table als Card Auflistung dargestellt werden soll. Das Card-Element enthält dann alle Spalten aus der Tabelle in einer Vertikalen Auflistung:

------------------------------------------
| Spaltenheader1:         | Value1.1       |
| Spaltenheader2:         | Value1.2       |
| Spaltenheader3:         | Value1.3       |
------------------------------------------
| Actionzeile mit Up/Down/Del  Knöpfen   |
------------------------------------------

------------------------------------------
| Spaltenheader1:         | Value2.1       |
| Spaltenheader2:         | Value2.2       |
| Spaltenheader3:         | Value2.3       |
------------------------------------------
| Actionzeile mit Up/Down/Del  Knöpfen   |
------------------------------------------

Alternative B) Es wird das Card-Element als zusätzlichen jsonConfig-Typ eingeführt, so das der Nutzer mehr Kontrolle über das Layout innerhalb der Card hat. Zu überlegen wäre dann, wie man mit den Action-Knöpfen umgeht, da diese heute bei Table Vollautomatisch erzeugt werden, ob die dann ebenfalls vollautomatisch am unteren Ende der Card hinzugefügt werden oder man dem Nutzer ebenfalls eine kontrolle darüber gibt.

Für beide Szenarien müsste man überlegen, wie man mit der Möglichkeit zum filtern umgeht. Mir würde ein FilterCard direkt am Anfang der Liste vorschweben (die man aber per Property auch deaktivieren kann, da ich das in meinen Szenarien nicht benötige) Für jede Spalte gäbe es dann in gleicher Form wie die anderen Cards aufgebaut sind ein Filterfeld anhand dann die Auflistung gefiltert wird.

Um Alternative Ansichten bauen zu können, die in Abhängigkeiten von dem hidden-Attribut ein/ausgeblendet werden, würde dann noch eine Abfragemöglichkeit für die Aktuelle Auflösung notwendig werden. Dazu könnte dann dieser hook von mui react helfen https://mui.com/material-ui/react-use-media-query/

mcm1957 commented 3 days ago

see: https://github.com/iobroker-community-adapters/responsive-design-initiative/issues/8 https://github.com/ioBroker/ioBroker.admin/issues/2786

oweitman commented 3 days ago

das sind tabs

ich spreche von Tabelle

mcm1957 commented 3 days ago

Jep - sorry, ungenau gelesen.

simatec commented 3 days ago

Finde ich einen guten Vorschlag... Kannst du dazu bitte ein Issue im Admin (jsonConfig) aufmachen?

Jey-Cee commented 10 hours ago

Cards Klingt zwar im ersten Augenblick Sinnvoll, aber eine Karte ist ein für sich Stehendes Element und abgegrenzt von anderen. Deswegen sehe ich hier eher Accordion, da die Elemente so Optisch auch weiterhin Zusammen bleiben.