Target device drop down menu too narrow

Author Posts

katw

Need a little more width in the menu to accommodate more descriptive labels for custom @media definitions.

The add tab, clear tab and delete tab icons are wrapping making the menu row expand on hover.

Screenshot of wrapping menu


Sebastian

Hi Kat,

We’re actually going to swap the responsive Tab Manager menu for a new system which you can read about here. These are the priority interface changes I was referring to in my last reply to you.

We’ve said that we’re aiming to release these some time in May and I plan to stick to that (even though it’s likely to go to the wire).

Cheers,
Sebastian


katw

Cool, look forward to seeing it.

Thanks for the heads-up.


katw

Had a look at the link with your propose UI changes. Nice.

But I still can’t see how the new UI will cope with long @media labels like those used in Twenty Fifteen (sample in my screen shot on post).

Also, I hope we can still do our own @media definitions?

Lastly, how will the new version determine the Viewport range (Max/min)? Will it look at all @media profiles defined and sort ascending, and set ranges (min/max viewports) from that?


Sebastian

Hi Kat,

Long query names will be truncated. All tabs will be the same width. As more tabs are added they will all shrink proportionally. Long names will only be truncated if there are lots of queries.

Note: the label for a media query can be anything you like. It has no bearing on the code, it’s just for your reference. You could rename for first 2015 query to “X-Large 1403” for instance to avoid any truncation.

Would that work for you?

Cheers,
Sebastian


Sebastian

ps you can also delete the default media queries Microthemer suggests if you’re just using the ones that match your theme.


katw

ps you can also delete the default media queries Microthemer suggests if you’re just using the ones that match your theme.

Use cases would vary but thinking more broadly…

I would prefer to treat it like a ‘reference library’ and have the ability to include a long list of media queries (which may be used in different pages/sites).

You would choose and ‘activate’ which queries apply to the current theme/page and these would be the ones showing in the tabs.

It is conceivable a site may have particular pages needing more or less media queries e.g. landing/marketing pages, media pages etc

Having to delete tabs you don’t want and add your queries each time will be a bummer.

Maybe next release?

If you can’t work this way, my answer to your comment is:

Would you be able to restore your default queries later if we wanted to? Could this restore also honour the queries which may be in the list, meaning the restore doesn’t splat the custom ones but would add to those in the current list.

Would also need ability to order the queries to control the cascading nature? Will tab order indicate cascading order?


katw

Long query names will be truncated. All tabs will be the same width. As more tabs are added they will all shrink proportionally. Long names will only be truncated if there are lots of queries.

Note: the label for a media query can be anything you like. It has no bearing on the code, it’s just for your reference. You could rename for first 2015 query to “X-Large 1403″ for instance to avoid any truncation.

Would that work for you?

The randomness of truncation would be problematic. You could conceivably end up with weird tab names. We would either need to know fixed character length or need ability to define short and long name.

Could you consider adding a tooltip description for tabs? That way obscure abbreviations for media queries like “XL desktop”, “XL mobile”, “XL mobile L” could have a descriptive tool tip defined by user to say more than the tab allows e.g.

  • XL desktop – tip say “1240px – 1400px wide screen”
  • XL mobile – tip says “>400px – iPhone/nexus Portrait mode”
  • XL mobile L – tip says “>736px – iPhone/nexus Landscape mode”

And if you consider my suggestion for “currently active media queries” we could then control the number of tabs visible or active.


Sebastian

OK, I hear you.

I’d be happy to add a “Hide tab in interface (no settings will be lost)” checkbox on each media query on the Edit Media Queries popup window. This will allow you to have lots of media queries as part of your reference library without cluttering the tabs in the interface or having truncated text.

As a rule of thumb, it’s best to keep the number of media queries as low as possible. I discuss how to do this in the responsive tutorial that we will be releasing soon. If you apply settings via lots of media queries you can end up significantly amplifying your work load. We only use 4 media queries on themeover.com. And only 2/4 of those are actually used frequently.

In answer to your question about cascading, yes the tab order controls the order that the styles are written to the stylesheet so this does have an effect on the cascade. You can drag and drop the media queries via the Edit Media Queries popup window.

And finally, yes we will modify the tooltip so that it shows the underlying media query code and the descriptive label on hover.


katw

You’re a champ! Thanks for demonstrating true community consultation.

BTW it’s not my desire to work with so many media queries. The Twenty Fifteen theme has seven built-in and it’s a real beast to work with.

They missed one for small mobiles though, so I had to add an eighth.

My only disappointment is having to hand code it when I really want to use Microthemer (it was the reason I bought it).

But because of the multiple entries for styling PX, REM and PX, %, I can’t do it reliably – so back to basics again.

You must login or register to reply to this topic.