I know there's been discussions about adding template support to the responsive layouts, but fro now that's now there. Is there another way that blocks, or div's can be moved around, other than CSS positioning?
In my D6 design I used the Mobile Tools module to have custom themes for different devices. That module seems to be having a great deal of trouble working in D7, so AT responsive layouts seems to be a great replacement. I can move things around with CSS most of the times, but sometimes I have a block or div at the page top that would work better at the bottom on a mobile phone. I was wondering if anyone has a trick I've missed to make drastic changes like that.

Comments

Jeff Burnz’s picture

Jeff Burnz commented
Title: Unset regions in mobile and provide a global mobile context » Way to move blocks in responsive layouts
Version: 7.x-3.x-dev » 7.x-3.0-rc1
Component: Mobile » Theme Settings
Assigned: Jeff Burnz » Unassigned
Category: feature » support

Yeah, its the number one question, short answer - nope. I could be done with JS (yep, it really could be - look into "match media"), but I'm not tempted to go down that route in the core theme and would prefer to wait for Mobile tools for D7.

There are all sorts of hacky approaches to fill the gap until Mobile Tools comes out, for example positioning (absolute) using media queries, serving the block twice (such as creating two identical Views blocks or using Panels) and hiding one or the other with media queries.

I'd agree that the situation with Mobile Tools is beyond critical at this stage, we all need to start thinking about throwing resources at this module because Drupal 7 is in desperate need of a mobile context. Trying to solve this in the theme layer is a bad mistake and will only lead to heartache and performance losses (I mean trying to hack in context using match media trickery, although I have done it as a last resort on a few sites).

Edit, I'm retracting that last statement, I was able to do this relatively easily and without noticeable performance loss using Browscap and some tricky page altering, following wxman's lead and excellent suggestion to use browser_get_browser() - see the following comments, especially #5 and #7 (has some docs).

wxman’s picture

wxman commented
Title: Unset regions in mobile, move blocks in mobile, and provide a global mobile context » Way to move blocks in responsive layouts
Version: 7.x-3.x-dev » 7.x-3.0-rc1
Component: Mobile » Theme Settings
Assigned: Jeff Burnz » Unassigned
Category: feature » support
Issue tags: -mobile, -mobile blocks, -mobile context

I've been messing around with setting a "ismobile" variable using the browscap module:

$browser = browscap_get_browser();
if ($browser['ismobiledevice'] == 1) {
  global $ismobile;
  $ismobile = TRUE;
}else {
  $ismobile = FALSE;
}

I set that in the html.tpl.php, then I can use it to turn on/off sections in the page template. It's not very elegant, but it does the job. The only way it really works is if I make regions that can be duplicated.
For example, I use the region 'leaderboard' to show a links menu at the page top. On the mobile version, I want that go be near the bottom, and themed different so it's easier to use on a phone. So I make two leaderboard regions:

<?php if (!$ismobile): ?>
  <?php print render($page['leaderboard']); ?>
  <div id="top-links">
  <?php print render($page['top_links']); ?>
  </div> <!-- /top links -->
<?php endif; ?>


<?php if ($ismobile): ?>
  <?php print render($page['leaderboard']); ?>
  <div id="top-links">
  <?php print render($page['top_links']); ?>
  </div> <!-- /bottom links -->
<?php endif; ?>

I also added this to the template.php:

function THEMENAME_preprocess_page(&$vars) {
  $browser = browscap_get_browser();
  if ($browser['ismobiledevice'] == 1) {
    $vars['ismobile'] = TRUE;
  }else {
    $vars['ismobile'] = FALSE;
  }
}
Jeff Burnz’s picture

Jeff Burnz commented

Good thinking, I'll have a think about this today and see if we can expand on this idea.

Jeff Burnz’s picture

Jeff Burnz commented
Title: Way to move blocks in responsive layouts » Unset regions in mobile and provide a global mobile context
Version: 7.x-3.0-rc1 » 7.x-3.x-dev
Component: Theme Settings » Mobile
Assigned: Unassigned » Jeff Burnz
Category: support » feature

This is doable, and we can do it, so lets do so.

What I am thinking is providing a function that will return TRUE or FALSE that you can use anywhere to do whatever you want.

Additionally we can use this to unset regions in theme settings, so you can just go to the theme settings, click some checkboxes and regions will not print in mobile devices. How does that sound?

Looks like I can get this working pretty easily, would be better if we could provide it to the block level, its doable but more tricky, e.g. if there is only one block we need the region to unset as well, it might be better to simply call this function in block visibility. I can provide some code for that also - or build a module. Probably both at this stage.

Jeff Burnz’s picture

Jeff Burnz commented

OK, I got this working, will commit an iteration soon and call for testers in IRC, we need to get some eyes on this real fast as its quite fundamental what this does:

- allows you to unset any region when in mobile context.
- allows you to move all blocks from one region to another when in mobile context.

wxman’s picture

wxman commented

That all sounds great. I guess I'll delay any rewriting here until I see the results. Thanks for all you do.

Jeff Burnz’s picture

Jeff Burnz commented

I've committed this to GIT, so either pull from GIT, or wait a while for 7.x-3.x-dev to update (takes about 12 hours).

I've made this an "Extension", called "Mobile Regions and Blocks", just enable it (and I assume you have Browscap installed, it needs it), and you will see new settings in the Extensions vertical tabs. As I described earlier you can unset an entire region or move all the blocks from a region to another region.

Seems to work good with very little performance overhead. There is one gotcha that I cannot do jack shit about and that's the block weight, aka the order in which they will appear in the new region if you choose the Move option. You could implement your own hook_page_alter() and reset the order of everything in a particular region, that's up to you.

AT Core now includes a new function and variable for testing for a mobile context (needs Browscap):

at_get_browser() is a wrapper for browscap_get_browser() and will return TRUE or FALSE, TRUE being when a mobile device is detected.

$vars['is_mobile'] is set in hook_preprocess() and is therefor available to all preprocess/process functions and templates, this is set from at_get_browser().

Jeff Burnz’s picture

Jeff Burnz commented
Title: Way to move blocks in responsive layouts » Unset regions in mobile, move blocks in mobile, and provide a global mobile context
Version: 7.x-3.0-rc1 » 7.x-3.x-dev
Component: Theme Settings » Mobile
Assigned: Unassigned » Jeff Burnz
Category: support » feature
Issue tags: +mobile, +mobile blocks, +mobile context

Updating title to better reflect what has actually been done here.

wxman’s picture

wxman commented

I wish I could figure out git. I've tried but I just never can pull anything out of it. I'll wait the 12 hours and see how it goes. Thanks again for the work, it should be a big help since there just doesn't seem to be any good solutions for mobile.

wxman’s picture

wxman commented
Title: Way to move blocks in responsive layouts » Unset regions in mobile, move blocks in mobile, and provide a global mobile context
Version: 7.x-3.0-rc1 » 7.x-3.x-dev
Component: Theme Settings » Mobile
Assigned: Unassigned » Jeff Burnz
Category: support » feature
Issue tags: +mobile, +mobile blocks, +mobile context

A way around the block weight might be simply making separate custom regions in the page template. You could make regions for each block if necessary and move them using the new theme setting.

Also, does that mean I can use a variable $is_mobile in the tpl like I was using my $ismobile?

wxman’s picture

wxman commented

Jeff

Is there any chance what you changed could mess with how it handles the responsive layouts? My standard layout is being ignored, and it's picking up the Landscape tablet instead. The smallest also seems to be ignored too.

Jeff Burnz’s picture

Jeff Burnz commented

No, I don't think so, more likely to be your media queries, also make sure you are using the right User Agent (if you are testing on your desktop, for example I often use a Firefox plugin to switch user agents). Your post doesn't contain enough information for me to know what it might be causing your issue (maybe better to open another issue).

wxman’s picture

wxman commented

Yes I'm using the same FF plugin. According to http://whatsmyuseragent.com/:
Mozilla/5.0 (Windows NT 6.1; WOW64; rv:13.0) Gecko/20100101 Firefox/13.0

My Media Queries:

/* Smartphone portrait */
@media only screen and (max-width:219px) {
}

/* Smartphone landscape */
@media only screen and (min-width:220px) and (max-width:559px) {
}

/* Tablet portrait */
@media only screen and (min-width:560px) and (max-width:889px) {
}

/* Tablet landscape */
@media only screen and (min-width:890px) and (max-width:1024px) {
}

/* Standard layout */
@media only screen and (min-width:1025px) {
}

I don't know if that helps, but I hadn't changed any of the setting, but when I downloaded your new version, it started to act up. By the way the new settings work great.

Jeff Burnz’s picture

Jeff Burnz commented

Nope, does not help, nor do I know what act up means. You need to give me a link to something live because I cannot replicate the issue based on the information provided. Remember, firefox has issues with small widths due to its toolbars, you have to disable most of them.

wxman’s picture

wxman commented

I'll let you know. It still might just be me. You can delete these posts if you want.

Jeff Burnz’s picture

Jeff Burnz commented

OK, I see the issue now, sorry I did not realize this was with the panels displays, its a coincidence and I would think related to the addition of the new Standard Layout options for Panels layouts. I'm debugging now. I can't delete comments, I have not been granted such powers :)

Jeff Burnz’s picture

Jeff Burnz commented

I found the problem, it was in another unrelated update - as suspected for the Standard layout addition in the latest version. I have fixed this and committed to DEV.

If you don't want to wait the 24 hours for that to be available you can change this yourself in at_core.submit.responsive.inc on line 302:

$panels_layouts = $float . $tablet_landscape_panels_css;

Change to:

$panels_layouts = $float . $bigscreen_panels_css;

Jeff Burnz’s picture

Jeff Burnz commented
Assigned: Jeff Burnz » Unassigned
Status: Active » Fixed

Marking as fixed.

Status: Fixed » Closed (fixed)

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

Jeff Burnz’s picture

Jeff Burnz commented

As an extension or alternative to this feature I have built two modules:

http://drupal.org/project/browscap_block (for normal blocks)
http://drupal.org/project/browscap_ctools (for panel panes)

Both require Browscap module and provide visibility settings for mobile.

wxman’s picture

wxman commented

Boy are you good Jeff! I was adding some custom blocks just for mobile, and wishing a way to get panels to do that as well.