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.
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%...
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.:
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:
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.
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)
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.
Comments
Comment #1
PlayfulWolf CreditAttribution: PlayfulWolf commentedup!
Comment #2
CLKeenan CreditAttribution: CLKeenan commentedI also have this same question. How responsive friendly is the homebox module? I'm using the Omega theme as the base kit.
Comment #3
maulwuff CreditAttribution: maulwuff commentedI 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.
Comment #4
PlayfulWolf CreditAttribution: PlayfulWolf commentedWilling 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
Comment #5
Adam Wood CreditAttribution: Adam Wood commentedWe'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
In OURTHEME-alpha-default-narrow.css
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%...
Comment #6
alexander.sibert CreditAttribution: alexander.sibert commentedI want to have the homebox also responsive. I use in the ERPAL project twitter bootstrap for the Dashboard. +1 for more Responsive options.
Comment #7
Adam Wood CreditAttribution: Adam Wood commentedAs 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:
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.:
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:
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.
Comment #8
alexander.sibert CreditAttribution: alexander.sibert commentedThank you, it works, I had the same idea.
Comment #9
nwehner CreditAttribution: nwehner commentedI found the following to work just fine for me, building off of Adam's suggestions:
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)
Comment #10
darol100 CreditAttribution: darol100 commentedAn alternative to
60em
will be 900px.If you are writing on CSS here is an example.
Comment #11
AnybodyPlease 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.