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

Open in your IDE?
  1. {% if editmode %}
  3.     <div class="bg-gray-100 p-5 wysiwyg-heading">
  4.         {% include 'areaHeadAndFooter.html.twig' with { 'header': 'Accordeon' } %}
  6.         {% include 'padding.html.twig' %}
  8.         <div class="my-3 flex flex-wrap overflow-hidden">
  9.             <div class="w-1/2 overflow-hidden">
  10.                 {% include 'color-selector.html.twig' with { 'name': 'bgcolor', 'description': 'Hintergrundfarbe der Area' } %}
  11.             </div>
  12.         </div>
  14.         <div class="my-3 flex flex-wrap overflow-hidden">
  15.             <div class="w-1/2 overflow-hidden">
  16.                 {% include 'color-selector.html.twig' with { 'name': 'balkenfarbe', 'description': 'Hintergrundfarbe der Akkordeon-Elemente', 'type': 'accordeon' } %}
  17.             </div>
  18.         </div>
  20.         <div class="my-3 flex flex-wrap overflow-hidden">
  21.             <div class="w-1/4 overflow-hidden">
  22.                 Überschrift: (optional)
  23.             </div>
  24.             <div class="w-3/4 overflow-hidden">
  25.                 {{ pimcore_textarea("headline", { "height" : 60 }) }}
  26.             </div>
  27.         </div>
  29.         <div class="my-3 flex flex-wrap overflow-hidden">
  30.             <div class="w-1/4 overflow-hidden">
  31.                 SEO:
  32.             </div>
  33.             <div class="w-1/4 overflow-hidden">
  34.                 {% include 'seo.html.twig' with { 'name': 'seo', 'default' : 'h2' } %}
  35.             </div>
  36.             <div class="w-1/2 overflow-hidden">
  37.                 {% include 'color-selector.html.twig' with { 'name': 'seoHeadlineColor', 'description': 'Farbe der Überschrift', 'type': 'accordeon' } %}
  38.             </div>
  39.         </div>
  41.         <div class="my-3 flex flex-wrap overflow-hidden">
  42.             <div class="w-1/4 overflow-hidden">
  43.                 Soll die Content-Überschrift unterstrichen werden?
  44.             </div>
  45.             <div class="w-1/4 overflow-hidden">
  46.                 {{ pimcore_checkbox("hasDivider") }} JA
  47.             </div>
  48.             <div class="w-1/2 overflow-hidden">
  49.                 {% include 'color-selector.html.twig' with { 'name': 'headline-divider-color', 'description': 'Farbe vom Unterstrich', 'default': 'stwh-rot-2024' } %}
  50.             </div>
  51.         </div>
  53.         {% set block = pimcore_block('gridblock', {'manual' : true, 'default' : 2}).start() %}
  54.             {% for b in block.iterator %}
  55.                 {% do block.blockConstruct() %}
  56.                     {% do block.blockStart() %}
  57.                         {% set azz = '' %}
  58.                         {% if pimcore_select("bullets").getData() != '' %}
  59.                             {% set azz = pimcore_select("bullets").getData() %}
  60.                             {% set azzColor = pimcore_select("bulletColor").getData() %}
  61.                             {% if azzColor is empty %}
  62.                                 {% set azzColor = 'stwh-rot-2024' %}
  63.                             {% endif %}                        {% endif %}
  65.                         <div class="border border-gray-400 p-3">
  66.                             <p class="text-gray-400">Element: {{ (b+1) }}</p>
  68.                             <div class="my-3 flex flex-wrap overflow-hidden">
  69.                                 <div class="w-1/2 overflow-hidden pr-2">
  70.                                     Element-Überschrift:
  71.                                     {{ pimcore_input("headline_box", {
  72.                                         'height' : 50
  73.                                     }) }}
  74.                                 </div>
  75.                                 <div class="w-1/2 overflow-hidden pl-2 {{ azz }} list-{{ azzColor }}">
  76.                                     Teaser in der Box:
  77.                                     {{ pimcore_wysiwyg("teaser_box", {
  78.                                         "nl2br": true,
  79.                                         "height": 200
  80.                                     }) }}
  81.                                 </div>
  82.                             </div>
  84.                             <div class="my-3 flex flex-wrap overflow-hidden">
  85.                                 <div class="w-2/4 overflow-hidden">
  86.                                     {% include 'bullet-points.html.twig' with { 'name': 'bullets', 'description': 'Aufzählungszeichen' } %}
  87.                                 </div>
  89.                                 <div class="w-2/4 overflow-hidden">
  90.                                     {% include 'color-selector.html.twig' with { 'name': 'bulletColor', 'description': 'Farbe der Bullets', 'default': 'stwh-rot-2024' } %}
  91.                                 </div>
  93.                             </div>
  94.                         </div>
  95.                     {% do block.blockEnd() %}
  96.                 {% do block.blockDestruct() %}
  97.             {% endfor %}
  98.         {% do block.end() %}
  99.     </div>
  101.     {% include 'areaHeadAndFooter.html.twig' with { 'footer': true } %}
  103. {% else %}
  105.     <section class="wysiwyg-heading {{ pimcore_select('paddingTop') }} {{ pimcore_select('paddingBottom') }} relative bg-{{ pimcore_select('bgcolor') }}">
  106.         <div class="container mx-auto px-5">
  108.             {% set bordy = '' %}
  109.             {% set borderColor = pimcore_select('headline-divider-color').getData() %}
  110.             {% if pimcore_checkbox('hasDivider').isChecked() %}
  111.                 {% set bordy = 'border-b-2 pb-2 border-' ~ borderColor %}
  112.             {% endif %}
  114.             {% if pimcore_textarea("headline") != '' %}
  115.                 {% set seo = pimcore_select("seo").getData() %}
  116.                 <{{ seo }} class="text-{{ pimcore_select("seoHeadlineColor").getData() }} block font-bold mb-5 md:mb-10 text-2xl md:text-4xl lg:text-5xl {{ bordy }}">
  117.                     {{ pimcore_textarea("headline")|nl2br }}
  118.                 </{{ seo }}>
  119.             {% endif %}
  120.             <div class="w-full lg:w-1/2 mb-5 lg:mx-auto">
  121.                 <div x-data="{selected:null}" class="flex flex-col">
  122.                     {% set balkenfarbe = pimcore_select("balkenfarbe") %}
  124.                     {% set block = pimcore_block('gridblock', {'manual' : true}).start() %}
  125.                         {% for b in block.iterator %}
  126.                             {% do block.blockConstruct() %}
  127.                                 {% do block.blockStart() %}
  128.                                     {% set azz = '' %}
  129.                                     {% if pimcore_select("bullets").getData() != '' %}
  130.                                         {% set azz = pimcore_select("bullets").getData() %}
  131.                                         {% set azzColor = pimcore_select("bulletColor").getData() %}
  132.                                         {% if azzColor is empty %}
  133.                                             {% set azzColor = 'stwh-rot-2024' %}
  134.                                         {% endif %}
  135.                                     {% endif %}
  136.                                     <div
  137.                                         @click="selected !== {{ b }} ? selected = {{ b }} : selected = null"
  138.                                         class="cursor-pointer flex items-center justify-between border-{{ balkenfarbe }} border-t p-2">
  139.                                         <p class="text-{{ balkenfarbe }}">{{ pimcore_input("headline_box") }}</p>
  140.                                         <span :class="selected == {{ b }} ? 'fa-minus' : 'fa-plus'" class="text-{{ balkenfarbe }} fa"></span>
  141.                                     </div>
  142.                                     <div
  143.                                         class="relative {{ azz }} list-{{ azzColor }} overflow-hidden transition-all max-h-0 duration-700"
  144.                                         style=""
  145.                                         x-ref="container{{ b }}"
  146.                                         x-bind:style="selected == {{ b }} ? 'max-height: ' + $refs.container{{ b }}.scrollHeight + 'px' : ''">
  147.                                         <div class="px-2 py-4">
  148.                                             {{ pimcore_wysiwyg("teaser_box", { "nl2br": true }) }}
  149.                                         </div>
  151.                                     </div>
  152.                                 {% do block.blockEnd() %}
  153.                             {% do block.blockDestruct() %}
  154.                         {% endfor %}
  155.                     {% do block.end() %}
  156.                     <div class="flex items-center justify-between border-{{ balkenfarbe }} border-t p-2"></div>
  157.                 </div>
  158.             </div>
  159.         </div>
  160.     </section>
  162. {% endif %}