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

Open in your IDE?
  1. {% if editmode %}
  3.     <div class="bg-gray-100 p-5">
  4.         {% include 'areaHeadAndFooter.html.twig' with { 'header': 'STWH: Sprungmarke' } %}
  6.         <div class="my-3 flex flex-wrap overflow-hidden">
  7.             <div class="w-1/4 overflow-hidden">
  8.                 Verwendung als:
  9.             </div>
  10.             <div class="w-3/4 overflow-hidden">
  11.                 {{ pimcore_select("verwendung", {
  12.                     "store": [
  13.                         ["ankerbuttons", "Buttonbereich für die Sprungmarken"],
  14.                         ["ankerheadline", "Sprungmarke mit grauer Überschrift"]
  15.                     ],
  16.                     "defaultValue" : "ankerheadline",
  17.                     "width" : 400,
  18.                     "reload" : true
  19.                 }) }}
  20.             </div>
  22.         </div>
  24.         <div class="my-3 flex flex-wrap overflow-hidden">
  25.             <div class="w-2/4 overflow-hidden">
  26.                 {% include 'color-selector.html.twig' with { 'name': 'color', 'description': 'Hintergrundfarbe' } %}
  27.             </div>
  28.         </div>
  30.         {% if pimcore_select('verwendung').getData() == 'ankerheadline' %}
  31.             <div class="my-3 flex flex-wrap overflow-hidden">
  32.                 <div class="w-1/4 overflow-hidden">
  33.                     Ankername:
  34.                 </div>
  35.                 <div class="w-1/4 pr-3 overflow-hidden">
  36.                     {{ pimcore_input("anchor", { "height" : 50 }) }}
  37.                 </div>
  39.                 <div class="w-1/4 pl-3 overflow-hidden">
  40.                     Anker-Headline (auch als Label für die Buttons):
  41.                 </div>
  42.                 <div class="w-1/4 pr-3 overflow-hidden">
  43.                     {{ pimcore_input("anchorHeadline", { "height" : 50 }) }}
  44.                 </div>
  45.             </div>
  46.         {% else %}
  47.             <div class="w-2/4 overflow-hidden">
  48.                     {% include 'color-selector.html.twig' with { 'name': 'sprungButtonColor', 'description': 'Farbe der Anker-Buttons', 'type': 'button' } %}
  49.                 </div>
  50.             <div class="my-3 flex flex-wrap overflow-hidden">
  51.                 <p class="font-bold">Die Buttons werden in der LIVE-Ansicht automatisch generiert</p>
  52.             </div>
  53.         {% endif %}
  55.     </div>
  57.     {% include 'areaHeadAndFooter.html.twig' with { 'footer': true } %}
  59. {% else %}
  61.     </article>
  62.     <article>
  64.     {% if pimcore_select('verwendung').getData() == 'ankerbuttons' %}
  65.         <section class="py-10 relative bg-{{ pimcore_select('color') }}">
  66.             <div class="container mx-auto px-5">
  67.                 <div class="flex flex-wrap">
  68.                     <div class="ankerButtonWrapper w-full text-center items-center" x-data="{ anchorButtons: getAnchorButtons() }">
  69.                         <template x-for="anchorButton in anchorButtons">
  70.                             <a
  71.                             x-bind:href="'#' + anchorButton.id"
  72.                             class=" flex items-center my-2 mx-1 sm:m-1 sm:inline-block border rounded-lg
  73.                                 text-{{ pimcore_select('sprungButtonColor').getData() }}
  74.                                 border-{{ pimcore_select('sprungButtonColor').getData() }}
  75.                                 hover:bg-{{ pimcore_select('sprungButtonColor').getData() }}
  76.                                 hover:text-white py-4 px-5">
  77.                                 <i class="pr-1 fa fa-chevron-down"></i>
  78.                                 <span x-text="anchorButton.label"></span>
  79.                             </a>
  81.                         </template>
  82.                     </div>
  83.                 </div>
  84.             </div>
  85.         </section>
  86.     {% endif %}
  89.     {% if pimcore_select('verwendung').getData() == 'ankerheadline' %}
  90.         {% if not pimcore_input("anchor").isEmpty() %}
  91.             <span id="{{ pimcore_input('anchor') }}" class="pt-10 anchorHeadline text-white">{{ pimcore_input('anchorHeadline') }}</span>
  92.         {% endif %}
  93.     {% endif %}
  96. {% endif %}