templates/areas/section/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 middle-xs">
  7.         <div>Background colour</div>
  8.         <div>
  9.           {{
  10.             pimcore_select("bgSelect", {
  11.               store: [
  12.                 ["default", "Choose a colour"],
  13.                 ["red", "Red"],
  14.                 ["dark", "Dark"]
  15.               ],
  16.               defaultValue: "default"
  17.             })
  18.           }}
  19.         </div>
  20.       </div>
  21.       <div class="row middle-lg middle-md middle-sm middle-xs">
  22.         <div>Text colour</div>
  23.         <div>
  24.           {{
  25.             pimcore_select("textColour", {
  26.               store: [
  27.                 ["default", "Choose a colour"],
  28.                 ["dark", "Dark"],
  29.                 ["light", "Light"]
  30.               ],
  31.               defaultValue: "default"
  32.             })
  33.           }}
  34.         </div>
  35.       </div>
  36.       <div class="row middle-lg middle-md middle-sm middle-xs">
  37.         <div>Center text?</div>
  38.         <div>
  39.           {{ pimcore_checkbox("isTextCentered") }}
  40.         </div>
  41.       </div>
  42.       <div class="row middle-lg middle-md middle-sm middle-xs">
  43.         <div>Padding</div>
  44.         <div>
  45.           {{
  46.             pimcore_select("sectionPadding", {
  47.               store: [
  48.                 ["default", "Top and Bottom"],
  49.                 ["top", "Top"],
  50.                 ["bottom", "Bottom"],
  51.                 ["none", "None"]
  52.               ],
  53.               defaultValue: "default"
  54.             })
  55.           }}
  56.         </div>
  57.       </div>
  58.       <div class="row middle-lg middle-md middle-sm" style="gap: 10px">
  59.         <div>Boxed layout?</div>
  60.         <div>
  61.           {{ pimcore_checkbox("boxedLayout") }}
  62.         </div>
  63.       </div>
  64.       <div class="row middle-lg middle-md middle-sm" style="gap: 10px">
  65.         <div>Section Anchor</div>
  66.         <div>
  67.           {{ pimcore_input("sectionId", {'width': 120}) }}
  68.         </div>
  69.       </div>
  70.     </div>
  71.     <div style="position: absolute; top: 10px; right: 0; font-weight: bold; text-transform: uppercase;">
  72.         Section
  73.     </div>
  74.   </div>
  75. </div>
  76. {% endif %} 
  77. {% set sectionId = pimcore_input("sectionId").getData() ? ' id=' ~ pimcore_input("sectionId").getData() : '' %}
  78. {% set sectionPadding = pimcore_select("sectionPadding").getData() == 'top' ? ' top-padding' : pimcore_select("sectionPadding").getData() == 'bottom' ? ' bottom-padding' : pimcore_select("sectionPadding").getData() == 'none' ? '' : ' top-bottom-padding' %}
  79. {% set bgSelect = pimcore_select('bgSelect').getData()|raw %}
  80. {% set textColour = pimcore_select('textColour').getData()|raw == 'light' ? ' light' : '' %}
  81. <section{{ sectionId }} class="section{% if not editmode %}{{ sectionPadding }}{% endif %}{% if editmode %} bg-color-switcher{% endif %}{{ bgSelect == 'dark' ? ' bg-color--dark' : bgSelect == 'red' ? ' bg-color--red' : '' }}{{ textColour }}">
  82.   {% if (pimcore_checkbox('isTextCentered').isChecked()) or (pimcore_checkbox('boxedLayout').isChecked()) %}
  83.   <div class="inner{% if pimcore_checkbox('isTextCentered').isChecked() %} text-align-center{% endif %}">
  84.   {% endif %}
  85.     {{
  86.       pimcore_areablock("sectionBrick", {
  87.         allowed: [
  88.           "icon-writeup",
  89.           "info-with-link",
  90.           "columns",
  91.           "columns-data-object",
  92.           "header", 
  93.           "button",
  94.           "spacer",
  95.           "card-carousel-folder",
  96.           "staff-members"
  97.         ]
  98.       })
  99.     }}
  100.   {% if pimcore_checkbox('isTextCentered').isChecked() %}
  101.   </div>
  102.   {% endif %}
  103. </section>