Versionen im Vergleich

Schlüssel

  • Diese Zeile wurde hinzugefügt.
  • Diese Zeile wurde entfernt.
  • Formatierung wurde geändert.

Icons: https://gitlab.transformationsstadt.de/GeoPortal/frontend/tree/dev/src/assets/img/bli

01. Filterfunktion auf Startseite

Filter horizontal unten am Screenrand (funktionieren in der Oberfläche ähnlich in dem Beispiel hier)

01a. Definition Filterfunktion

  • Es kann immer nur ein Filter ausgewählt werden, nicht mehrere gleichzeitig. (keine UND/ODER Verschneidung)
  • Es werden immer alle Orte, die dieser Dimensionen zugewiesen sind angezeigt.
    • Es wird also immer global gefiltert.

02. Aus-/Einblenden Filter....

Über folgende Inputs werden die Filtericons aus-/eingeblendet:

  • Klick auf den Button "Dimensionen des Guten Lebens" togglet Filter ein- und ausblenden.
  • Klick auf einen Punkt in der Karte, Detailansicht blendet ein → Filter werden ausgeblendet.
  • Aufheben der Suche (s. Screenbild) → blendet Filter ein

02ba. ... wenn eine Auswahl getroffen ist.

Ist ein Filtericon ausgewählt wurden und dann der collapse (Ausblenden der Icons) initiiert wurden bleibt dieses Icon auf der Seite auf der es vorher stand (links oder rechts) neben dem Button stehen.

Die zu dieser Dimension zugeordneten Punkte sind weiterhin hervorgehoben.

In diesem Beispiel wurde das Filtericon "Umwelt" ausgewählt, dann ein Pointer auf der Karte angeklickt, die Detailansicht hat sich rechts geöffnet, und der Filter ist collapsed, bis auf das ausgewählte Icon:

Das gleiche gilt für die Suche, der ausgewählte Filter bleibt bestehen

02b. ... in Abhängigkeit zu Such- und Detailfenster

Wenn Filter eingeblendet werden: Bewegen sich Detailanzeige und Suchergebnisse aus dem Bild. Das gilt für das Suchfenster nur, wenn bereits eine Suche ausgelöst wurde und Ergebnisse angezeigt werden. Die leere Suchanzeige bleibt stehen.

02c. ... Animation/Darstellung (nice to have)

  • Collapse: Icons "huschen" unter den Button "Dimensionen des Guten Lebens"
  • Expand: Icons bewegen sich von unter dem Button "Dimensionen des Guten Lebens" wieder an ihre Position.

03. Hover über Filtericon

HOVER: Die Bezeichnung der Dimension wird über dem Icon eingeblendet. (Hier ist die Liste: Zuordnung: Icons/Bezeichnung BLI-Dimensionen)

NICE TO HAVE HOVER: Die Punkte, die der Dimension zugeordnet sind werden bereits beim hover hervorgehoben (hier als weiße Pointer mit grüner Outline)

04. Klick auf Filtericon

Klick auf das Icon togglet Filter an/aus.

An: Icon wird grün hervorgehoben und Bezeichnung bleibt stehen. Punkte, die dieser Dimension zugeordnet sind, werden hervorgehoben.

05. Hover über ein weiteres Filtericon nach Auswahl

Die Darstellung der Bezeichnung beim Hover überlagert die des aktiven Elements (hier "Sicherheit" über "Zufriedenheit")
ALTERNATIV: Sicherheit springt eine Zeile höher.
wieder NICE TO HAVE HOVER: Die Punkte, die der Dimension (Hier "Sicherheit") zugeordnet sind werden bereits beim hover hervorgehoben.

06. Auswahl neues Filtericon

Wird eine neues Filtericon ausgewählt werden die Punkte hervorgehoben, die dieser Dimension zugeordnet sind. Die vorherige Auswahl wird aufgehoben.


Dieses Icon bleibt rechts neben dem Button "Dimensionen des Guten Lebens" stehen, wenn ein Pointer auf der Karte ausgewählt wurde,

07. Filter & "Alle Orte sehen" Button

Werden alle anderen Orte ausgeblendet, bleiben die Orte, die der aktuell ausgewählten Dimension (hier "Umwelt") zugeordnet sind stehen.

Ebenso werden, auch wenn alle Orte ausgeblendet sind, immer alle Orte, die zu einer Dimension zugeordnet sind angezeigt, wenn ein Filtericon ausgewählt wird.