templates/includes/modals.html.twig line 1

Open in your IDE?
  1. {% if editmode %}
  3.     <!-- Font Awesome lokalisiert WBR 06.10.2022 -->
  4.     <link rel="stylesheet" href="{{ asset('/static/fonts/fontawesome-pro-6.3.0-web/css/all.min.css') }}"/>
  5.     <link rel="stylesheet" href="{{ asset('/dist/style.css') }}"/>
  6.     <link rel="stylesheet" href="{{ asset('/static/css/editmode.css') }}"/>
  7.     <script type="text/javascript" src="{{ asset('/dist/index.js') }}" defer></script>
  9.     <div class="flex flex-wrap overflow-hidden">
  10.             <div class="p-5 overflow-hidden w-1/2">
  11.                 <p>Modals für den Headerbereich</p>
  12.                 {{ pimcore_relations("headermodals", {
  13.                     "types": ["document"],
  14.                     "subtypes": {
  15.                         "document": ["page","link"]
  16.                     }
  17.                 }) }}
  18.             </div>
  19.         </div>
  20.     </div>
  22. {% else %}
  24.     {% if not pimcore_relations("headermodals").isEmpty() %}
  25.         <div x-data="{}" x-cloak>
  26.         {% for element in pimcore_relations("headermodals") %}
  28.             {% if element.getType() == 'page' and element.getTitle() != "Suche"%}
  29.                 <!-- Modal-Fenster {{ element.getTitle() }} -->
  30.                 <div
  31.                 x-show="$store.mainMenu.showModal==='{{ element.getTitle() }}'"
  32.                 class="fixed z-10 inset-0 overflow-y-auto"
  33.                 aria-labelledby="{{ element.getTitle() }}"
  34.                 role="dialog"
  35.                 aria-modal="true">
  36.                     <div class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
  37.                         <div @click="$store.mainMenu.showModal = null" class="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" aria-hidden="false"></div>
  38.                         <span class="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">&#8203;</span>
  39.                         <div x-show="$store.mainMenu.showModal==='{{ element.getTitle() }}'"
  40.                             class="absolute w-full flex flex-wrap top-[3.5rem] lg:top-[10rem] overflow-hidden mb-8 sm:align-middle"
  41.                             x-transition:enter="ease-out duration-300"
  42.                             x-transition:enter-start="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
  43.                             x-transition:enter-end="opacity-100 translate-y-0 sm:scale-100"
  44.                             x-transition:leave="ease-in duration-200"
  45.                             x-transition:leave-start="opacity-100 translate-y-0 sm:scale-100"
  46.                             x-transition:leave-end="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95">
  47.                             <div class="w-full mx-auto bg-white lg:pt-10">
  48.                                 <div class="text-left">
  49.                                     {{ render(element) }}
  50.                                 </div>
  51.                             </div>
  52.                             <div class="w-full mx-auto bg-gray-50 py-3 px-5 sm:flex sm:flex-row-reverse">
  53.                                 {#
  54.                                 Mögliche Werte:
  55.                                 'backColor' ... white, black, red-600, blue-600
  56.                                 'action' ... modal oder ganz weglassen
  57.                                 #}
  58.                                 {% include 'widgets/button.html.twig' with { name: 'schließen', backColor: 'black', action: 'modal' } %}
  59.                             </div>
  60.                         </div>
  61.                     </div>
  62.                 </div>
  63.             {% elseif element.getType() == 'page' and element.getTitle() == "Suche"%}
  64.                 <div
  65.                     x-show="$store.mainMenu.showModal==='{{ element.getTitle() }}'"
  66.                     class="fixed z-10 inset-0 vue-wrapper overflow-y-auto"
  67.                     aria-labelledby="{{ element.getTitle() }}"
  68.                     role="dialog"
  69.                     aria-modal="true">
  70.                     <div class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
  71.                         <div @click="$store.mainMenu.showModal = null" class="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" aria-hidden="false"></div>
  72.                         <span class="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">&#8203;</span>
  73.                         <div x-show="$store.mainMenu.showModal==='{{ element.getTitle() }}'"
  74.                              class="absolute w-full flex flex-wrap top-[2.5rem] lg:top-[10rem] overflow-hidden mb-8 sm:align-middle"
  75.                              x-transition:enter="ease-out duration-300"
  76.                              x-transition:enter-start="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
  77.                              x-transition:enter-end="opacity-100 translate-y-0 sm:scale-100"
  78.                              x-transition:leave="ease-in duration-200"
  79.                              x-transition:leave-start="opacity-100 translate-y-0 sm:scale-100"
  80.                              x-transition:leave-end="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95">
  81.                             <div class="w-full mx-auto vue-wrapper bg-white lg:pt-6">
  82.                                 <search :host="'{{ meilisearch_host }}'" :token="'{{ meilisearch_public_key }}'"></search>
  83.                             </div>
  84.                         </div>
  85.                     </div>
  86.                 </div>
  88. {#                    <div#}
  89. {#                        x-show="$store.mainMenu.showModal==='{{ element.getTitle() }}'"#}
  90. {#                        class="fixed z-10 inset-0 overflow-y-auto "#}
  91. {#                        aria-labelledby="{{ element.getTitle() }}"#}
  92. {#                        role="dialog"#}
  93. {#                        x-transition:enter="ease-out duration-300"#}
  94. {#                        x-transition:enter-start="opacity-0 "#}
  95. {#                        x-transition:enter-end="opacity-100 "#}
  96. {#                        x-transition:leave="ease-in duration-200"#}
  97. {#                        x-transition:leave-start="opacity-100 "#}
  98. {#                        x-transition:leave-end="opacity-0 "#}
  99. {#                        aria-modal="true">#}
  100. {#                        <div  aria-hidden="false"  class="flex relative items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">#}
  101. {#                            <span class="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">&#8203;</span>#}
  102. {#                            <div#}
  103. {#                                class="absolute h-full w-full z-20 inset-0 bg-gray-500 bg-opacity-75 transition-opacity duration-300" ></div>#}
  105. {#                                <div class="absolute vue-wrapper w-full z-20 inset-0 overflow-y-auto p-4 sm:p-6 md:p-20 " >#}
  106. {#                                        <Search :host="'{{ meilisearch_host }}'" :token="'{{ meilisearch_public_key }}'"></Search>#}
  107. {#                                </div>#}
  109. {#                        </div>#}
  110. {#                    </div>#}
  112.             {% endif %}
  114.         {% endfor %}
  115.         </div>
  116.     {% endif %}
  117. {% endif %}