any plans to make homebox mobile devices friendly?

Comments

PlayfulWolf’s picture

up!

CLKeenan’s picture

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

maulwuff’s picture

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.

PlayfulWolf’s picture

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

Adam Wood’s picture

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%...

alexander.sibert’s picture

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

Adam Wood’s picture

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.

alexander.sibert’s picture

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

nwehner’s picture

Issue summary: View changes

I found the following to work just fine for me, building off of Adam's suggestions:

/* Prevent Homebox from adding an arbitrary element.style height */
.homebox-column {
  height: auto !important;
}

/* Only use 1 column for mobile */
.homebox-column-wrapper {
  width: 100% !important;
  clear: both;
}

/* Go back to 3 columns for desktop */
@include breakpoint($desk, true) {
  .homebox-column-wrapper {
    width: 33.33% !important;
    clear: none;
  }
}

Do note that I'm using SCSS with Compass and Singularity here, so the @include won't pertain to standard CSS setups. You'd want to change that to a regular media query, like @media (max-width: 60em)

darol100’s picture

An alternative to 60em will be 900px.

If you are writing on CSS here is an example.

@media screen and(max - width: 900 px) {

    .homebox-column {
        height: auto!important;
    }
    .homebox-column-wrapper {
        width: 100 % !important;
        clear: both;
    }
}
Anybody’s picture

Status: Active » Closed (won't fix)

Please create a new Drupal 8+ (3.0.x) issue, referencing this one, if this is still relevant for Drupal 8+ (3.0.x).

As this issue was created for Drupal 7 which is close to EOL and won't receive any new features here anymore (unless someone implements them or sponsors development) I'm closing this issue for cleanup now.

If anyone works on this or has a solution, feel free to reopen! :)
Thank you.