templates/facility/partials/facilities-overview.html.twig line 1

Open in your IDE?
  1. <section class="{{ className|default('container content-block') }}">
  2.     <div class="row g-3">
  3.         <div class="col-md-6">
  4.             <div class="live-item live-item--box-shadow h-100">
  5.                 {% if editmode or not pimcore_input('overviewTopTitle').empty %}
  6.                     <div class="live-item__toptitle">
  7.                         {{ pimcore_input('overviewTopTitle', { 'placeholder': 'Top Title' }) }}
  8.                     </div>
  9.                 {% endif %}
  10.                 {% if editmode or not pimcore_input('overviewTitle').empty %}
  11.                     <div class="live-item__title mb-md-3">
  12.                         {{ pimcore_input('overviewTitle', { 'placeholder': 'Title' }) }}
  13.                     </div>
  14.                 {% endif %}
  15.                 <div class="d-flex align-items-center w-100 justify-content-md-between">
  16.                     <div class="d-md-flex flex-column align-items-center d-none">
  17.                         <img width="24" src="{{ elements_cache_buster(elements_staticFolder() ~ '/img/flags/ch.svg') }}"
  18.                              alt="{{ ('icon.flag-ch')|trans }}"
  19.                         >
  20.                         <span class="font-default-bold text-primary mt-2 text-nowrap">
  21.                             {{ 'general.zermatt'|trans }}
  22.                         </span>
  23.                     </div>
  24.                     <div class="live-item__directions w-100">
  25.                         <div class="position-relative">
  26.                             <div class="live-item__direction live-item__direction--right {{ connectionByFootIsOpen ? '' : 'is-closed' }}"></div>
  27.                             <span class="live-item__direction__text">
  28.                                 <button type="button" class="btn-popover {{ connectionByFootIsOpen ? 'bg-success' : 'bg-danger' }} ms-1 live-item__direction__button">
  29.                                     <span
  30.                                         class="icon {{ connectionByFootIsOpen ? 'icon-checkmark' : 'icon-close' }} " aria-label="{{ connectionByFootIsOpen ? 'open' : 'closed' }}" title="{{ connectionByFootIsOpen ? 'open' : 'closed' }}">
  31.                                     </span>
  32.                                 </button>
  33.                                 {{ 'facility.overview.by-foot'|trans }}
  34.                             </span>
  35.                             <div class="live-item__direction live-item__direction--left {{ connectionByFootIsOpen ? '' : 'is-closed' }}"></div>
  36.                         </div>
  37.                         <div class="d-flex d-md-none justify-content-between my-3">
  38.                             <div class="d-flex align-items-center">
  39.                                 <img width="24" src="{{ elements_cache_buster(elements_staticFolder() ~ '/img/flags/ch.svg') }}"
  40.                                      alt="{{ ('icon.flag-ch')|trans }}"
  41.                                 >
  42.                                 <span class="font-default-bold text-primary text-nowrap ms-2">
  43.                                     {{ 'general.zermatt'|trans }}
  44.                                 </span>
  45.                             </div>
  46.                             <div class="d-flex align-items-center">
  47.                                 <span class="font-default-bold text-primary text-nowrap me-2">
  48.                                     {{ 'general.cervinia'|trans }}
  49.                                 </span>
  50.                                 <img width="24" src="{{ elements_cache_buster(elements_staticFolder() ~ '/img/flags/it.svg') }}"
  51.                                      alt="{{ ('icon.flag-it')|trans }}"
  52.                                 >
  53.                             </div>
  54.                         </div>
  55.                         <div class="position-relative mt-md-32">
  56.                             <div class="live-item__direction live-item__direction--right {{ connectionBySkiIsOpen ? '' : 'is-closed' }}"></div>
  57.                             <span class="live-item__direction__text">
  58.                                 <button type="button" class="btn-popover {{ connectionBySkiIsOpen ? 'bg-success' : 'bg-danger' }} ms-1 live-item__direction__button">
  59.                                     <span
  60.                                         class="icon {{ connectionBySkiIsOpen ? 'icon-checkmark' : 'icon-close' }} " aria-label="{{ connectionBySkiIsOpen ? 'open' : 'closed' }}" title="{{ connectionBySkiIsOpen ? 'open' : 'closed' }}">
  61.                                     </span>
  62.                                 </button>
  63.                                 {{ 'facility.overview.by-ski'|trans }}
  64.                             </span>
  65.                             <div class="live-item__direction live-item__direction--left {{ connectionBySkiIsOpen ? '' : 'is-closed' }}"></div>
  66.                         </div>
  67.                     </div>
  69.                     <div class="d-md-flex flex-column align-items-center d-none">
  70.                         <img width="24" src="{{ elements_cache_buster(elements_staticFolder() ~ '/img/flags/it.svg') }}"
  71.                              alt="{{ ('icon.flag-it')|trans }}"
  72.                         >
  73.                         <span class="font-default-bold text-primary mt-2 text-nowrap">
  74.                             {{ 'general.cervinia'|trans }}
  75.                         </span>
  76.                     </div>
  77.                 </div>
  78.                 <div class="mt-3">
  79.                     <div>
  80.                         <span class="font-default-bold text-primary">Letzte Bahn Zermatt:</span>
  81.                         <span class="mx-2">16:50 Uhr</span>
  82.                         <button type="button" class="btn-no-styling btn-tooltip pt-2"
  83.                                 data-bs-toggle="popover"
  84.                                 data-bs-content="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
  85.                                 data-bs-title="Infooo">
  86.                             <span class="icon icon-info btn-tooltip__icon" aria-label="Information"></span>
  87.                         </button>
  88.                     </div>
  89.                     <div class="mt-2">
  90.                         <span class="font-default-bold text-primary">Letzte Bahn Cervinia:</span>
  91.                         <span class="mx-2">16:50 Uhr</span>
  92.                         <button type="button" class="btn-no-styling btn-tooltip pt-2"
  93.                                 data-bs-toggle="popover"
  94.                                 data-bs-content="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
  95.                                 data-bs-title="Infooo">
  96.                             <span class="icon icon-info btn-tooltip__icon" aria-label="Information"></span>
  97.                         </button>
  98.                     </div>
  99.                 </div>
  100.             </div>
  101.         </div>
  102.         <div class="col-6 col-md-3">
  103.             <div class="live-item live-item--box-shadow h-100">
  104.                 <div>
  105.                     {% if facilitiesCount.openLifts > 0 %}
  106.                         <span class="me-2 ms-1 live-item__status"></span>
  107.                         {{ 'facility.status.open'|trans }}
  108.                     {% else %}
  109.                         <span class="me-2 ms-1 live-item__status is-closed"></span>
  110.                         {{ 'facility.status.closed'|trans }}
  111.                     {% endif %}
  112.                 </div>
  113.                 <div class="live-item__title">{{ 'facility.overview.lifts'|trans }}</div>
  114.                 <div class="d-flex flex-column flex-md-row align-items-center justify-content-center justify-content-md-start">
  115.                     <span class="icon live-item__lift-icon icon-lift"></span>
  116.                     <div class="text-primary mt-2 mt-md-0">
  117.                         <span class="live-item__status-text js-number-count-animation {{ facilitiesCount.openLifts|length == 3 ? 'number-count-animation-digits-3' : facilitiesCount.openLifts|length == 2 ? 'number-count-animation-digits-2' : 'number-count-animation-digits-1'}}"
  118.                               data-number-count-animation-target="{{ facilitiesCount.openLifts }}">0</span>
  119.                         <span class="mx-1">{{ 'facility.overview.of'|trans }}</span>
  120.                         <span class="live-item__status-text">{{ facilitiesCount.totalLifts }}</span>
  121.                     </div>
  122.                 </div>
  123.             </div>
  124.         </div>
  125.         <div class="col-6 col-md-3">
  126.             <div class="live-item live-item--box-shadow h-100">
  127.                 <div>
  128.                     {% if facilitiesCount.openSlopes > 0 %}
  129.                         <span class="me-2 ms-1 live-item__status"></span>
  130.                         {{ 'facility.status.open'|trans }}
  131.                     {% else %}
  132.                         <span class="me-2 ms-1 live-item__status is-closed"></span>
  133.                         {{ 'facility.status.closed'|trans }}
  134.                     {% endif %}
  135.                 </div>
  136.                 <div class="live-item__title">{{ 'facility.overview.slopes'|trans }}</div>
  137.                 <div class="d-flex flex-column flex-md-row align-items-center justify-content-center justify-content-md-start">
  138.                     <span class="icon live-item__lift-icon icon-slope"></span>
  139.                     <div class="text-primary mt-2 mt-md-0">
  140.                         <span class="live-item__status-text js-number-count-animation {{ facilitiesCount.openSlopes|length == 3 ? 'number-count-animation-digits-3' : facilitiesCount.openSlopes|length == 2 ? 'number-count-animation-digits-2' : 'number-count-animation-digits-1'}}"
  141.                               data-number-count-animation-target="{{ facilitiesCount.openSlopes }}">0</span>
  142.                         <span class="">{{ 'general.km'|trans }}</span>
  143.                     </div>
  144.                 </div>
  145.             </div>
  146.         </div>
  147.     </div>
  148.     {% if editmode %}
  149.         {{ pimcore_link('overview-link', { 'class': 'arrow-link mt-32' }) }}
  150.     {% elseif not pimcore_link('overview-link').empty %}
  151.         <a class="arrow-link mt-32" href="{{ pimcore_link('overview-link').href }}" target="{{ pimcore_link('overview-link').target }}">
  152.             <span>{{ pimcore_link('overview-link').text }}</span>
  153.             <span class="arrow-link__icon icon icon-arrow-right"></span>
  154.         </a>
  155.     {% endif %}
  156. </section>