kitsu-web icon indicating copy to clipboard operation
kitsu-web copied to clipboard

Published 20 hours ago • verified publisher icon hummingbird-me

Small screen adjustments for mobile PWA usage

Open logiczsniper opened this issue 1 year ago • 4 comments

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 avatar Mar 04 '23 16:03 logiczsniper

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

logiczsniper avatar Mar 04 '23 16:03 logiczsniper

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

logiczsniper avatar Mar 04 '23 16:03 logiczsniper

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

logiczsniper avatar Apr 11 '23 10:04 logiczsniper

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.

Reinachan avatar Apr 28 '23 16:04 Reinachan