3.0 - Create a reusable "show on mobile" class to enhance labels

[robincornett]

Enhancement Request

Explain your enhancement (please be detailed)

Per the discussion regarding order screen headings, create an EDD utility class which would:

• display on mobile
• be hidden visually on larger screens, but still accessible to assistive technology

Justification or use case

Specifically, the orders screen shows a customer section with vertical tabs. For visual users, the navigation labels are visible on larger screens, but not on smaller screens. The associated tab content does not include a heading to label the content, so adding a heading which would be visible on smaller screens would be very helpful.

This is especially applicable to the reports screens, as the reports do not all have unique icons, and on smaller screens, only the tiles and graphs give an idea of what context the screen/report being displayed is.

[spencerfinnell]

We currently have a ton of seemingly arbitrary media queries:

@media only screen and ( max-width: 782px ) {
@media all and ( min-width: 1080px ) {
@media all and ( min-width: 1240px ) {
@media (min-width: 280px) {
@media handheld, only screen and (max-width: 640px) {
@media screen and ( max-width: 1284px ) {
@media screen and ( max-width: 1024px ) {
@media screen and ( max-width: 782px ) {
@media screen and ( max-width: 600px ) {
@media handheld, only screen and (max-width: 1000px) {
@media screen and ( max-width: 1100px ) {
@media screen and ( max-width: 810px ) and ( min-width: 656px ) {
@media screen and ( max-width: 781px ) {
@media screen and ( max-width: 656px ) {
@media screen and ( max-width: 480px ) {
@media only screen and ( min-width: 1200px ) {
@media only screen and ( max-width: 782px ) {

We'll want to find out the current set core is using and create the new classes around those standards -- and eventually clean up our CSS.

[robincornett]

A CSS reorganization might be helpful as well, to try to get CSS for specific screens grouped as much as possible.

Switching to Sass could allow for logical grouping in the readable CSS file, but efficient grouping in the compiled (using a media query packer type processor).

[robincornett]

Working through the tax rates table, I would love to have this class in place for that. Wondering, though, if we should consider more than one class, to cover multiple media queries. It/they could work somewhat like screen-reader-text, but only on specific size screens. So the classes could be something along the lines of (numbers are just ballparks, and names could be anything, just thinking out loud):

• edd-show-on-mobile: hide visually above 355
• edd-show-on-tablet: hide visually above 768

The classes could be managed using min-width media queries, so they display by default, and are progressively hidden on larger screens, using the same rules as the standard screen-reader-text.

Working on #7980, I put together a spreadsheet of all of the simple (meaning just one width only) media queries currently used in WP Core.

[cklosowski]

Let’s hold off on any decisions about what we should do with these classes until we enter the Post-Alpha phase.

This was added to the Post-Alpha list as it is non-essential to a functioning alpha release so we can get to the first finalized phase of EDD 3.0.