Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Server front-end: Improve UI on mobile #10589

Closed
wants to merge 1 commit into from

Conversation

stduhpf
Copy link
Contributor

@stduhpf stduhpf commented Nov 29, 2024

  • I have read the contributing guidelines

  • Self-reported review complexity:

    • Low
    • Medium
    • High

    The current front end provided in the example is very nice on desktop, but it looks a bit broken on mobile:
    current

This PR adds a few lines of CSS to turn the side bar into a collipsable when the screen width is low (typically these are mobile devices)

default after touching the "button"
PR-1 PR-2

@daniandtheweb
Copy link
Contributor

daniandtheweb commented Nov 29, 2024

I think that's a nice improvement but wouldn't it be better to add the button at the top of the page like this:
Screenshot_20241130-003021_Iceraven?

I think it would make more sense to get the button away from an accidental touch in order to have a more usable mobile UI.

@stduhpf
Copy link
Contributor Author

stduhpf commented Nov 29, 2024

I think it would make more sense to get the button away from an accidental touch in order to have a more usable mobile UI.

Ah, maybe. I just placed it somewhere convenient and easy to reach when holding the phone in either hand without having to change the grip or use the other hand to reach all the way to the opposite corner. But I can see how this could increase the risk of accidental clicks...

@ngxson
Copy link
Collaborator

ngxson commented Nov 30, 2024

The idea is ok but I don't like the implementation. Daisyui already support responsive drawer, so it's better to reuse that. Beside, we should prevent using plain css, in favor of tailwind classes.

That said, I'll open another PR for this.

@stduhpf
Copy link
Contributor Author

stduhpf commented Nov 30, 2024

@ngxson please do. I just did it this way because it was easier for me.

@ngxson
Copy link
Collaborator

ngxson commented Nov 30, 2024

I'm replacing this with #10599

@ngxson ngxson closed this Nov 30, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants