templates/areas/columns/view.html.twig line 1

Open in your IDE?
  1. {% if editmode %}
  2. <div class="settings">
  3.   <div class="position-relative settings-button-border">
  4.     <strong class="settings-header">Settings</strong><button class="toggle-settings"><i class="fa fa-plus"></i></button>
  5.     <div class="settings_container">
  6.       <div class="row middle-lg middle-md middle-sm" style="gap: 10px">
  7.         <div>
  8.           {{
  9.             pimcore_select("columns", {
  10.               store: [
  11.                 ["1", "1"],
  12.                 ["2", "2"],
  13.                 ["3", "3"],
  14.                 ["4", "4"],
  15.                 ["5", "5"],
  16.                 ["6", "6"]
  17.               ],
  18.               "defaultValue" : "1",
  19.               reload: true
  20.             })
  21.           }}
  22.         </div>
  23.       </div>
  24.       <div class="row middle-lg middle-md middle-sm" style="gap: 10px">
  25.         <div>Gutters</div>
  26.         <div>
  27.           {{
  28.             pimcore_select("columnGutters", {
  29.               store: [
  30.                 ["small", "SM"],
  31.                 ["medium", "MD"],
  32.                 ["large", "LG"],
  33.                 ["none", "None"]
  34.               ]
  35.             })
  36.           }}
  37.         </div>
  38.       </div>
  39.       <div class="row middle-lg middle-md middle-sm" style="gap: 10px">
  40.         <div>Set auto width on columns?</div>
  41.         <div>
  42.           {{
  43.             pimcore_checkbox("columnFlexBasisAuto")
  44.           }}
  45.         </div>
  46.       </div>
  47.       <div class="row middle-lg middle-md middle-sm" style="gap: 10px">
  48.         <div>Remove bottom margin on mobile?</div>
  49.         <div>
  50.           {{
  51.             pimcore_checkbox("hideBottomMarginOnMobile")
  52.           }}
  53.         </div>
  54.       </div>
  55.       <div class="row middle-lg middle-md middle-sm column-ratio-dropdown{% if pimcore_select("columns").getData() == 2 %} display-column-ratio-dropdown{% endif %}" style="gap: 10px">
  56.         <div>Column Ratios</div>
  57.         <div>
  58.           {{
  59.             pimcore_select("columnRatios", {
  60.               store: [
  61.                 ["half-half", "1/2 | 1/2"],
  62.                 ["two-fifth-three-fifth", "2/5 | 3/5"],
  63.                 ["one-third-two-third", "1/3 | 2/3"],
  64.                 ["one-quarter-three-quarter", "1/4 | 3/4"],
  65.                 ["three-fifth-two-fifth", "3/5 | 2/5"],
  66.                 ["two-third-one-third", "2/3 | 1/3"],
  67.                 ["three-quarter-one-quarter", "3/4 | 1/4"]
  68.               ],
  69.               reload: true
  70.             })
  71.           }}
  72.         </div>
  73.       </div>
  74.       <div class="row middle-lg middle-md middle-sm" style="gap: 10px">
  75.         <div>Max Width on Row</div>
  76.         <div>{{ pimcore_numeric("maxWidth") }}</div>
  77.       </div>
  78.       <div class="row middle-lg middle-md middle-sm" style="gap: 10px">
  79.         <div>Column Vertical Alignment</div>
  80.         <div>
  81.           {{
  82.             pimcore_select("colVertAlignment", {
  83.               store: [
  84.                 ["top", "Top"],
  85.                 ["middle", "Middle"],
  86.                 ["bottom", "Bottom"]
  87.               ]
  88.             })
  89.           }}
  90.         </div>
  91.       </div>
  92.       <div class="row middle-lg middle-md middle-sm" style="gap: 10px">
  93.         <div>Column Horizontal Alignment</div>
  94.         <div>
  95.           {{
  96.             pimcore_select("colHorAlignment", {
  97.               store: [
  98.                 ["start", "Start"],
  99.                 ["center", "Center"],
  100.                 ["end", "End"]
  101.               ],
  102.               "defaultValue" : "start",
  103.             })
  104.           }}
  105.         </div>
  106.       </div>
  107.       <div class="row middle-lg middle-md middle-sm" style="gap: 10px">
  108.         <div>Remove bottom margin</div>
  109.         <div>{{ pimcore_checkbox("noBottomMargin") }}</div>
  110.       </div>
  111.       <div class="row middle-lg middle-md middle-sm" style="gap: 10px">
  112.         <div>Boxed layout?</div>
  113.         <div>
  114.           {{ pimcore_checkbox("boxedLayout") }}
  115.         </div>
  116.       </div>
  117.       <div class="row middle-lg middle-md middle-sm" style="gap: 10px">
  118.         <div>Span viewport width?</div>
  119.         <div>
  120.           {{ pimcore_checkbox("spanViewportWidth") }}
  121.         </div>
  122.       </div>
  123.       <div class="row middle-lg middle-md middle-sm middle-xs">
  124.           <div>Flex layout on CTA?</div>
  125.           <div>
  126.               {{ pimcore_checkbox("ctaFlex") }}
  127.           </div>
  128.       </div>
  129.     </div>
  130.     <div style="position: absolute; top: 10px; right: 0; font-weight: bold; text-transform: uppercase;">
  131.         Row
  132.     </div>
  133.   </div>
  134. </div>
  135. {% endif %} 
  137. {# SET VARIABLES #}
  138. {% set boxedLayout = pimcore_checkbox("boxedLayout").isChecked() %}
  139. {% set spanViewportWidth = pimcore_checkbox("spanViewportWidth").isChecked() ? ' row-full-span' : '' %}
  140. {% set defaultSmXsColWidth = ' col-sm-6 col-xs-12' %}
  141. {% set colVertAlignment = pimcore_select('colVertAlignment').getData()|raw == 'middle' ? ' middle-lg middle-md' : pimcore_select('colVertAlignment').getData()|raw == 'bottom' ? ' bottom-lg bottom-md' : '' %} 
  142. {% set colHorAlignment = pimcore_select('colHorAlignment').getData()|raw == 'start' ? '' : pimcore_select('colHorAlignment').getData()|raw == 'center' ? ' center-lg center-md center-sm center-xs' : pimcore_select('colHorAlignment').getData()|raw == 'end' ? ' end-lg end-md end-sm end-xs' : '' %}
  143. {% set numberOfColumns = pimcore_select("columns").getData()|raw * 1 %}
  144. {% set colGutters = pimcore_select("columnGutters").getData() %}
  145. {% set hideBottomMarginOnMobile = pimcore_checkbox("hideBottomMarginOnMobile").isChecked() ? ' no-bottom-margin-on-mobile' : '' %}
  146. {% set maxWidth = pimcore_numeric('maxWidth').getData()|raw ? ' style=max-width:' ~ pimcore_numeric('maxWidth').getData() ~ 'px;' : '' %}
  147. {% set columnFlexBasisAuto = pimcore_checkbox("columnFlexBasisAuto").isChecked() ? ' flex-basis-auto' : '' %}
  148. {% set noBottomMargin = pimcore_checkbox('noBottomMargin').isChecked() ? ' no-bottom-margin' : '' %}
  149. {% set ctaFlex = editmode and pimcore_checkbox("ctaFlex").isChecked() ? ' cta-display-flex cta-display-flex-backend' : pimcore_checkbox("ctaFlex").isChecked() ? ' cta-display-flex' : '' %}
  151. {% switch colGutters %}
  153.   {% case "small" %}
  154.   {% set colGutters = 'sm' %}
  156.   {% case "medium" %}
  157.   {% set colGutters = 'md' %}
  159.   {% case "large" %}
  160.   {% set colGutters = 'lg' %}
  162.   {% case "none" %}
  163.   {% set colGutters = 'none' %}
  165.   {% default %}
  166.   {% set colGutters = 'md' %}
  167.   
  168. {% endswitch %}
  170. {% if boxedLayout %}
  171. <div class="inner"{{maxWidth}}>
  172. {% endif %}
  174.   <div class="row{{ spanViewportWidth }} gutter-space--{{ colGutters }}{{ colVertAlignment }}{{ colHorAlignment }}">
  175.     {% if numberOfColumns == 2 %}
  176.     {% for i in 1..1 %}
  178.     {% set columnRatios = pimcore_select("columnRatios").getData() %}
  180.     {% switch columnRatios %}
  182.       {% case "half-half" %}
  183.       {% set columnRatiosLeft = ' col-lg-6 col-md-6' ~ defaultSmXsColWidth %}
  185.       {% case "two-fifth-three-fifth" %}
  186.       {% set columnRatiosLeft = ' col-lg-5 col-md-5' ~ defaultSmXsColWidth %}
  188.       {% case "one-third-two-third" %}
  189.       {% set columnRatiosLeft = ' col-lg-4 col-md-4' ~ defaultSmXsColWidth %}
  191.       {% case "one-quarter-three-quarter" %}
  192.       {% set columnRatiosLeft = ' col-lg-3 col-md-3' ~ defaultSmXsColWidth %}
  194.       {% case "three-fifth-two-fifth" %}
  195.       {% set columnRatiosLeft = ' col-lg-7 col-md-7' ~ defaultSmXsColWidth %}
  197.       {% case "two-third-one-third" %}
  198.       {% set columnRatiosLeft = ' col-lg-8 col-md-8' ~ defaultSmXsColWidth %}
  200.       {% case "three-quarter-one-quarter" %}
  201.       {% set columnRatiosLeft = ' col-lg-9 col-md-9' ~ defaultSmXsColWidth %}
  203.       {% default %}
  204.       {% set columnRatiosLeft = ' col-lg-6 col-md-6' ~ defaultSmXsColWidth %}
  206.     {% endswitch %}
  208.     <div data-aos="fade-up" class="col{{ ctaFlex }}{{ noBottomMargin }}{{ columnRatiosLeft }}{{ columnFlexBasisAuto }}{{ hideBottomMarginOnMobile }}">
  209.       {% if editmode %}
  210.       <div class="settings">
  211.         <div class="position-relative settings-button-border">
  212.           <strong class="settings-header">Settings</strong><button class="toggle-settings"><i class="fa fa-plus"></i></button>
  213.           <div class="settings_container">
  214.             <div class="row middle-lg middle-md middle-sm" style="gap: 10px">
  215.               <div>Cardify column?</div>
  216.               <div>
  217.                 {{
  218.                   pimcore_checkbox("cardifyColumn_" ~ i)
  219.                 }}
  220.               </div>
  221.             </div>
  222.             <div class="row middle-lg middle-md middle-sm middle-xs">
  223.                 <div>Card link</div>
  224.                 <div>
  225.                     {{ pimcore_link("cardLink_" ~ i) }}
  226.                 </div>
  227.             </div>
  228.           </div>
  229.           <div style="position: absolute; top: 10px; right: 0; font-weight: bold; text-transform: uppercase;">
  230.               Column
  231.           </div>
  232.         </div>
  233.       </div>
  234.       {% endif %}
  235.       {% set cardifyColumns = pimcore_checkbox("cardifyColumn_" ~ i).isChecked() %}
  236.       {% set cardLink = pimcore_link("cardLink_" ~ i).getHref() %}
  237.       {% if cardifyColumns %}
  238.       <div class="card">
  239.         {% if not editmode and cardLink %}
  240.         <a class="card-content-link" href="{{cardLink}}">
  241.         {% endif %}
  242.         <div class="card-content">
  243.           {% if not editmode and cardLink %}
  244.           <div class="absolute-top-right">
  245.             {{ source("@torq_static/img/icons/arrow-right.svg") }}
  246.           </div>
  247.           {% endif %}
  248.         {% endif %}
  249.         {{ pimcore_areablock('columnBlock_' ~ i, {
  250.           "allowed": ["header", "wysiwyg", "image", "button", "card-carousel", "spacer", "icon-writeup", "columns", "inquiry-form"]
  251.         }) }}
  252.         {% if cardifyColumns %}
  253.         </div>
  254.         {% if not editmode and cardLink %}
  255.         </a>
  256.         {% endif %}
  257.       </div>
  258.       {% endif %}
  259.     </div>
  260.     {% endfor %}
  261.     {% for i in 2..2 %}
  263.     {% set columnRatios = pimcore_select("columnRatios").getData() %}
  265.     {% switch columnRatios %}
  267.       {% case "half-half" %}
  268.       {% set columnRatiosRight = ' col-lg-6 col-md-6' ~ defaultSmXsColWidth %}
  270.       {% case "two-fifth-three-fifth" %}
  271.       {% set columnRatiosRight = ' col-lg-7 col-md-7' ~ defaultSmXsColWidth %}
  273.       {% case "one-third-two-third" %}
  274.       {% set columnRatiosRight = ' col-lg-8 col-md-8' ~ defaultSmXsColWidth %}
  276.       {% case "one-quarter-three-quarter" %}
  277.       {% set columnRatiosRight = ' col-lg-9 col-md-9' ~ defaultSmXsColWidth %}
  279.       {% case "three-fifth-two-fifth" %}
  280.       {% set columnRatiosRight = ' col-lg-5 col-md-5' ~ defaultSmXsColWidth %}
  282.       {% case "two-third-one-third" %}
  283.       {% set columnRatiosRight = ' col-lg-4 col-md-4' ~ defaultSmXsColWidth %}
  285.       {% case "three-quarter-one-quarter" %}
  286.       {% set columnRatiosRight = ' col-lg-3 col-md-3' ~ defaultSmXsColWidth %}
  288.       {% default %}
  289.       {% set columnRatiosRight = ' col-lg-6 col-md-6' ~ defaultSmXsColWidth %}
  291.     {% endswitch %}
  293.     <div data-aos="fade-up" class="col{{ ctaFlex }}{{ noBottomMargin }}{{ columnRatiosRight }}{{ columnFlexBasisAuto }}{{ hideBottomMarginOnMobile }}">
  294.       {% if editmode %}
  295.       <div class="settings">
  296.         <div class="position-relative settings-button-border">
  297.           <strong class="settings-header">Settings</strong><button class="toggle-settings"><i class="fa fa-plus"></i></button>
  298.           <div class="settings_container">
  299.             <div class="row middle-lg middle-md middle-sm" style="gap: 10px">
  300.               <div>Cardify column?</div>
  301.               <div>
  302.                 {{
  303.                   pimcore_checkbox("cardifyColumn_" ~ i)
  304.                 }}
  305.               </div>
  306.             </div>
  307.             <div class="row middle-lg middle-md middle-sm middle-xs">
  308.                 <div>Card link</div>
  309.                 <div>
  310.                     {{ pimcore_link("cardLink_" ~ i) }}
  311.                 </div>
  312.             </div>
  313.           </div>
  314.           <div style="position: absolute; top: 10px; right: 0; font-weight: bold; text-transform: uppercase;">
  315.               Column
  316.           </div>
  317.         </div>
  318.       </div>
  319.       {% endif %}
  320.       {% set cardifyColumns = pimcore_checkbox("cardifyColumn_" ~ i).isChecked() %}
  321.       {% set cardLink = pimcore_link("cardLink_" ~ i).getHref() %}
  322.       {% if cardifyColumns %}
  323.       <div class="card">
  324.         {% if not editmode and cardLink %}
  325.         <a class="card-content-link" href="{{cardLink}}">
  326.         {% endif %}
  327.         <div class="card-content">
  328.           {% if not editmode and cardLink %}
  329.           <div class="absolute-top-right">
  330.             {{ source("@torq_static/img/icons/arrow-right.svg") }}
  331.           </div>
  332.           {% endif %}
  333.         {% endif %}
  334.         {{ pimcore_areablock('columnBlock_' ~ i, {
  335.           "allowed": ["header", "wysiwyg", "image", "button", "card-carousel", "spacer", "icon-writeup", "columns", "inquiry-form"]
  336.         }) }}
  337.         {% if cardifyColumns %}
  338.         </div>
  339.         {% if not editmode and cardLink %}
  340.         </a>
  341.         {% endif %}
  342.       </div>
  343.       {% endif %}
  344.     </div>
  345.     {% endfor %}
  346.     {% else %}
  347.       {% set numOfCols = numberOfColumns %}
  348.       {% switch numOfCols %}
  350.         {% case "1" %}
  351.         {% set numOfCols = ' col-lg-12 col-md-12 col-sm-12 col-xs-12' %} 
  353.         {% case "2" %}
  354.         {% set numOfCols = ' col-lg-6 col-md-6' ~ defaultSmXsColWidth %}
  356.         {% case "3" %}
  357.         {% set numOfCols = ' col-lg-4 col-md-4' ~ defaultSmXsColWidth %}
  359.         {% case "4" %}
  360.         {% set numOfCols = ' col-lg-3 col-md-3' ~ defaultSmXsColWidth %}
  362.         {% case "5" %}
  363.         {% set numOfCols = ' col-lg-1_5 col-md-1_5' ~ defaultSmXsColWidth %}
  365.         {% case "6" %}
  366.         {% set numOfCols = ' col-lg-2 col-md-2' ~ defaultSmXsColWidth %}
  368.         {% default %}
  369.         {% set numOfCols = ' col-lg-12 col-md-12 col-sm-12 col-xs-12' %}
  371.       {% endswitch %}
  372.       {% for i in 1..numberOfColumns %}
  373.       <div
  374.         data-aos="fade-up"
  375.         class="col{{ ctaFlex }}{{
  376.           pimcore_checkbox('noBottomMargin').getData()
  377.             ? ' no-bottom-margin'
  378.             : ''
  379.         }}{{ numOfCols }}"
  380.       >
  381.         {% if editmode %}
  382.         <div class="settings">
  383.           <div class="position-relative settings-button-border">
  384.             <strong class="settings-header">Settings</strong><button class="toggle-settings"><i class="fa fa-plus"></i></button>
  385.             <div class="settings_container">
  386.               <div class="row middle-lg middle-md middle-sm" style="gap: 10px">
  387.                 <div>Cardify column?</div>
  388.                 <div>
  389.                   {{
  390.                     pimcore_checkbox("cardifyColumn_" ~ i)
  391.                   }}
  392.                 </div>
  393.               </div>
  394.               <div class="row middle-lg middle-md middle-sm middle-xs">
  395.                   <div>Card link</div>
  396.                   <div>
  397.                       {{ pimcore_link("cardLink_" ~ i) }}
  398.                   </div>
  399.               </div>
  400.             </div>
  401.             <div style="position: absolute; top: 10px; right: 0; font-weight: bold; text-transform: uppercase;">
  402.                 Column
  403.             </div>
  404.           </div>
  405.         </div>
  406.         {% endif %}
  407.         {% set cardifyColumns = pimcore_checkbox("cardifyColumn_" ~ i).isChecked() %}
  408.         {% set cardLink = pimcore_link("cardLink_" ~ i).getHref() %}
  409.         {% if cardifyColumns %}
  410.         <div class="card">
  411.           {% if not editmode and cardLink %}
  412.           <a class="card-content-link" href="{{cardLink}}">
  413.           {% endif %}
  414.           <div class="card-content">
  415.             {% if not editmode and cardLink %}
  416.             <div class="absolute-top-right">
  417.               {{ source("@torq_static/img/icons/arrow-right.svg") }}
  418.             </div>
  419.             {% endif %}
  420.           {% endif %}
  421.           {{ pimcore_areablock('columnBlock_' ~ i, {
  422.             "allowed": ["header", "wysiwyg", "image", "button", "card-carousel", "spacer", "icon-writeup", "staff-members", "columns", "inquiry-form"]
  423.           }) }}
  424.           {% if cardifyColumns %}
  425.           </div>
  426.           {% if not editmode and cardLink %}
  427.           </a>
  428.           {% endif %}
  429.         </div>
  430.         {% endif %}
  431.       </div>
  432.       {% endfor %}
  433.     {% endif %}
  434.   </div>
  436. {% if boxedLayout %}
  437. </div>
  438. {% endif %}