scrumlr.io icon indicating copy to clipboard operation
scrumlr.io copied to clipboard

feat: templates framework

Open Schwehn42 opened this issue 8 months ago • 2 comments

Description

Resolves #4201
Resolves #4253

Adds the framework for the new template page. This includes both the layout and some functionality (like routing). After logging into scrumlr, users will now be redirected to the templates page.

[!IMPORTANT] To see the changes, make sure the env var REACT_APP_LEGACY_CREATE_BOARD is set to false. Right now, they default to false in dev env, and true in prod env. This is so the different changes can be merged into main without affecting current use.

The page consists of the header and main section

Header section

  • User Pill with avatar and name, which when clicked redirects to settings (blocked by #4265)
  • Switch to switch between Templates and Sessions (when they exist in the future)
  • Search bar to filter templates or sessions (in the future)
  • In mobile view, the search bar can be toggled using a button.

Main section

  • Two sections for saved and recommended templates.
  • Only non-anonymous users can see the saved section.
  • In mobile view, the sections are full width but scrollable horizontally.

Changelog

  • Add new child routes templates and sessions to route new
  • add new views ´Templates´ and Sessions accordingly
  • new components:
    • UserPill
    • Switch
    • SearchBar
  • change view NewBoard to a grid including the new components in header, and the views as Outlet
  • all components and the Template view have a light and dark theme.
  • all components and the Template view are responsive and have a separate mobile view
  • components also have states for hover, focus, active, and disabled and are styled respectively.
  • states are streamlined in new SCSS helper function in style.scss

TODO

  • [x] fix stan sometimes being cut off
  • [ ] include #4265 when merged and setup settings dialog
  • [x] include #4283 for color constant names
  • [x] dark background

Checklist

  • [x] I have performed a self-review of my own code
  • [x] I have commented my code, particularly in hard-to-understand areas
  • [x] The light- and dark-theme are both supported and tested
  • [x] The design was implemented and is responsive for all devices and screen sizes
  • [x] The application was tested in the most commonly used browsers (e.g. Chrome, Firefox, Safari)

(Optional) Visual Changes

Show media templates-light-mobile templates-light-desktop templates-dark-desktop templates-dark-mobile

Schwehn42 avatar Jun 21 '24 14:06 Schwehn42