scrumlr.io
scrumlr.io copied to clipboard
feat: templates framework
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 tofalse
. Right now, they default tofalse
in dev env, andtrue
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
andsessions
to routenew
- 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)