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

Small screen adjustments for mobile PWA usage #2184

Open
wants to merge 15 commits into
base: the-future
Choose a base branch
from

Conversation

logiczsniper
Copy link

@logiczsniper logiczsniper commented Mar 4, 2023

Description

The current app on small screen sizes is not pretty and in some areas, not even usable. For users like myself that would prefer to use the PWA than the mobile app, this is unfortunate. This PR aims to make minor style adjustments where necessary in order to alleviate these issues!

Before After
image image
image image
before after
image image
image image

Changes proposed in this pull request that will only be noticeable on small screens:

  • Add small margin to the feed page.
  • Fix the menu opening animation.
  • Add padding to the navbar buttons.
  • Add small margin to library page content and fix loading skeleton width issue.
  • Close the menu on click of library and groups buttons (the other two open a submenu).
  • Make the search bar usable:
    • Reduce width.
    • Pin the popover to the screen so it no longer falls off the left side.
    • Change the layout of the items to make more effective use of space.
  • Add padding to settings pages [TODO: gif]
  • Fix spacing on profile / activity page [TODO: gif]
  • Add padding to groups page [TODO: gif]
  • Fix the enlarged feedback header (caused to due a hack in global css, this was fixed for other pages but not for feedback) [TODO: gif]
  • Add margins in explore pages [TODO: gif]

Changes proposed in this pull request that will always be noticeable (regardless of screen size):

  • Added small button to close search results.
  • Simplified HTML structure for settings/linked accounts; simpler template, works on small screens and produces the same result (plus/minus a few pixels) [TODO: gif]

/cc @hummingbird-me/staff
^i will comment this when it is ready for review

@logiczsniper
Copy link
Author

@Reinachan here it is :)
This was my first time using ember.js so if I did anything stupid lemme know!!

@logiczsniper
Copy link
Author

Oh btw there is still more to do here but let's get this merged first before the PR gets any bigger 👍

@Reinachan Reinachan self-requested a review March 4, 2023 16:27
@logiczsniper
Copy link
Author

Oh shit i forgot to comment this in the end lol this can be reviewed
/cc @hummingbird-me/staff

@Reinachan
Copy link
Member

This isn't your fault, but your changes made it more obvious. I'd suggest you change line 139 in _media_browse.scss to margin-left: 0;.

Before After

Notice the bottom left of the library entries.

Copy link
Member

@Reinachan Reinachan left a comment

Choose a reason for hiding this comment

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

Thank you for the PR! This is generally pretty great! Just some minor things here and there that I've commented on :)

@media (max-width: 452px) {
width: 300px;
}

max-height: 90vh;
Copy link
Member

Choose a reason for hiding this comment

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

Your changes result in the searchbar being hidden by the results dropdown while typing on iOS (at least on my phone with the browser interface on the bottom). I'd suggest making this max height use the new dvh unit and have a fallback to vh.

max-height: 85vh; /* less likely to interfere with other stuff */
max-height: 90dvh;

@@ -1509,6 +1510,10 @@
width: 100%;
max-width: 540px;
margin: 0 auto;

@media (max-width: 562px) {
margin: 0 12px;
Copy link
Member

Choose a reason for hiding this comment

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

Why is the margin larger for a full-page post than for the feed? This just feels inconsistent.

Comment on lines +123 to +124
margin-left: 8px;
margin-right: 8px;
Copy link
Member

Choose a reason for hiding this comment

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

I'm not a fan of this change. At least not on smaller phones. It looks good on my OnePlus 6T but on my iPhone X, it takes up too much space. I suggest you add another media query for smaller screens.

@media (max-width: 380px) {
    margin-left: 2px;
    margin-right: 2px;
}

This also applies to the full-page posts.

padding: 30px 0 0;

@media (max-width: 608px) {
padding: 30px 12px 0 12px;
Copy link
Member

Choose a reason for hiding this comment

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

Too much padding. The existing spacing is already good. Fix the Facebook button instead.

Comment on lines +269 to +273
@media (max-width: 768px) {
width: 100%;
margin-left: 8px;
margin-right: 8px;
}
Copy link
Member

Choose a reason for hiding this comment

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

Refer to my comment on the spacing for feeds. Same applies here.

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