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

Plugin Settings Page not Usable on Mobile Devices #699

Closed
ricsmo opened this Issue Feb 29, 2016 · 8 comments

Comments

Projects
None yet
4 participants
@ricsmo

ricsmo commented Feb 29, 2016

The plugin settings page does not resize small enough on some mobile browsers and the "Clear Cache" button is off screen and not scrollable. Tried on iPhone 6 using Safari and Chrome in both portrait and landscape.

@raamdev raamdev changed the title from Plugin Settings Page on Mobile Devices to Plugin Settings Page not Usable on Mobile Devices Mar 1, 2016

@raamdev

This comment has been minimized.

Contributor

raamdev commented Mar 1, 2016

@ricsmo Thank you for opening an issue for this. I'm aware of the problem with using the Comet Cache options pages on mobile devices, but I kept forgetting to open a GitHub issue so that I'd remember to get that fixed. :-)

We have another GitHub issue open to simplify the plugin options page itself (see #96) and working on this (improving mobile compatibility) would definitely be part of that work.

However, I'll leave this GitHub issue open and see if there are a few simple tweaks we can make to improve mobile layout for the next release.

@renzms

This comment has been minimized.

renzms commented Apr 7, 2016

@raamdev

Before Using Media Queries:

screen shot 2016-04-07 at 5 47 25 pm
screen shot 2016-04-07 at 5 47 51 pm

Mock up using Responsive Design - Media Queries:

@media (min-width: 480px) and (max-width: 1023px)

screen shot 2016-04-07 at 5 45 09 pm

Changes made

  • Images auto adjust depending on width of screen. Mock set at 90% of screen width (480px) Noting that we would need to make different parameters for Tablet (768px) and mobile(480px), horizontal/vertical (480/1024px), and retina media query.
  • Header menu items/links/buttons adjusted and centered.

screen shot 2016-04-07 at 5 46 52 pm

Plugin options for drop downs are visible, but fields are smaller.

screen shot 2016-04-07 at 6 07 02 pm

Though its still possible to scroll left and right within field, this could be solved with media query for font size if needed.

@jaswrks

This comment has been minimized.

Member

jaswrks commented Apr 8, 2016

@renzms That looks like a fantastic start on this. Do you have that work (seen in the screenshots above) in a separate branch that you can push for a review?

@renzms renzms self-assigned this Apr 12, 2016

@raamdev raamdev modified the milestones: Next Release, Future Release May 11, 2016

@raamdev raamdev modified the milestones: Next Release, Future Release Jun 20, 2016

@renzms

This comment has been minimized.

renzms commented Jul 25, 2016

That looks like a fantastic start on this. Do you have that work (seen in the screenshots above) in a separate branch that you can push for a review?

@jaswsinc

Looks like I missed this comment from way back, I'll find some time this week to create a new branch for the work I did in the mock up. Thanks!

@raamdev

This comment has been minimized.

Contributor

raamdev commented Aug 24, 2016

@renzms Any update on this?

@raamdev raamdev modified the milestones: Next Release, Future Release Sep 6, 2016

renzms added a commit to websharks/comet-cache-pro that referenced this issue Sep 9, 2016

renzms added a commit to websharks/comet-cache-pro that referenced this issue Sep 9, 2016

renzms added a commit to websharks/comet-cache-pro that referenced this issue Sep 10, 2016

renzms added a commit to websharks/comet-cache-pro that referenced this issue Sep 17, 2016

renzms added a commit to websharks/comet-cache-pro that referenced this issue Oct 13, 2016

renzms added a commit to websharks/comet-cache-pro that referenced this issue Oct 14, 2016

jaswrks pushed a commit to websharks/comet-cache-pro that referenced this issue Nov 10, 2016

jaswrks pushed a commit to websharks/comet-cache-pro that referenced this issue Nov 10, 2016

jaswsinc
@jaswrks

This comment has been minimized.

Member

jaswrks commented Nov 10, 2016

Next Release Changelog:

  • UI Enhancement: The Comet Cache UI is now fully Responsive with an improved UI on laptops and other mobile devices. Props @renzms. See also: issue #699 if you'd like additional details.
@renzms

This comment has been minimized.

renzms commented Nov 11, 2016

@raamdev

Looks good to me and adjusts properly + smoothly to browser/device size. @jaswsinc has improved upon my original PR and changed some things. 👍

Just two things, in my opinion, I would've kept for the mobile version:

1) The menu panel open/close toggler

Original Size:
screen shot 2016-11-11 at 9 47 40 pm

Mobile:
screen shot 2016-11-11 at 9 48 02 pm

with Wipe Button:

Original Size:
screen shot 2016-11-11 at 9 56 10 pm

Mobile:
screen shot 2016-11-11 at 9 56 49 pm


2) The Comet Cache = Speed image

Original Size:
screen shot 2016-11-11 at 9 46 22 pm

Mobile:
screen shot 2016-11-11 at 9 46 37 pm

Other than that, works fine on Ipad and Android mobile! :)

@raamdev

This comment has been minimized.

Contributor

raamdev commented Nov 19, 2016

Comet Cache v161119 has been released and includes changes from this GitHub Issue. See the v161119 announcement for further details.


This issue will now be locked to further updates. If you have something to add related to this GitHub Issue, please open a new GitHub Issue and reference this one (#699).

@raamdev raamdev closed this Nov 19, 2016

@websharks websharks locked and limited conversation to collaborators Nov 19, 2016

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.