templates/home/index.html.twig line 1

Open in your IDE?
  1. {% extends 'base.html.twig' %}
  2. {% block title %}
  3. {{ sett('home_meta_title') }}
  4. {% endblock %}
  5. {% block meta_description %}
  6. {{ sett('home_meta_description') }}
  7. {% endblock %}
  8. {% block meta_keywords %}
  9. {{ sett('home_meta_keywords')}}
  10. {% endblock %}
  12. {% block body_class %}home
  13. {% endblock %}
  15. {% block before_content %}
  16. {% set slider = load_nodes('slider',{where:{public:true}}).list %}
  17. {% if slider|length %}
  18. <section class="hero-section">
  19. <div id="hero-slider">
  20. <div class="simple-slider">
  21. {% for slide in slider %}
  22. {% if slide.vars.photo %}
  23. <div class="slide slide-content">
  24. <div class="slide-title" aria-label="Tytuł slajdu {{ loop.index }}" role="heading" aria-level="2">
  25. <span>{{ slide.vars.title | raw }}</span>
  26. </div>
  27. <img src="{{ asset(slide.vars.photo.path) }}" alt="Slajd {{ loop.index }}" class="slide-img">
  28. </div>
  29. {% endif %}
  30. {% endfor %}
  32. {% if slider|length > 1 %}
  33. <div class="slider-nav">
  34. <button class="slider-prev" aria-label="Poprzedni slajd"></button>
  35. <button class="slider-next" aria-label="Następny slajd"></button>
  36. </div>
  37. {% endif %}
  38. </div>
  39. </div>
  40. </section>
  42. <div class="container">
  43. <div class="container">
  44. <div class="slider-boxes">
  45. <a href="{{ sett('box1_url')}}">
  46. <div class="box ">
  47. <svg aria-label="Ikona cenników">
  48. <use xlink:href="#prices-icon"></use>
  49. </svg>
  50. <span>{{ sett('box1_title')}}</span>
  51. </div>
  52. </a>
  53. <a href="{{ sett('box2_url')}}">
  54. <div class="box">
  55. <svg aria-label="Ikona inwestycji">
  56. <use xlink:href="#investments-icon"></use>
  57. </svg>
  58. <span>{{ sett('box2_title')}}</span>
  59. </div>
  60. </a>
  61. <a href="{{ sett('box3_url')}}">
  62. <div class="box">
  63. <svg aria-label="Ikona awarii">
  64. <use xlink:href="#failures-icon"></use>
  65. </svg>
  66. <span>{{ sett('box3_title')}}</span>
  67. </div>
  68. </a>
  69. </div>
  70. </div>
  71. </div>
  72. {% endif %}
  73. {% endblock %}
  75. {% block content %}
  76. <div id="content-start" class="homepage">
  77. <div class="container">
  78. <section class="news-section">
  79. <div class="section-header">
  80. <h1>
  81. <svg aria-label="Ikona aktualności">
  82. <use xlink:href="#news-icon"></use>
  83. </svg>
  84. <span>Aktualności</span>
  85. </h1>
  86. </div>
  89. <div class="news-list">
  90. {% set news_list = load_nodes('news', {
  91. max: 3,
  92. orderBy: { publishDate: 'desc' },
  93. where: { public : true }
  94. }).list %}
  96. {% for news in news_list %}
  97. <div class="news-item">
  98. <div class="news-item-date">
  99. <span>{{ news.vars.publishDate|date('d.m.Y') }}</span>
  100. </div>
  101. <div class="news-item-title">
  102. <h2>{{ news.vars.title }}</h2>
  103. </div>
  104. <div class="news-item-content">
  105. {{ news.vars.lead }}
  106. </div>
  107. <a href="{{ news.vars.url }}" class="button-primary news-item-link" role="button">więcej...</a>
  108. </div>
  109. {% endfor %}
  110. </div>
  111. </section>
  113. <section class="failures-content">
  114. <div class="section-header">
  115. <h1>
  116. <svg aria-label="Ikona awarii">
  117. <use xlink:href="#failures-icon"></use>
  118. </svg>
  119. <span>Awarie i prace planowane</span>
  120. </h1>
  121. </div>
  123. <div class="failures-list">
  124. <div class="filures-header">
  125. <span>Data</span>
  126. <span>Incydent</span>
  127. <span>typ incydentu</span>
  128. <span>
  129. <div class="button-primary failure-filter">
  130. <div class="button-text">
  131. <div v-if="failuresFilter == 'all'">Typ incydentu</div>
  132. <div v-if="failuresFilter == 'turn_off'">Prace planowane</div>
  133. <div v-if="failuresFilter == 'failure'">Awarie</div>
  135. <svg aria-label="Ikona menu">
  136. <use xlink:href="#chevron-down-icon"></use>
  137. </svg>
  138. </div>
  139. <ul>
  140. <li class="active" @click="failuresFilter = 'all'">Wszystkie</li>
  141. <li @click="failuresFilter = 'turn_off'">Prace planowane</li>
  142. <li @click="failuresFilter = 'failure'">Awarie</li>
  143. </ul>
  144. </div>
  145. </span>
  146. </div>
  148. <div class="failures-items" v-if="failuresFilter == 'all'">
  149. {% set items = load_nodes('failures' ,{where:{public:true}, orderBy : {updateDate:'desc'}}).list|slice(0, 2) %}
  150. {% for item in items %}
  151. <div class="failure-item">
  152. <div class="failure-item-date">
  153. <svg aria-label="Ikona daty">
  154. <use xlink:href="#calendar-icon"></use>
  155. </svg>
  156. <span>{{ item.vars.publishDate|date('d.m.Y') }}</span>
  157. </div>
  158. <div class="failure-item-address">
  159. <span class="city">{{ item.vars.city|join(', ') }}</span><br>
  160. <span class="addresses">{{ item.vars.addresses | nl2br }}</span>
  161. </div>
  162. <div class="failure-item-type">
  163. {{ item.vars.registration_type | trans }}
  164. </div>
  165. <div class="failure-item-link">
  166. <a href="{{ item.vars.url }}" role="button">
  167. <svg aria-label="Ikona czytaj więcej">
  168. <use xlink:href="#arrow-right-icon"></use>
  169. </svg>
  170. </a>
  171. </div>
  172. </div>
  173. {% endfor %}
  174. </div>
  176. <div class="failures-items" v-if="failuresFilter == 'turn_off'">
  177. {% set items = load_nodes('failures' ,{where:{public:true, registration_type:'turn_off'}, orderBy : {updateDate:'desc'}}).list|slice(0, 2) %}
  178. {% for item in items %}
  179. <div class="failure-item">
  180. <div class="failure-item-date">
  181. <svg aria-label="Ikona daty">
  182. <use xlink:href="#calendar-icon"></use>
  183. </svg>
  184. <span>{{ item.vars.publishDate|date('d.m.Y') }}</span>
  185. </div>
  186. <div class="failure-item-address">
  187. <span class="city">{{ item.vars.city|join(', ') }}</span><br>
  188. <span class="addresses">{{ item.vars.addresses | nl2br }}</span>
  189. </div>
  190. <div class="failure-item-type">
  191. {{ item.vars.registration_type | trans }}
  192. </div>
  193. <div class="failure-item-link">
  194. <a href="{{ item.vars.url }}" role="button">
  195. <svg aria-label="Ikona czytaj więcej">
  196. <use xlink:href="#arrow-right-icon"></use>
  197. </svg>
  198. </a>
  199. </div>
  200. </div>
  201. {% endfor %}
  202. </div>
  203. <div class="failures-items" v-if="failuresFilter == 'failure'">
  204. {% set items = load_nodes('failures' ,{where:{public:true, registration_type:'failure'}, orderBy : {updateDate:'desc'}}).list|slice(0, 2) %}
  205. {% for item in items %}
  206. <div class="failure-item">
  207. <div class="failure-item-date">
  208. <svg aria-label="Ikona daty">
  209. <use xlink:href="#calendar-icon"></use>
  210. </svg>
  211. <span>{{ item.vars.publishDate|date('d.m.Y') }}</span>
  212. </div>
  213. <div class="failure-item-address">
  214. <span class="city">{{ item.vars.city|join(', ') }}</span><br>
  215. <span class="addresses">{{ item.vars.addresses | nl2br }}</span>
  216. </div>
  217. <div class="failure-item-type">
  218. {{ item.vars.registration_type | trans }}
  219. </div>
  220. <div class="failure-item-link">
  221. <a href="{{ item.vars.url }}" class="failure-item-link" role="button">
  222. <svg aria-label="Ikona czytaj więcej">
  223. <use xlink:href="#arrow-right-icon"></use>
  224. </svg>
  225. </a>
  226. </div>
  227. </div>
  228. {% endfor %}
  229. </div>
  231. <div class="text-center">
  232. <a href="/awarie-i-wylaczenia" class="button-primary" role="button">Zobacz wszystkie</a>
  233. </div>
  234. </div>
  235. </div>
  237. </section>
  240. {% endblock %}