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').list|slice(0, 3) %}
  92. {% for news in news_list | sort %}
  93. <div class="news-item">
  94. <div class="news-item-date">
  95. <span>{{ news.vars.publishDate|date('d.m.Y') }}</span>
  96. </div>
  97. <div class="news-item-title">
  98. <h2>{{ news.vars.title }}</h2>
  99. </div>
  100. <div class="news-item-content">
  101. {{ news.vars.lead }}
  102. </div>
  103. <a href="{{ news.vars.url }}" class="button-primary news-item-link" role="button">więcej...</a>
  104. </div>
  105. {% endfor %}
  106. </div>
  107. </section>
  109. <section class="failures-content">
  110. <div class="section-header">
  111. <h1>
  112. <svg aria-label="Ikona awarii">
  113. <use xlink:href="#failures-icon"></use>
  114. </svg>
  115. <span>Awarie i prace planowane</span>
  116. </h1>
  117. </div>
  119. <div class="failures-list">
  120. <div class="filures-header">
  121. <span>Data</span>
  122. <span>Adres incydentu</span>
  123. <span>ostatnia aktualizacja</span>
  124. <span>typ incydentu</span>
  125. <span>
  126. <div class="button-primary failure-filter">
  127. <div class="button-text">
  128. <div v-if="failuresFilter == 'all'">Typ incydentu</div>
  129. <div v-if="failuresFilter == 'turn_off'">Prace planowane</div>
  130. <div v-if="failuresFilter == 'failure'">Awarie</div>
  132. <svg aria-label="Ikona menu">
  133. <use xlink:href="#chevron-down-icon"></use>
  134. </svg>
  135. </div>
  136. <ul>
  137. <li class="active" @click="failuresFilter = 'all'">Wszystkie</li>
  138. <li @click="failuresFilter = 'turn_off'">Prace planowane</li>
  139. <li @click="failuresFilter = 'failure'">Awarie</li>
  140. </ul>
  141. </div>
  142. </span>
  143. </div>
  145. <div class="failures-items" v-if="failuresFilter == 'all'">
  146. {% set items = load_nodes('failures' ,{where:{public:true}, orderBy : {updateDate:'desc'}}).list|slice(0, 2) %}
  147. {% for item in items %}
  148. <div class="failure-item">
  149. <div class="failure-item-date">
  150. <svg aria-label="Ikona daty">
  151. <use xlink:href="#calendar-icon"></use>
  152. </svg>
  153. <span>{{ item.vars.publishDate|date('d.m.Y') }}</span>
  154. </div>
  155. <div class="failure-item-address">
  156. <span class="city">{{ item.vars.city }}</span><br>
  157. <span class="addresses">{{ item.vars.addresses | nl2br }}</span>
  158. </div>
  159. <div class="failure-item-update">
  160. <svg aria-label="Ikona daty">
  161. <use xlink:href="#calendar-icon"></use>
  162. </svg>
  163. {{ item.vars.updateDate|date('d.m.Y H:m') }}
  164. </div>
  165. <div class="failure-item-type">
  166. {{ item.vars.registration_type | trans }}
  167. </div>
  168. <div class="failure-item-link">
  169. <a href="{{ item.vars.url }}" role="button">
  170. <svg aria-label="Ikona czytaj więcej">
  171. <use xlink:href="#arrow-right-icon"></use>
  172. </svg>
  173. </a>
  174. </div>
  175. </div>
  176. {% endfor %}
  177. </div>
  179. <div class="failures-items" v-if="failuresFilter == 'turn_off'">
  180. {% set items = load_nodes('failures' ,{where:{public:true, registration_type:'turn_off'}, orderBy : {updateDate:'desc'}}).list|slice(0, 2) %}
  181. {% for item in items %}
  182. <div class="failure-item">
  183. <div class="failure-item-date">
  184. <svg aria-label="Ikona daty">
  185. <use xlink:href="#calendar-icon"></use>
  186. </svg>
  187. <span>{{ item.vars.publishDate|date('d.m.Y') }}</span>
  188. </div>
  189. <div class="failure-item-address">
  190. <span class="city">{{ item.vars.city }}</span><br>
  191. <span class="addresses">{{ item.vars.addresses | nl2br }}</span>
  192. </div>
  193. <div class="failure-item-update">
  194. <svg aria-label="Ikona daty">
  195. <use xlink:href="#calendar-icon"></use>
  196. </svg>
  197. {{ item.vars.updateDate|date('d.m.Y H:m') }}
  198. </div>
  199. <div class="failure-item-type">
  200. {{ item.vars.registration_type | trans }}
  201. </div>
  202. <div class="failure-item-link">
  203. <a href="{{ item.vars.url }}" role="button">
  204. <svg aria-label="Ikona czytaj więcej">
  205. <use xlink:href="#arrow-right-icon"></use>
  206. </svg>
  207. </a>
  208. </div>
  209. </div>
  210. {% endfor %}
  211. </div>
  212. <div class="failures-items" v-if="failuresFilter == 'failure'">
  213. {% set items = load_nodes('failures' ,{where:{public:true, registration_type:'failure'}, orderBy : {updateDate:'desc'}}).list|slice(0, 2) %}
  214. {% for item in items %}
  215. <div class="failure-item">
  216. <div class="failure-item-date">
  217. <svg aria-label="Ikona daty">
  218. <use xlink:href="#calendar-icon"></use>
  219. </svg>
  220. <span>{{ item.vars.publishDate|date('d.m.Y') }}</span>
  221. </div>
  222. <div class="failure-item-address">
  223. <span class="city">{{ item.vars.city }}</span><br>
  224. <span class="addresses">{{ item.vars.addresses | nl2br }}</span>
  225. </div>
  226. <div class="failure-item-update">
  227. <svg aria-label="Ikona daty">
  228. <use xlink:href="#calendar-icon"></use>
  229. </svg>
  230. {{ item.vars.updateDate|date('d.m.Y H:m') }}
  231. </div>
  232. <div class="failure-item-type">
  233. {{ item.vars.registration_type | trans }}
  234. </div>
  235. <div class="failure-item-link">
  236. <a href="{{ item.vars.url }}" class="failure-item-link" role="button">
  237. <svg aria-label="Ikona czytaj więcej">
  238. <use xlink:href="#arrow-right-icon"></use>
  239. </svg>
  240. </a>
  241. </div>
  242. </div>
  243. {% endfor %}
  244. </div>
  246. <div class="text-center">
  247. <a href="/awarie-i-wylaczenia" class="button-primary" role="button">Zobacz wszystkie</a>
  248. </div>
  249. </div>
  250. </div>
  252. </section>
  255. {% endblock %}