Skip to content

🚀 [Feature] Display filter as buttons instead of filter menu

Created by: ulfgebhardt

🚀 Feature

Step 1 - Implement, dont remove old filter

have the filter as additional filter buttons above the feed.

image

Functionality

The filter becomes buttons above the feed. The buttons are part of the menu.

If no filter is set only one button is displayed with Beiträge filtern. When clicking this button the usual filter menu opens up and gives the user all filter options like it was before. The button itself is a small button with text and an arrow-down symbol.

When selecting one or multiple filters the default filter button is replaced with a button for each filter category (if a filter from this category is set). The categories are:

  • Topic Filters (Meine Themen)
  • User Filters (Usern, denen ich folge)
  • Order (Reihenfolge)

image

Each button has an x as icon, which clears every filter from that category when clicked.

When clicking the button (not the x) the filter menu opens (with all available filters of each category - normal filter menu)

Style

  • background color: yunite green (header background)
  • Font: normal text, but bold
  • Font color: white like the Beträge and Gruppen (not correct in the screen)

Reference

Note: the menu related stuff is described in #5750 (closed) Note: Make sure the filter menu behaves properly on mobile (closes when clicking, popup menu closes when scrolling etc)

DoD: Der Beitragsfilter wird nicht über das Filtersymbol neben dem Suchfeld, sondern über einen Button zwischen Header und den Beiträgen links angezeigt. Beiträge rutschen etwas nach unten.

- Beschriftung: "Beiträge filtern", danach Symbol aus der Ocelot-Bibliothek "Dreieck/Pfeil nach unten"
- Hintergrundfarbe: Dunkles Yunite-Grün (wie Headerhintergrund)
- Schriftfarbe: Weiss (Wie "Beiträge", "Gruppen", im Bild unten noch fälschlicherweise hellgrün)
- Schriftart und -größe: Wie normaler Text, aber fett
- Diese (neue) Zeile über den Beiträgen soll gleiches Verhalten wie Header haben: Beim Runterscrollen verschwinden, beim Hochscrollen sofort wieder sichtbar (siehe extra-Ticket)
- Beim Klick darauf werden die möglichen Filter angezeigt - zunächst wie gehabt. (Extra-Ticket demnächst für Anpassungen dort)
- Die Filter sind an das Menu angedockt und verschwinden mit dem Menu, wenn dieses weg scrollt
beim ladenstartet der Content einige Pixel unterhalb der Filter.
- Der Spendenbutton wird bei Aktivierung ebenfalls unterhalb der Filter gezeigt und wird beim Scrollen unter die Filter weg gescrollt.
DoD: 1) Wenn Themen (egal welche) ausgewählt wurden, erscheint zwischen Header und Beiträgen ein Button "Meine Themen" und dahinter "X" aus der Ocelot-Bibliothek.
2) Wenn "Benutzern, denen ich folge" aktiviert wurde, erscheint zwischen Header und Beiträgen ein Button "User, denen ich folge" und dahinter "X" aus der Ocelot-Bibliothek.
Mit Klick jeweils auf das "X" verschwindet der entsprechende Button und die entsprechende Filterfunktion wird deaktiviert (also man sieht alle Themen bzw. alle User)
Mit Klick auf einen beliebigen Button wird das existierende Auswahlmenü angezeigt (Update in anderem Ticket).
Wenn keine Filter (mehr) aktiv sind, wird wieder der Button "Beiträge filtern" angezeigt, siehe Ticket "[Filterbutton für Beiträge](https://app.asana.com/0/1203268448249112/1203433614825492/f)"
Design der Buttons: Siehe auch "[Filterbutton für Beiträge](https://app.asana.com/0/1203268448249112/1203433614825492/f)"

Step 2 - Investigate & Adjust

  • Investigate if we need the filter menu on mobile.
  • Investigate if we should make it a config if we want to display the filter in the menu or above the feed (or both?)

Additional Informations

(Note by @Tirokk ) This can be an orientation where we can go with the search and the filters in the future: @ogerly @Mogge @ulfgebhardt https://www.communecter.org/#search