any plans to make homebox mobile devices friendly?

Comments

up!

I also have this same question. How responsive friendly is the homebox module? I'm using the Omega theme as the base kit.

I think the problem for not being mobile friendly arises from the fact, that each column is defined in "hardcoded" %-values.
I try to build a responsive dashboard which follows twitters bootstrap rules. With the panel module this was super easy, but it's super hard using the homebox.tpl.php file. :(

I'd propose to use the same kind of layouting technique as the panel module does using named regions. let the user choose from a bunch of default layouts, and furthermore allow custom layouts to be defined in a custom template file (which can follow the special needs for the theme being used). This way homebox gets mobile friendly/responsive automatically. You don't have to care for anything in the homebox module code.

Willing to be a beta tester. Also, it could be a good idea to simply add some Omega css code, as Omega is top responsive/adaptive theme for Drupal right now and is head above all the others

We're using Homebox on an Omega installation and wanted our two-column (50/50) Homebox to go full width below our 'narrow' template. A bit of CSS managed to get it working fine.

In global.css

.homebox-column-wrapper {
width:100% !important;
}

In OURTHEME-alpha-default-narrow.css

.homebox-column-wrapper {
width:50% !important;
}

It's not a perfect solution, but works ok for us at the moment.

+1 for more responsiveness out of the box! Happy to test.

EDIT: Sorry, I should add that it's far from perfect if you're allowing moving of blocks and someone stacks the right column taller than the left, as they'll be a gap below the left column when they go to 100%...

I want to have the homebox also responsive. I use in the ERPAL project twitter bootstrap for the Dashboard. +1 for more Responsive options.

As maulwuff said in #3, this problem is caused by the specifying the widths of the column wrappers if there's not a specific % defined. See line 409 of homebox.module:

  // If custom widths aren't set, make each width a percentage of the total available.
  if (!count($page->settings['widths'])) {
    $num_regions = count($regions);
    for ($i = 1; $i <= $num_regions; $i++) {
      $width = 100 / $num_regions;
      // We use a combination of round() and floor() to get this rounded to two decimal places
      // since the $mode argument isn't introducted into round() until PHP 5.3.0.
      $page->settings['widths'][$i] = round(floor($width * 100) / 100, 2);
    }
  }

I'm not quite sure what the point of this is anyway, as if someone doesn't define column width's on a 3 column homebox, for example, then the width is defined in CSS anyway, i.e.:

#homebox.column-count-3 .homebox-column-wrapper {
    width: 33.3%;
}

Sorry if I've missed something about that, but if that's all it's doing, I think it would be best to remove it as it's restricting theming. Happy to patch if it's not objected to.

@neofelis1985: If you want Homebox to work with Bootstrap, and you haven't got too complicated a setup, then the following may start you in the right direction. I've only had a quick look at this, but it's working fine using Bootstrap's scaffolding. If, for example, you want a 3 column Homebox, firstly remove any custom column widths, copy homebox.tpl.php into your theme, and replace it with this:

<?php
/**
* @file
* homebox.tpl.php
* Default layout for homebox.
*/
?>

<?php global $user; ?>
<div id="homebox" class="row-fluid">
  <?php if ($user->uid): ?>
    <div id="homebox-buttons">
      <?php if (!empty($add_links)): ?>
        <a href="javascript:void(0)" id="homebox-add-link"><?php print t('Add a block') ?></a>
      <?php endif; ?>
      <?php print $save_form; ?>
    </div>
  <?php endif; ?>
  <?php if (!empty($add_links)): ?>
    <div id="homebox-add"><?php print $add_links; ?></div>
  <?php endif; ?>
  <?php for ($i = 1; $i <= count($regions); $i++): ?>
    <div class="homebox-column-wrapper span4"<?php print count($page->settings['widths']) ? ' style=""' : ''; ?>>
      <div class="homebox-column" id="homebox-column-<?php print $i; ?>">
        <?php foreach ($regions[$i] as $key => $weight): ?>
          <?php foreach ($weight as $block): ?>
            <?php if ($block->content): ?>
              <?php print theme('homebox_block', array('block' => $block, 'page' => $page)); ?>
            <?php endif; ?>
          <?php endforeach; ?>
        <?php endforeach; ?>
      </div>
    </div>
  <?php endfor; ?>
  <div class="clear-block"></div>
</div>

Note: Just having had a quick look at this, it's not perfect, but will hopefully point you in the right direction.

I had to remove <div class="homebox-maximized"></div>, as it's a <div> outside of the 'span4's which can't happen within the <div class"row-fluid">. You'll need to work out a place for this if you need it.

I also had to strip out all of the homebox styles added, i.e., '#homebox.column-count-3' shown above, as they were clashing with Bootstrap, however if you've got relatively simple needs, then you should be able to work around this.

Thank you, it works, I had the same idea.