Plugin Settings Page not Usable on Mobile Devices

[ricsmo]

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]

@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]

@raamdev

Before Using Media Queries:

Mock up using Responsive Design - Media Queries:

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

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.

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

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

[jaswrks]

@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]

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]

@renzms Any update on this?

[jaswrks]

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]

@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:

Mobile:

with Wipe Button:

Original Size:

Mobile:

---

2) The Comet Cache = Speed image

Original Size:

Mobile:

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

[raamdev]

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).