Small UI feature changes from Igor

[jmsssc]

I am beginning with these small bits of feedback, then when the unify-navbar, try without login and the cleaned up css class PRs are merged, I will work on the back button functionality (which will affect many pages so I aim to ideally do it one day, get it reviewed and changed without it causing or suffering from any merge conflicts)

• Remove the SPA-like logic in the userland page and replace with proper routing #242 Back button should work across pages
• Add functionality to mark questions for children and parents as mandatory #243 Add functionality to mark questions as optional (The "Beobachter" and "Kinde" fragen in Admin panel) - note: right now all are mandatory (for Kinde at least) so that's the change.. we'll need to write a short .sql COLUMN change migration, as existing data uses those tables.
• On the specific milestone view (where you select the childs level), the image should: (a) have a minimum width (b) preserve the aspect ratio
• (possibly already solved by Clean up tailwindcss classes #235) the dark mode text is sometimes black, I believe on Milestones overivew
• The dark mode FAQ accordion text has too little contrast (so it needs to be dark in dark mode)
• Hide the "Automatisch Weiter" button
• The logo in footer should be enlarged
• The logo on mobile menu should be centered
• The static mobile menu (with Downloads, Aktuelles, etc) for logged out users should be changed into a Sidebar too, like the other one.
• Button theme change - keep milestones in blue "btn-milestone", change others to the teal (btn-primary + btn-secondary) and keep the white buttons (e.g. on milestone selection page) as secondary buttons
• Change "Neues Kind" button to be the teal color rather than blue.
• For the milestones color/selection, the icons need to be ✓ ? ! (green, yellow, red)
• The sidebar should close itself when you click a link (E.g. to login on the non-logged in mobile menu)
• Make sure all Mondey logos link to "/"

[lkeegan]

@jmsssc thanks this looks good! - all the UI changes you list above can be a single PR, but #243 and #242 are separate self-contained changes so they should be separate PRs. Also whenever you have a branch that's ready for review feel free to open a pull request and add me/harald as reviewers.

[jmsssc]

@jmsssc thanks this looks good! - all the UI changes you list above can be a single PR, but #243 and #242 are separate self-contained changes so they should be separate PRs. Also whenever you have a branch that's ready for review feel free to open a pull request and add me/harald as reviewers.

Great, thank you for clarifying. That sounds perfect. I'll do a PR for the small changes today.

[jmsssc]

Covering a few of the small issues:

• The text color is corrected
• The minimum width is set for the image
• The milestone buttons in dark mode use white text/dark text to contrast better

[lkeegan]

A couple more comments from trying this out:

on mobile the title of the page is now cut off by the logo:

I'm not sure about the effect where the child box moves to the right on hover:

hover.mp4

Is it intentional that the login button and menu are no longer present on the front page on mobile?:

[jmsssc]

A couple more comments from trying this out:

on mobile the title of the page is now cut off by the logo:

I'm not sure about the effect where the child box moves to the right on hover:
hover.mp4

Is it intentional that the login button and menu are no longer present on the front page on mobile?:

Okay sure, I can remove the on hover animation for the children. As when it moves right, it can come off the cursor if you enter from the left. It's possible to make it rise and keep it's original shape too (as in bottom axis stays put, top rises) instead but I'll default to removing it for now as that would take a bit of time regarding alignment with other items in the (flex) row.

Thank you for testing it out.
I don't see either of those issues on mobile myself using either iPhone 11 Pro Max or Samsung Galaxy 20+, can I ask which device you are using to emulate it or what aspect ratio? It might be that iPad like devices get caught inbetween (for example the buffer at the top of the screen that stops "Kinder" cutting off the page works on phones but not tablets).

Cause
Because the code introduced a new way to determine isMobile to use in javascript which may differ in breakpoints from the tailwind screen-size based hiding/visibility classes (basically because, I find that tailwind sm/md/lg/xl is a bit counterintuitive and a bit too much when you just want two different UIs for mobile/PC mostly).

Solution
The best solution might be to just stick with tailwind classes for mobile detection and remove the JS based detection. I did hide the login button (as it now appears in the sidebar) but I will put that back as Igor didn't ask for that.

[jmsssc]

About the device with the missing menu: I believe because the JS function isMobilePhone which I added computes just once on mounting, if you enter reponsive mode, then the menu won't appear, as it still evaluates to false, but for a real user, they would get the right isMobilePhone value for their device, and not have the menu or Kinder overlapping problem happen. However because A) I can't be totally sure this is what happened for you too? and B) if we see different GUI in development to real users, then that's annoying and problematically not reproducible, I will work out a solution, like solely using tailwind CSS.

[lkeegan]

So for me using chrome and the "iPhone 14 Pro Max" the menu disappears, while for e.g. the "iPhone 12 pro" it is displayed.
I don't think it's an onmount issue, since refreshing doesn't change this?

Anyway this isn't a blocking issue to merging this PR, it could well be fine on all real devices and just a bit buggy in the chrome emulated device views, and I agree a solution using only tailwind would likely be more robust.

[jmsssc]

So for me using chrome and the "iPhone 14 Pro Max" the menu disappears, while for e.g. the "iPhone 12 pro" it is displayed. I don't think it's an onmount issue, since refreshing doesn't change this?

Anyway this isn't a blocking issue to merging this PR, it could well be fine on all real devices and just a bit buggy in the chrome emulated device views, and I agree a solution using only tailwind would likely be more robust.

Yes I made it use just tailwind. Then it will be robust in the sense that, it will always either by sm, md or lg for a given pixel size or phone devices setting, whatever the tailwind code for CSS classes and media queries uses. So we shouldn't have "gaps" where things are both invisible for both cases of an if statement as such.

[jmsssc]

Great then as nothing is blocking, I will merge this and then get on with the user routing today / tomorrow morning.

I will come in a bit earlier tomorrow morning and aim to get it functional or PoC for a few pages, by tomorrows stand up.

[jmsssc]

Ready for the meeting I didn't want to drill into Button / Flowbite and Tailwind config CSS, as it might have taken too long and meant I had nothing to preview to Igor, but it's possible we can alter the tailwind config in order to continue using etc with pure tailwind (and just "color"=primary/secondary etc). If there is time I will do this, but I prioritize the other issues for now. That would keep things more clear.

[lkeegan]

@jmsssc can this issue be closed or is there still something that needs to be done here?

[jmsssc]

@jmsssc can this issue be closed or is there still something that needs to be done here?

Good point. The CSS changes (specifically changing classes from loads of Tailwind utils to "btn-primary" etc, and possibly also using tailwidn theming rather than normal css should/could be done) but at this point I'll do that on another issue/time so that you can merge in other branches etc without worrying about needless merge conflicts in relation to that. I'll use #235 as a reference issue for a new branch to do that when there is a quiet time (but for now data import/confirmation with Igor, the logged in test & another project are the main priorities I have)