Better UI
Closed this issue · 2 comments
SamR1 commented
FitTrackee has a minimal interface (using on Bootstrap4), which hasn't changed since the first version.
As a first step:
UI
- better responsive and mobile support
- add some placeholders and loaders
- add missing translations
Technical
- switch from React to Vue3 + Typescript (for learning purposes)
- remove Bootstrap and use only Flexbox (to remove external library)
- better style files organization + SCSS (to add new themes in the future?)
- remove calls to public CDNs
- add tests for utils functions
- update to Vue 3.2 (to use
<script setup>) - update
docker-compose-dev.yml
PR to port
Progress
- User
- login / register / logout
- profile display =>
- 🆕 split user info and preferences in 2 tabs
- profile edition
- 🆕 split user info, picture and preferences in 3 tabs
- impact on API => new endpoint
/auth/profile/edit/preferences
- password reset
- timezone dropdown in preferences edition
- Dashboard
- user statistics cards
- calendar
- chart w/ month activity
- records
- impact on API => update User serializer to get records w/ profile
- timeline w/ workouts
- Workouts
- add workout (w/ and w/o gpx file)
- workout detail with maps
- update/delete a workout
- workouts list
- Admin
- application
- sports
- users
- Common
- NavBar
- Footer
- Improvements/fix
- error messages from API and translations
- improve workouts filtering on workouts lists
- handle username and email case on login and register
Some screenshots:
(not final versions)
- desktop
| dashboard | workout |
|---|---|
 |
 |
| workouts | stats |
|---|---|
 |
 |
| admin | sports |
|---|---|
 |
 |
- dashboard on mobile
| month activity | calendar | timeline | record |
|---|---|---|---|
 |
 |
 |
 |
Fmstrat commented
@SamR1 I've submitted one PR already for handling slow movement that I think should not impact the new UI, and I'm now working on the unit conversions. I'll try to make the unit conversion code usable across the new UI by handling most of it in the model itself, but can you make the labels in the new UI, such as "km" and "m" pull from a central variable?
In the current UI, I've got a lot of updating to do there, but if the variable statement was centralized, like <distanceText>/hr, then it will be much easier to pull in.