templates/module/Startseite/__startseite.html.twig line 1

Open in your IDE?
  1. {% if editmode %}
  3.     {{ include('includes/backend-kopf.html.twig') }}
  5.     {% set tabContentArray = {1: 'Startseite'} %}
  6.     {% set tab = 1 %}
  8.     <div id="content">        
  9.             {% if tabContentArray is defined and tab in tabContentArray|keys %}
  10.                 {{ admin_tabs(tab, tabContentArray) | raw }}
  11.             {% endif %} 
  12.             <section class="tabContent">
  13.                 <p class="hl">Keine Konfiguration:</p>
  14.             </section>
  15.     </div>
  16.     {{ include('includes/backend-fuss.html.twig') }}
  18. {% else %}
  21.     <section class="front-page layout-columns-3 intro-container main-container">
  22.         <a href="https://shop.glanzer.at" class="container white-bg">
  23.             <div class="top">
  24.                 <img class="glanzer-logo" style="width: 30%" src="{{ intro['glanzerLogo'] }}" alt="">
  25.             </div>
  27.             <div class="middle">
  28.                 <div style="background-image: url({{ intro['glanzerMain'] }});" class="img-container">
  29.                 </div>
  30.             </div>
  32.             <div class="bottom">
  33.                 <img class="glanzer-logo-mini" style="width: 40px" src="{{ intro['glanzerMobileLogo'] }}" alt="">
  34.                    <h2 class="big-text red">{{ intro['title_shopping'] | raw }}</h1>
  35.                 <h3 class="text red">{{ intro['subhl_shopping'] | raw }} &rarr;</h2>
  36.             </div>
  37.         </a>
  39.         <a href="{{ intro['url_rent'] }}" class="container blue-bg">
  40.             <div class="top">
  41.                 <img class="intersport-logo" style="width: 60%" src="{{ intro['intersportlogo'] }}" alt="">
  42.             </div>
  44.             <div class="middle">
  45.                 <div style="background-image: url({{ intro['intersportMain'] }}); background-position: left; transform: scaleX(-1); " class="img-container">
  46.                 </div>
  47.             </div>
  49.             <div class="bottom">
  50.                 <img class="intersport-logo-mini "  style="width: 40px" src="{{ intro['intersportMobilelogo'] }}" alt="">
  51.                 <h2 class="big-text white">{{ intro['title_rent'] | raw }}</h1>
  52.                 <h3 class="text white">{{ intro['subhl_rent'] | raw }} &rarr;</h2>
  53.             </div>
  54.         </a>
  56.         <a href="{{ intro['url_homes'] }}" class="container black-bg">
  57.             <div class="top">
  58.                 <img class="glanz-and-glory-logo" style="width: 30%" src="{{ intro['glanzGlory'] }}" alt="">
  59.             </div>
  61.             <div class="middle">
  62.                 <div style="background-image: url({{ intro['gloryGlanzMain'] }});" class="img-container">
  64.                 </div>
  65.             </div>
  67.             <div class="bottom">
  68.                 <img class="intersport-logo-mini "  style="width: 40px" src="{{ intro['gloryGlanzMobileLogo'] }}" alt="">
  69.                   <h2 class="big-text gold">{{ intro['title_homes'] | raw }}</h1>
  70.                 <h3 class="text gold">{{ intro['subhl_homes'] | raw }} &rarr;</h2>
  71.             </div>
  72.         </a>
  73.         </div>
  75. {#        <article class="front-page-item rent">#}
  76. {#            <div class="front-page-item-cropper">#}
  77. {#                <a class="no-underline" href="{{ intro['url_rent'] }}">#}
  78. {#                    <figure class="bg">#}
  79. {#                        <picture>#}
  80. {#                            <source srcset="{{ intro['img_rent_thumb_small'] }}"#}
  81. {#                                    media="(max-width: 480px)">#}
  82. {#                            <source srcset="{{ intro['img_rent_thumb_medium']}}"#}
  83. {#                                    media="(min-width: 481px) and (max-width: 1023px)">#}
  84. {#                            <source srcset="{{ intro['img_rent_thumb_large']}}"#}
  85. {#                                    media="(min-width: 1024px)">#}
  86. {#                            <img width="459" height="855" src="{{ intro['img_rent_thumb_small'] }}" alt="{{ intro['url_rent'] }}" />#}
  87. {#                        </picture>#}
  88. {#                    </figure>#}
  90. {#                    <div class="copy">#}
  91. {#                        <h2 class="headline font-bold">{{ intro['title_rent'] | raw }}</h2>#}
  92. {#                        {% if intro['subhl_rent'] %}#}
  93. {#                            <h3 class="topic font-thin">{{ intro['subhl_rent'] | raw }}</h3>#}
  94. {#                        {% endif %}#}
  96. {#                        <div class="btn-wrp arrow-button">#}
  97. {#                            <button aria-label="{{ 'More'|trans }}"></button>#}
  98. {#                        </div>#}
  99. {#                    </div>#}
  100. {#                </a>#}
  101. {#            </div>#}
  102. {#        </article>#}
  103. {#        <article class="front-page-item homes">#}
  104. {#            <div class="front-page-item-cropper">#}
  105. {#                <a class="no-underline" href="{{ intro['url_homes'] }}">#}
  106. {#                    <figure class="bg">#}
  107. {#                        <picture>#}
  108. {#                            <source srcset="{{ intro['img_homes_thumb_small'] }}"#}
  109. {#                                    media="(max-width: 480px)">#}
  110. {#                            <source srcset="{{ intro['img_homes_thumb_medium'] }}"#}
  111. {#                                    media="(min-width: 481px) and (max-width: 1023px)">#}
  112. {#                            <source srcset="{{ intro['img_homes_thumb_large'] }}"#}
  113. {#                                    media="(min-width: 1024px)">#}
  114. {#                            <img width="459" height="855" src="{{ intro['img_homes_thumb_small'] }}" alt="{{ intro['url_rent'] }}" />#}
  115. {#                        </picture>#}
  116. {#                    </figure>#}
  118. {#                    <div class="copy">#}
  119. {#                        <h2 class="headline font-bold">{{ intro['title_homes'] | raw }}</h2>#}
  121. {#                        {% if intro['subhl_homes'] %}#}
  122. {#                            <h3 class="topic font-thin">{{ intro['subhl_homes'] | raw }}</h3>#}
  123. {#                        {% endif %}#}
  124. {#                        <div class="btn-wrp arrow-button">#}
  125. {#                            <button aria-label="{{ 'More'|trans }}"></button>#}
  126. {#                        </div>#}
  127. {#                    </div>#}
  128. {#                </a>#}
  129. {#            </div>#}
  130. {#        </article>#}
  132. {#        <article class="front-page-item shops">#}
  133. {#            <div class="front-page-item-cropper">#}
  134. {#                <a class="no-underline" href="{{ intro['url_shops'] }}">#}
  135. {#                    <figure class="bg">#}
  136. {#                        <picture>#}
  137. {#                            <source srcset="{{ intro['img_shopping_thumb_small'] }}"#}
  138. {#                                    media="(max-width: 480px)">#}
  139. {#                            <source srcset="{{ intro['img_shopping_thumb_medium'] }}"#}
  140. {#                                    media="(min-width: 481px) and (max-width: 1023px)">#}
  141. {#                            <source srcset="{{ intro['img_shopping_thumb_large'] }}"#}
  142. {#                                    media="(min-width: 1024px)">#}
  143. {#                            <img width="459" height="855" src="{{ intro['img_shopping_thumb_small'] }}" alt="{{ intro['url_rent'] }}" />#}
  144. {#                        </picture>#}
  145. {#                    </figure>#}
  148. {#                    <div class="copy">#}
  149. {#                        <h2 class="headline font-bold">{{ intro['title_shopping'] | raw }}</h2>#}
  151. {#                        {% if intro['subhl_shopping'] %}#}
  152. {#                            <h3 class="topic font-thin">{{ intro['subhl_shopping'] | raw }}</h3>#}
  153. {#                        {% endif %}#}
  155. {#                        <div class="btn-wrp arrow-button">#}
  156. {#                            <button aria-label="{{ 'More'|trans }}"></button>#}
  157. {#                        </div>#}
  158. {#                    </div>#}
  159. {#                </a>#}
  160. {#            </div>#}
  161. {#        </article>#}
  163.     </section>
  164. <style>
  165.     .sidebar-offset.gradient-page{
  166.         margin-left: 0;
  167.         width: 100%;
  168.     }
  169.     .side-bar{
  170.         {# display: none;#}
  171.         width: 0;
  172.     }
  173.     @media only screen and (min-width: 480px) {
  174.         .side-bar header {
  175.             display: none !important;
  176.         }
  177.     }
  178.     {# main .menue-wrapper{
  179.         display: none !important;
  180.     } #}
  181.     main .main-wrapper-js{
  182.         padding-top: 56px !important;
  183.     }
  184.     .frontpage main .main-wrapper-js{
  185.         padding-top: 56px !important;
  186.     }
  187. </style>
  188. <script>
  189.     let viewportWidth = 0;
  190.     const updateViewportHeight = () => {
  191.         if(viewportWidth !== window.innerWidth) {
  192.             viewportWidth = window.innerWidth;
  193.             document.documentElement.style.setProperty('--viewport-height', `${document.documentElement.clientHeight}px`);
  194.         }
  195.     };
  197.     window.addEventListener('resize', updateViewportHeight);
  199.     updateViewportHeight();
  201.     if (document.querySelector('[data-device="tablet"]')){
  203.         [].forEach.call( document.querySelectorAll('.front-page-item'), function (el){
  204.             console.log(el);
  205.             el.classList.add('hover');
  206.         }  )
  207.     }
  208. </script>
  210. {% endif %}