Love the mobile options—very nice.

Is there a way to limit the appearance of a block based on the media query in play. For example, I want to have a block appearing in Top Panel First, Top Panel Second and Top Panel Third when on a full-size monitor. But, I want those blocks to disappear when displayed on a tablet or, in particular, phone-size device.

Is the Delta module the solution?

Comments

Jeff Burnz’s picture

Media queries are a CSS level tool, is suspect its probably possible to use them to drive logic, however thats not what they are design for. For a quick and very dirty hack you could use display: none; to hide these blocks, however what we really want is for those blocks to never load - a harder proposition. I need to look around at whats available (in terms of modules) and see what we can do. I suspect this will use something like Mobile Tools module + something else, maybe Theme Key or similar.

Jeff Burnz’s picture

Project: Corolla » AdaptiveTheme
Version: 7.x-2.2 » 7.x-2.x-dev
Component: Design » Documentation
Assigned: Unassigned » Jeff Burnz

Moving to the base theme.

chubbell’s picture

Is it possible to use the PHP block Visibility options to accomplish this?

Jeff Burnz’s picture

See #1

chubbell’s picture

Thank you I understand #1. But I would prefer to not draw empty blocks if that is a possibility.

Jeff Burnz’s picture

Mobile Tools module

Jeff Burnz’s picture

Status: Active » Postponed

Postponing this until we have a good working Mobile Tools module to achieve a real mobile context in Drupal 7, then we can hide stuff using Context module or Panels.

Jeff Burnz’s picture

Status: Postponed » Closed (fixed)

I have been using mobile tools for this, it works great. Use Context module and mobile tools, its a great combination for doing responsive design paired with contextually hiding/displaying blocks for mobile devices.

wickwood’s picture

Version: 7.x-2.x-dev » 7.x-3.x-dev
Status: Closed (fixed) » Active

Hello Jeff,

I hope you don't mind me reopening this issue and expanding on the topic a bit.

Could you elaborate on how you are using Context and Mobile Tools to accomplish turning on and off blocks in different theme regions depending on the device being used? I've installed Context 7.x-3.0-beta3 and Mobile Tools 7.x-3.x.

Also, what version of Mobile Tools are you using? There is a "DO NOT USE 7.x-3.x ON PRODUCTION SITES." warning on http://drupal.org/project/mobile_tools. The 7.x-2.x release for Mobile Tools appears to be deprecated as well and I looked at the git commits and I don't know if it is actually better to use than the 7.x-3.x version.

Anyways, I have some experience with Context but I still don't see anyway to accomplish this.

I'm also wondering if this same solution or a similar one would allow me to turn of the admin Toolbar when the screen is small. Do you know the answer to that? In fact, as I do more research on building progressively enhanced mobile first websites, I wonder if there isn't some way to turn on/off all sorts of functionality as the screen gets bigger.

Thanks in advance and for doing such a great job on your AdaptiveTheme Project, too. I became a member of your club earlier today.

Steve

Jeff Burnz’s picture

After some long and hard thinking on this issue, and a bunch of other similar issues all asking for the same thing - the ability to control the display of blocks and or regions in mobile, I decided to build such a feature into AT Core.

Please see this article, and its in the latest build of AT 7.x-3.x-dev, which will ship very soon as stable, possibly today.

http://adaptivethemes.com/move-or-hide-regions-and-blocks-in-mobile-devices

wickwood’s picture

Thanks Jeff.

I'm glad to have the honor as the "476'th feature/support request for this"!!! I guess also known as the straw that broke the camel's back.

I recently heard this being discussed regarding the Omega Theme on the Drupal Easy Podcast #84, and it sound as the solution they were using was to just hide things with CSS. However, if I understand things correctly, just hiding blocks doesn't prevent them from being downloaded and that is not friendly to mobile users especially with limited dataplans and slow connections.

So this is really a great development! I truly appreciate all your hard work on AT and look forward to the new release.

Steve

Jeff Burnz’s picture

Hiding things with CSS is certainly not the best approach, far from it. The advice to do this no doubt stems from a lack of other options, i.e. a last resort. For sure the browser downloads it, then executes the CSS to hide what it just downloaded. Not so great especially if there are images or other large page assets involved.

I'm also working on a module so you can do this at the block level, meaning you can set it as a visibility option in the block config, that would be the ultimate solution, but for now this theme based approach is actually really useful and solves a huge pita problem for many many site builders and themers.

Jeff Burnz’s picture

Status: Active » Fixed

Gonna mark this as fixed.

Status: Fixed » Closed (fixed)

Automatically closed -- issue fixed for 2 weeks with no activity.