diff --git a/patterns/molecules/row/row.html.twig b/patterns/molecules/row/row.html.twig index 44c30e4e6a2f058defb12ea830a19e87199ad440..7ca88b98c49ef4e772f0b6906ddd2b24e83fd593 100755 --- a/patterns/molecules/row/row.html.twig +++ b/patterns/molecules/row/row.html.twig @@ -10,21 +10,21 @@ {% set title_attributes = title_attributes.addClass("row-component-title") %} {% if variants.title_color.color %} - {% set title_attributes = title_attributes.setAttribute('style', "color:" ~ variants.title_color.color ~ "") %} + {% set title_attributes = title_attributes.setAttribute('style', "color:" ~ variants.title_color.color ~ "") %} {% endif %} {% - set classes = [ - "component-row", - "component-row__display__" ~ variants.display.value, - "section-navigation" - ] + set classes = [ + "component-row", + "component-row__display__" ~ variants.display.value, + "section-navigation" +] %} {% if (variants.header.value == 1) %} - {% - set classes = classes|merge(["component-row__has-header"]) - %} + {% + set classes = classes|merge(["component-row__has-header"]) + %} {% endif %} {% set attributes = create_attribute() %} @@ -36,137 +36,179 @@ {% set attributes_bg_image_attachment = 'scroll' %} {% if variants.full_height.value == 1 %} - {% set attributes = attributes.addClass('is_full_height') %} + {% set attributes = attributes.addClass('is_full_height') %} {% endif %} {% if variants.height.value %} - {% set attributes = attributes.addClass(variants.height.value) %} + {% set attributes = attributes.addClass(variants.height.value) %} {% endif %} {% if variants.show_title.value == 1 and title | render %} - {% set attributes = attributes.addClass('has_title') %} + {% set attributes = attributes.addClass('has_title') %} {% endif %} {% if variants.lazy.value == 1 %} - {% set attributes = attributes.addClass('is-cern-lazy') %} + {% set attributes = attributes.addClass('is-cern-lazy') %} {% endif %} {% if variants.show_in_scroll.value == 1 and variants.scroll_menu_title.value != '' %} - {% set attributes = attributes.setAttribute('data-title', variants.scroll_menu_title.value) %} + {% set attributes = attributes.setAttribute('data-title', variants.scroll_menu_title.value) %} {% endif %} {# bootstrap classes : left #} {% if left_column | render is not empty or left_column_blocks | render is not empty or left_column_views | render is not empty is not empty or left_column_content | render is not empty %} - {% set hasleft = create_attribute() %} - {% set hasleft = true %} + {% set hasleft = create_attribute() %} + {% set hasleft = true %} {% endif %} {# bootstrap classes : right #} {% if right_column | render is not empty or right_column_blocks | render is not empty or right_column_views | render is not empty is not empty or right_column_content | render is not empty %} - {% set hasright = create_attribute() %} - {% set hasright = true %} + {% set hasright = create_attribute() %} + {% set hasright = true %} {% endif %} -{% if hasleft and hasright %} - {% - set mainclasses = [ - 'component-row__column', - 'component-row__center', - 'col-md-6', - 'col-sm-12', - 'col-xs-12', - ] - %} +{# bootstrap classes : center #} +{% if main | render is not empty or main_column_blocks | render is not empty or main_column_views | render is not empty is not empty or main_column_content | render is not empty %} + {% set hasmain = create_attribute() %} + {% set hasmain = true %} {% endif %} -{% if hasleft and hasright is empty %} - {% - set mainclasses = [ - 'component-row__column', - 'component-row__center', - 'col-md-9', - 'col-sm-12', - 'col-xs-12', - ] - %} + +{% set leftclasses = [ + 'component-row__column', + 'component-row__sidebar-left', + 'col-md-6', + 'col-sm-12', + 'col-xs-12' +] +%} + +{% set rightclasses = [ + 'component-row__column', + 'component-row__sidebar-left', + 'col-md-6', + 'col-sm-12', + 'col-xs-12' +] +%} + +{% set mainclasses = [ + 'component-row__column', + 'component-row__center', + 'col-md-9', + 'col-sm-12', + 'col-xs-12', +] +%} + +{% if hasright and hasleft is empty and hasmain is empty %} + {% set rightclasses = [ + 'component-row__column', + 'component-row__sidebar-left', + 'col-md-offset-6', + 'col-md-6', + 'col-sm-12', + 'col-xs-12' + ] + %} {% endif %} -{% if hasleft is empty and hasright %} - {% - set mainclasses = [ - 'component-row__column', - 'component-row__center', - 'col-md-9', - 'col-sm-12', - 'col-xs-12', - ] - %} +{% if hasmain %} + + {% set leftclasses = [ + 'component-row__column', + 'component-row__sidebar-left', + 'col-md-3', + 'col-sm-12', + 'col-xs-12' + ] + %} + + {% set rightclasses = [ + 'component-row__column', + 'component-row__sidebar-right', + 'col-md-3', + 'col-sm-12', + 'col-xs-12' + ] + %} + {% endif %} {% if hasleft is empty and hasright is empty %} - {% - set mainclasses = [ - 'component-row__column', - 'component-row__center', - 'section-has-no-column', - 'col-md-12', - 'col-sm-12', - 'col-xs-12', - ] - %} + {% + set mainclasses = [ + 'component-row__column', + 'component-row__center', + 'section-has-no-column', + 'col-md-12', + 'col-sm-12', + 'col-xs-12', + ] + %} {% endif %} {% if variants.box_effects.value == 1 and variants.box_effects.value != '' %} - {% set attributes = attributes.addClass('box-effects') %} + {% set attributes = attributes.addClass('box-effects') %} {% endif %} <div{{ attributes }}> - {% if background | render %} - {{ background }} - {% endif %} - - {% if variants.show_title.value == 1 %} - <h1 {{ title_attributes }}> - {{ title }} - </h1> - {% endif %} - - {% set inner_attributes = create_attribute() %} - {% set inner_attributes = inner_attributes.addClass(mainclasses) %} - - <div class="component-row__row"> - - {# left column #} - {% if left_column | render is not empty or left_column_blocks | render is not empty or left_column_views | render is not empty is not empty or left_column_content | render is not empty %} - <div class="component-row__column component-row__sidebar-left col-md-3 col-sm-12 col-xs-12"> - {{ left_column }} - {{ left_column_blocks }} - {{ left_column_views }} - {{ left_column_content }} - </div> - {% endif %} - - {# main column #} - <div{{ inner_attributes }}> - <div class="box-effects-wrapper {% if variants.box_effects.value == 1 and variants.box_effects.value != '' %} enable-effects {% endif %}"> - {{ main }} - {{ main_column_blocks }} - {{ main_column_views }} - {{ main_column_content }} - </div> - </div> - - {# right column #} - {% if right_column | render is not empty or right_column_blocks | render is not empty or right_column_views | render is not empty is not empty or right_column_content | render is not empty %} - <div class="component-row__column component-row__sidebar-right col-md-3 col-sm-12 col-xs-12"> - {{ right_column }} - {{ right_column_blocks }} - {{ right_column_views }} - {{ right_column_content }} - </div> - {% endif %} - - </div> + {% if background | render %} + {{ background }} + {% endif %} + + {% if variants.show_title.value == 1 %} + <h1 {{ title_attributes }}> + {{ title }} + </h1> + {% endif %} + + {% set inner_attributes = create_attribute() %} + {% set inner_attributes = inner_attributes.addClass(mainclasses) %} + + {% set left_attributes = create_attribute() %} + {% set left_attributes = left_attributes.addClass(leftclasses) %} + + {% set right_attributes = create_attribute() %} + {% set right_attributes = right_attributes.addClass(rightclasses) %} + + <div class="component-row__row"> + + {# left column #} + {% if left_column | render is not empty or left_column_blocks | render is not empty or left_column_views | render is not empty is not empty or left_column_content | render is not empty %} + <div{{ left_attributes }}> + {{ left_column }} + {{ left_column_blocks }} + {{ left_column_views }} + {{ left_column_content }} + </div> + {% endif %} + + {# main column #} + {% if hasmain %} + <div{{ inner_attributes }}> + <div class="box-effects-wrapper {% if variants.box_effects.value == 1 and variants.box_effects.value != '' %} enable-effects {% endif %}"> + {{ main }} + {{ main_column_blocks }} + {{ main_column_views }} + {{ main_column_content }} + </div> + </div> + + {% endif %} + + + {# right column #} + {% if right_column | render is not empty or right_column_blocks | render is not empty or right_column_views | render is not empty is not empty or right_column_content | render is not empty %} + <div{{ right_attributes }}> + {{ right_column }} + {{ right_column_blocks }} + {{ right_column_views }} + {{ right_column_content }} + </div> + {% endif %} + + </div> </div>