Plan

Using the breakpoint module (in core) as an optional dependency, allow global and per-block behaviours to be set on a per-breakpoint basis.

UI changes should be discussed here before implementation to avoid wasting dev time.

Original request:

Hi, is it possible to add media queries to this module, ex: bootstrap themes. when on mobile (small,tablet) the block doesnt collapse and so on. I'm totally new in code programming. Any help please.

Thanks in advance

Comments

hockey2112’s picture

I'm interested in this functionality as well. Did you find a solution for it? I'd like to have the blocks open by default on desktop and tablet, but have them collapsed by default on mobile phone.

billy_comic’s picture

This is the exact functionality I need to. I have product filters exposed in blocks and on desktop they need to be expanded (as they are by default), but on mobile they need to be collapsed for space. PLEASE add the media queries for this and I'll buy you a six pack.

darvanen’s picture

Version: 7.x-1.x-dev » 8.x-1.x-dev
Status: Needs work » Active

I can see how this would be quite useful.

Drupal 8 has configuration options for breakpoints, we might try to implement this request in a Drupal 8 version.

sonvir249’s picture

Assigned: Unassigned » sonvir249
Jessica.K’s picture

Is there a chance the d8 version will get backported to 7? I'm in great need of a feature like this but, due to other module needs with no equivalency or alternative, d8 is not currently an option for me.

darvanen’s picture

@Jessica.K there is no D8 version to backport as yet. Patches are welcome.

MrPaulDriver’s picture

Agree this would be a great feature.

My simple use case; default state of collapsed for mobile and open for desktop.

Implement with core breakpoints module.

Yes please.

Ryanm81’s picture

This is just a quick hack, and it means that even at large screen sizes the block can NOT be collapsed and stays open all the time (perfect for what I needed it for anyways).

Set block settings to 'Collapsible, collapsed by default.' and then make a css rule to force the .content of that block to always be displayed regardless whether is expanded or collapsed for the min to max screen sizes you do not want it collapsed by default.

E.g.

#block-block-1 .content {
display: block !important;
}

Then to make it look like a normal block without the expand/collapse options, use css for the a element in the .collapsiblock container to hide the background image triangle and set the pointer to none when hovered.

MrPaulDriver’s picture

@Ryanm81 made my day, thanks for the tip.

MrPaulDriver’s picture

Title: Media Queries Mobile Fluid » Responsive Collapsiblock Media Queries Mobile Fluid

Changing title for seo and visibility

darvanen’s picture

Version: 8.x-1.x-dev » 4.x-dev
Assigned: sonvir249 » Unassigned
darvanen’s picture

Title: Responsive Collapsiblock Media Queries Mobile Fluid » Integrate with breakpoint module
Issue summary: View changes

I think this title is better than a jumbled collection of keywords ;)

This request has a fairly large scope but as I said before I can see the benefit. I'm going to leave the ticket open for anyone who wants to take a crack at it, I doubt I will find time to implement it myself.