diff --git a/app/assets/images/cookies-page-pattern/cookies-page.png b/app/assets/images/cookies-page-pattern/cookies-page.png new file mode 100644 index 0000000000..656d8715cb Binary files /dev/null and b/app/assets/images/cookies-page-pattern/cookies-page.png differ diff --git a/app/assets/images/header-web/logo-mirri-biele.svg b/app/assets/images/header-web/logo-mirri-biele.svg new file mode 100644 index 0000000000..937f76824d --- /dev/null +++ b/app/assets/images/header-web/logo-mirri-biele.svg @@ -0,0 +1,17 @@ + + + + + + + + + + + + + + + + + diff --git a/app/assets/images/header-web/logo-mirri-farebne.svg b/app/assets/images/header-web/logo-mirri-farebne.svg new file mode 100644 index 0000000000..e6f6a6a810 --- /dev/null +++ b/app/assets/images/header-web/logo-mirri-farebne.svg @@ -0,0 +1,281 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/app/assets/images/header-web/logo-mirri-small-biele.svg b/app/assets/images/header-web/logo-mirri-small-biele.svg new file mode 100644 index 0000000000..6f6be9389d --- /dev/null +++ b/app/assets/images/header-web/logo-mirri-small-biele.svg @@ -0,0 +1,8 @@ + +mirri.gov.sk + + + + + + diff --git a/app/assets/images/header-web/logo-mirri-small-farebne.svg b/app/assets/images/header-web/logo-mirri-small-farebne.svg new file mode 100644 index 0000000000..54a2a91f04 --- /dev/null +++ b/app/assets/images/header-web/logo-mirri-small-farebne.svg @@ -0,0 +1,18 @@ + + + mirri.gov.sk + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/app/assets/images/header-web/profile.png b/app/assets/images/header-web/profile.png new file mode 100644 index 0000000000..6bea98703b Binary files /dev/null and b/app/assets/images/header-web/profile.png differ diff --git a/app/assets/images/header-web/profile.svg b/app/assets/images/header-web/profile.svg new file mode 100644 index 0000000000..69fc3d050d --- /dev/null +++ b/app/assets/images/header-web/profile.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/app/assets/scss/graph.scss b/app/assets/scss/graph.scss index 0f3c8fff99..b8696f791d 100644 --- a/app/assets/scss/graph.scss +++ b/app/assets/scss/graph.scss @@ -138,10 +138,6 @@ box-shadow: 0 0 0 10px govuk-colour("mid-grey"); } - .govuk-radios__item { - margin-bottom: 0; - } - .idsk-graph .govuk-radios .govuk-radios__item:hover .govuk-radios__input:focus + .govuk-radios__label::before { box-shadow: 0 0 0 4px govuk-colour("yellow"), 0 0 0 10px govuk-colour("mid-grey"); } diff --git a/app/views/header-web/index.njk b/app/views/header-web/index.njk new file mode 100644 index 0000000000..b27137884b --- /dev/null +++ b/app/views/header-web/index.njk @@ -0,0 +1,112 @@ +{% extends "layout.njk" %} + + +{% block header %} + {% from "../../../src/idsk/components/header-web/macro.njk" import idskHeaderWeb %} + {{ idskHeaderWeb({ + headerType: "website", + brand: { + gestor: true, + languages: [ + { + text: "Slovenčina", + selected: true, + link: "#" + }, + { + text: "Deutsch", + link: "#" + }, + { + text: "English", + link: "#" + }, + { + text: "Español", + link: "#" + } + ] + }, + + main: { + logoSrc: "/public/assets/images/header-web/logo-mirri-farebne.svg", + title: "IDSK SK", + loginButton: true, + profileButton: true, + secondaryButton: false + }, + + search: true, + + navBar: { + navigation: [ + { + text: 'Občan', + submenu: [ + { + link: '#1', + text: 'Eurofondy' + }, + { + link: '#2', + text: 'Regionálny rozvoj' + }, + { + link: '#3', + text: 'Informatizácia' + }, + { + link: '#4', + text: 'Investície' + } + ] + }, + { + text: 'Podnikateľ', + submenu: [ + { + link: '#1', + text: 'Eurofondy' + }, + { + link: '#2', + text: 'Regionálny rozvoj' + }, + { + link: '#3', + text: 'Informatizácia' + }, + { + link: '#4', + text: 'Investície' + }, + { + link: '#3', + text: 'Informatizácia' + }, + { + link: '#4', + text: 'Investície' + } + ] + }, + { + link: '#3', + text: 'Dôchodca' + }, + { + link: '#4', + text: 'Elektronické služby' + }, + { + link: '#5', + text: 'Inovácie' + } + ] + }, + + banner: { + text: "Nová verzia ID-SK Frontend nahradzuje pôvodnú verziu." + } + }) }} +{% endblock %} diff --git a/app/views/komponenty/examples/exampleIntroBlock3.njk b/app/views/komponenty/examples/exampleIntroBlock3.njk new file mode 100644 index 0000000000..3b7de544a4 --- /dev/null +++ b/app/views/komponenty/examples/exampleIntroBlock3.njk @@ -0,0 +1,25 @@ +{% from "../../../../src/idsk/components/intro-block/macro.njk" import idskIntroBlock %} +{{ idskIntroBlock({ + sideMenu: [ + { + item:"O Eurofondoch", + href:"#"}, + { + item:"Aktuality", + href:"#" + }, + { + item:"O Ministerstve", + href:"#" + }, + { + item:"Aktuálne výzvy", + href:"#" + }, + { + item:"Dokumenty", + href:"#" + }], + classBackground: "app-pane-grey", + searchEnabled: true +})}} diff --git a/app/views/komponenty/examples/graf1.njk b/app/views/komponenty/examples/graf1.njk index b58e2208b6..ec5824c843 100644 --- a/app/views/komponenty/examples/graf1.njk +++ b/app/views/komponenty/examples/graf1.njk @@ -29,16 +29,12 @@ downloadTitle: "Stiahnuť údaje", items: [ { - title: "ako CSV (54 kB)", - value: "/public/assets/data/PCR_denne_kumulat_AG-denne_kumulat.csv" + title: "ako CSV", + value: "https://raw.githubusercontent.com/Institut-Zdravotnych-Analyz/covid19-data/main/DailyStats/OpenData_Slovakia_Covid_DailyStats.csv" }, { - title: "ako JSON (54 kB)", - value: "/public/assets/data/PCR_denne_kumulat_AG-denne_kumulat.json" - }, - { - title: "ako XLSX (54 kB)", - value: "/public/assets/data/PCR_denne_kumulat_AG-denne_kumulat.xlsx" + title: "ako XLSX", + value: "https://github.com/Institut-Zdravotnych-Analyz/covid19-data/blob/main/DailyStats/OpenData_Slovakia_Covid_DailyStats.xlsx?raw=true" } ] }, @@ -85,7 +81,7 @@ - +
@@ -94,7 +90,6 @@
- {{ govukTabs({ "attributes": { "data-activetab": params.activeTab @@ -173,4 +168,4 @@ {% endif %} - \ No newline at end of file + diff --git a/app/views/komponenty/intro-block.njk b/app/views/komponenty/intro-block.njk index c104c6189a..521c18047c 100644 --- a/app/views/komponenty/intro-block.njk +++ b/app/views/komponenty/intro-block.njk @@ -36,6 +36,9 @@
  • Populárny obsah v úvodnom bloku
  • +
  • + Úvodný blok bez návrhov vyhľadávania +
  • Z čoho sa skladá úvodný blok?

    Skladá sa z:

    @@ -87,6 +90,15 @@ {{exampleComponentHtml | safe}} +
    +

    Úvodný blok bez návrhov vyhľadávania

    +
    + {% set exampleComponentHtml %} + {% include "../komponenty/examples/exampleIntroBlock3.njk" %} + {% endset %} + {{exampleComponentHtml | safe}} +
    +
    @@ -98,4 +110,4 @@
    -{% endblock %} \ No newline at end of file +{% endblock %} diff --git a/app/views/vzory/graph-sample.njk b/app/views/vzory/graph-sample.njk index 03789f58a9..72c6f5d2ac 100644 --- a/app/views/vzory/graph-sample.njk +++ b/app/views/vzory/graph-sample.njk @@ -14,7 +14,7 @@ - + @@ -31,7 +31,9 @@ {# var $vaccinationsByRegion #} - + + + + {% endblock %} {% block skipLink %} - {{ idskSkipLink({ - href: '#main-content', - text: 'Preskočiť na hlavný obsah', - classes: 'idsk-skip-link--sticky' - }) }} + {{ idskSkipLink({ + href: '#main-content', + text: 'Preskočiť na hlavný obsah', + classes: 'idsk-skip-link--sticky' + }) }} {% endblock %} {% block header %} @@ -141,99 +154,92 @@ logoSmallWhite: "logo-mirri-small-biele.svg", logoGrid: "govuk-grid-column-one-half govuk-grid-column-one-third-from-desktop", navigation: [ - { - link: '#1', - text: 'Eurofondy' - }, - { - link: '#2', - text: 'Regionálny rozvoj', - active: true - }, - { - link: '#3', - text: 'Informatizácia' - }, - { - link: '#4', - text: 'Investície' - }, - { - link: '#5', - text: 'Inovácie' - } + { + link: '#1', + text: 'Eurofondy' + }, + { + link: '#2', + text: 'Regionálny rozvoj', + active: true + }, + { + link: '#3', + text: 'Informatizácia' + }, + { + link: '#4', + text: 'Investície' + }, + { + link: '#5', + text: 'Inovácie' + } ], language: { - current: { - text: "slovenčina", - flag: "slovakia-flag-icon-16.png" - }, - choices: [ - { - flag: "united-states-of-america-flag-icon-16.png", - text: "english", - link: "#" - }, - { - flag: "germany-flag-icon-16.png", - text: "german", - link: "#" - } - ] - }, - socials: [ - { - icon: "fab fa-instagram", - link: "#", - text: "Instagram" - }, - { - icon: "fab fa-linkedin-in", - link: "#", - text: "Linkedin" - }, + current: { + text: "slovenčina", + flag: "slovakia-flag-icon-16.png" + }, + choices: [ { - icon: "fab fa-facebook-f", - link: "#", - text: "Facebook" + flag: "united-states-of-america-flag-icon-16.png", + text: "english", + link: "#" }, { - icon: "fab fa-twitter", - link: "#", - text: "Twitter" + flag: "germany-flag-icon-16.png", + text: "german", + link: "#" } - ] -}) }} -{% endblock %} - -{% block beforeContent %} - {{ govukBreadcrumbs({ - "items": [ - { text: ' ID-SK frontend', href: '/' + legacyQuery } + ] + }, + socials: [ + { + icon: "fab fa-instagram", + link: "#", + text: "Instagram" + }, + { + icon: "fab fa-linkedin-in", + link: "#", + text: "Linkedin" + }, + { + icon: "fab fa-facebook-f", + link: "#", + text: "Facebook" + }, + { + icon: "fab fa-twitter", + link: "#", + text: "Twitter" + } ] }) }} {% endblock %} {% block content %} {{ idskIntroBlock({ + classBackground: "app-pane-grey", mainTitleLinkLabel: "viac o ministerstve", bottomMenu: [ { - item:"Eurofondy", + item:"Eurofondy", href:"#" - }, + }, { item:"Kontakty", href:"#" - }, + }, { item:"Informatizácia", href:"#" - }, - { + }, + { item:"Investície", href:"#" - }, + }, { item:"O ministerstve", href:"#" @@ -241,25 +247,26 @@ ], searchEnabled:"true", sideMenu: [ - { - item:"O Eurofondoch", - href:"#"}, - { - item:"Aktuality", - href:"#" - }, - { - item:"O Ministerstve", - href:"#" - }, - { - item:"Aktuálne výzvy", - href:"#" - }, - { - item:"Dokumenty", - href:"#" - }] + { + item:"O Eurofondoch", + href:"#" + }, + { + item:"Aktuality", + href:"#" + }, + { + item:"O Ministerstve", + href:"#" + }, + { + item:"Aktuálne výzvy", + href:"#" + }, + { + item:"Dokumenty", + href:"#" + }] }) }}
    @@ -280,9 +287,9 @@
    - {{ idskCard({ - "type": "secondary", - "imgSrc": "/public/assets/images/examples/ministerstvo-aktuality-cover.png", + {{ idskCard({ + "type": "secondary", + "imgSrc": "/public/assets/images/examples/ministerstvo-aktuality-cover.png", "link": "#", "heading": "Podpora najmenej rozvinutých okresov: Nové výzvy po novom!", "description": "Lorem ipsum dolor sit amet, consenctetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.", @@ -291,9 +298,9 @@ }) }}
    - {{ idskCard({ - "type": "secondary", - "imgSrc": "/public/assets/images/examples/ministerstvo-aktuality-cover.png", + {{ idskCard({ + "type": "secondary", + "imgSrc": "/public/assets/images/examples/ministerstvo-aktuality-cover.png", "link": "#", "heading": "Podpora najmenej rozvinutých okresov: Nové výzvy po novom!", "description": "Lorem ipsum dolor sit amet, consenctetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.", @@ -302,36 +309,37 @@ }) }}
    - {{ idskCard({ + {{ idskCard({ "type": "secondary", - "imgSrc": "/public/assets/images/examples/ministerstvo-aktuality-cover.png", + "imgSrc": "/public/assets/images/examples/ministerstvo-aktuality-cover.png", "link": "#", "heading": "Podpora najmenej rozvinutých okresov: Nové výzvy po novom!", "description": "Lorem ipsum dolor sit amet, consenctetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.", "date": { "date": "1.7.2020", "link": "#" }, "tags": [ { "tag": "Tag 1", "link": "#" }, { "tag": "Tag 2", "link": "#" } ] }) }} -
    +

    Eurofondy

    - Všetky informácie o príprave, revízii a realizácii Európskych štrukturálnych fondov (EŠIF) v podmienkach SR na jednom mieste. Viac informácií nájdete na podstránke Eurofondy. + Všetky informácie o príprave, revízii a realizácii Európskych štrukturálnych fondov (EŠIF) v podmienkach SR na + jednom mieste. Viac informácií nájdete na podstránke Eurofondy.

    {{ idskCrossroad({ - "columns": 2, - "classes": "govuk-clearfix", - "items": [ - { "title": 'Implementácia EŠIF', "subtitle": 'Všetky informácie o eurofondoch na jednom mieste.', "link": '#' }, - { "title": 'Hodnotenie EŠIF', "subtitle": 'Všetky informácie o eurofondoch na jednom mieste.', "link": '#' }, - { "title": 'Monitorovanie EŠIF', "subtitle": 'Všetky informácie o eurofondoch na jednom mieste.', "link": '#' }, - { "title": 'IT monitorovací systém pre EŠIF', "subtitle": 'Všetky informácie o eurofondoch na jednom mieste.', "link": '#' } - ] + "columns": 2, + "classes": "govuk-clearfix", + "items": [ + { "title": 'Implementácia EŠIF', "subtitle": 'Všetky informácie o eurofondoch na jednom mieste.', "link": '#' }, + { "title": 'Hodnotenie EŠIF', "subtitle": 'Všetky informácie o eurofondoch na jednom mieste.', "link": '#' }, + { "title": 'Monitorovanie EŠIF', "subtitle": 'Všetky informácie o eurofondoch na jednom mieste.', "link": '#' }, + { "title": 'IT monitorovací systém pre EŠIF', "subtitle": 'Všetky informácie o eurofondoch na jednom mieste.', "link": '#' } + ] }) }}
    @@ -368,10 +376,10 @@

    Vedenie ministerstva

    - {{ idskCard({ - "type": "profile-horizontal", + {{ idskCard({ + "type": "profile-horizontal", "link": "#", - "imgSrc": "/public/assets/images/examples/the-pooh-bear.jpg", + "imgSrc": "/public/assets/images/examples/the-pooh-bear.jpg", "heading": "Macko Pú", "description": "Štátny tajomník medu a radosti", "quote": "“Aký je deň?” spýtal sa Pú. “Je dnes,” odpovedalo prasiatko. “Môj najobľúbenejší deň,” povedal Pú." @@ -384,7 +392,8 @@

    Informatizácia

    -

    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. Viac informácií nájdete na podstránke Informatizácia.

    +

    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. Viac informácií nájdete na podstránke Informatizácia.

    @@ -431,7 +440,8 @@

    Investície

    - 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. Viac informácií nájdete na podstránke Informatizácia. + 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. Viac informácií nájdete na podstránke Informatizácia.

    @@ -446,7 +456,7 @@ }) }}
    - +
    @@ -470,13 +480,13 @@ }) }}
    - +

    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.

    + Cookies stránka + +

    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. +
    + + + +
    +
    + {% 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
    • +
    + + +

    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 %} +
    + {% if brand.gestor.nationalEmblem %} +
    + {% endif %} + + Oficiálna stránka + {% if brand.gestor.gestorLink %} + + {{ brand.gestor.gestorLink.text if brand.gestor.gestorLink.text else 'slovenského e-govermentu' }} + + {% else %} + + {% endif %} + + {# MOBILE VERSION GESTOR LINK/BUTTON #} + + SK + {% if brand.gestor.gestorLink %} + + {{ brand.gestor.gestorLink.mobileText if brand.gestor.gestorLink.mobileText else 'e-gov' }} + + {% else %} + + {% endif %} + +
    + {% endif %} + +
    + + +
    +
    +
    + +
    +
    +
    +

    + Doména gov.sk je oficálna +

    +

    + Toto je oficiálna webová stránka orgánu verejnej moci Slovenskej republiky. Oficiálne stránky využívajú najmä doménu gov.sk. Odkazy na jednotlivé webové sídla orgánov verejnej moci nájdete na tomto odkaze. +

    +
    +
    +

    + 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 %} + + {% 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 %} +
    +
    +
    +
    +
    + + {% if params.headerType == 'website' or params.headerType == 'projectWebsite' %} + {% if main.logoSrc %} + + {% endif %} + {% if main.title %} +

    {{ main.title }}

    + {% endif %} + {% endif %} + + {% if params.headerType == 'electronicService' %} +

    {{ main.title if main.title else 'Title text' }}

    + {% endif %} +
    + + {% if params.navBar and params.headerType !== 'electronicService' %} + + {% elif params.headerType !== 'electronicService' %} + + {% elif main.loginButton %} + + {% endif %} +
    +
    + +
    +
    + {{ searchInput | safe }} + {{ mainButtons | safe }} +
    +
    +
    +
    +
    +{% endset %} + +{# NAV BAR #} +{% set navBar %} +{% if params.navBar and params.headerType !== 'electronicService' %} +
    +{% endif %} +
    +
    +
    +
    + {{ searchInput | safe }} +
    + {% if params.navBar and params.headerType !== 'electronicService' %} + {% set navigation = params.navBar.navigation %} +
    + +
    + {% endif %} +
    + + {% if main.loginButton or main.secondaryButton %} +
    +
    + {{ mainButtons | safe }} +
    +
    + {% endif %} +
    +
    +{% endset %} + +{# BANNER #} +{% set bannerSection %} +{% if params.banner %} + {% set banner = params.banner %} +
    +
    +
    +
    + + {% if banner.warning %} +
    + {% endif %} + {{ banner.text if banner.text else 'It was popularised in the 1960s with the release of Letraset' }} +
    +
    +
    +
    +
    +
    +{% endif %} +{% endset %} + +
    + {{ bannerSection | safe }} + {{ tricolor | safe }} + {{ brandBar | safe }} + {{ mainSection | safe }} + {{ navBar | safe }} +
    \ 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 @@
    -

    +

    {{ params.headline if params.headline else "Vitajte na MIRRI SR"}}

    {% 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 @@
    {% endif %} -
    +
    {{ event.date }}
    - {{ event.time }} + {{ event.time }}
    - {{ event.caption[0].text }} + {% if event.caption[0].href %} + {{ event.caption[0].text }} + {% else %} +

    {{ event.caption[0].text }}

    + {% endif %}
    {% endfor %} @@ -53,4 +57,4 @@
    -
    \ No newline at end of file +