Skip to content

Improve Mensa menu card visualization and actions #41

Description

@SebastianBoehler

Goal

Improve the Mensa menu UI so upcoming meals are easier to scan, sorted chronologically, and actionable from each menu card.

Scope

Sorting

  • Sort Mensa menu entries in ascending date order.
  • The closest/current date should appear first.
  • Future dates such as next week should remain visible only if intentionally included, but they must be clearly ordered and labeled by date.

Card layout and typography

Each menu card should use a clearer hierarchy:

Mensa name                         // light gray, readable, smaller than food name, not bold

NAME OF THE FOOD - Aktion/label - Price €

Additional food options

Requirements:

  • Mensa name should be visually secondary: light gray, readable, smaller, not bold.
  • Food name should be larger and bold compared with the Mensa name.
  • Aktion/category label should show values like Tagesmenü, vegan, vegetarian, etc. where available.
  • Price should be shown next to the main food line when available.
  • Additional food options should remain readable below the main line.
  • Avoid text overlap or truncation issues on small mobile screens.

Per-card actions

At the bottom right of each card, add three compact action buttons:

  1. Website button

  2. Share button

    • Opens the native share sheet on Android and iOS.
    • Shared text should include at least Mensa name, date, food name, label/category, price if available, and website URL.
    • Should work with apps such as WhatsApp where available.
  3. Navigation button

    • Opens the native/default navigation app on Android and iOS.
    • Should route to the corresponding Mensa location.
    • Prefer coordinates if already available; otherwise use a maps/search URL fallback.

Acceptance criteria

  • Mensa menu entries are sorted by date ascending, closest date first.
  • Each card has a clear visual hierarchy where food name is larger/bold and Mensa name is smaller/light gray/not bold.
  • Each card shows action/category labels and prices when available.
  • Additional food options remain visible and readable.
  • Each card has website, share, and navigation buttons aligned at the bottom right.
  • Website buttons open the correct Studierendenwerk page for Wilhelmstraße, Morgenstelle, or Prinz Karl.
  • Share button uses the native Android/iOS share sheet.
  • Navigation button opens the platform navigation/maps app.
  • UI remains usable on small mobile screens.
  • Existing Flutter formatting, analysis, and tests pass.

Notes / implementation hints

  • Use icon buttons with tooltips/semantic labels rather than text-heavy buttons.
  • Keep Mensa URL/location mapping centralized instead of duplicating it across widgets.
  • Add tests for date sorting and URL/location mapping if the existing Mensa model structure allows it.
  • If a Mensa name is unknown, hide or disable website/navigation actions gracefully rather than linking to the wrong location.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Fields

    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions