Skip to content

Improving the mobile css#180

Merged
jmattheis merged 10 commits into
traggo:masterfrom
Minnowo:mobile_css
Sep 29, 2024
Merged

Improving the mobile css#180
jmattheis merged 10 commits into
traggo:masterfrom
Minnowo:mobile_css

Conversation

@Minnowo

@Minnowo Minnowo commented Sep 20, 2024

Copy link
Copy Markdown
Contributor

This is still a work in progress, so I'm hoping for some feedback.

My plans for this are:

  • Improve the calendar
  • Fix the page size for users page
  • Fix the page size for devices page
  • Fix the page size for tags page
  • Fix the page size for the manage page
  • Fix context menus on some pages being unusable
  • Fix the list page
  • Fix the settings page sizing

For the calendar, I:

  • css to move the heading vertically when the page width is < 600px.
  • Changed the heading font to monospace
  • Changed the format to show short form of week names

Here is how it looks now on the week view on my phone:

Details

image

@jmattheis

Copy link
Copy Markdown
Member

Looks much better with the changes 👍

@Minnowo
Minnowo marked this pull request as draft September 20, 2024 11:35
On the List page:
- Timespans now can collapse when the page is < 550px in width
- Moved the notes button to the far right side

On settings page:
- Removed the min width, this makes it fit nicely on mobile

- Made the chips possible to go onto multiple lines, since otherwise
long tag names would overflow (even on desktop)
@Minnowo

Minnowo commented Sep 21, 2024

Copy link
Copy Markdown
Contributor Author

Here are some pictures of the new changes to the list page:
Desktop:

Details

image

Mobile / when the page is smaller in width:
image

@Minnowo

Minnowo commented Sep 21, 2024

Copy link
Copy Markdown
Contributor Author

And a cropped view of the settings page on mobile:
image

The changes here also improve the calendar when you click on a timespan.
Previously it would be offscreen on my phone, and impossible to click
the 3 dots to show more.
@Minnowo

Minnowo commented Sep 21, 2024

Copy link
Copy Markdown
Contributor Author

Preview of the most recent changes. The timespans wrap nicer now. The calendar page also has the popup fixed on mobile, since it also will wrap. It does go into the top left corner for some reason when the page resizes, but I think that's more a feature since it won't get lost on mobile.

2024-09-21_14-01-42.mp4

This doesn't full fix the sizing, but it helps greatly and should be
good enough. I cannot think of any better way of improving these pages
for mobile.
@Minnowo
Minnowo marked this pull request as ready for review September 21, 2024 18:37
Comment thread ui/src/common/DateTimeSelector.tsx
Comment thread ui/src/common/DateTimeSelector.tsx
Comment thread ui/src/common/DateTimeSelector.tsx Outdated
Comment thread ui/src/common/DateTimeSelector.tsx Outdated
Comment thread ui/src/common/TagChip.tsx Outdated
Comment thread ui/src/global.css Outdated

@jmattheis jmattheis left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

thanks

@jmattheis
jmattheis merged commit ff789f5 into traggo:master Sep 29, 2024
@Minnowo Minnowo mentioned this pull request Apr 12, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants