Proposal: Back button to return to dashboard

[bernstna]

Use case

When I was using the application, I found that it was hard for me to understand how to go back to the main page after I'd clicked into one of the sections, the only way I found to was to click the icon in the top left, which isn't the best from a usability heuristic standpoint.

Proposal

I'd love to add a simple back button to the 3 details pages once you click into them, so that users can very easily return back to their main dashboard without hitting the back button on their browser or trying to find the icon.

[bernstna]

Hello! I'm trying to work on this for a class, and I'd love to be assigned to this to create a mock of what I'm discussing, even if it doesn't get included in the final product. I think this would be great for making the application more usable and intuitive, as this was something I was looking for and couldn't find.

[rolandgeider]

hi! yes of course. If you want to take a look at other places feel free to cook up some mockups for those as well.

(as a sidenote the logic for the routines will change a lot soon, I'm not sure if you need to take it into account, but if you want to take a look, here's the beta version https://wger-routines.rge.uber.space/de/dashboard username: user password: flutteruser )

[bernstna]

Sweet! Thank you, I do not need to take that into account, as we just need to create an issue that we think we could help with, create the issue, then from there we need to just make a pull request. If it would be more helpful for you for me to build it into the newer routes I totally can, but I was just going to fork it off of this repo and mess around with the code myself. Do you have any tips or tricks that I could do? I'm familiar with the general structure and style of the code, but would love to know where the page content is loaded into the DOM so that I could put the back button somewhere in there.

[rolandgeider]

in this case the part in red is rendered using react (from this repo), if you are looking around in the code, it's the ReactView class which just render a div with an ID. If you need to do changes there and want to test them, run yarn build and it will copy everything to the right place (you need to checkout this repo as server next to the react one)

Note that not all the application uses react, just on some places where we want a bit more interactivity. All other pages are pure django.

[bernstna]

Sounds good, very helpful, I'll hopefully get the pull request to you sometime this or next week depending on my homework schedule!

[bernstna]

Hello! I'm struggling to find that file so that I can add my code, what's the path to it in the repo? @rolandgeider

[rolandgeider]

@bernstna for the routine detail you mean? it's src/components/WorkoutRoutines/Detail/RoutineDetail.tsx

[bernstna]

@rolandgeider Hi! I've created the pull request here: wger-project/react#1042
As I've mentioned in the pull request, I was having a lot of trouble with docker getting not the demo version running but the new version running, but all my tests of the code in a separately runnable react setup worked, so just let me know!