Problem/Motivation

Right now the differnt styles per breakpoint can be done through css class without any option for site builder to change it.
For example;

On desktop it is nice to have a looping background video, however, performance is a huge issue when we get down to mobile devices. The user would like to select a still background image to display instead.

Proposed resolution

Add the ability to choose different styles for pre-configured breakpoints.

Remaining tasks

  • Make it configurable per plugins group.
  • Any module that utilize Bootstrap styles must have the option to turn the responsive on or off

User interface changes

Add the breakpoints devices icons at the top of each plugins group, if that group support responsive.

CommentFileSizeAuthor
#34 3195256-34_1.x.patch42.13 KBakalam
#33 3195256-33.patch47.83 KBakalam
#32 changes_responsivetrait_responsive-3195256-32.patch1.35 KBlalitkyttn
#29 interdiff-27-29.txt14.4 KBrajendar reddy
#29 3195256-29.patch47.83 KBrajendar reddy
#27 3195256-responsive-background-media-support-26.patch33.02 KBunstatu
#26 interdiff-25-26.txt6.11 KBunstatu
#26 3195256-responsive-background-media-support-26.patch55.44 KBunstatu
#25 3195256-responsive-background-media-support-25.patch32.46 KBsudesh.solaskar
#24 3195256-responsive-background-media-support-24.patch31.92 KBsudesh.solaskar
#23 3195256-responsive-background-media-support-23.patch31.92 KBsudesh.solaskar
#22 3195256-responsive-background-media-support-22.patch31 KBsudesh.solaskar
#21 3195256-responsive-background-media-support-21.patch30.48 KBalokbhatt
#20 3195256-responsive-background-media-support-20.patch31.04 KBsudesh.solaskar
#19 3195256-responsive-background-media-support-19.patch27.22 KBsudesh.solaskar
#18 3195256-responsive-background-media-support.patch27.7 KBsudesh.solaskar
#17 3195256-padding-margin-support-for-breakpoints.patch21.3 KBsudesh.solaskar
#3 chrome-capture.gif1.79 MBaaronchristian

Issue fork bootstrap_styles-3195256

Command icon Show commands

Start within a Git clone of the project using the version control instructions.

Or, if you do not have SSH keys set up on git.drupalcode.org:

About issue forks

Comments

mahmoud-zayed created an issue. See original summary.

aaronchristian’s picture

aaronchristian commented
Title: Responsive » Responsive Plugins
Issue summary: View changes
aaronchristian’s picture

aaronchristian commented
Issue summary: View changes
StatusFileSize
new chrome-capture.gif1.79 MB
aaronchristian’s picture

aaronchristian commented
Issue summary: View changes
mahmoud-zayed’s picture

mahmoud-zayed commented
Issue summary: View changes
mahmoud-zayed’s picture

mahmoud-zayed commented
mahmoud-zayed’s picture

mahmoud-zayed commented
Status: Active » Needs work

  • mahmoud-zayed committed 917790a on 1.0.x 
    Issue #3195256: Responsive - Create the padding classes examples.
  • mahmoud-zayed committed b6e26af on 1.0.x
    Issue #3195256 by mahmoud-zayed: Responsive Plugins add disable live...
  • mahmoud-zayed committed bc3ae87 on 1.0.x
    Issue #3195256 by mahmoud-zayed: Responsive Plugins Create the sharable...
  • mahmoud-zayed committed f480501 on 1.0.x
    Issue #3195256: Responsive - Create the padding classes examples.
mahmoud-zayed’s picture

mahmoud-zayed commented
Status: Needs work » Fixed
mahmoud-zayed’s picture

mahmoud-zayed commented
Status: Fixed » Needs work

  • mahmoud-zayed committed 917790a on feature/#3195256-previewer-styling 
    Issue #3195256: Responsive - Create the padding classes examples.
  • mahmoud-zayed committed b6e26af on feature/#3195256-previewer-styling
    Issue #3195256 by mahmoud-zayed: Responsive Plugins add disable live...
  • mahmoud-zayed committed bc3ae87 on feature/#3195256-previewer-styling
    Issue #3195256 by mahmoud-zayed: Responsive Plugins Create the sharable...
  • mahmoud-zayed committed f480501 on feature/#3195256-previewer-styling
    Issue #3195256: Responsive - Create the padding classes examples.

  • AaronChristian committed 0437c2f on feature/#3195256-previewer-styling 
    #3195256: Updating responsive preview after rebase with 1x.

  • AaronChristian committed fab7cbf on feature/#3195256-previewer-styling 
    #3195256: More theme work on the responsive display stuff.

sudesh.solaskar’s picture

sudesh.solaskar
he/him
Location mumbai
commented
StatusFileSize
new 3195256-padding-margin-support-for-breakpoints.patch21.3 KB

I have created a patch to support padding & margin for different breakpoints.

sudesh.solaskar’s picture

sudesh.solaskar
he/him
Location mumbai
commented
StatusFileSize
new 3195256-responsive-background-media-support.patch27.7 KB

I have created another patch that will work for responsive breakpoints for back-ground media i.e. image & video.

sudesh.solaskar’s picture

sudesh.solaskar
he/him
Location mumbai
commented
StatusFileSize
new 3195256-responsive-background-media-support-19.patch27.22 KB

There was an issue with the patch from #18. The issue was related to break points, that particular patch only considers global background media if we have couple of elements to style. I have recreated the patch with some code modification to overcome this issue.

sudesh.solaskar’s picture

sudesh.solaskar
he/him
Location mumbai
commented
StatusFileSize
new 3195256-responsive-background-media-support-20.patch31.04 KB

On the patch no #19 there was an issue with background video, it used to show background video irrespective of viewport size. I have resolved the same issue in this patch.

alokbhatt’s picture

alokbhatt commented
Status: Needs work » Needs review
StatusFileSize
new 3195256-responsive-background-media-support-21.patch30.48 KB

Recreated patch with some changes. Please review.

sudesh.solaskar’s picture

sudesh.solaskar
he/him
Location mumbai
commented
StatusFileSize
new 3195256-responsive-background-media-support-22.patch31 KB

Recreated patch to consider proper media queries for devices.

sudesh.solaskar’s picture

sudesh.solaskar
he/him
Location mumbai
commented
StatusFileSize
new 3195256-responsive-background-media-support-23.patch31.92 KB

Recreated patch to resolve the video not getting rendered on front end and on edit layout section contextual links missing for the blocks to which background video is being attached.

sudesh.solaskar’s picture

sudesh.solaskar
he/him
Location mumbai
commented
StatusFileSize
new 3195256-responsive-background-media-support-24.patch31.92 KB

Minor JS issue fixed.

sudesh.solaskar’s picture

sudesh.solaskar
he/him
Location mumbai
commented
StatusFileSize
new 3195256-responsive-background-media-support-25.patch32.46 KB

Just a fix for properly setting the global styles and making it responsive based on breakpoints

unstatu’s picture

unstatu commented
StatusFileSize
new 3195256-responsive-background-media-support-26.patch55.44 KB
new interdiff-25-26.txt6.11 KB

Used Drupal\Component\Utility\NestedArray to set/get the nested array values. This will avoid errors like Notice: Undefined index: background_media in Drupal\bootstrap_styles\BootstrapStyles\Style\BackgroundMedia->createBreakpointStyleFormField() (line 209 of modules/contrib/bootstrap_styles/src/ResponsiveTrait.php).

unstatu’s picture

unstatu commented
StatusFileSize
new 3195256-responsive-background-media-support-26.patch33.02 KB

I have made a mistake generating the patch. Uploading the right one.

mahmoud-zayed’s picture

mahmoud-zayed commented
Version: 1.0.x-dev » 2.0.x-dev
rajendar reddy’s picture

rajendar reddy commented
StatusFileSize
new 3195256-29.patch47.83 KB
new interdiff-27-29.txt14.4 KB

I have applied responsiveness to Margin and enhanced spacing preview function in js/spacing-preview.js

flyke’s picture

flyke commented

I was missing the responsive classes option for Spacing - Margins.
Thanks, patch #29 works great!

lalitkyttn’s picture

lalitkyttn commented
Assigned: mahmoud-zayed » lalitkyttn
Status: Needs review » Active

I am working on this

lalitkyttn’s picture

lalitkyttn commented
Assigned: lalitkyttn » Unassigned
Status: Active » Needs review
StatusFileSize
new changes_responsivetrait_responsive-3195256-32.patch1.35 KB
akalam’s picture

akalam commented
StatusFileSize
new 3195256-33.patch47.83 KB

Rerolled #29 against latest 2.x release

akalam’s picture

akalam commented
StatusFileSize
new 3195256-34_1.x.patch42.13 KB

Rerolled #29 against latest 1.0.x version

akalam’s picture

akalam commented

Patch on #34 doesn't work on bootstrap_styles 1.x because the code depends on ResponsiveTrait which is only available on the 2.0.x branch