@gov-cy/govcy-frontend-renderer 1.21.0 → 1.22.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +4 -0
- package/package.json +1 -1
- package/src/njk/layouts/govcyBase.njk +101 -94
package/README.md
CHANGED
|
@@ -503,6 +503,8 @@ If your using the `pageData.layout`, you can render html in each of the followin
|
|
|
503
503
|
- **main**: the main content
|
|
504
504
|
- **footer**: the footer section
|
|
505
505
|
- **bodyEnd**: the end of the body
|
|
506
|
+
- **afterBody**: the section after the body. Usually reserved for overlay elements
|
|
507
|
+
- **afterJS**: the section after the JS. Usually reserved for JS scripts
|
|
506
508
|
|
|
507
509
|
Use the `govcyElement` macro inside the blocks to render the design elements defined in the `govcyElement.njk` template. More details in defining design elements see in the [design elements](DESIGN_ELEMENTS.md) section.
|
|
508
510
|
|
|
@@ -559,6 +561,8 @@ If your using the `pageData.layout`, you can render html in each of the followin
|
|
|
559
561
|
- **main**: the main content
|
|
560
562
|
- **footer**: the footer section
|
|
561
563
|
- **bodyEnd**: the end of the body
|
|
564
|
+
- **afterBody**: the section after the body. Usually reserved for overlay elements
|
|
565
|
+
- **afterJS**: the section after the JS. Usually reserved for JS scripts
|
|
562
566
|
|
|
563
567
|
Define your design elements for each `sections` under the `elements` array. These elements use the same `govcyElement` macro to render the design elements. Do that by defining the `element` and `params` objects. For example:
|
|
564
568
|
|
package/package.json
CHANGED
|
@@ -162,115 +162,122 @@ To use this template you need to pass the following data:
|
|
|
162
162
|
{% endif %}
|
|
163
163
|
</head>
|
|
164
164
|
<body>
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
<
|
|
168
|
-
|
|
169
|
-
|
|
165
|
+
<div id="govcy--body">
|
|
166
|
+
<!--bodyStart-->
|
|
167
|
+
<section class="govcy-container-fluid" id="bodyStartContainer">
|
|
168
|
+
<a href="#mainContainer" class="govcy-skip-link">{%- if site.lang=='el' -%}Μεταφορά στο κεντρικό περιεχόμενο{%- else -%}Skip to main content{%- endif -%}</a>
|
|
169
|
+
{% block bodyStart %}{% endblock %}
|
|
170
|
+
</section>
|
|
170
171
|
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
172
|
+
<!--Header-->
|
|
173
|
+
<header class="govcy-header govcy-d-print-none" id="headerContainer">
|
|
174
|
+
{% block userName %}{% endblock %}
|
|
175
|
+
{% block header %}
|
|
176
|
+
<div class="govcy-header-main-area">
|
|
177
|
+
<div class="govcy-container govcy-main-area-items">
|
|
178
|
+
<div class="govcy-navigation-container">
|
|
179
|
+
<div class="govcy-service-container">
|
|
180
|
+
<a href="https://gov.cy" class="govcy-logo" title="Go to the gov.cy homepage"><img alt="gov.cy Logo"></a>
|
|
181
|
+
<span class="govcy-service-name">{{ govcyLocalizeContent(site.headerTitle, site.lang) }}</span>
|
|
182
|
+
</div>
|
|
183
|
+
{%- if site.languages -%}
|
|
184
|
+
<ul class="govcy-menu-items">
|
|
185
|
+
{%- for iLang in site.languages %}
|
|
186
|
+
<li class="govcy-desktop-menu-only"><span><a href="{{ iLang.href }}"
|
|
187
|
+
class="govcy-menu-item{% if iLang.code == site.lang %} active{% endif %}"
|
|
188
|
+
{% if iLang.code == site.lang %} aria-current="true"{% endif %}
|
|
189
|
+
aria-label="{{ iLang.alt }}" lang="{{ iLang.code }}">{{ iLang.label }}</a></span>
|
|
190
|
+
</li>{%- endfor %}
|
|
191
|
+
<li class="govcy-mobile-menu govcy-mobile-menu-only govcy-dropdown govcy-ms-auto"><span><a href="#" class="govcy-menu-item govcy-expand-btn">{{ govcyLocalizeContent(pageData.menu, site.lang) }}</a></span></li>
|
|
192
|
+
</ul>
|
|
193
|
+
{%- endif %}
|
|
181
194
|
</div>
|
|
182
|
-
{%- if site.languages -%}
|
|
183
|
-
<ul class="govcy-menu-items">
|
|
184
|
-
{%- for iLang in site.languages %}
|
|
185
|
-
<li class="govcy-desktop-menu-only"><span><a href="{{ iLang.href }}"
|
|
186
|
-
class="govcy-menu-item{% if iLang.code == site.lang %} active{% endif %}"
|
|
187
|
-
{% if iLang.code == site.lang %} aria-current="true"{% endif %}
|
|
188
|
-
aria-label="{{ iLang.alt }}" lang="{{ iLang.code }}">{{ iLang.label }}</a></span>
|
|
189
|
-
</li>{%- endfor %}
|
|
190
|
-
<li class="govcy-mobile-menu govcy-mobile-menu-only govcy-dropdown govcy-ms-auto"><span><a href="#" class="govcy-menu-item govcy-expand-btn">{{ govcyLocalizeContent(pageData.menu, site.lang) }}</a></span></li>
|
|
191
|
-
</ul>
|
|
192
|
-
{%- endif %}
|
|
193
195
|
</div>
|
|
194
196
|
</div>
|
|
195
|
-
</div>
|
|
196
197
|
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
|
|
198
|
+
{%- if site.languages -%}
|
|
199
|
+
<div class="govcy-header-menu-area">
|
|
200
|
+
<nav class="govcy-mainmenu" aria-label="{{ govcyLocalizeContent(pageData.menu, site.lang) }}">
|
|
201
|
+
<div class="govcy-container">
|
|
202
|
+
<ul class="govcy-menu-items govcy-header-language-area govcy-mobile-menu-only">
|
|
203
|
+
{%- for iLang in site.languages %}
|
|
204
|
+
<li><a href="{{ iLang.href }}" class="govcy-menu-item{% if iLang.code == site.lang %} active{% endif %}" {% if iLang.code == site.lang %} aria-current="true"{% endif %} aria-label="{{ iLang.alt }}" lang="{{ iLang.code }}">{{ iLang.label }}</a></li>
|
|
205
|
+
{%- endfor %}
|
|
206
|
+
</ul>
|
|
207
|
+
</div>
|
|
208
|
+
</nav>
|
|
209
|
+
</div>
|
|
210
|
+
{%- endif %}
|
|
211
|
+
{% endblock %}
|
|
212
|
+
</header>
|
|
213
|
+
|
|
214
|
+
<!--beforeMain-->
|
|
215
|
+
<section class="govcy-container" id="beforeMainContainer">
|
|
216
|
+
{% block beforeMain %}{% endblock %}
|
|
217
|
+
{% if site.isTesting %}
|
|
218
|
+
<div class="govcy-phase-banner">
|
|
219
|
+
<span class="govcy-tag">TESTING</span>
|
|
220
|
+
<span class="govcy-ml-2">{{ govcyLocalizeContent({"en": "This is not a real service. It is only used for testing purposes. Any submissions made through this service will be ignored", "el": "Αυτή δεν είναι πραγματική υπηρεσία. Χρησιμοποιείται μόνο για σκοπούς δοκιμών. Οποιεσδήποτε υποβολές γίνουν μέσω της υπηρεσίας αυτής θα αγνοηθούν."}, site.lang) }}</span>
|
|
206
221
|
</div>
|
|
207
|
-
|
|
208
|
-
</
|
|
209
|
-
{%- endif %}
|
|
210
|
-
{% endblock %}
|
|
211
|
-
</header>
|
|
222
|
+
{% endif %}
|
|
223
|
+
</section>
|
|
212
224
|
|
|
213
|
-
|
|
214
|
-
|
|
215
|
-
|
|
216
|
-
|
|
217
|
-
|
|
218
|
-
|
|
219
|
-
<span class="govcy-ml-2">{{ govcyLocalizeContent({"en": "This is not a real service. It is only used for testing purposes. Any submissions made through this service will be ignored", "el": "Αυτή δεν είναι πραγματική υπηρεσία. Χρησιμοποιείται μόνο για σκοπούς δοκιμών. Οποιεσδήποτε υποβολές γίνουν μέσω της υπηρεσίας αυτής θα αγνοηθούν."}, site.lang) }}</span>
|
|
225
|
+
<!--main-->
|
|
226
|
+
<main class="govcy-container" id="mainContainer">
|
|
227
|
+
<div class="govcy-row">
|
|
228
|
+
<article class="govcy-col-{% if pageData.mainLayout=='max-width' %}12{% else %}8{% endif %}">
|
|
229
|
+
{% block main %}{% endblock %}
|
|
230
|
+
</article>
|
|
220
231
|
</div>
|
|
221
|
-
|
|
222
|
-
</section>
|
|
223
|
-
|
|
224
|
-
<!--main-->
|
|
225
|
-
<main class="govcy-container" id="mainContainer">
|
|
226
|
-
<div class="govcy-row">
|
|
227
|
-
<article class="govcy-col-{% if pageData.mainLayout=='max-width' %}12{% else %}8{% endif %}">
|
|
228
|
-
{% block main %}{% endblock %}
|
|
229
|
-
</article>
|
|
230
|
-
</div>
|
|
231
|
-
</main>
|
|
232
|
+
</main>
|
|
232
233
|
|
|
233
|
-
|
|
234
|
-
|
|
235
|
-
|
|
236
|
-
|
|
237
|
-
|
|
238
|
-
|
|
239
|
-
|
|
240
|
-
|
|
241
|
-
|
|
242
|
-
|
|
243
|
-
|
|
244
|
-
|
|
245
|
-
{%- endif %}
|
|
246
|
-
<div class="govcy-d-flex govcy-align-items-center govcy-flex-wrap">
|
|
247
|
-
<span class="govcy-fs-2 govcy-fw-bold govcy-mr-6">gov.cy</span>
|
|
248
|
-
<span class="govcy-mr-6 govcy-mt-2">© {{ govcyLocalizeContent(site.copyrightText, site.lang) }}</span>
|
|
249
|
-
{%- if site.footerIcons %}
|
|
250
|
-
{% for footerIcon in site.footerIcons %}
|
|
251
|
-
{#- src, alt and href are mandatory -#}
|
|
252
|
-
{%- if footerIcon.src and footerIcon.alt and footerIcon.href -%}
|
|
253
|
-
<a href="{{ govcyLocalizeContent(footerIcon.href, site.lang, true) }}"{% if footerIcon.target %} target="{{ footerIcon.target }}"{% endif %}{% if footerIcon.title %} title="{{ govcyLocalizeContent(footerIcon.title, site.lang) }}"{% endif %}>
|
|
254
|
-
<img class="govcy-eu-logo govcy-mb-2{% if footerIcon.classes %} {{ footerIcon.classes }}{% endif %}" src="{{ govcyLocalizeContent(footerIcon.src, site.lang, true) }}" alt="{{ govcyLocalizeContent(footerIcon.alt, site.lang, true) }}"{% if footerIcon.style %} style="{{ govcyLocalizeContent(footerIcon.style, site.lang, true) }}"{% endif %}>
|
|
255
|
-
</a>
|
|
256
|
-
{%- endif %}
|
|
257
|
-
{% endfor %}
|
|
234
|
+
<!-- Footer -->
|
|
235
|
+
<footer class="govcy-footer govcy-d-print-none" id="footerContainer">
|
|
236
|
+
{% block footer %}
|
|
237
|
+
<div class="govcy-container">
|
|
238
|
+
<div class="govcy-d-flex govcy-justify-content-between govcy-align-items-end govcy-flex-wrap">
|
|
239
|
+
<div class="govcy-my-4">
|
|
240
|
+
{%- if site.footerLinks %}
|
|
241
|
+
<ul>
|
|
242
|
+
{%- for iLink in site.footerLinks %}
|
|
243
|
+
<li><a href="{{ iLink.href }}">{{ govcyLocalizeContent(iLink.label, site.lang) }}</a></li>
|
|
244
|
+
{%- endfor %}
|
|
245
|
+
</ul>
|
|
258
246
|
{%- endif %}
|
|
247
|
+
<div class="govcy-d-flex govcy-align-items-center govcy-flex-wrap">
|
|
248
|
+
<span class="govcy-fs-2 govcy-fw-bold govcy-mr-6">gov.cy</span>
|
|
249
|
+
<span class="govcy-mr-6 govcy-mt-2">© {{ govcyLocalizeContent(site.copyrightText, site.lang) }}</span>
|
|
250
|
+
{%- if site.footerIcons %}
|
|
251
|
+
{% for footerIcon in site.footerIcons %}
|
|
252
|
+
{#- src, alt and href are mandatory -#}
|
|
253
|
+
{%- if footerIcon.src and footerIcon.alt and footerIcon.href -%}
|
|
254
|
+
<a href="{{ govcyLocalizeContent(footerIcon.href, site.lang, true) }}"{% if footerIcon.target %} target="{{ footerIcon.target }}"{% endif %}{% if footerIcon.title %} title="{{ govcyLocalizeContent(footerIcon.title, site.lang) }}"{% endif %}>
|
|
255
|
+
<img class="govcy-eu-logo govcy-mb-2{% if footerIcon.classes %} {{ footerIcon.classes }}{% endif %}" src="{{ govcyLocalizeContent(footerIcon.src, site.lang, true) }}" alt="{{ govcyLocalizeContent(footerIcon.alt, site.lang, true) }}"{% if footerIcon.style %} style="{{ govcyLocalizeContent(footerIcon.style, site.lang, true) }}"{% endif %}>
|
|
256
|
+
</a>
|
|
257
|
+
{%- endif %}
|
|
258
|
+
{% endfor %}
|
|
259
|
+
{%- endif %}
|
|
260
|
+
</div>
|
|
261
|
+
</div>
|
|
262
|
+
<div class="govcy-my-4">
|
|
263
|
+
<a href="https://gov.cy" class="govcy-footer-logo" title="Go to the gov.cy homepage"><img alt="gov.cy Logo"/></a>
|
|
259
264
|
</div>
|
|
260
|
-
</div>
|
|
261
|
-
<div class="govcy-my-4">
|
|
262
|
-
<a href="https://gov.cy" class="govcy-footer-logo" title="Go to the gov.cy homepage"><img alt="gov.cy Logo"/></a>
|
|
263
265
|
</div>
|
|
264
266
|
</div>
|
|
265
|
-
|
|
266
|
-
|
|
267
|
-
</footer>
|
|
267
|
+
{% endblock %}
|
|
268
|
+
</footer>
|
|
268
269
|
|
|
269
|
-
|
|
270
|
-
|
|
271
|
-
|
|
272
|
-
|
|
270
|
+
<!--bodyEnd-->
|
|
271
|
+
<section class="govcy-container-fluid" id="bodyEndContainer">
|
|
272
|
+
{% block bodyEnd %}{% endblock %}
|
|
273
|
+
</section>
|
|
274
|
+
</div>
|
|
275
|
+
<div id="govcy--afterBody">
|
|
276
|
+
{% block afterBody %}{% endblock %}
|
|
277
|
+
</div>
|
|
278
|
+
<!-- JS -->
|
|
273
279
|
{%- if site.lang == 'en' -%}<script src="{{ site.cdn.dist }}/js/locales/govcy.datepicker.en.min.js"></script>{%- elseif site.lang == 'el' -%}<script src="{{ site.cdn.dist }}/js/locales/govcy.datepicker.el.min.js"></script>{%- endif -%}
|
|
274
280
|
<script src="{{ site.cdn.dist }}/js/govcy.uds.min.js"{% if site.cdn.jsIntegrity %} integrity="{{ site.cdn.jsIntegrity }}" crossorigin="anonymous"{% endif %}></script>
|
|
281
|
+
{% block afterJS %}{% endblock %}
|
|
275
282
|
</body>
|
|
276
283
|
</html>
|