Inštitút digitálnych a rozvojových politík
- Všetky informácie o príprave, revízii a realizácii Európskych štrukturálnych fondov (EŠIF) v podmienkach SR na jendom mieste.
+ Všetky informácie o príprave, revízii a realizácii Európskych štrukturálnych fondov (EŠIF) v podmienkach SR na jendom mieste.
Zistiť viac o IDRP
@@ -596,37 +606,37 @@
title: "Eurofondy",
leftItems: [
{
- name:"O eurofondoch",
- href:"#"
+ name:"O eurofondoch",
+ href:"#"
},
{
- name:"Link small Regular 13/20",
+ name:"Link small Regular 13/20",
href:"#"
},
{
- name:"Link small Regular 14/20",
+ name:"Link small Regular 14/20",
href:"#"
},
{
- name:"Link small Regular 15/20",
+ name:"Link small Regular 15/20",
href:"#"
}
],
rightItems: [
{
- name:"Link small Regular 16/20",
- href:"#"
+ name:"Link small Regular 16/20",
+ href:"#"
},
{
- name:"Link small Regular 17/20",
+ name:"Link small Regular 17/20",
href:"#"
},
{
- name:"Link small Regular 18/20",
+ name:"Link small Regular 18/20",
href:"#"
},
{
- name:"Link small Regular 19/20",
+ name:"Link small Regular 19/20",
href:"#"
}
]
@@ -636,59 +646,59 @@
title: "Regionálny rozvoj",
items: [
{
- name:"Link small Regular 20/20",
- href:"#"
+ name:"Link small Regular 20/20",
+ href:"#"
},
{
- name:"Link small Regular 21/20",
+ name:"Link small Regular 21/20",
href:"#"
},
{
- name:"Link small Regular 22/20",
+ name:"Link small Regular 22/20",
href:"#"
},
{
- name:"Link small Regular 23/20",
+ name:"Link small Regular 23/20",
href:"#"
}
]
},
-
+
thirdColumn: {
title: "Informatizácia",
leftItems: [
{
- name:"Link small Regular 12/20",
- href:"#"
+ name:"Link small Regular 12/20",
+ href:"#"
},
{
- name:"Link small Regular 13/20",
+ name:"Link small Regular 13/20",
href:"#"
},
{
- name:"Link small Regular 14/20",
+ name:"Link small Regular 14/20",
href:"#"
},
{
- name:"Link small Regular 15/20",
+ name:"Link small Regular 15/20",
href:"#"
}
],
rightItems: [
{
- name:"Link small Regular 16/20",
- href:"#"
+ name:"Link small Regular 16/20",
+ href:"#"
},
{
- name:"Link small Regular 17/20",
+ name:"Link small Regular 17/20",
href:"#"
},
{
- name:"Link small Regular 18/20",
+ name:"Link small Regular 18/20",
href:"#"
},
{
- name:"Link small Regular 19/20",
+ name:"Link small Regular 19/20",
href:"#"
}
]
@@ -698,19 +708,19 @@
title: "Investície",
items: [
{
- name:"Link small Regular 28/20",
- href:"#"
+ name:"Link small Regular 28/20",
+ href:"#"
},
{
- name:"Link small Regular 29/20",
+ name:"Link small Regular 29/20",
href:"#"
},
{
- name:"Link small Regular 30/20",
+ name:"Link small Regular 30/20",
href:"#"
},
{
- name:"Link small Regular 31/20",
+ name:"Link small Regular 31/20",
href:"#"
}
]
@@ -718,17 +728,17 @@
subtitles: [
{
- item:"Pomoc",
+ item:"Pomoc",
href:"#"
- },
+ },
{
item:"Cookies",
href:"#"
- },
+ },
{
item:"Kontakty",
href:"#"
- },
+ },
{
item:"Mapa Stránky",
href:"#"
@@ -736,17 +746,17 @@
],
dropdownItems: [
{
- text:"Gramatická chyba",
+ text:"Gramatická chyba",
value:"#"
},
{
text:"chyba zobrazovania",
value:"#"
- },
+ },
{
text:"chyba obsahu",
value:"#"
}
]
}) }}
-{% endblock %}
\ No newline at end of file
+{% endblock %}
diff --git a/app/views/vzory/stranka-o-cookies.njk b/app/views/vzory/stranka-o-cookies.njk
new file mode 100644
index 0000000000..db55d14fea
--- /dev/null
+++ b/app/views/vzory/stranka-o-cookies.njk
@@ -0,0 +1,197 @@
+{% extends "layout.njk" %}
+{% from "breadcrumbs/macro.njk" import govukBreadcrumbs %}
+
+{% set pageName = "Stránka o cookies" %}
+
+{% block beforeContent %}
+ {{ govukBreadcrumbs({
+ "items": [
+ { text: 'ID-SK frontend', href: '/' + legacyQuery },
+ { text: pageName }
+ ]
+ }) }}
+{% endblock %}
+
+{% block content %}
+
Vzory
+
{{pageName}}
+
Tento vzor je momentálne len experimentálny / skúšobný, stále prebieha proces výskumu a schválenia.
+
+
+
+
Obsah:
+
+
+
Povedzte používateľom o cookies, ktoré im nastavíte na zariadení a nechajte ich potvrdiť alebo zamietnuť rôzne typy menej podstatných cookies.
+
+
+
Kedy je možné použiť tento vzor?
+
Používajte stránku cookies, keď chcete používateľa informovať o cookies alebo iných podobných technológiách, ktoré vaša služba / stránka používa a ukladá na zariadenie používateľa. Napríklad HTML5 lokálne úložisko.
+
+
Ako to funguje?
+
Stránka vám pomôže byť transparentný smerom k používateľovi.
+
+
Príprava vašej stránky o cookies
+
Stránku s cookies musíte vypublikovať v čase aktivácie alebo publikovania vašej služby / stránky v beta verzii. Cookie stránka musí byť jedinečná.
+
Aplikujte nasledujúce kroky pri vytváraní vašej cookie stránky:
+
+ Skontrolujte si cookies, ktoré používate
+ Kategorizujte si ich
+ Pripravte si stránku
+
+
+
Kontrola a kategorizácia vašich cookies
+
Spravte si zoznam všetkých cookies, ktoré vaša služba / stránka používa a rozdeľte ich na:
+
+ Základné cookies – bez nich by služba / stránka nebola funkčná
+ Funkčné cookies – služba / stránka by bez nich fungovala, ale používateľ by nebol schopný využiť naplno funkcionalitu vašej stránky / služby (napríklad automatické zapamätanie posledných nastavení)
+ Analytické cookies – dovolia vám používať a zbierať analytické dáta
+ Iné typy cookies, ktoré používate
+
+
Pri každej cookie by ste mali vedieť identifikovať, či je nastavená na strane serveru alebo používateľa.
+
Výsledok vašej kontroly vám napovie stratégiu ako by mala služba / stránka používať cookie banner a cookie stránku.
+
Komponent cookie banner má viacero možností použitia:
+
+ zobrazenie nastavenia iba základných cookies
+ nastavenie ostatných cookies na serveri – zahrňuje služby, ktoré tiež nastavujú ostatné cookies u používateľa
+ nastavanie ostatných cookies – iba na strane používateľa
+
+
+
Napísanie obsahu vašej cookies stránky
+
Spolupracujte s vašim právnikom pri písaní cookies stránky.
+
Stránka s pravidlami musí byť napísaná v spisovnej slovenčine.
+
Zoraďte cookies jednotlivo na stránke pod relevantnými kategóriami.
+
Každá cookie priraďte:
+
+ meno
+ krátky popis funkcie danej cookie
+ pravidlá pre cookies tretej strany, ktorá nastavuje cookies na vašu stránku (napr. stránky sociálnych sietí môžu požadovať súhlas s ich cookies pri poskytovaní služby na vašej stránke)
+ kedy sa cookie odstráni
+
+
Príklady cookies stránky možete nájsť tu .
+
Nevkladajte vaše pravidlá pre cookies do stránky „súhlas s podmienkami“.
+
Nastavte si pravidlá updatu cookies, aby každý člen tímu vedel ako ich pridávať alebo odstraňovať.
+
+
Pre ktoré cookies potrebujete vyžadovať súhlas?
+
Pre základné alebo kľúčové cookies nepotrebujete súhlas od používateľa. Kľúčové cookies su také, bez ktorých by vaša služba nefungovala.
+
Pre cookies, ktoré zbierajú analytické dáta a ktoré nie sú základné alebo kľúčové by ste mali pre nastavenie u používateľa požadovať súhlas.
+
Súhlas od používateľa môžete získať:
+
+ pomocou cookie bannera
+ nastavením a zmenou cookies samotným používateľom na cookies stránke
+
+
+
Publikovanie vašej cookies stránky
+
Používateľ by sa mal na stránku s pravidlami cookies dostať z cookies banneru alebo z pätičky stránky.
+
+
Povolenie alebo zakázanie nastavovania cookies samotným používateľom na cookies stránke
+
Dajte na výber používateľovi (výberovníkom – checkbox) akceptovať alebo odmietnuť nastavenie analytických a ostatných cookies.
+
Pri prvej návšteve stránky by mal mať prednastavené povolenie cookies ako „zakázané“. Ak navštevuje stránku opakovane tak ponechajte jeho posledné nastavenie.
+
+
+
+ {% set exampleComponentHtml %}
+
+
+
+
+
+ Sú to základné súbory cookie, ktoré umožňujú pohybovať sa po webovej stránke a používať jej funkcie. Tieto súbory cookie neukladajú žiadne informácie o vás, ktoré by sa dali použiť na marketing alebo na zapamätaniesi, čo ste si na internete pozerali.
+
+
+
+
+
+ Tieto súbory zbierajú informácie o tom, ako sa používala webová stránka, napríklad ktoré stránky najčastejšie navštevujete a či sa vám zobrazili chybové hlásenia. Nezbierajú informácie, na základe ktorých by bolo možné zistiť vašu totožnosť. Všetky informácie sú anonymné. Používajú sa na zlepšenie funkčnosti webových stránok.
+
+
+
+
+
+ V týchto súboroch sa ukladajú vaše voľby (napr. jazykové preferencie) a osobné charakteristiky. Môžu sa v nich uložiť zmeny, ktoré ste na webovej stránke urobili. Dá sa zabezpečiť, aby sa informácie zbierali anonymne. Na ich základe nie je možné zistiť, ktoré iné webové stránky ste navštívili.
+
+
+
+ Uložiť nastavenia
+
+
+
+
+ {% endset %}
+ {{exampleComponentHtml | safe}}
+
+
{{ exampleComponentHtml }}
+
+
+
+
+ Čo ak ste závislý od používania JavaScriptu pri možnosti udelenia súhlasu alebo odmietnutia na vašej stránke?
+
+
Pokiaľ používateľove zariadenie nepodporuje JavaScript, ponúknite mu alternatívnu stránku cookies.
+
Nahraďte výberovníky na súhlas s textom ako si používateľ povolí použitie JavaSript na svojom zariadení.
+
+
Príklad: Zmeňte si svoje nastavenia cookies
+ Momentálne nemôžme zmeniť nastavenia cookies na vašom zariadení, pretože váš webový prehliadač nepodporuje JavaScript. Aby ste to zmenili, pokúste sa:
+
+ zapnúť JavaScript v nastaveniach vášho prehliadača
+ obnovte si túto stránku v prehliadači
+
+
+
+ Udržujte vašu stránku cookies aktuálnu a po zmenách vždy žiadajte súhlas nanovo
+
+
Aktualizujte vašu stránku cookies aktuálnu po každej zmene v cookies.
+
Vždy si ozrejmite:
+
+ ako by ste mali označiť novú cookie
+ či potrebujete súhlas pre novú cookie od všetkých používateľov
+
+
Nový súhlas by ste mali žiadať ak:
+
+ ak začínate používať nie základnú alebo kľúčovú cookie (napríklad ak začínate používať funkčné cookies)
+ ak začínate používať cookies, ktoré môžu zbierať citlivé dáta (napríklad informácie, ktoré sú pre používateľa špecifické (zdravotné informácie atď.)
+ ak idete už povolené cookies a dáta, ktoré s nimi zbierate, používať iným spôsobom aký mali pôvodný zámer
+
+
U používateľa nenastavujte žiadne cookies, ktoré nie sú základné alebo kľúčové, ak vám na to nedal súhlas.
+
+
+{% endblock %}
\ No newline at end of file
diff --git a/config/idskContentStructure.json b/config/idskContentStructure.json
index a71b9c8457..236f8fa2cc 100644
--- a/config/idskContentStructure.json
+++ b/config/idskContentStructure.json
@@ -33,6 +33,7 @@
"prieskum-spokojnosti": "Prieskum Spokojnosti",
"prihlasenie-a-ucty": "Prihlásenie a používateľské účty",
"proces-overenia-emailovej-adresy": "Proces overenia e–mailovej adresy",
+ "stranka-o-cookies": "Stránka o cookies",
"stranka-s-grafom": "Stránka s grafom",
"stranka-s-registraciou": "Stránka s registráciou",
"stranky-dokoncenia-procesu": "Stránky dokončenia procesu",
diff --git a/src/govuk/assets/images/header-web/close.png b/src/govuk/assets/images/header-web/close.png
new file mode 100644
index 0000000000..2d0f849d07
Binary files /dev/null and b/src/govuk/assets/images/header-web/close.png differ
diff --git a/src/govuk/assets/images/header-web/close.svg b/src/govuk/assets/images/header-web/close.svg
new file mode 100644
index 0000000000..0b6d6b8d16
--- /dev/null
+++ b/src/govuk/assets/images/header-web/close.svg
@@ -0,0 +1,3 @@
+
+
+
diff --git a/src/govuk/assets/images/header-web/flag.png b/src/govuk/assets/images/header-web/flag.png
new file mode 100644
index 0000000000..e0644d7401
Binary files /dev/null and b/src/govuk/assets/images/header-web/flag.png differ
diff --git a/src/govuk/assets/images/header-web/flag.svg b/src/govuk/assets/images/header-web/flag.svg
new file mode 100644
index 0000000000..187fd570d6
--- /dev/null
+++ b/src/govuk/assets/images/header-web/flag.svg
@@ -0,0 +1,5 @@
+
+
+
+
+
diff --git a/src/govuk/assets/images/header-web/logo-placeholder.png b/src/govuk/assets/images/header-web/logo-placeholder.png
new file mode 100644
index 0000000000..da5c246fcb
Binary files /dev/null and b/src/govuk/assets/images/header-web/logo-placeholder.png differ
diff --git a/src/govuk/assets/images/header-web/logo-placeholder.svg b/src/govuk/assets/images/header-web/logo-placeholder.svg
new file mode 100644
index 0000000000..be8521b562
--- /dev/null
+++ b/src/govuk/assets/images/header-web/logo-placeholder.svg
@@ -0,0 +1,9 @@
+
+
+
+
+
+
+
+
+
diff --git a/src/govuk/assets/images/header-web/menu.png b/src/govuk/assets/images/header-web/menu.png
new file mode 100644
index 0000000000..3beae1319f
Binary files /dev/null and b/src/govuk/assets/images/header-web/menu.png differ
diff --git a/src/govuk/assets/images/header-web/menu.svg b/src/govuk/assets/images/header-web/menu.svg
new file mode 100644
index 0000000000..0af7f25f41
--- /dev/null
+++ b/src/govuk/assets/images/header-web/menu.svg
@@ -0,0 +1,3 @@
+
+
+
diff --git a/src/govuk/assets/images/header-web/navigation-arrow-mobile.png b/src/govuk/assets/images/header-web/navigation-arrow-mobile.png
new file mode 100644
index 0000000000..eac95061e9
Binary files /dev/null and b/src/govuk/assets/images/header-web/navigation-arrow-mobile.png differ
diff --git a/src/govuk/assets/images/header-web/navigation-arrow-mobile.svg b/src/govuk/assets/images/header-web/navigation-arrow-mobile.svg
new file mode 100644
index 0000000000..0be47d2b4d
--- /dev/null
+++ b/src/govuk/assets/images/header-web/navigation-arrow-mobile.svg
@@ -0,0 +1,3 @@
+
+
+
diff --git a/src/govuk/assets/images/header-web/navigation-arrow.png b/src/govuk/assets/images/header-web/navigation-arrow.png
new file mode 100644
index 0000000000..0af8b59587
Binary files /dev/null and b/src/govuk/assets/images/header-web/navigation-arrow.png differ
diff --git a/src/govuk/assets/images/header-web/navigation-arrow.svg b/src/govuk/assets/images/header-web/navigation-arrow.svg
new file mode 100644
index 0000000000..df52b04cd8
--- /dev/null
+++ b/src/govuk/assets/images/header-web/navigation-arrow.svg
@@ -0,0 +1,3 @@
+
+
+
diff --git a/src/govuk/assets/images/header-web/profile.png b/src/govuk/assets/images/header-web/profile.png
new file mode 100644
index 0000000000..6bea98703b
Binary files /dev/null and b/src/govuk/assets/images/header-web/profile.png differ
diff --git a/src/govuk/assets/images/header-web/profile.svg b/src/govuk/assets/images/header-web/profile.svg
new file mode 100644
index 0000000000..69fc3d050d
--- /dev/null
+++ b/src/govuk/assets/images/header-web/profile.svg
@@ -0,0 +1,10 @@
+
+
+
+
+
+
+
+
+
+
diff --git a/src/govuk/assets/images/header-web/search-input-close.png b/src/govuk/assets/images/header-web/search-input-close.png
new file mode 100644
index 0000000000..a64e0b6ab8
Binary files /dev/null and b/src/govuk/assets/images/header-web/search-input-close.png differ
diff --git a/src/govuk/assets/images/header-web/search-input-close.svg b/src/govuk/assets/images/header-web/search-input-close.svg
new file mode 100644
index 0000000000..43313575d1
--- /dev/null
+++ b/src/govuk/assets/images/header-web/search-input-close.svg
@@ -0,0 +1,3 @@
+
+
+
diff --git a/src/govuk/assets/images/header-web/search.png b/src/govuk/assets/images/header-web/search.png
new file mode 100644
index 0000000000..73e4f33c48
Binary files /dev/null and b/src/govuk/assets/images/header-web/search.png differ
diff --git a/src/govuk/assets/images/header-web/search.svg b/src/govuk/assets/images/header-web/search.svg
new file mode 100644
index 0000000000..0fb16c4643
--- /dev/null
+++ b/src/govuk/assets/images/header-web/search.svg
@@ -0,0 +1,3 @@
+
+
+
diff --git a/src/govuk/assets/images/header-web/warning.png b/src/govuk/assets/images/header-web/warning.png
new file mode 100644
index 0000000000..5d1d70cb73
Binary files /dev/null and b/src/govuk/assets/images/header-web/warning.png differ
diff --git a/src/govuk/assets/images/header-web/warning.svg b/src/govuk/assets/images/header-web/warning.svg
new file mode 100644
index 0000000000..672f95a2ce
--- /dev/null
+++ b/src/govuk/assets/images/header-web/warning.svg
@@ -0,0 +1,3 @@
+
+
+
diff --git a/src/idsk/all.js b/src/idsk/all.js
index 6056fee2dc..0ea5eb4140 100644
--- a/src/idsk/all.js
+++ b/src/idsk/all.js
@@ -7,6 +7,7 @@ import CharacterCount from "./components/character-count/character-count";
import Crossroad from "./components/crossroad/crossroad";
import CustomerSurveys from "./components/customer-surveys/customer-surveys";
import HeaderExtended from './components/header-extended/header-extended';
+import HeaderWeb from './components/header-web/header-web';
import InPageNavigation from './components/in-page-navigation/in-page-navigation';
import SearchComponent from './components/search-component/search-component';
import SearchResults from './components/search-results/search-results';
@@ -66,6 +67,11 @@ function initAll(options) {
new HeaderExtended($headerExtended).init();
});
+ var $headersWeb = scope.querySelectorAll('[data-module="idsk-header-web"]');
+ nodeListForEach($headersWeb, function ($headerWeb) {
+ new HeaderWeb($headerWeb).init();
+ });
+
var $inPageNavigation = scope.querySelector('[data-module="idsk-in-page-navigation"]');
new InPageNavigation($inPageNavigation).init();
@@ -116,6 +122,7 @@ export {
Feedback,
FooterExtended,
HeaderExtended,
+ HeaderWeb,
InPageNavigation,
SearchComponent,
SearchResults,
diff --git a/src/idsk/components/_all.scss b/src/idsk/components/_all.scss
index 6823585a3d..fce834afdc 100644
--- a/src/idsk/components/_all.scss
+++ b/src/idsk/components/_all.scss
@@ -11,6 +11,7 @@
@import "footer-extended/footer-extended";
@import "header/header";
@import "header-extended/header-extended";
+@import "header-web/header-web";
@import "in-page-navigation/in-page-navigation";
@import "intro-block/intro-block";
@import "warning-text/warning-text";
diff --git a/src/idsk/components/header-web/_header-web.scss b/src/idsk/components/header-web/_header-web.scss
new file mode 100644
index 0000000000..ce0ee6436a
--- /dev/null
+++ b/src/idsk/components/header-web/_header-web.scss
@@ -0,0 +1,1062 @@
+@import "../../../govuk/base";
+@import "../../../govuk/helpers/typography";
+
+@include govuk-exports("idsk/component/header-web") {
+ $idsk-header-background-primary: govuk-colour("white") !default;
+ $idsk-header-background-secondary: govuk-colour("dark-blue") !default;
+ $idsk-header-text-primary: govuk-colour("dark-blue") !default;
+ $idsk-header-text-secondary: govuk-colour("white") !default;
+
+ $idsk-header-link: govuk-colour("white") !default;
+ $idsk-header-dark-blue: govuk-colour("dark-blue") !default;
+
+ $idsk-header-logo-height: 40px;
+
+ .idsk-header-web {
+
+ box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.15);
+
+ &__flag {
+ background-color: govuk-colour("black");
+ -webkit-mask: url(/assets/images/header-web/flag.svg) no-repeat center;
+ mask: url(/assets/images/header-web/flag.svg) no-repeat center;
+
+ display: inline-block;
+ -webkit-mask-size: contain;
+ mask-size: contain;
+ height: 16px;
+ width: 14px;
+ }
+
+ &__link-arrow {
+ background-color: govuk-colour("black");
+ -webkit-mask: url(/assets/images/header-web/navigation-arrow.svg) no-repeat center;
+ mask: url(/assets/images/header-web/navigation-arrow.svg) no-repeat center;
+
+ display: inline-block;
+ width: 10px;
+ height: 10px;
+ margin-left: govuk-spacing(2);
+ }
+
+ &__link-arrow-mobile {
+ background-color: govuk-colour("black");
+ -webkit-mask: url(/assets/images/header-web/navigation-arrow-mobile.svg) no-repeat center;
+ mask: url(/assets/images/header-web/navigation-arrow-mobile.svg) no-repeat center;
+
+ display: inline;
+ -webkit-mask-size: contain;
+ mask-size: contain;
+ width: 13px;
+ height: 8px;
+ float: right;
+ }
+
+ &__warning-icon {
+ background-color: govuk-colour("red");
+ -webkit-mask: url(/assets/images/header-web/warning.svg) no-repeat center;
+ mask: url(/assets/images/header-web/warning.svg) no-repeat center;
+ border-radius: 100%;
+
+ display: inline-block;
+ width: 16px;
+ height: 16px;
+ margin: 2px govuk-spacing(2) -2px 0;
+ }
+
+ &__menu-open {
+ background-color: govuk-colour("black");
+ -webkit-mask: url(/assets/images/header-web/menu.svg) no-repeat center;
+ mask: url(/assets/images/header-web/menu.svg) no-repeat center;
+
+ display: inline-block;
+ width: 13px;
+ height: 13px;
+ }
+
+ &__menu-close {
+ background-color: govuk-colour("black");
+ -webkit-mask: url(/assets/images/header-web/close.svg) no-repeat center;
+ mask: url(/assets/images/header-web/close.svg) no-repeat center;
+
+ display: inline-block;
+ width: 13px;
+ height: 13px;
+ }
+ }
+
+ /* SLOVAK TRICOLOR */
+ .idsk-header-web__tricolor {
+ content: "";
+ display: block;
+ width: 100%;
+ height: 3px;
+ background-image: linear-gradient(
+ to right,
+ govuk-colour("white") 0%,
+ govuk-colour("white") 33.3%,
+ #003183 33.3%,
+ #003183 66.6%,
+ govuk-colour("red") 66.6%,
+ govuk-colour("red") 100%
+ );
+ /* equivalent to (to right, white, white 50%, black 50%, black) */
+ background-size: 150px 100%;
+ background-repeat: repeat;
+ }
+
+ /* BRAND BAR */
+ .idsk-header-web__brand {
+ background-color: $idsk-header-background-secondary;
+ color: $idsk-header-text-secondary;
+
+ .govuk-body-s,
+ .govuk-link {
+ color: $idsk-header-text-secondary;
+ }
+
+ &-gestor {
+ float: left;
+
+ .govuk-body-s {
+ display: inline-block;
+ }
+
+ .govuk-body-s,
+ .govuk-link {
+ margin: govuk-spacing(2) 0;
+
+ @include mq($until: desktop) {
+ margin: 11px 0;
+ }
+ }
+
+ .govuk-link:focus {
+ color: govuk-colour("black");
+
+ .idsk-header-web__link-arrow {
+ background-color: govuk-colour("black");
+ }
+ }
+
+ .idsk-header-web__link-arrow {
+ background-color: $idsk-header-text-secondary;
+ }
+
+ .idsk-header-web__flag {
+ background-color: $idsk-header-text-secondary;
+ margin: 12px govuk-spacing(2) 12px 0;
+ float: left;
+
+ @include mq($until: desktop) {
+ height: 15px;
+ width: 12px;
+ }
+ }
+
+ &-button {
+ @include govuk-font($size: 16);
+
+ padding: 0;
+ background: none;
+ border: none;
+ color: $idsk-header-text-secondary;
+ font-weight: 700;
+
+ &:hover {
+ text-decoration: underline;
+ }
+
+ &:focus,
+ &:active {
+ @include govuk-focused-text;
+ text-decoration: underline;
+ box-shadow: none;
+
+ .idsk-header-web__link-arrow {
+ background-color: govuk-colour("black");
+ }
+ }
+
+ &--active {
+ .idsk-header-web__link-arrow {
+ transition: transform 0.2s;
+ transform: rotate(180deg);
+ }
+ }
+ }
+
+ @include mq($until: desktop) {
+ .idsk-header-web__brand-gestor-text {
+ display: none;
+ }
+ }
+
+ @include mq($from: desktop) {
+ .idsk-header-web__brand-gestor-text--mobile {
+ display: none;
+ }
+ }
+ }
+
+ &-dropdown {
+ overflow: hidden;
+ display: none;
+
+ .govuk-link:focus {
+ color: govuk-colour("black");
+ }
+
+ .govuk-body-s:first-child {
+ font-weight: 700;
+ margin: govuk-spacing(4) 0 0;
+ }
+ .govuk-body-s:last-child {
+ margin-bottom: govuk-spacing(4) ;
+ }
+
+ @include mq($until: desktop) {
+ .govuk-body-s:first-child,
+ .govuk-body-s:last-child {
+ margin: 0;
+ }
+
+ .govuk-grid-column-one-half:first-child {
+ padding-top: govuk-spacing(4);
+ padding-bottom: govuk-spacing(4);
+ }
+
+ .govuk-grid-column-one-half:last-child {
+ padding-bottom: govuk-spacing(4);
+
+ @include mq($from: tablet) {
+ padding-top: govuk-spacing(4);
+ }
+ }
+ }
+
+ &--active {
+ display: initial;
+ }
+ }
+
+ /* language selector */
+ &-language {
+ float: right;
+ @include govuk-font($size: 19);
+
+ .idsk-header-web__link-arrow {
+ background-color: $idsk-header-background-primary;
+ }
+
+ &--active {
+
+ .idsk-header-web__brand-language-list {
+ display: block;
+ position: absolute;
+ z-index: 2;
+ width: 150px;
+ box-shadow: 0 5px 10px rgba(0, 0, 0, 0.15);
+ border-radius: 8px;
+
+ @include mq($until: tablet) {
+ right: 0;
+ width: 130px;
+ }
+
+ @include mq($from: tablet) {
+ width: 140px;
+ }
+ }
+
+ .idsk-header-web__link-arrow {
+ transition: transform 0.2s;
+ transform: rotate(180deg);
+ }
+ }
+
+ &-button {
+ @include govuk-font($size: 16);
+
+ background: none;
+ border: none;
+ color: $idsk-header-text-secondary;
+ margin: 9px 0 9px 0;
+
+ &:hover {
+ text-decoration: underline;
+ }
+
+ &:focus {
+ @include govuk-focused-text;
+ text-decoration: underline;
+ box-shadow: none;
+
+ .idsk-header-web__link-arrow {
+ background-color: govuk-colour("black");
+ }
+ }
+
+ @include mq($until: desktop) {
+ margin-top: 8px;
+ font-size: 18px;
+ }
+ }
+
+ &-list {
+ display: none;
+ list-style: none;
+ padding: govuk-spacing(2) 0;
+ margin: 0;
+ text-align: left;
+ background-color: govuk-colour("white");
+
+ &-item-link {
+ display: block;
+ text-decoration: none;
+ padding: govuk-spacing(2);
+
+ &--selected {
+ text-decoration: underline;
+ font-weight: 700;
+ }
+
+ &:link,
+ &:visited {
+ color: govuk-colour("black");
+ }
+
+ &:hover {
+ text-decoration: underline;
+ }
+ &:focus,
+ &:active {
+ box-shadow: none;
+ }
+ }
+ }
+ }
+
+ &--light {
+ background-color: govuk-colour("grey-4");
+
+ .govuk-body-s,
+ .govuk-link,
+ .idsk-header-web__brand-language-button,
+ .idsk-header-web__brand-gestor-button{
+ color: govuk-colour("black");
+ }
+
+ .idsk-header-web__link-arrow,
+ .idsk-header-web__flag{
+ background-color: govuk-colour("black");
+ }
+ }
+ }
+
+ /* MAIN SECTION */
+ .idsk-header-web__main {
+
+ @include mq($from: desktop) {
+
+ .govuk-grid-row {
+ display: flex;
+
+ .govuk-grid-column-two-thirds{
+ display: flex;
+ align-items: center;
+ justify-content: flex-end;
+ }
+ }
+
+ .govuk-grid-column-one-third-from-desktop {
+ display: flex;
+ align-items: center;
+ }
+ }
+
+ &--buttons {
+ display: inline-block;
+ }
+
+ &--login {
+
+ .idsk-header-web__main--login-profilebtn,
+ .idsk-header-web__main--login-logoutbtn {
+ display: none;
+ }
+
+ &-action {
+ display: none;
+ overflow: auto;
+ margin-bottom: govuk-spacing(4);
+
+ &-profile-img {
+ height: 28px;
+ }
+
+ &-text {
+ margin-left: govuk-spacing(2);
+
+ &-user-name {
+ @include govuk-font($size: 16);
+ font-weight: 700;
+ margin-bottom: govuk-spacing(1);
+ }
+ }
+ .govuk-link {
+ color: govuk-colour("black");
+ }
+ }
+
+ &--loggedIn {
+ .idsk-header-web__main--login-loginbtn {
+ display: none;
+ }
+
+ a.idsk-header-web__main--login-profilebtn,
+ a.idsk-header-web__main--login-logoutbtn{
+ display: initial;
+ }
+
+ .idsk-header-web__main--login-action {
+ display: flex;
+ align-items: center;
+ }
+
+ @include mq($until: desktop) {
+ .idsk-header-web__main--login-action-text:last-child div{
+ display: none;
+ }
+
+ button.idsk-header-web__main--login-profilebtn,
+ button.idsk-header-web__main--login-logoutbtn{
+ display: initial;
+ }
+ }
+ }
+
+ @include mq($from: desktop) {
+ display: inline-block;
+
+ &-action {
+ margin-top: govuk-spacing(6);
+ margin-bottom: govuk-spacing(6);
+ margin-left: govuk-spacing(2);
+ }
+ }
+ }
+
+
+ &-headline {
+ margin: 28px 0;
+
+ & > a {
+ display: flex;
+ align-items: center;
+ text-decoration: none;
+
+ &:focus,
+ &:active {
+ @include govuk-focused-text;
+ }
+ }
+
+ &-logo {
+ height: 40px;
+ margin-right: govuk-spacing(3);
+
+ @include mq($until: desktop) {
+ height: 30px;
+ }
+ }
+
+ .govuk-heading-m {
+ margin: 0;
+ color: $idsk-header-text-primary;
+ }
+
+ &-menu-button {
+ display: none;
+ }
+
+ @include mq($until: desktop) {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ padding: govuk-spacing(4) 0;
+ margin: 0;
+
+ a {
+ display: flex;
+ align-items: center;
+ text-decoration: none;
+ }
+
+ .govuk-heading-m {
+ margin: 0;
+ float: none;
+ }
+
+ &-menu-button {
+ display: flex;
+ align-items: center;
+ background-color: $idsk-header-background-primary;
+ width: auto;
+ float: right;
+ border: 1px solid govuk-colour("black");
+ box-shadow: none;
+ color: govuk-colour("black");
+ font-weight: 700;
+ font-size: 18px;
+ padding-top: 5px;
+ padding-bottom: 6px;
+ margin: 0;
+
+ &:hover {
+ background-color: $idsk-header-background-primary;
+ color: govuk-colour("black");
+ }
+
+ &:focus,
+ &:active {
+ @include govuk-focused-text;
+ }
+
+ .idsk-header-web__menu-open,
+ .idsk-header-web__menu-close {
+ margin-left: govuk-spacing(3);
+ margin-bottom: -1px;
+ }
+
+ .idsk-header-web__menu-close {
+ display: none;
+ }
+
+ &-service {
+ border: none;
+ }
+
+ &--active {
+ .idsk-header-web__menu-open {
+ display: none;
+ }
+
+ .idsk-header-web__menu-close {
+ display: inline-block;
+ }
+
+ img{
+ display: none;
+ }
+ }
+
+ &-service {
+ .idsk-header-web__menu-close {
+ margin: 0;
+ padding: govuk-spacing(1) govuk-spacing(2);
+ }
+ }
+ }
+ }
+
+ }
+
+ &-action {
+ display: flex;
+ align-items: center;
+
+ /* search bar */
+ &-search {
+
+ input[type="search"]::-webkit-search-cancel-button {
+ -webkit-appearance: none;
+ background-color: govuk-colour("grey-1");
+ -webkit-mask: url(/assets/images/header-web/search-input-close.svg) no-repeat center;
+ mask: url(/assets/images/header-web/search-input-close.svg) no-repeat center;
+ display: inline-block;
+ -webkit-mask-size: contain;
+ mask-size: contain;
+ height: 17px;
+ width: 17px;
+ }
+
+ @include govuk-font($size: 19);
+ display: flex;
+ align-items: center;
+ outline: 1px solid govuk-colour("black");
+ margin: 30px 0;
+
+ @include mq($from: desktop) {
+ width: 300px;
+ }
+
+ .govuk-input {
+ border: none;
+ height: 40px;
+ padding: 8px 12px;
+
+ &:focus {
+ z-index: 2;
+ }
+ }
+
+ .govuk-button {
+ height: 40px;
+ width: 44px;
+ font-size: 17px;
+ margin: 0;
+ padding-top: 7px;
+ padding-left: govuk-spacing(2);
+ box-shadow: none;
+ background-color: govuk-colour("blue");
+
+ &::before {
+ bottom: -2px;
+ }
+
+ &:hover {
+ background-color: govuk-colour("dark-blue");
+ }
+ }
+ }
+
+ .idsk-header-web__main--buttons {
+ float: right;
+ }
+
+ .idsk-button {
+ margin: 29px 0 govuk-spacing(6) govuk-spacing(2);
+ padding: 9px 10px 8px;
+ }
+
+ // mobile version
+ @include mq($until: desktop) {
+ float: none;
+
+ &-search {
+ display: none;
+ }
+ }
+ }
+
+ @include mq($until: desktop){
+ &--buttons {
+ display: none;
+ }
+ }
+ }
+
+ /* NAV BAR */
+ .idsk-header-web__nav {
+
+ display: block;
+ margin: 0;
+ padding: 0;
+ list-style: none;
+
+ &--mobile {
+ @include mq($until: desktop) {
+ display: none;
+ }
+ }
+
+ &--divider {
+ height: 1px;
+ background-color: govuk-colour("grey-3");
+
+ @include mq($until: desktop) {
+ display: none;
+ }
+ }
+
+ .idsk-header-web__main--buttons,
+ .idsk-header-web__main-action-search {
+ display: none;
+ }
+
+ .idsk-header-web__main--buttons {
+ margin-top: govuk-spacing(4);
+ }
+
+ &-list {
+ list-style: none;
+ padding: 0;
+ margin: 0;
+
+ &-item {
+
+ @include mq($from: desktop) {
+ display: inline-block;
+ border: none;
+ float: left;
+ }
+
+ &-link{
+ @include govuk-font($size: 19);
+ padding: govuk-spacing(3) govuk-spacing(3) govuk-spacing(2) govuk-spacing(3);
+ white-space: nowrap;
+ text-decoration: none;
+ color: govuk-colour("black");
+ box-shadow: none;
+ display: inline-block;
+
+ .idsk-header-web__link-arrow-mobile {
+ display: none;
+ }
+
+ .idsk-header-web__nav-list-item-link-arrow {
+ background-color: govuk-colour("black");
+ -webkit-mask: url(/assets/images/header-web/navigation-arrow.svg) no-repeat center;
+ mask: url(/assets/images/header-web/navigation-arrow.svg) no-repeat center;
+ width: 10px;
+ height: 10px;
+ margin-left: govuk-spacing(2);
+ }
+
+ &:link,
+ &:hover,
+ &:visited {
+ color: govuk-colour("black");
+ }
+
+ &:focus,
+ &:active {
+ @include govuk-focused-text;
+ box-shadow: none;
+ }
+
+ &:hover {
+ text-decoration: underline;
+ }
+ }
+
+ &--active {
+
+ @include mq($from: desktop) {
+ background-color: $idsk-header-background-secondary;
+ }
+
+ .idsk-header-web__nav-list-item-link {
+
+ @include mq($from: desktop) {
+ &:link,
+ &:hover,
+ &:visited {
+ color: $idsk-header-text-secondary;
+ }
+ }
+
+ &:focus,
+ &:active {
+ color: govuk-colour("black");
+
+ .idsk-header-web__link-arrow,
+ .idsk-header-web__link-arrow-mobile {
+ background-color: govuk-colour("black");
+ }
+ }
+
+ .idsk-header-web__link-arrow {
+ background-color: $idsk-header-text-secondary;
+ }
+ }
+
+ .idsk-header-web__link-arrow,
+ .idsk-header-web__link-arrow-mobile {
+ transition: transform 0.2s;
+ transform: rotate(180deg);
+ }
+
+ .idsk-header-web__nav-submenu,
+ .idsk-header-web__nav-submenulite {
+ display: block;
+ }
+
+ @include mq($from: tablet, $until: desktop){
+ .govuk-grid-row {
+ margin-left: -(govuk-spacing(6));
+ margin-right: -(govuk-spacing(6));
+ }
+ }
+ }
+ }
+ }
+
+ &--dark {
+ background-color: $idsk-header-background-secondary;
+
+ .idsk-header-web__link-arrow {
+ background-color: $idsk-header-text-secondary;
+ }
+
+ .idsk-header-web__nav-list-item-link {
+ color: $idsk-header-text-secondary;
+
+ &:focus,
+ &:active {
+ color: govuk-colour("black");
+
+ .idsk-header-web__link-arrow {
+ background-color: govuk-colour("black");
+ }
+ }
+ }
+ }
+
+ @include mq($until: desktop) {
+ border-top: none;
+
+ &-bar--buttons {
+ border-bottom: 2px solid govuk-colour("grey-3");
+ }
+
+ .idsk-header-web__main--buttons,
+ .idsk-header-web__main-action-search {
+ display: block;
+ }
+
+ .idsk-header-web__main-action-search {
+ margin: 0;
+
+ .govuk-input {
+ width: calc(100% - 44px);
+ }
+
+ .govuk-button {
+ float: right;
+ }
+ }
+
+ &-list {
+ margin: govuk-spacing(3) -15px;
+ &-item {
+ &-link {
+ font-size: 24px;
+ font-weight: 700;
+ width: 100%;
+ box-sizing: border-box;
+ padding: govuk-spacing(2) govuk-spacing(3);
+
+ .idsk-header-web__link-arrow {
+ display: none;
+ }
+
+ .idsk-header-web__link-arrow-mobile {
+ margin-top: govuk-spacing(2);
+ display: inline;
+ }
+ }
+ }
+ }
+ }
+
+ @include mq($from: tablet) {
+ &-list {
+ margin-left: -(govuk-spacing(6));
+ margin-right: -(govuk-spacing(6));
+
+ &-item-link {
+ padding-left: govuk-spacing(6);
+ padding-right: govuk-spacing(6);
+ }
+ }
+ }
+ }
+
+ /* NAVIGATION - submenu */
+ .idsk-header-web__nav-submenu {
+ width: 100vw;
+ position: absolute;
+ z-index: 1;
+ left: 0;
+ display: none;
+
+ @include govuk-clearfix;
+ @include mq($from: desktop) {
+ background-color: $idsk-header-background-secondary;
+ }
+
+ &-list {
+ background-color: $idsk-header-dark-blue;
+ list-style-type: none;
+
+ @include mq($from: desktop) {
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ flex-wrap: wrap;
+ padding: 0 0;
+ margin: 0;
+
+ &-item {
+ width: 33.33%;
+ }
+ }
+
+ &-item-link {
+ padding: 12px govuk-spacing(4) 13px govuk-spacing(3);
+ text-decoration: none;
+ display: block;
+
+ span {
+ overflow: hidden;
+ text-overflow: ellipsis;
+ display: -webkit-box;
+ -webkit-line-clamp: 2;
+ -webkit-box-orient: vertical;
+ }
+
+ &:link,
+ &:visited {
+ color: $idsk-header-text-secondary;
+ }
+
+ &:hover {
+ text-decoration: underline;
+ }
+
+ &:focus,
+ &:active {
+ box-shadow: none;
+ color: govuk-colour("black");
+ }
+ }
+ }
+
+ @include mq($until: desktop) {
+ position: initial;
+ width: initial;
+
+ &-list {
+ padding: 0;
+ background-color: $idsk-header-background-primary;
+
+ &-item-link {
+ padding: govuk-spacing(3) govuk-spacing(4) govuk-spacing(3) govuk-spacing(6) ;
+ font-size: 18px;
+ font-weight: 700;
+
+ &:link,
+ &:visited {
+ color: govuk-colour("black");
+ }
+ }
+ }
+
+ .govuk-grid-column-one-quarter{
+ padding: 0;
+ }
+
+ @include mq($from: tablet, $until: desktop) {
+ &-list-item-link {
+ padding-left: govuk-spacing(8);
+ }
+ }
+ }
+ }
+
+ /* NAVIGATION - submenulite */
+ .idsk-header-web__nav-submenulite {
+ position: relative;
+ left: 0;
+ z-index: 1;
+ display: none;
+
+ &-list {
+ background-color: $idsk-header-dark-blue;
+ list-style-type: none;
+
+
+ @include mq($from: desktop) {
+ position: absolute;
+ padding: govuk-spacing(3) 0;
+ width: 250px;
+ }
+
+ &-item-link {
+ padding: govuk-spacing(2) govuk-spacing(4) govuk-spacing(2) govuk-spacing(3);
+ display: inline-block;
+ text-decoration: none;
+ box-sizing: border-box;
+ width: 100%;
+
+ span {
+ overflow: hidden;
+ text-overflow: ellipsis;
+ display: -webkit-box;
+ -webkit-line-clamp: 2;
+ -webkit-box-orient: vertical;
+ }
+
+ &:link,
+ &:visited {
+ color: $idsk-header-text-secondary;
+ }
+
+ &:focus,
+ &:active {
+ @include govuk-focused-text;
+ box-shadow: none;
+ }
+
+ &:hover {
+ text-decoration: underline;
+ }
+ }
+ }
+
+ @include mq($until: desktop) {
+ position: initial;
+
+ &-list {
+ padding: 0;
+ background-color: $idsk-header-background-primary;
+ }
+
+ .idsk-header-web__nav-submenulite-list-item-link {
+ padding: govuk-spacing(3) govuk-spacing(4) govuk-spacing(3) govuk-spacing(6) ;
+ font-size: 18px;
+ font-weight: 700;
+
+ &:link,
+ &:visited {
+ color: govuk-colour("black");
+ }
+ }
+ }
+
+ @include mq($from: tablet, $until: desktop){
+ .idsk-header-web__nav-submenulite-list-item-link {
+ padding-left: govuk-spacing(8);
+ }
+ }
+ }
+
+ /* BANNER SECTION */
+ .idsk-header-web__banner {
+
+ padding: govuk-spacing(3) 0;
+ background-color: govuk-colour("yellow");
+
+ &--warning {
+ background-color: govuk-colour("grey-4");
+ }
+
+ &-title {
+ margin: 0;
+ font-weight: 700;
+ display: inline-block;
+ }
+
+ .govuk-grid-column-full {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ }
+
+ &--hide {
+ display: none;
+ }
+ }
+}
diff --git a/src/idsk/components/header-web/header-web.js b/src/idsk/components/header-web/header-web.js
new file mode 100644
index 0000000000..bd5814f57d
--- /dev/null
+++ b/src/idsk/components/header-web/header-web.js
@@ -0,0 +1,203 @@
+import '../../../govuk/vendor/polyfills/Function/prototype/bind'
+import '../../../govuk/vendor/polyfills/Event' // addEventListener and event.target normaliziation
+import { nodeListForEach } from '../../../govuk/common'
+import { toggleClass } from '../../common'
+
+/**
+ * Header for web websites
+ */
+function HeaderWeb($module) {
+ this.$module = $module;
+}
+
+HeaderWeb.prototype.init = function () {
+
+ var $module = this.$module;
+ // check for module
+ if (!$module) {
+ return;
+ }
+
+ // chceck for banner
+ var $banner = $module.querySelector('.idsk-header-web__banner');
+ if ($banner) {
+ var $bannerCloseBtn = $banner.querySelector('.idsk-header-web__menu-close');
+ $bannerCloseBtn.addEventListener('click', this.handleCloseBanner.bind(this));
+ }
+
+ // check for language switcher
+ var $toggleLanguageSwitcher = $module.querySelector('.idsk-header-web__brand-language-button');
+ this.$toggleLanguageSwitcher = $toggleLanguageSwitcher;
+
+ if ($toggleLanguageSwitcher) {
+ // Handle $toggleLanguageSwitcher click events
+ $toggleLanguageSwitcher.addEventListener('click', this.handleLanguageSwitcherClick.bind(this));
+
+ // close language list if i left the last item from langauge list e.g. if user use tab key for navigations
+ var $lastLanguageItems = $module.querySelectorAll('.idsk-header-web__brand-language-list-item:last-child .idsk-header-web__brand-language-list-item-link');
+ nodeListForEach($lastLanguageItems, function ($lastLanguageItem) {
+ $lastLanguageItem.addEventListener('blur', this.checkBlurLanguageSwitcherClick.bind(this));
+ }.bind(this))
+
+ // close language list if user back tabbing
+ $toggleLanguageSwitcher.addEventListener('keydown', this.handleBackTabbing.bind(this));
+
+ }
+
+ $module.boundCheckBlurLanguageSwitcherClick = this.checkBlurLanguageSwitcherClick.bind(this);
+
+ // check for e-goverment button
+ var $eGovermentButtons = $module.querySelectorAll('.idsk-header-web__brand-gestor-button');
+ if ($eGovermentButtons.length > 0) {
+ // Handle $eGovermentButton click event
+ nodeListForEach($eGovermentButtons, function ($eGovermentButton) {
+ $eGovermentButton.addEventListener('click', this.handleEgovermentClick.bind(this));
+ }.bind(this))
+ }
+
+ // check for menu items
+ var $menuList = $module.querySelector('.idsk-header-web__nav-list');
+ var $menuItems = $module.querySelectorAll('.idsk-header-web__nav-list-item-link');
+ if ($menuItems && $menuList) {
+ // Handle $menuItem click events
+ nodeListForEach($menuItems, function ($menuItem) {
+ $menuItem.addEventListener('click', this.handleSubmenuClick.bind(this));
+ if($menuItem.parentElement.querySelector('.idsk-header-web__nav-submenu') || $menuItem.parentElement.querySelector('.idsk-header-web__nav-submenulite')){
+ $menuItem.parentElement.lastElementChild.addEventListener('keydown', this.menuTabbing.bind(this));
+ }
+ }.bind(this))
+ }
+
+ // check for mobile menu button
+ var $menuButton = $module.querySelector('.idsk-header-web__main-headline-menu-button');
+ if ($menuButton) {
+ $menuButton.addEventListener('click', this.showMobileMenu.bind(this));
+ this.menuBtnText = $menuButton.innerText.trim();
+ }
+
+ $module.boundCheckBlurMenuItemClick = this.checkBlurMenuItemClick.bind(this);
+}
+
+/**
+ * Handle close banner
+ * @param {object} e
+ */
+ HeaderWeb.prototype.handleCloseBanner = function (e) {
+ var $closeButton = e.target || e.srcElement;
+ var $banner = $closeButton.closest('.idsk-header-web__banner');
+ $banner.classList.add('idsk-header-web__banner--hide');
+}
+
+/**
+ * Handle open/hide language switcher
+ * @param {object} e
+ */
+HeaderWeb.prototype.handleLanguageSwitcherClick = function (e) {
+ var $toggleButton = e.target || e.srcElement;
+ this.$activeSearch = $toggleButton.closest('.idsk-header-web__brand-language');
+ toggleClass(this.$activeSearch, 'idsk-header-web__brand-language--active');
+ document.addEventListener('click', this.$module.boundCheckBlurLanguageSwitcherClick, true);
+}
+
+HeaderWeb.prototype.checkBlurLanguageSwitcherClick = function (e) {
+ if(!(e.target.classList.contains('idsk-header-web__brand-language-button'))){
+ this.$activeSearch.classList.remove('idsk-header-web__brand-language--active');
+ document.removeEventListener('click', this.$module.boundCheckBlurLanguageSwitcherClick, true);
+ document.removeEventListener('click', this.$module.boundCheckBlurLanguageSwitcherClick, true);
+ document.removeEventListener('click', this.$module.boundCheckBlurLanguageSwitcherClick, true);
+ }
+}
+
+HeaderWeb.prototype.handleBackTabbing = function (e) {
+ //shift was down when tab was pressed
+ if(e.shiftKey && e.keyCode == 9 && document.activeElement == this.$toggleLanguageSwitcher) {
+ this.$toggleLanguageSwitcher.parentNode.classList.remove('idsk-header-web__brand-language--active');
+ }
+}
+
+/**
+ * Handle open/hide e-goverment statement
+ * @param {object} e
+ */
+ HeaderWeb.prototype.handleEgovermentClick = function (e) {
+ var $eGovermentButtons = this.$module.querySelectorAll('.idsk-header-web__brand-gestor-button');
+ var $eGovermentDropdown = this.$module.querySelector('.idsk-header-web__brand-dropdown');
+ toggleClass($eGovermentDropdown, 'idsk-header-web__brand-dropdown--active');
+ nodeListForEach($eGovermentButtons, function ($eGovermentButton) {
+ toggleClass($eGovermentButton, 'idsk-header-web__brand-gestor-button--active');
+ }.bind(this))
+}
+
+
+/**
+ * Handle open/hide submenu
+ * @param {object} e
+ */
+HeaderWeb.prototype.handleSubmenuClick = function (e) {
+ var $srcEl = e.target || e.srcElement;
+ var $toggleButton = $srcEl.closest('.idsk-header-web__nav-list-item');
+ var $currActiveItem = this.$module.querySelector('.idsk-header-web__nav-list-item--active');
+
+ if($currActiveItem && $currActiveItem.isEqualNode($toggleButton)){
+ $currActiveItem.classList.remove('idsk-header-web__nav-list-item--active');
+ }else{
+ if($currActiveItem){
+ $currActiveItem.classList.remove('idsk-header-web__nav-list-item--active');
+ }
+ toggleClass($toggleButton, 'idsk-header-web__nav-list-item--active');
+ toggleClass($toggleButton, 'idsk-header-web__nav-list-item--active');
+ toggleClass($toggleButton, 'idsk-header-web__nav-list-item--active');
+ }
+
+ document.addEventListener('click', this.$module.boundCheckBlurMenuItemClick.bind(this), true);
+}
+
+/**
+ * Remove active class from menu when user leaves menu with tabbing
+ */
+ HeaderWeb.prototype.menuTabbing = function (e) {
+ var isTabPressed = (e.key === 'Tab' || e.keyCode === 9);
+
+ if (!isTabPressed) {
+ return;
+ }
+
+ var submenuList = e.srcElement.parentElement.parentElement;
+ // shift + tab
+ if (e.shiftKey) {
+ if (document.activeElement === submenuList.firstElementChild.firstElementChild) {
+ submenuList.closest('.idsk-header-web__nav-list-item').classList.remove('idsk-header-web__nav-list-item--active');
+ }
+ // tab
+ } else if (document.activeElement === submenuList.lastElementChild.lastElementChild) {
+ submenuList.closest('.idsk-header-web__nav-list-item').classList.remove('idsk-header-web__nav-list-item--active');
+ }
+}
+
+/**
+ * handle click outside menu or "blur" the item link
+ */
+HeaderWeb.prototype.checkBlurMenuItemClick = function (e) {
+ var $currActiveItem = this.$module.querySelector('.idsk-header-web__nav-list-item--active');
+ if($currActiveItem && !(e.target.classList.contains('idsk-header-web__nav-list-item-link'))){
+ $currActiveItem.classList.remove('idsk-header-web__nav-list-item--active');
+ document.removeEventListener('click', this.$module.boundCheckBlurMenuItemClick, true);
+ }
+}
+
+/**
+ * Show mobile menu
+ * @param {object} e
+ */
+HeaderWeb.prototype.showMobileMenu = function (e) {
+ var closeText = this.menuBtnText ? 'Zavrieť' : '';
+ var $menuButton = this.$module.querySelector('.idsk-header-web__main-headline-menu-button');
+ var $mobileMenu = this.$module.querySelector('.idsk-header-web__nav');
+ toggleClass($mobileMenu, 'idsk-header-web__nav--mobile');
+ toggleClass($menuButton, 'idsk-header-web__main-headline-menu-button--active');
+ var buttonIsActive = $menuButton.classList.contains('idsk-header-web__main-headline-menu-button--active');
+
+ $menuButton.childNodes[0].nodeValue = buttonIsActive ? closeText : this.menuBtnText;
+}
+
+export default HeaderWeb
\ No newline at end of file
diff --git a/src/idsk/components/header-web/header-web.yaml b/src/idsk/components/header-web/header-web.yaml
new file mode 100644
index 0000000000..c9bbff55f7
--- /dev/null
+++ b/src/idsk/components/header-web/header-web.yaml
@@ -0,0 +1,225 @@
+params:
+- name: headerType
+ type: string
+ required: true
+ description: Type of header, options(website, projectWebsite, electronicService)
+- name: classes
+ type: string
+ required: false
+ description: Classes to add to the header container.
+- name: attributes
+ type: object
+ required: false
+ description: HTML attributes (for example data attributes) to add to the header container.
+- name: assetsPath
+ type: string
+ required: false
+ description: The public path for the assets folder. If not provided it defaults to /public/assets/images/header-web
+
+- name: brand
+ type: object
+ required: false
+ description: BrandBar object including language selector. It is voluntary for website, projectWebsite. For electronicService it is MANDATORY!!!
+ params:
+ - name: lightBackground
+ type: bolean
+ required: false
+ description: Bolean value for background color
+ - name: gestor
+ type: object
+ required: false
+ description:
+ params:
+ - name: nationalEmblem
+ type: bolean
+ required: false
+ description: Allows you to use national Emblem
+ - name: gestorLink
+ type: object
+ required: false
+ description: Link to gestor page
+ params:
+ - name: text
+ type: string
+ required: false
+ description: Text of link
+ - name: mobileText
+ type: string
+ required: false
+ description: Text of link for mobile version
+ - name: hrefLink
+ type: string
+ required: true
+ description: Link for href element
+ - name: languages
+ type: array
+ required: true
+ description: Other language options
+ params:
+ - name: text
+ type: string
+ required: true
+ description: Name of language
+ - name: selected
+ type: boolean
+ required: true
+ description: If language is selected
+ - name: link
+ type: string
+ required: false
+ description: link to english mutation
+
+- name: main
+ type: object
+ required: true
+ description: MainSection object inlucing logo, title, search. It is MANDATORY for all types of pages.
+ params:
+ - name: logoSrc
+ type: string
+ required: false
+ description: Allows you to overwrite the idsk.sk logo
+ - name: title
+ type: string
+ required: true
+ description: Header title text
+ - name: menuBtnText
+ type: string
+ required: false
+ description: Text for mobile menu button
+ - name: loginButton
+ type: object
+ required: false
+ description: Allows you to use login flow
+ params:
+ - name: text
+ type: string
+ required: false
+ description: Login button text
+ - name: classes
+ type: string
+ required: false
+ description: Here you can add your own classes to login button
+ - name: loggedIn
+ type: object
+ required: false
+ description: User is loggedIn
+ params:
+ - name: profileImg
+ type: string
+ required: false
+ description: Src for profile image
+ - name: userName
+ type: string
+ required: true
+ description: User name
+ - name: profileButton
+ type: object
+ required: false
+ description: Allows you to edit prifile button texts and classes
+ params:
+ - name: text
+ type: string
+ required: false
+ description: Second button text
+ - name: classes
+ type: string
+ required: false
+ description: Classes of second button
+ - name: logoutButton
+ type: object
+ required: false
+ description: Allows you to edit logout button texts and classes
+ params:
+ - name: text
+ type: string
+ required: false
+ description: Second button text
+ - name: classes
+ type: string
+ required: false
+ description: Classes of second button
+ - name: secondaryButton
+ type: object
+ required: false
+ description: Allows you to use second button
+ params:
+ - name: text
+ type: string
+ required: false
+ description: Second button text
+ - name: classes
+ type: string
+ required: false
+ description: Classes of second button
+
+- name: search
+ type: object
+ required: false
+ description: Allows you to use search bar if is needed
+ params:
+ - name: placeHolder
+ type: string
+ required: false
+ description: Place holder text
+ - name: button
+ type: string
+ required: true
+ description: Search button text for screen readers
+
+- name: navBar
+ type: object
+ required: false
+ description: NavBar object inlucing menu items. Maximum main menu items are 5 items and each main item can contain 12 submenu items. It is volutary for website and projectWebsite. Can not be used with electronicService.
+ params:
+ - name: darkBackground
+ type: bolean
+ required: false
+ description: Bolean value for dark background
+ - name: classes
+ type: string
+ required: false
+ description: NavBar classes
+ - name: navigation
+ type: array
+ required: false
+ description: list of navigation items
+ params:
+ - name: text
+ type: string
+ required: true
+ description: Text of the navigation item
+ - name: link
+ type: string
+ required: true
+ description: Url of the navigation item anchor. Both `href` and `text` attributes for navigation items need to be provided to create an item.
+ - name: attributes
+ type: object
+ required: false
+ description: HTML attributes (for example data attributes) to add to the navigation item anchor.
+ - name: submenu
+ type: array
+ required: false
+ description: array of submenu items
+ params:
+ - name: text
+ type: string
+ required: true
+ description: Text of the submenu item
+ - name: link
+ type: string
+ required: true
+ description: Url of the submenu item anchor
+
+- name: banner
+ type: object
+ required: false
+ description: Banner object which contain text and info if it is warning banner. It is voluntary for all types of pages.
+ params:
+ - name: text
+ type: string
+ required: true
+ description: Text of banner
+ - name: warning
+ type: bolean
+ required: false
+ description: Bolean value if its warning banner
\ No newline at end of file
diff --git a/src/idsk/components/header-web/macro.njk b/src/idsk/components/header-web/macro.njk
new file mode 100644
index 0000000000..3f6a1e8a7f
--- /dev/null
+++ b/src/idsk/components/header-web/macro.njk
@@ -0,0 +1,3 @@
+{% macro idskHeaderWeb(params) %}
+ {%- include "./template.njk" -%}
+{% endmacro %}
diff --git a/src/idsk/components/header-web/template.njk b/src/idsk/components/header-web/template.njk
new file mode 100644
index 0000000000..d3109ba730
--- /dev/null
+++ b/src/idsk/components/header-web/template.njk
@@ -0,0 +1,332 @@
+{% from "../button/macro.njk" import idskButton %}
+
+{# SLOVAK TRICOLOR #}
+{% set tricolor %}
+
+{% endset %}
+
+{# BRAND BAR #}
+{% set brandBar %}
+{% set brand = params.brand %}
+{% set currentLanguage = "" %}
+{% for language in brand.languages %}
+ {% if language.selected %}
+ {% set currentLanguage = language %}
+ {% endif %}
+{% endfor %}
+
+
+
+
+
+ {% if brand.gestor %}
+
+ {% endif %}
+
+
+
+ {{ currentLanguage.text if currentLanguage else 'Slovenčina'}}
+
+
+
+
+
+
+
+
+
+
+
+
+ Táto stránka je zabezpečená
+
+
+ Buďte pozorní a vždy sa uistite, že zdieľate informácie iba cez zabezpečenú webovú stránku verejnej správy SR. Zabezpečená stránka vždy začína https:// pred názvom domény webového sídla.
+
+
+
+
+
+
+{% endset %}
+
+{# MAIN SECTION #}
+{% set main = params.main %}
+{% set mainButtons %}
+
+ {% if main.loginButton %}
+
+ {{ idskButton({
+ "text": main.loginButton.text if main.loginButton.text else 'Prihlásiť sa',
+ "type": "button",
+ "classes": "idsk-header-web__main--login-loginbtn"
+ }) }}
+
+
+
+
+ {{ main.loginButton.loggedIn.userName if main.loginButton.loggedIn.userName else 'Ing. Jožko Veľký M.A' }}
+
+
+
+
+ {% if main.profileButton %}
+ {{ idskButton({
+ "text": main.profileButton.text if main.profileButton.text else 'Profil',
+ "type": "button",
+ "classes": "idsk-header-web__main--login-profilebtn"
+ }) }}
+ {% endif %}
+ {{ idskButton({
+ "text": main.logoutButton.text if main.logoutButton.text else 'Odhlásiť sa',
+ "type": "button",
+ "classes": "idsk-header-web__main--login-logoutbtn"
+ }) }}
+
+ {% endif %}
+
+ {% if main.secondaryButton and params.headerType !== 'electronicService' %}
+ {{ idskButton({
+ "text": main.secondaryButton.text if main.secondaryButton.text else 'Tlačidlo',
+ "type": "button",
+ "classes": main.secondaryButton.classes if main.secondaryButton.classes
+ }) }}
+ {% endif %}
+
+{% endset %}
+
+{% set searchInput %}
+{% if params.search and params.headerType !== "electronicService" %}
+
+{% endif %}
+{% endset %}
+
+{% set mainSection %}
+
+
+
+
+
+
+
+ {{ searchInput | safe }}
+ {{ mainButtons | safe }}
+
+
+
+
+
+{% endset %}
+
+{# NAV BAR #}
+{% set navBar %}
+{% if params.navBar and params.headerType !== 'electronicService' %}
+
+{% endif %}
+
+{% endset %}
+
+{# BANNER #}
+{% set bannerSection %}
+{% if params.banner %}
+ {% set banner = params.banner %}
+
+{% endif %}
+{% endset %}
+
+
\ No newline at end of file
diff --git a/src/idsk/components/intro-block/intro-block.scss b/src/idsk/components/intro-block/intro-block.scss
index 3ba647fa92..cc948f9d62 100644
--- a/src/idsk/components/intro-block/intro-block.scss
+++ b/src/idsk/components/intro-block/intro-block.scss
@@ -9,7 +9,7 @@
@include govuk-font($size: 19);
.govuk-heading-xl {
- margin-bottom: 0;
+ margin-bottom: 0;
@include mq($from: desktop) {
@include govuk-font($size: 36, $weight: bold);
}
@@ -24,52 +24,74 @@
}
.govuk-body{
- margin-bottom: govuk-spacing(4);
+ margin-bottom: govuk-spacing(4);
@include mq($from: desktop) {
margin-bottom: govuk-spacing(8);
}
-
}
- .app-pane-grey {
+ div.app-pane-grey {
+ @include mq($from: desktop) {
background-color: govuk-colour("light-grey");
+ }
}
- .govuk-grid-column-one-third-from-desktop{
+ .govuk-grid-column-one-third-from-desktop {
@include mq($from: desktop){
- width: calc(33.3333% - 50px);
+ width: calc(33.3333% - 50px);
}
}
- .govuk-heading-m{
- font-size: 24px;
+ .govuk-heading-m {
+ font-size: 24px;
+ margin-top: govuk-spacing(4);
+
+ &.heading-bigger-margin{
+ @include mq($from: desktop) {
+ margin-top: 37px;
+ }
+ }
}
+ & > .govuk-grid-row{
+ @include mq($from: desktop) {
+ display: flex;
+ }
+ }
}
+ .idsk-search-component{
+ margin-bottom: 30px;
+ @include mq($from: desktop) {
+ margin-top: 50px;
+ }
+ }
.idsk-intro-block__list__ul {
- margin-top: 0;
- margin-bottom: govuk-spacing(3);
padding-left: 0;
display: table;
+ margin-top: 0;
+ margin-bottom: govuk-spacing(4);
}
.idsk-intro-block__list__li {
@include govuk-font($size: 16);
display: inline-block;
- margin-right: govuk-spacing(6);
+ margin-right: govuk-spacing(4);
margin-bottom: govuk-spacing(2);
-
- @include mq($from: desktop) {
- margin-right: govuk-spacing(3);
- }
}
.idsk-intro-block__list__a {
white-space: nowrap;
- }
+
+ @include mq($until: tablet) {
+ text-decoration: none;
+ &:hover {
+ text-decoration: underline;
+ }
+ }
+ }
.idsk-intro-block__list__li .govuk-link:active,
.idsk-intro-block__list__li .govuk-link:link {
@@ -77,13 +99,16 @@
}
.idsk-intro-block__side-menu{
+ padding: govuk-spacing(4);
@include mq($from: desktop){
margin-left: govuk-spacing(8);
}
-
- .govuk-heading-s{
+ @include mq($until: tablet) {
+ padding: 0 govuk-spacing(3);
+ }
+ .govuk-heading-s{
@include mq($from: desktop){
font-weight: 400;
margin-bottom: govuk-spacing(2);
@@ -93,14 +118,9 @@
@include mq($until: tablet){
font-weight: 700;
font-size: 18px;
- line-height: 20px;
+ line-height: 20px;
}
}
-
- &.app-pane-grey,
- &.app-pane-blue{
- padding-top: govuk-spacing(3);
- }
}
.idsk-intro-block__side-menu__default__ul {
@@ -128,29 +148,7 @@
}
.idsk-intro-block__side-menu__li {
- padding-bottom: govuk-spacing(3);
- }
-
- .app-pane-blue .idsk-intro-block__side-menu__li:before {
- content: "\2022";
- color: govuk-colour("white");
- display: inline-block;
- margin-left: 0;
- font-size: 40px;
- margin-right: 10px;
- line-height: 20px;
- margin-top: -4px;
- }
-
- .app-pane-grey .idsk-intro-block__side-menu__li:before {
- content: "\2022";
- color: govuk-colour("black");
- display: inline-block;
- margin-left: 0;
- font-size: 40px;
- margin-right: 10px;
- line-height: 20px;
- margin-top: -4px;
+ padding-bottom: govuk-spacing(2);
}
.idsk-intro-block__side-menu__ul .idsk-intro-block__side-menu__li {
@@ -201,7 +199,7 @@
.idsk-intro-block__bottom-menu__li {
display: block;
color: govuk-colour("black");
- padding-bottom: govuk-spacing(2);
+ padding-bottom: govuk-spacing(3);
@include mq($from: desktop) {
display: inline-grid;
@@ -211,39 +209,25 @@
}
.app-pane-grey {
- .govuk-heading-s,
- .idsk-intro-block__side-menu__a,
- .idsk-intro-block__side-menu__li {
+ .govuk-heading-s {
color: govuk-colour("black");
- font-weight: bold;
- }
- .idsk-intro-block__side-menu__text {
- margin-top: govuk-spacing(3);
}
}
- .app-pane-blue {
+ div.app-pane-blue {
+ @include mq($from: desktop) {
background-color: govuk-colour("blue");
- }
-
- .app-pane-blue *{
- color: govuk-colour("white");
}
-
- .app-pane-blue .idsk-intro-block__side-menu__span .idsk-intro-block__side-menu__circle {
- fill: govuk-colour("white");
}
.app-pane-blue {
.govuk-heading-l,
+ .govuk-heading-s,
.idsk-intro-block__side-menu__a,
.idsk-intro-block__side-menu__li {
+ @include mq($from: desktop) {
color: govuk-colour("white");
- font-weight: bold;
+ }
}
}
-
- .app-pane-blue .govuk-heading-l {
- color: govuk-colour("white");
- }
}
diff --git a/src/idsk/components/intro-block/template.njk b/src/idsk/components/intro-block/template.njk
index 735b96b330..02f58a15f1 100644
--- a/src/idsk/components/intro-block/template.njk
+++ b/src/idsk/components/intro-block/template.njk
@@ -2,7 +2,7 @@
-
+
{% if params.mainTitle %} {{ params.mainTitle | safe }} {% else %} Dozvedieť sa viac o ministerstve . {% endif %}
@@ -15,26 +15,27 @@
{% from "../../components/search-component/macro.njk" import idskSearchComponent %}
{{ idskSearchComponent({
id : 'intro-block-search'
- }) }}
-
+ }) }}
+ {% if params.bottomMenu %}
+
+ {% endif %}
{% endif %}
-
+
{{ params.sideMenuTitle if params.sideMenuTitle else "Populárny obsah"}}
@@ -48,4 +49,4 @@
-
\ No newline at end of file
+
diff --git a/src/idsk/components/search-component/search-component.scss b/src/idsk/components/search-component/search-component.scss
index 2e362c4650..5966a63322 100644
--- a/src/idsk/components/search-component/search-component.scss
+++ b/src/idsk/components/search-component/search-component.scss
@@ -51,6 +51,7 @@
.idsk-search-component__button {
width: 44px;
height: 40px;
+ margin-bottom: 0;
background-color: govuk-colour("blue");
box-shadow: none;
diff --git a/src/idsk/components/timeline/template.njk b/src/idsk/components/timeline/template.njk
index adc2948b95..75e7e152e3 100644
--- a/src/idsk/components/timeline/template.njk
+++ b/src/idsk/components/timeline/template.njk
@@ -32,17 +32,21 @@