From 72364a96c8a9017ff249c4fd7680d6d7f65c3d13 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Adri=C3=A1n=20K=C3=B3=C5=A1a?= Date: Tue, 7 Sep 2021 14:47:11 +0200 Subject: [PATCH 01/33] init commit --- src/idsk/components/header-web/_header-web.scss | 7 +++++++ src/idsk/components/header-web/header-web.js | 0 src/idsk/components/header-web/header-web.yaml | 0 src/idsk/components/header-web/macro.njk | 0 src/idsk/components/header-web/template.njk | 0 5 files changed, 7 insertions(+) create mode 100644 src/idsk/components/header-web/_header-web.scss create mode 100644 src/idsk/components/header-web/header-web.js create mode 100644 src/idsk/components/header-web/header-web.yaml create mode 100644 src/idsk/components/header-web/macro.njk create mode 100644 src/idsk/components/header-web/template.njk 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..c56ea168a3 --- /dev/null +++ b/src/idsk/components/header-web/_header-web.scss @@ -0,0 +1,7 @@ +@import "../../../govuk/base"; +@import "../../../govuk/helpers/typography"; + +@include govuk-exports("idsk/component/header-web") { + + $idsk-header-logo-height: 40px; +} \ No newline at end of file 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..e69de29bb2 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..e69de29bb2 diff --git a/src/idsk/components/header-web/macro.njk b/src/idsk/components/header-web/macro.njk new file mode 100644 index 0000000000..e69de29bb2 diff --git a/src/idsk/components/header-web/template.njk b/src/idsk/components/header-web/template.njk new file mode 100644 index 0000000000..e69de29bb2 From bb26aa8f3c2808b5925e4af33aea1db9f69e89f3 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Adri=C3=A1n=20K=C3=B3=C5=A1a?= Date: Wed, 8 Sep 2021 10:22:39 +0200 Subject: [PATCH 02/33] wip new header --- app/views/header-web/index.njk | 7 +++++++ src/idsk/components/_all.scss | 1 + src/idsk/components/header-web/_header-web.scss | 14 ++++++++++++++ src/idsk/components/header-web/macro.njk | 3 +++ src/idsk/components/header-web/template.njk | 5 +++++ 5 files changed, 30 insertions(+) create mode 100644 app/views/header-web/index.njk diff --git a/app/views/header-web/index.njk b/app/views/header-web/index.njk new file mode 100644 index 0000000000..b40e058102 --- /dev/null +++ b/app/views/header-web/index.njk @@ -0,0 +1,7 @@ +{% extends "layout.njk" %} + + +{% block header %} + {% from "../../../src/idsk/components/header-web/macro.njk" import idskHeaderWeb %} + {{ idskHeaderWeb() }} +{% endblock %} 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 index c56ea168a3..476d2fc105 100644 --- a/src/idsk/components/header-web/_header-web.scss +++ b/src/idsk/components/header-web/_header-web.scss @@ -4,4 +4,18 @@ @include govuk-exports("idsk/component/header-web") { $idsk-header-logo-height: 40px; + + .idsk-header-web{ + + &::before { + content: ""; + display: block; + width: 100%; + height: 3px; + background-image: linear-gradient(to right, #ffffff 0%, #ffffff 33.3%, #003183 33.3%, #003183 66.6%, #d0190f 66.6%, #d0190f 100%); + /* equivalent to (to right, white, white 50%, black 50%, black) */ + background-size: 150px 100%; + background-repeat: repeat; + } + } } \ No newline at end of file diff --git a/src/idsk/components/header-web/macro.njk b/src/idsk/components/header-web/macro.njk index e69de29bb2..3f6a1e8a7f 100644 --- a/src/idsk/components/header-web/macro.njk +++ 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 index e69de29bb2..799c0aacaf 100644 --- a/src/idsk/components/header-web/template.njk +++ b/src/idsk/components/header-web/template.njk @@ -0,0 +1,5 @@ +
+ + +
\ No newline at end of file From ef8e1fbb3ac3f8c96239601f9a86433c3517234c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Adri=C3=A1n=20K=C3=B3=C5=A1a?= Date: Fri, 10 Sep 2021 14:15:04 +0200 Subject: [PATCH 03/33] wip web header --- app/views/header-web/index.njk | 27 ++- src/idsk/all.js | 7 + .../components/header-web/_header-web.scss | 98 ++++++++ src/idsk/components/header-web/header-web.js | 218 ++++++++++++++++++ .../components/header-web/header-web.yaml | 32 +++ src/idsk/components/header-web/template.njk | 40 +++- 6 files changed, 420 insertions(+), 2 deletions(-) diff --git a/app/views/header-web/index.njk b/app/views/header-web/index.njk index b40e058102..7106b44003 100644 --- a/app/views/header-web/index.njk +++ b/app/views/header-web/index.njk @@ -3,5 +3,30 @@ {% block header %} {% from "../../../src/idsk/components/header-web/macro.njk" import idskHeaderWeb %} - {{ idskHeaderWeb() }} + {{ idskHeaderWeb({ + brand: { + languages: [ + { + text: "Slovenčina", + selected: true, + link: "#" + }, + { + text: "Deutsch", + selected: false, + link: "#" + }, + { + text: "English", + selected: false, + link: "#" + }, + { + text: "Español", + selected: false, + link: "#" + } + ] + } + }) }} {% endblock %} 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/header-web/_header-web.scss b/src/idsk/components/header-web/_header-web.scss index 476d2fc105..6ea1c4b46a 100644 --- a/src/idsk/components/header-web/_header-web.scss +++ b/src/idsk/components/header-web/_header-web.scss @@ -3,6 +3,14 @@ @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{ @@ -17,5 +25,95 @@ background-size: 150px 100%; background-repeat: repeat; } + + &__brand { + + padding: 10px 0; + background-color: $idsk-header-background-secondary; + color: $idsk-header-text-secondary; + + .govuk-body-s, + .govuk-link{ + margin-bottom: 0; + color: $idsk-header-text-secondary; + } + } + } + + /// language selector + .idsk-header-web__brand-language { + @include govuk-font($size: 19); + + padding: 0 govuk-spacing(3) govuk-spacing(1) 0; + + &--active .idsk-header-extended__language-button::after { + transition: transform 0.2s; + transform: rotate(180deg); + } + + &-button { + @include govuk-font($size: 16); + + float: right; + background: none; + border: none; + padding-right: govuk-spacing(6); + color: $idsk-header-text-secondary; + + &:focus { + @include govuk-focused-text; + + outline: none; + } + + &:after { + position: absolute; + margin-top: 8px; + margin-left: govuk-spacing(2); + border-style: solid; + border-width: 5px 5px 0; + border-color: $idsk-header-text-secondary transparent transparent; + content: ""; + transition: transform 0.2s; + } + } + + &-list { + display: none; + + list-style: none; + padding: 0; + margin: 0; + text-align: left; + margin-top: 11px; + background-color: govuk-colour("white"); + + &--active { + display: block; + position: absolute; + width: 150px; + box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.15); + border-radius: 8px; + } + + &-item { + padding: govuk-spacing(2); + } + + &-link { + color: $idsk-header-text-secondary; + display: block; + text-decoration: none; + + &:hover { + text-decoration: underline; + } + + &:focus, + &:active { + @include govuk-focused-text; + } + } } + } } \ No newline at end of file diff --git a/src/idsk/components/header-web/header-web.js b/src/idsk/components/header-web/header-web.js index e69de29bb2..8b904a3088 100644 --- a/src/idsk/components/header-web/header-web.js +++ b/src/idsk/components/header-web/header-web.js @@ -0,0 +1,218 @@ +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; + this.$lastMenuElement = ''; + this.$firstMenuElement = ''; +} + +HeaderWeb.prototype.init = function () { + + var $module = this.$module; + // check for module + if (!$module) { + return; + } + + // check for search component + var $searchComponents = $module.querySelectorAll('.idsk-header-extended__search'); + if ($searchComponents) { + nodeListForEach($searchComponents, function ($searchComponent) { + $searchComponent.addEventListener('change', this.handleSearchChange.bind(this)) + // trigger change event + $searchComponent.dispatchEvent(new Event('change')); + }.bind(this)) + } + + // check for language switcher + var $toggleLanguageSwitchers = $module.querySelectorAll('.idsk-header-web__brand-language-button'); + if ($toggleLanguageSwitchers) { + // Handle $toggleLanguageSwitcher click events + nodeListForEach($toggleLanguageSwitchers, function ($toggleLanguageSwitcher) { + $toggleLanguageSwitcher.addEventListener('click', this.handleLanguageSwitcherClick.bind(this)); + $toggleLanguageSwitcher.addEventListener('focus', this.handleLanguageSwitcherClick.bind(this)); + }.bind(this)) + + } + + // check for menu items + var $menuItems = $module.querySelectorAll('.idsk-header-extended__link'); + if ($menuItems) { + // Handle $menuItem click events + nodeListForEach($menuItems, function ($menuItem) { + $menuItem.addEventListener('click', this.handleSubmenuClick.bind(this)); + $menuItem.addEventListener('focus', this.handleSubmenuClick.bind(this)); + }.bind(this)) + } + + // check for menu button and close menu button + var $hamburgerMenuButton = $module.querySelector('.idsk-js-header-extended-side-menu'); + var $closeMenuButton = $module.querySelector('.idsk-header-extended__mobile-close'); + if ($hamburgerMenuButton && $closeMenuButton) { + this.initMobileMenuTabbing(); + $hamburgerMenuButton.addEventListener('click', this.showMobileMenu.bind(this)); + $closeMenuButton.addEventListener('click', this.hideMobileMenu.bind(this)); + } + + window.addEventListener('scroll', this.scrollFunction.bind(this)); + + $module.boundCheckBlurMenuItemClick = this.checkBlurMenuItemClick.bind(this); + + // check for cookies + + if (!(window.localStorage.getItem('acceptedCookieBanner'))) { + $module.classList.add('idsk-header-extended--cookie'); + var $cookieBanner = document.querySelector('.idsk-cookie-banner'); + + // scroll handler + window.addEventListener('scroll', function() { + var headerPosition = document.body.getBoundingClientRect().top; + var cookieBannerHeight = $cookieBanner.offsetHeight; + if(headerPosition < (-cookieBannerHeight)){ + $module.classList.remove('idsk-header-extended--cookie'); + $module.style.top = '0px'; + }else{ + $module.classList.add('idsk-header-extended--cookie'); + $module.style.top = cookieBannerHeight.toString() + 'px'; + } + }); + + // cookie resize handler + var resizeObserver = new ResizeObserver(entries => { + $module.style.top = $cookieBanner.offsetHeight.toString() + 'px'; + }); + + resizeObserver.observe($cookieBanner); + + } + +} + +/** + * Hide label if search input is not empty + * @param {object} e + */ +HeaderWeb.prototype.handleSearchChange = function (e) { + var $searchInput = e.target || e.srcElement; + var $search = $searchInput.closest('.idsk-header-extended__search') + var $searchLabel = $search.querySelector('label') + if ($searchInput.value) { + $searchLabel.classList.add('idsk-header-extended__search-input--focus') + } else { + $searchLabel.classList.remove('idsk-header-extended__search-input--focus') + } +} + +/** + * Handle open/hide language switcher + * @param {object} e + */ +HeaderWeb.prototype.handleLanguageSwitcherClick = function (e) { + var $toggleButton = e.target || e.srcElement; + //var $target = $toggleButton.closest('.idsk-header-extended__language'); + var $languageList = $toggleButton.querySelector('.idsk-header-web__brand-language-list'); + toggleClass($languageList, 'idsk-header-web__brand-language-list--active'); +} + +/** + * Handle open/hide submenu + * @param {object} e + */ +HeaderWeb.prototype.handleSubmenuClick = function (e) { + var $srcEl = e.target || e.srcElement; + var $toggleButton = $srcEl.closest('.idsk-header-extended__navigation-item'); + var $currActiveList = this.$module.querySelectorAll('.idsk-header-extended__navigation-item--active'); + + if ($currActiveList.length > 0) { + $currActiveList[0].classList.remove('idsk-header-extended__navigation-item--active'); + } + toggleClass($toggleButton, 'idsk-header-extended__navigation-item--active'); + + document.addEventListener('click', this.$module.boundCheckBlurMenuItemClick, true); +} + +/** + * handle click outside menu or "blur" the item link + */ +HeaderWeb.prototype.checkBlurMenuItemClick = function () { + var $currActiveList = this.$module.querySelectorAll('.idsk-header-extended__navigation-item--active'); + $currActiveList[0].classList.remove('idsk-header-extended__navigation-item--active'); + document.removeEventListener('click', this.$module.boundCheckBlurMenuItemClick, true); +} + +/** + * Show mobile menu + * @param {object} e + */ +HeaderWeb.prototype.showMobileMenu = function (e) { + var $hamburgerMenuButton = this.$module.querySelector('.idsk-js-header-extended-side-menu'); + + this.$module.classList.add("idsk-header-extended--show-mobile-menu"); + document.getElementsByTagName("body")[0].style.overflow = "hidden"; + if (document.activeElement == $hamburgerMenuButton) { + this.$lastMenuElement.focus(); + } +} +/** + * Hide mobile menu + * @param {object} e + */ +HeaderWeb.prototype.hideMobileMenu = function (e) { + var $hamburgerMenuButton = this.$module.querySelector('.idsk-js-header-extended-side-menu'); + + this.$module.classList.remove("idsk-header-extended--show-mobile-menu"); + document.getElementsByTagName("body")[0].style.overflow = "visible"; + $hamburgerMenuButton.focus(); +} + +/** + * Create loop in mobile menu for tabbing elements + */ +HeaderWeb.prototype.initMobileMenuTabbing = function () { + //Get header extended mobile menu focusable elements + var $headerExtended = this.$module.querySelectorAll('.idsk-header-extended__mobile')[0]; + var $mobileMenuElements = $headerExtended.querySelectorAll('a[href]:not([disabled]), button:not([disabled]), textarea:not([disabled]), input[type="text"]:not([disabled]), input[type="radio"]:not([disabled]), input[type="checkbox"]:not([disabled]), select:not([disabled])'); + this.$firstMenuElement = $mobileMenuElements[0]; + this.$lastMenuElement = $mobileMenuElements[$mobileMenuElements.length - 1]; + var KEYCODE_TAB = 9; + + document.addEventListener('keydown', function (e) { + var isTabPressed = (e.key === 'Tab' || e.keyCode === KEYCODE_TAB); + + if (!isTabPressed) { + return; + } + + if (e.shiftKey) { // shift + tab + if (document.activeElement === this.$firstMenuElement) { + this.$lastMenuElement.focus(); + e.preventDefault(); + } + } else if (document.activeElement === this.$lastMenuElement) { // tab + this.$firstMenuElement.focus(); + e.preventDefault(); + } + + }.bind(this)); +} + +/** + * When the user scrolls down from the top of the document, resize the navbar's padding and the logo + */ +HeaderWeb.prototype.scrollFunction = function () { + var $module = this.$module; + + if (document.body.scrollTop > 80 || document.documentElement.scrollTop > 80) { + $module.classList.add('idsk-header-extended--shrink'); + } else if (document.body.scrollTop < 10 && document.documentElement.scrollTop < 10) { + $module.classList.remove('idsk-header-extended--shrink'); + } +} + +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 index e69de29bb2..48255c1421 100644 --- a/src/idsk/components/header-web/header-web.yaml +++ b/src/idsk/components/header-web/header-web.yaml @@ -0,0 +1,32 @@ +params: +- 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: brand + type: object + required: false + description: BrandBar object including language selector + params: + - 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 + \ No newline at end of file diff --git a/src/idsk/components/header-web/template.njk b/src/idsk/components/header-web/template.njk index 799c0aacaf..eb91b520f0 100644 --- a/src/idsk/components/header-web/template.njk +++ b/src/idsk/components/header-web/template.njk @@ -1,5 +1,43 @@ +{# brand bar #} +{% set brandBar %} + {% set brand = params.brand %} + {% for language in brand.languages|sort(attribute='text') %} + {% if language.selected %} + {% set currentLanguage = language %} + {% endif %} + {% endfor %} + +
+
+
+

+ {{ brand.gestor if brand.gestor else 'Oficiálna stránka slovenského e-govermentu' | safe }} +

+
+
+ + + + +
+
+
+{% endset %} +
- + {{ brandBar | safe}} + +
\ No newline at end of file From 233be510098269b4676d458a48a751ab071ddbe0 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Adri=C3=A1n=20K=C3=B3=C5=A1a?= Date: Mon, 27 Sep 2021 06:12:11 +0200 Subject: [PATCH 04/33] wip header web frontend desktop --- .../images/header-web/logo-mirri-biele.svg | 17 + .../images/header-web/logo-mirri-farebne.svg | 281 +++++++++ .../header-web/logo-mirri-small-biele.svg | 8 + .../header-web/logo-mirri-small-farebne.svg | 18 + app/views/header-web/index.njk | 52 ++ src/govuk/assets/images/header-web/flag.png | Bin 0 -> 485 bytes src/govuk/assets/images/header-web/flag.svg | 5 + .../images/header-web/logo-placeholder.png | Bin 0 -> 1093 bytes .../images/header-web/logo-placeholder.svg | 9 + .../images/header-web/navigation-arrow.png | Bin 0 -> 168 bytes .../images/header-web/navigation-arrow.svg | 3 + .../assets/images/header-web/warning.png | Bin 0 -> 477 bytes .../assets/images/header-web/warning.svg | 3 + .../components/header-web/_header-web.scss | 560 +++++++++++++++--- src/idsk/components/header-web/header-web.js | 46 +- .../components/header-web/header-web.yaml | 127 +++- src/idsk/components/header-web/template.njk | 270 ++++++++- 17 files changed, 1300 insertions(+), 99 deletions(-) create mode 100644 app/assets/images/header-web/logo-mirri-biele.svg create mode 100644 app/assets/images/header-web/logo-mirri-farebne.svg create mode 100644 app/assets/images/header-web/logo-mirri-small-biele.svg create mode 100644 app/assets/images/header-web/logo-mirri-small-farebne.svg create mode 100644 src/govuk/assets/images/header-web/flag.png create mode 100644 src/govuk/assets/images/header-web/flag.svg create mode 100644 src/govuk/assets/images/header-web/logo-placeholder.png create mode 100644 src/govuk/assets/images/header-web/logo-placeholder.svg create mode 100644 src/govuk/assets/images/header-web/navigation-arrow.png create mode 100644 src/govuk/assets/images/header-web/navigation-arrow.svg create mode 100644 src/govuk/assets/images/header-web/warning.png create mode 100644 src/govuk/assets/images/header-web/warning.svg 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/views/header-web/index.njk b/app/views/header-web/index.njk index 7106b44003..dd6b902ec7 100644 --- a/app/views/header-web/index.njk +++ b/app/views/header-web/index.njk @@ -4,6 +4,7 @@ {% block header %} {% from "../../../src/idsk/components/header-web/macro.njk" import idskHeaderWeb %} {{ idskHeaderWeb({ + headerType: "website", brand: { languages: [ { @@ -27,6 +28,57 @@ link: "#" } ] + }, + + main: { + logoSrc: "/public/assets/images/header-web/logo-mirri-farebne.svg", + title: "IDSK.SK", + search: true, + loginButton: true, + secondaryButton: true + }, + + navBar: { + navigation: [ + { + link: '#1', + text: 'Eurofondy' + }, + { + link: '#2', + text: 'Regionálny rozvoj', + 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: '#5', + text: 'Inovácie' + } + ] } }) }} {% endblock %} 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 0000000000000000000000000000000000000000..e0644d740168ddf49d2cd4e028da0764493930d9 GIT binary patch literal 485 zcmVI2c}%B*`UOcVXPF*7%W+IyT1S9AE=tFa%?OV;0=!u;2`ja*vn@p{%uYs_yrF zrn5C>!8w;SZa+y!q&+C8s)~}o0Dh}(+NNm~92jwU97RnOMR|Z8hT)yyd>1Fl6M_Z$ zGz!B!P19G#`2)V4@;H`(a}D#=*Cf3!Nb1RhCd1tJtFEs)RU;u5D1_<-hGUanWo3<- z`*A&jpF>-_K{OvBcBIzYS-&&y0ZdfsWb)EFcaGP~JrckgcfG0WdIx`5mSxxYtCi#w bkG=T@h%=eY4Vd_L00000NkvXXu0mjf{Zz?E literal 0 HcmV?d00001 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 0000000000000000000000000000000000000000..da5c246fcb8b2a799cbfdd16e68599f65e5e7a33 GIT binary patch literal 1093 zcmV-L1iJf)P)DfuP%a$22siPdrQxGD_CHW>m>An8 zet?j)#6&M9l;~ONi59|)@2%a^!nWNmOWR+v-QC$Y+qdt%nK$zom}FqY>#=d+l2Upk zFgIgh$7Xx#aa;n#n3OSKY)c3pQUbmZn1B@{JmB@(`M#LMOK*lUMu`E)kPrv6N+1w3 z+R2cDs$vK78A#~`OOT3DMQw!yhDRqR*`a)cmmaVT3JF_ZLvu?!va!CEPcpB9Lt~S# z@HB%*4OkC_NMC(pt39&0{w|l0u8YZ~EP42vG3J31fCDNjt9X~<^Tm%p<9Z!z`yyB> z^*a3N zGlV{V(eINXS0r{C#YKHuzBpTb{{aWau5Le*@o2ZzH?_|%f|%+; z>g+l+Ize;8>6RZBLzRh@C4Zf^V4a5w12bHR&Z>gAIP^hg6a+MWjMW$$F zk@TJfH_kHv#^%JcL;!4S)+5r}&gj}&!qwQE#QkXxloJM1%JO1ZyUp4cM{z&uZfbGh z&~Ak?ASClCOa8gcHr++s;N$U!3M)M9F)u64@3}6>)*iToM{j>Sx3RYNg z;6&YxZEx|F4ph<&r$@CKRP+9o1%IfJaB)R+ERm$D5S`3;9Y>~q;`nEN%36AbN=p>X zWMJe8Zuq$eBitpiwuenlmRfL-`y?)ev04@tz{8lgwv@m^2u$z~H(FL$gVkOb00000 LNkvXXu0mjfF1Pc= literal 0 HcmV?d00001 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/navigation-arrow.png b/src/govuk/assets/images/header-web/navigation-arrow.png new file mode 100644 index 0000000000000000000000000000000000000000..0af8b59587822cc370417d55c1db0de45c3e8b1e GIT binary patch literal 168 zcmeAS@N?(olHy`uVBq!ia0vp^96-#cKX~Emb!*L7pVjTMsjq+rF?hQA KxvX + + 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 0000000000000000000000000000000000000000..5d1d70cb7380cc8dd0e4df71ade0e4149035c38d GIT binary patch literal 477 zcmV<30V4j1P))8vU?-_=tvH+YX>IEnqx9 z)0unjnUnV161JeIA7@BJ1_KQ?Dt~;L$GB8!mQsqE>9L?b7;>Ymz&vA!VScYwRH$g2 zv`8eAfWRgcFX$?N&^HyK;!JiZ;R*f#W@=k!v$asskSP&Q?J}*f$?lKu3cA$%M$KGn zEy{N@2#UD=PinKFF2azgnZ8?iAtJg&49UB5q+(^;+w(%jh0J1Z_Jl0zG7~V16#qrC z$PU1X1aX|ihaCumK;*t*1ABl3bC@`X1YKhnI8pvL^YhcESP0qh*c}O>+|&S6cK6&A zYjV`m#|SJ&@jB1kqs&pw5?8_7(QVIzhmZwZ_3)-v6D!_HfGHE&||(aj9Q zCs^%Nu00000NkvXXu0mjfFo?@v literal 0 HcmV?d00001 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/components/header-web/_header-web.scss b/src/idsk/components/header-web/_header-web.scss index 6ea1c4b46a..54a0c8934e 100644 --- a/src/idsk/components/header-web/_header-web.scss +++ b/src/idsk/components/header-web/_header-web.scss @@ -2,118 +2,532 @@ @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-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-link: govuk-colour("white") !default; - $idsk-header-dark-blue: govuk-colour("dark-blue") !default; + $idsk-header-logo-height: 40px; - $idsk-header-logo-height: 40px; + .idsk-header-web { - .idsk-header-web{ + &::before { + content: ""; + display: block; + width: 100%; + height: 3px; + background-image: linear-gradient( + to right, + #ffffff 0%, + #ffffff 33.3%, + #003183 33.3%, + #003183 66.6%, + #d0190f 66.6%, + #d0190f 100% + ); + /* equivalent to (to right, white, white 50%, black 50%, black) */ + background-size: 150px 100%; + background-repeat: repeat; + } - &::before { - content: ""; - display: block; - width: 100%; - height: 3px; - background-image: linear-gradient(to right, #ffffff 0%, #ffffff 33.3%, #003183 33.3%, #003183 66.6%, #d0190f 66.6%, #d0190f 100%); - /* equivalent to (to right, white, white 50%, black 50%, black) */ - background-size: 150px 100%; - background-repeat: repeat; + &__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); + } + + &__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; + } + } + + /* 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: tablet) { + 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: tablet) { + 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 { + @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); } + } + } + } - &__brand { + &-dropdown { + overflow: hidden; + display: none; + .govuk-body-s:first-child { + font-weight: 700; + margin: govuk-spacing(4) 0 0; + } + .govuk-body-s:last-child { + margin-bottom: govuk-spacing(4) ; + } + } - padding: 10px 0; - background-color: $idsk-header-background-secondary; - color: $idsk-header-text-secondary; - .govuk-body-s, - .govuk-link{ - margin-bottom: 0; - color: $idsk-header-text-secondary; + + /* 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: 0px 5px 10px rgba(0, 0, 0, 0.15); + border-radius: 8px; + } + + .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: tablet) { + 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"); + } } - /// language selector - .idsk-header-web__brand-language { - @include govuk-font($size: 19); + .idsk-header-extended__language-list-item-link { + color: govuk-colour("black"); + display: block; + text-decoration: none; + padding: govuk-spacing(2); - padding: 0 govuk-spacing(3) govuk-spacing(1) 0; + &:hover { + text-decoration: underline; + } + &:focus, + &:active { + box-shadow: none; + } + } - &--active .idsk-header-extended__language-button::after { - transition: transform 0.2s; - transform: rotate(180deg); + &--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 { + + &-headline { + overflow: auto; + margin: govuk-spacing(6) 0; + + &-logo { + float: left; + max-height: 40px; + margin-right: govuk-spacing(3); + + @include mq($until: tablet) { + max-height: 30px; + } + } - &-button { - @include govuk-font($size: 16); + .govuk-heading-m { + float: left; + margin: govuk-spacing(1) 0; + color: $idsk-header-text-primary; + } + } + &-action { float: right; - background: none; - border: none; - padding-right: govuk-spacing(6); - color: $idsk-header-text-secondary; - &:focus { - @include govuk-focused-text; + /* search bar */ + &-search { + @include govuk-font($size: 19); + + outline: 1px solid govuk-colour("black"); + display: inline-block; + margin: 30px 0; + + &-label { + z-index: 1; + color: govuk-colour("grey-1"); + position: absolute; + padding: 7px 12px 8px 12px; + width: 256px; + box-sizing: border-box; + + &.idsk-header-extended__search-input--focus { + z-index: -1; + } + } + + &-form:focus-within { + .idsk-header-extended__search-label { + z-index: -1; + } + } + + .govuk-input { + position: relative; + border: none; + height: 40px; + width: 256px; + 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"); - outline: none; + &::before { + bottom: -2px; + } + } } - &:after { - position: absolute; - margin-top: 8px; - margin-left: govuk-spacing(2); - border-style: solid; - border-width: 5px 5px 0; - border-color: $idsk-header-text-secondary transparent transparent; - content: ""; - transition: transform 0.2s; + .idsk-button { + margin: 29px 0 govuk-spacing(6) govuk-spacing(2); + padding: 9px 10px 8px; } } + } - &-list { - display: none; + /* NAV BAR */ + .idsk-header-web__nav { - list-style: none; + display: block; + margin: 0; + padding: 0; + list-style: none; + border-top: 1px solid govuk-colour("grey-3"); + + &-list { padding: 0; margin: 0; - text-align: left; - margin-top: 11px; - background-color: govuk-colour("white"); - &--active { - display: block; - position: absolute; - width: 150px; - box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.15); - border-radius: 8px; + &-item { + + @include mq($from: desktop) { + display: inline-block; + border: none; + } + + &-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__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); + } + + &:hover { + text-decoration: underline; + } + + &:link, + &:hover, + &:visited { + color: govuk-colour("black"); + } + + &:focus, + &:active { + @include govuk-focused-text; + box-shadow: none; + } + } } + } - &-item { - padding: govuk-spacing(2); + &--dark { + background-color: $idsk-header-background-secondary; + + .idsk-header-web__link-arrow { + background-color: $idsk-header-text-secondary; } - &-link { + .idsk-header-web__nav-list-item-link { color: $idsk-header-text-secondary; - display: block; - text-decoration: none; - - &:hover { - text-decoration: underline; - } &:focus, &:active { - @include govuk-focused-text; + color: govuk-colour("black"); + + .idsk-header-web__link-arrow { + background-color: govuk-colour("black"); + } } } } } -} \ No newline at end of file + + /* navigation - submenu */ + .idsk-header-web__nav-submenu { + + @include govuk-clearfix; + background-color: $idsk-header-background-secondary; + display: none; + + &-list { + background-color: $idsk-header-dark-blue; + list-style-type: none; + + @include mq($from: desktop) { + padding: 0 0; + margin: 0; + } + + &-item-link{ + padding: 12px govuk-spacing(4) 13px govuk-spacing(3); + text-decoration: none; + display: block; + + &:link, + &:visited { + color: $idsk-header-text-secondary; + } + + &:hover { + text-decoration: underline; + } + + &:focus, + &:active { + box-shadow: none; + color: govuk-colour("black"); + } + } + } + } + + /* navigation - submenulite */ + .idsk-header-web__nav-submenulite { + + position: relative; + left: govuk-spacing(3); + display: none; + + &-list { + background-color: $idsk-header-dark-blue; + list-style-type: none; + + + @include mq($from: desktop) { + position: absolute; + padding: govuk-spacing(3) 0; + margin-top: govuk-spacing(3); + 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%; + + &:link, + &:visited { + color: $idsk-header-text-secondary; + } + + &:hover { + text-decoration: underline; + } + + &:focus, + &:active { + @include govuk-focused-text; + box-shadow: none; + } + } + } + } + + /* 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; + } + } +} diff --git a/src/idsk/components/header-web/header-web.js b/src/idsk/components/header-web/header-web.js index 8b904a3088..fce5f21427 100644 --- a/src/idsk/components/header-web/header-web.js +++ b/src/idsk/components/header-web/header-web.js @@ -39,6 +39,26 @@ HeaderWeb.prototype.init = function () { $toggleLanguageSwitcher.addEventListener('focus', this.handleLanguageSwitcherClick.bind(this)); }.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-extended__language-list-link'); + nodeListForEach($lastLanguageItems, function ($lastLanguageItem) { + $lastLanguageItem.addEventListener('blur', this.checkBlurLanguageSwitcherClick.bind(this)); + }.bind(this)) + + } + + $module.boundCheckBlurLanguageSwitcherClick = this.checkBlurLanguageSwitcherClick.bind(this); + + // check for e-goverment button + var $toggleEgovermentSwitch = $module.querySelectorAll('.idsk-header-web__brand-language'); + if ($toggleLanguageSwitchers) { + // Handle $toggleEgovermentSwitch click events + nodeListForEach($toggleEgovermentSwitch, function ($toggleEgovermentSwitcher) { + $toggleEgovermentSwitcher.addEventListener('click', this.handleEgovermentSwitcherClick.bind(this)); + $toggleEgovermentSwitcher.addEventListener('focus', this.handleEgovermentSwitcherClick.bind(this)); + }.bind(this)) + + // close e-goverment banner if user focus next element } // check for menu items @@ -115,9 +135,29 @@ HeaderWeb.prototype.handleSearchChange = function (e) { */ HeaderWeb.prototype.handleLanguageSwitcherClick = function (e) { var $toggleButton = e.target || e.srcElement; - //var $target = $toggleButton.closest('.idsk-header-extended__language'); - var $languageList = $toggleButton.querySelector('.idsk-header-web__brand-language-list'); - toggleClass($languageList, 'idsk-header-web__brand-language-list--active'); + 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 () { + this.$activeSearch.classList.remove('idsk-header-web__brand-language--active'); + document.removeEventListener('click', this.$module.boundCheckBlurLanguageSwitcherClick, true); +} + +/** + * Handle open/hide e-goverment statement switcher + * @param {object} e + */ + HeaderWeb.prototype.handleEgovermentSwitcherClick = function (e) { + this.$toggleEgoverment = e.target || e.srcElement; + toggleClass($toggleEgoverment, 'idsk-header-web__brand-gestor-button--active'); + document.addEventListener('click', this.$module.boundCheckBlurLanguageSwitcherClick, true); +} + +HeaderWeb.prototype.checkBlurLanguageSwitcherClick = function () { + this.$toggleEgoverment.classList.remove('idsk-header-web__brand-gestor-button--active'); + document.removeEventListener('click', this.$module.boundCheckBlurLanguageSwitcherClick, true); } /** diff --git a/src/idsk/components/header-web/header-web.yaml b/src/idsk/components/header-web/header-web.yaml index 48255c1421..bc50e71d6e 100644 --- a/src/idsk/components/header-web/header-web.yaml +++ b/src/idsk/components/header-web/header-web.yaml @@ -1,4 +1,8 @@ params: +- name: headerType + type: string + required: true + description: Type of header, options(website, projectWebsite, electronicService) - name: classes type: string required: false @@ -7,11 +11,17 @@ params: type: object required: false description: HTML attributes (for example data attributes) to add to the header container. + - name: brand type: object - required: false + required: true description: BrandBar object including language selector params: + + - name: lightBackground + type: bolean + required: false + description: Bolean value for background color - name: languages type: array required: true @@ -29,4 +39,119 @@ params: type: string required: false description: link to english mutation + + - name: gestorLink + type: string + required: false + description: Link to gestor page + +- name: main + type: object + required: true + description: MainSection object inlucing logo, title, search + 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: search + type: bolean + required: false + description: Allows you to use search bar if is needed + params: + - name: button + type: string + required: true + description: Search button text for screen readers + + - name: loginButton + type: bolean + required: false + description: Allows you to use login + params: + - name: text + type: string + required: false + description: Login button text + - name: classes + type: string + required: false + description: Classes of login button + + - name: secondaryButton + type: bolean + 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: navBar + type: object + required: true + description: NavBar object inlucing menu items. Maximum main menu items are 5 items and each main item can contain 12 submenu items. + 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 + 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/template.njk b/src/idsk/components/header-web/template.njk index eb91b520f0..7c7284d8d9 100644 --- a/src/idsk/components/header-web/template.njk +++ b/src/idsk/components/header-web/template.njk @@ -1,4 +1,6 @@ -{# brand bar #} +{% from "../button/macro.njk" import idskButton %} + +{# BRAND BAR #} {% set brandBar %} {% set brand = params.brand %} {% for language in brand.languages|sort(attribute='text') %} @@ -7,37 +9,261 @@ {% endif %} {% endfor %} -
-
-
-

- {{ brand.gestor if brand.gestor else 'Oficiálna stránka slovenského e-govermentu' | safe }} -

+
+
+
+
+
+
+ + {% if brand.gestorLink %} + SK e-Gov + {% else %} + SK + {% endif %} + +
+ +
+ + +
+
+
-
- - - +
+
+
+

Doména Gov.sk je oficálna

+

Slovak government websites always use a .gov.sk domain. Before sharing sensitive information online, make sure.

+
+
+

Táto stránka je zabezpečená

+

Slovak government websites always use a .gov.sk domain. Before sharing sensitive information online, make sure.

+
+
+
+ +
+ +
+{% endset %} + + +{# MAIN SECTION #} +{% set mainSection %} + + {% set main = params.main %} + +
+
+
+ +
+
+ {% 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.headerType == 'website' or params.headerType == 'projectWebsite' %} + {% if main.search %} +
+ + + +
+ {% endif %} + + + {% if main.loginButton %} + {{ idskButton({ + "text": main.loginButton.text if main.loginButton.text else 'Prihlásiť sa', + "type": "button", + "classes": main.loginButton.classes if main.loginButton.classes + }) }} + {% endif %} + + {% if main.secondaryButton %} + {{ idskButton({ + "text": main.secondaryButton.text if main.secondaryButton.text else 'Tlačidlo', + "type": "button", + "classes": main.secondaryButton.classes if main.secondaryButton.classes + }) }} + {% endif %} + + + {% endif %} + + + {% if params.headerType == 'electronicService' %} + + {% endif %} +
+
+
+
+
+{% endset %} + + +{# NAV BAR #} +{% set navBar %} + +
+
+
+
+ {% if params.navBar %} + {% set navigation = params.navBar.navigation %} + + {% endif %} +
+ + + {% for item in navigation %} + {% if item.submenu | length > 5 %} +
+
+
+ +
+ +
+ + +
+ +
+ +
+ +
+ +
+ +
+ +
+
+
+ {% endif %} + {% endfor %} +
+ {% endset %} + +{# BANNER #} +{% set bannerSection %} +{% 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' }} + +
+
+
+
+{% endset %} + +
- {{ brandBar | safe}} + {{ brandBar | safe}} + {{ mainSection | safe}} + + {{ navBar | safe}}
\ No newline at end of file From 276edc9d4a410a72a25b0d6f517fc6d0917b2f66 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Adri=C3=A1n=20K=C3=B3=C5=A1a?= Date: Mon, 27 Sep 2021 10:16:59 +0200 Subject: [PATCH 05/33] wip header web mobile menu added --- src/govuk/assets/images/header-web/close.png | Bin 0 -> 201 bytes src/govuk/assets/images/header-web/close.svg | 3 + src/govuk/assets/images/header-web/menu.png | Bin 0 -> 147 bytes src/govuk/assets/images/header-web/menu.svg | 3 + .../header-web/navigation-arrow-mobile.png | Bin 0 -> 241 bytes .../header-web/navigation-arrow-mobile.svg | 3 + .../components/header-web/_header-web.scss | 189 +++++++++++++----- .../components/header-web/header-web.yaml | 4 + src/idsk/components/header-web/template.njk | 8 +- 9 files changed, 159 insertions(+), 51 deletions(-) create mode 100644 src/govuk/assets/images/header-web/close.png create mode 100644 src/govuk/assets/images/header-web/close.svg create mode 100644 src/govuk/assets/images/header-web/menu.png create mode 100644 src/govuk/assets/images/header-web/menu.svg create mode 100644 src/govuk/assets/images/header-web/navigation-arrow-mobile.png create mode 100644 src/govuk/assets/images/header-web/navigation-arrow-mobile.svg 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 0000000000000000000000000000000000000000..2d0f849d078706dee391211f5718570800ac4bf6 GIT binary patch literal 201 zcmeAS@N?(olHy`uVBq!ia0vp^d?3uh1|;P@bT0xa&H|6fVg?3oVGw3ym^DWND9BhG z + + 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 0000000000000000000000000000000000000000..3beae1319f435ff2987e51b6722ae24d76a481a2 GIT binary patch literal 147 zcmeAS@N?(olHy`uVBq!ia0vp^LO{&J!3HGrh2HJ~Qk(@Ik;M!Q+`=Ht$S`Y;1W=H% zILO_JVcj{Imp~3nx}&cn1H;CC?mvmFK)!~ji(^Oy + + 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 0000000000000000000000000000000000000000..eac95061e93f1cafb5628688dfdeb6e1c79a1a0d GIT binary patch literal 241 zcmeAS@N?(olHy`uVBq!ia0vp@K+M6x1|*f#O3wo+&H|6fVg?3oVGw3ym^DWND9BhG z<$F;J(9P3ccSw|mFxwvIH%eE(#eP4=AW=td$PcAnJ%LiyQij)r~11me;>?=Ua@4& iN86X&Yi1r7DqxB}X67X#|H%UAA_h-aKbLh*2~7Zq6IE^i literal 0 HcmV?d00001 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/idsk/components/header-web/_header-web.scss b/src/idsk/components/header-web/_header-web.scss index 54a0c8934e..edabfa0633 100644 --- a/src/idsk/components/header-web/_header-web.scss +++ b/src/idsk/components/header-web/_header-web.scss @@ -56,6 +56,19 @@ 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; @@ -67,6 +80,16 @@ 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; + } } /* BRAND BAR */ @@ -264,8 +287,11 @@ /* MAIN SECTION */ .idsk-header-web__main { - &-headline { + .govuk-grid-column-one-third{ overflow: auto; + } + + &-headline { margin: govuk-spacing(6) 0; &-logo { @@ -283,70 +309,103 @@ margin: govuk-spacing(1) 0; color: $idsk-header-text-primary; } + + &-menu-button { + display: none; + } + + @include mq($until: tablet) { + &-menu-button { + display: block; + background-color: $idsk-header-background-primary; + width: auto; + float: right; + box-shadow: none; + border: 1px solid govuk-colour("black"); + color: govuk-colour("black"); + font-weight: 700; + font-size: 18px; + padding-top: 6px; + padding-bottom: 6px; + + &:hover { + background-color: $idsk-header-background-primary; + color: govuk-colour("black"); + } + + .idsk-header-web__menu-open { + margin-left: govuk-spacing(3); + } + } + } + } &-action { - float: right; + float: right; - /* search bar */ - &-search { - @include govuk-font($size: 19); + /* search bar */ + &-search { + @include govuk-font($size: 19); - outline: 1px solid govuk-colour("black"); - display: inline-block; - margin: 30px 0; + outline: 1px solid govuk-colour("black"); + display: inline-block; + margin: 30px 0; - &-label { - z-index: 1; - color: govuk-colour("grey-1"); - position: absolute; - padding: 7px 12px 8px 12px; - width: 256px; - box-sizing: border-box; + .govuk-input { + position: relative; + border: none; + height: 40px; + width: 256px; + padding: 8px 12px; - &.idsk-header-extended__search-input--focus { - z-index: -1; + &:focus { + z-index: 2; + } } - } - &-form:focus-within { - .idsk-header-extended__search-label { - z-index: -1; + .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; + } } } - .govuk-input { - position: relative; - border: none; - height: 40px; - width: 256px; - padding: 8px 12px; + .idsk-button { + margin: 29px 0 govuk-spacing(6) govuk-spacing(2); + padding: 9px 10px 8px; + } + + // mobile version + @include mq($until: tablet) { + float: none; - &:focus { - z-index: 2; + .idsk-button { + display: none; } - } - .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"); + &-search { + width: 100%; + margin-top: 1px; - &::before { - bottom: -2px; + .govuk-input { + width: calc(100% - 44px); + } + + .govuk-button { + float: right; + } } } - } - - .idsk-button { - margin: 29px 0 govuk-spacing(6) govuk-spacing(2); - padding: 9px 10px 8px; - } } } @@ -360,6 +419,7 @@ border-top: 1px solid govuk-colour("grey-3"); &-list { + list-style: none; padding: 0; margin: 0; @@ -379,6 +439,10 @@ 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; @@ -429,6 +493,37 @@ } } } + + @include mq($until: tablet) { + border-top: none; + + .govuk-grid-column-full { + padding: 0; + } + + &-list { + &-item { + &-link { + font-size: 24px; + font-weight: 700; + width: 100%; + box-sizing: border-box; + padding: govuk-spacing(2) govuk-spacing(4); + + .idsk-header-web__link-arrow { + display: none; + } + + .idsk-header-web__link-arrow-mobile { + margin-top: govuk-spacing(2); + display: inline; + } + } + } + } + + + } } /* navigation - submenu */ diff --git a/src/idsk/components/header-web/header-web.yaml b/src/idsk/components/header-web/header-web.yaml index bc50e71d6e..1495aa7045 100644 --- a/src/idsk/components/header-web/header-web.yaml +++ b/src/idsk/components/header-web/header-web.yaml @@ -58,6 +58,10 @@ params: type: string required: true description: Header title text + - name: menuBtnText + type: string + required: false + description: Text for mobile menu button - name: search type: bolean required: false diff --git a/src/idsk/components/header-web/template.njk b/src/idsk/components/header-web/template.njk index 7c7284d8d9..0ecede0a7f 100644 --- a/src/idsk/components/header-web/template.njk +++ b/src/idsk/components/header-web/template.njk @@ -82,6 +82,8 @@ {% if params.headerType == 'electronicService' %}

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

{% endif %} + +
@@ -91,11 +93,8 @@ {% if params.headerType == 'website' or params.headerType == 'projectWebsite' %} {% if main.search %}
- + placeholder="{{ params.search.label if params.search.label else 'Zadajte hľadaný výraz' }}" type="text" aria-describedby="input-width-30-hint" aria-label="Zadajte hľadaný výraz" /> +
+ {% endif %} +{% endset %} +{% set mainSection %}
@@ -91,34 +122,9 @@
{% if params.headerType == 'website' or params.headerType == 'projectWebsite' %} - {% if main.search %} -
- - -
- {% endif %} - - {% if main.loginButton %} - {{ idskButton({ - "text": main.loginButton.text if main.loginButton.text else 'Prihlásiť sa', - "type": "button", - "classes": main.loginButton.classes if main.loginButton.classes - }) }} - {% endif %} - - {% if main.secondaryButton %} - {{ idskButton({ - "text": main.secondaryButton.text if main.secondaryButton.text else 'Tlačidlo', - "type": "button", - "classes": main.secondaryButton.classes if main.secondaryButton.classes - }) }} - {% endif %} - + {{ searchInput | safe }} + {{ mainButtons | safe }} {% endif %} @@ -140,9 +146,12 @@
+ {% if params.navBar %} + {% set navigation = params.navBar.navigation %} +
+ {{ searchInput | safe }} +
- {% if params.navBar %} - {% set navigation = params.navBar.navigation %} - {% endif %} + {% endif %} +
+ +
+ {{ mainButtons | safe }}
@@ -256,6 +269,13 @@
{% endset %} +{# MOBILE MENU #} +{% set mobileMenu %} + + {{ brandBar | safe}} + + +{% endset %}
From 72170644e98b66cfa9fda952ebab64a68144bb26 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Adri=C3=A1n=20K=C3=B3=C5=A1a?= Date: Thu, 30 Sep 2021 10:19:51 +0200 Subject: [PATCH 07/33] wip js web header --- app/views/header-web/index.njk | 26 +- src/govuk/assets/images/header-web/search.png | Bin 0 -> 414 bytes src/govuk/assets/images/header-web/search.svg | 3 + .../components/header-web/_header-web.scss | 238 ++++++++++++++---- src/idsk/components/header-web/header-web.js | 94 +++---- src/idsk/components/header-web/template.njk | 94 +++++-- 6 files changed, 336 insertions(+), 119 deletions(-) create mode 100644 src/govuk/assets/images/header-web/search.png create mode 100644 src/govuk/assets/images/header-web/search.svg diff --git a/app/views/header-web/index.njk b/app/views/header-web/index.njk index dd6b902ec7..84a7e454a7 100644 --- a/app/views/header-web/index.njk +++ b/app/views/header-web/index.njk @@ -42,11 +42,29 @@ navigation: [ { link: '#1', - text: 'Eurofondy' + text: 'Občan', + submenu: [ + { + link: '#1', + text: 'Eurofondy' + }, + { + link: '#2', + text: 'Regionálny rozvoj' + }, + { + link: '#3', + text: 'Informatizácia' + }, + { + link: '#4', + text: 'Investície' + } + ] }, { link: '#2', - text: 'Regionálny rozvoj', + text: 'Podnikateľ', submenu: [ { link: '#1', @@ -68,11 +86,11 @@ }, { link: '#3', - text: 'Informatizácia' + text: 'Dôchodca' }, { link: '#4', - text: 'Investície' + text: 'Elektronické služby' }, { link: '#5', 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 0000000000000000000000000000000000000000..73e4f33c48de23db5c3f6609ac66aecb87a15579 GIT binary patch literal 414 zcmV;P0b%}$P)qmBI$?28_^d!5iJ6utAxC^2Q?@&k5941?4O7R<>$_r zIc%b3QOxlj>$vWCVK_Uz4I#u`h=X-+SH^6@9qb%oLlOYq#vQm168uS=^I1xWSJljS z9uvYvOHM$FiHiA5!(3-66A%ZmbY!IZWz0Td_gF^ zFB#)`mVFyzG}>jHuPLQ(=+0XEUf1<&NQe$P+d|uG5&?>U;0mJp?Yd>tG%CjJZMyGj z_^<7}9Wk9Aus#vuFgBbdaB|lnhP8~G0j;$v^Lz + + diff --git a/src/idsk/components/header-web/_header-web.scss b/src/idsk/components/header-web/_header-web.scss index d2f887fb77..87ff9ea444 100644 --- a/src/idsk/components/header-web/_header-web.scss +++ b/src/idsk/components/header-web/_header-web.scss @@ -90,6 +90,20 @@ 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; + } + + @include mq($until: tablet) { + box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.15); + } } /* BRAND BAR */ @@ -129,7 +143,7 @@ .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; @@ -163,8 +177,8 @@ background-color: govuk-colour("black"); } } - - &––active { + + &--active { .idsk-header-web__link-arrow { transition: transform 0.2s; transform: rotate(180deg); @@ -183,6 +197,10 @@ .govuk-body-s:last-child { margin-bottom: govuk-spacing(4) ; } + + &--active { + display: initial; + } } @@ -243,27 +261,30 @@ &-list { display: none; - list-style: none; padding: govuk-spacing(2) 0; margin: 0; text-align: left; background-color: govuk-colour("white"); - } - } - .idsk-header-extended__language-list-item-link { - color: govuk-colour("black"); - display: block; - text-decoration: none; - padding: govuk-spacing(2); + &-item-link { + display: block; + text-decoration: none; + padding: govuk-spacing(2); - &:hover { - text-decoration: underline; - } - &:focus, - &:active { - box-shadow: none; + &:link, + &:visited { + color: govuk-colour("black"); + } + + &:hover { + text-decoration: underline; + } + &:focus, + &:active { + box-shadow: none; + } + } } } @@ -296,11 +317,21 @@ } &-headline { - margin: govuk-spacing(6) 0; + margin: 28px 0; + overflow: hidden; + + & > a { + display: inline-block; + + &:focus, + &:active { + @include govuk-focused-text; + } + } &-logo { float: left; - max-height: 40px; + height: 40px; margin-right: govuk-spacing(3); @include mq($until: tablet) { @@ -319,26 +350,49 @@ } @include mq($until: tablet) { + margin: govuk-spacing(4) 0; + &-menu-button { display: block; background-color: $idsk-header-background-primary; width: auto; float: right; - box-shadow: none; border: 1px solid govuk-colour("black"); color: govuk-colour("black"); font-weight: 700; font-size: 18px; - padding-top: 6px; + padding-top: 5px; padding-bottom: 6px; + margin: 0; &:hover { background-color: $idsk-header-background-primary; color: govuk-colour("black"); } - .idsk-header-web__menu-open { + &: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; + } + + &--active { + .idsk-header-web__menu-open { + display: none; + } + + .idsk-header-web__menu-close { + display: inline-block; + } } } } @@ -415,6 +469,12 @@ list-style: none; border-top: 1px solid govuk-colour("grey-3"); + &--mobile { + @include mq($until: tablet) { + display: none; + } + } + .idsk-header-web__main--buttons, .idsk-header-web__main-action-search { display: none; @@ -423,20 +483,6 @@ .idsk-header-web__main--buttons { margin-top: govuk-spacing(4); } - - - // &-separator { - // display: none; - - // @include mq($until: tablet) { - // display: block; - // height: 2px; - // width: 100%; - // background-color: govuk-colour("grey-3"); - // margin-bottom: 18px; - // } - - // } &-list { list-style: none; @@ -490,6 +536,45 @@ box-shadow: none; } } + + &--active { + background-color: $idsk-header-background-secondary; + + .idsk-header-web__nav-list-item-link { + + &: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, + .idsk-header-web__link-arrow-mobile { + 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: initial; + } + } } } @@ -517,14 +602,10 @@ @include mq($until: tablet) { border-top: none; - nav { + &-bar--buttons { border-bottom: 2px solid govuk-colour("grey-3"); } - .govuk-grid-column-full:last-child { - box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.15); - } - .idsk-header-web__main--buttons, .idsk-header-web__main-action-search { display: block; @@ -562,18 +643,24 @@ } } } - } - - + } } } - /* navigation - submenu */ + /* NAVIGATION - submenu */ .idsk-header-web__nav-submenu { + width: 100vw; + position: absolute; + left: 0; + + display: none; @include govuk-clearfix; background-color: $idsk-header-background-secondary; - display: none; + + &-spacer { + height: 135px; + } &-list { background-color: $idsk-header-dark-blue; @@ -584,7 +671,7 @@ margin: 0; } - &-item-link{ + &-item-link { padding: 12px govuk-spacing(4) 13px govuk-spacing(3); text-decoration: none; display: block; @@ -605,13 +692,41 @@ } } } + + @include mq($until: tablet) { + 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; + } + + &-spacer { + display: none; + } + } } - /* navigation - submenulite */ + /* NAVIGATION - submenulite */ .idsk-header-web__nav-submenulite { - position: relative; - left: govuk-spacing(3); + left: 0; display: none; &-list { @@ -622,11 +737,10 @@ @include mq($from: desktop) { position: absolute; padding: govuk-spacing(3) 0; - margin-top: govuk-spacing(3); width: 250px; } - &-item-link{ + &-item-link { padding: govuk-spacing(2) govuk-spacing(4) govuk-spacing(2) govuk-spacing(3); display: inline-block; text-decoration: none; @@ -649,6 +763,26 @@ } } } + + @include mq($until: tablet) { + 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"); + } + } + } } /* BANNER SECTION */ diff --git a/src/idsk/components/header-web/header-web.js b/src/idsk/components/header-web/header-web.js index fce5f21427..452a89808b 100644 --- a/src/idsk/components/header-web/header-web.js +++ b/src/idsk/components/header-web/header-web.js @@ -31,38 +31,38 @@ HeaderWeb.prototype.init = function () { } // check for language switcher - var $toggleLanguageSwitchers = $module.querySelectorAll('.idsk-header-web__brand-language-button'); - if ($toggleLanguageSwitchers) { + var $toggleLanguageSwitcher = $module.querySelector('.idsk-header-web__brand-language-button'); + this.$toggleLanguageSwitcher = $toggleLanguageSwitcher; + + if ($toggleLanguageSwitcher) { // Handle $toggleLanguageSwitcher click events - nodeListForEach($toggleLanguageSwitchers, function ($toggleLanguageSwitcher) { - $toggleLanguageSwitcher.addEventListener('click', this.handleLanguageSwitcherClick.bind(this)); - $toggleLanguageSwitcher.addEventListener('focus', this.handleLanguageSwitcherClick.bind(this)); - }.bind(this)) + $toggleLanguageSwitcher.addEventListener('click', this.handleLanguageSwitcherClick.bind(this)); + $toggleLanguageSwitcher.addEventListener('focus', 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-extended__language-list-link'); + 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)) + // + $module.addEventListener('keydown', this.handleBackTabbing.bind(this)); + } $module.boundCheckBlurLanguageSwitcherClick = this.checkBlurLanguageSwitcherClick.bind(this); // check for e-goverment button - var $toggleEgovermentSwitch = $module.querySelectorAll('.idsk-header-web__brand-language'); - if ($toggleLanguageSwitchers) { - // Handle $toggleEgovermentSwitch click events - nodeListForEach($toggleEgovermentSwitch, function ($toggleEgovermentSwitcher) { - $toggleEgovermentSwitcher.addEventListener('click', this.handleEgovermentSwitcherClick.bind(this)); - $toggleEgovermentSwitcher.addEventListener('focus', this.handleEgovermentSwitcherClick.bind(this)); + var $eGovermentButtons = $module.querySelectorAll('.idsk-header-web__brand-gestor-button'); + if ($eGovermentButtons) { + // Handle $eGovermentButton click event + nodeListForEach($eGovermentButtons, function ($eGovermentButton) { + $eGovermentButton.addEventListener('click', this.handleEgovermentClick.bind(this)); }.bind(this)) - - // close e-goverment banner if user focus next element } // check for menu items - var $menuItems = $module.querySelectorAll('.idsk-header-extended__link'); + var $menuItems = $module.querySelectorAll('.idsk-header-web__nav-list-item-link'); if ($menuItems) { // Handle $menuItem click events nodeListForEach($menuItems, function ($menuItem) { @@ -72,16 +72,11 @@ HeaderWeb.prototype.init = function () { } // check for menu button and close menu button - var $hamburgerMenuButton = $module.querySelector('.idsk-js-header-extended-side-menu'); - var $closeMenuButton = $module.querySelector('.idsk-header-extended__mobile-close'); - if ($hamburgerMenuButton && $closeMenuButton) { - this.initMobileMenuTabbing(); - $hamburgerMenuButton.addEventListener('click', this.showMobileMenu.bind(this)); - $closeMenuButton.addEventListener('click', this.hideMobileMenu.bind(this)); + var $menuButton = $module.querySelector('.idsk-header-web__main-headline-menu-button'); + if ($menuButton) { + $menuButton.addEventListener('click', this.showMobileMenu.bind(this)); } - window.addEventListener('scroll', this.scrollFunction.bind(this)); - $module.boundCheckBlurMenuItemClick = this.checkBlurMenuItemClick.bind(this); // check for cookies @@ -145,20 +140,29 @@ HeaderWeb.prototype.checkBlurLanguageSwitcherClick = function () { 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) { + var $focusedElement = this.$module.querySelector(':focus'); + + if ($focusedElement == this.$toggleLanguageSwitcher) { + var languageList = this.$module.querySelector('.idsk-header-web__brand-language-list'); + languageList.lastElementChild.focus(); + } + } +} + /** - * Handle open/hide e-goverment statement switcher + * Handle open/hide e-goverment statement * @param {object} e */ - HeaderWeb.prototype.handleEgovermentSwitcherClick = function (e) { - this.$toggleEgoverment = e.target || e.srcElement; - toggleClass($toggleEgoverment, 'idsk-header-web__brand-gestor-button--active'); - document.addEventListener('click', this.$module.boundCheckBlurLanguageSwitcherClick, true); + HeaderWeb.prototype.handleEgovermentClick = function (e) { + var $eGovermentButton = this.$module.querySelector('.idsk-header-web__brand-gestor-button'); + var $eGovermentDropdown = this.$module.querySelector('.idsk-header-web__brand-dropdown'); + toggleClass($eGovermentDropdown, 'idsk-header-web__brand-dropdown--active'); + toggleClass($eGovermentButton, 'idsk-header-web__brand-gestor-button--active'); } -HeaderWeb.prototype.checkBlurLanguageSwitcherClick = function () { - this.$toggleEgoverment.classList.remove('idsk-header-web__brand-gestor-button--active'); - document.removeEventListener('click', this.$module.boundCheckBlurLanguageSwitcherClick, true); -} /** * Handle open/hide submenu @@ -166,13 +170,13 @@ HeaderWeb.prototype.checkBlurLanguageSwitcherClick = function () { */ HeaderWeb.prototype.handleSubmenuClick = function (e) { var $srcEl = e.target || e.srcElement; - var $toggleButton = $srcEl.closest('.idsk-header-extended__navigation-item'); - var $currActiveList = this.$module.querySelectorAll('.idsk-header-extended__navigation-item--active'); + var $toggleButton = $srcEl.closest('.idsk-header-web__nav-list-item'); + var $currActiveList = this.$module.querySelectorAll('.idsk-header-web__nav-list-item--active'); if ($currActiveList.length > 0) { - $currActiveList[0].classList.remove('idsk-header-extended__navigation-item--active'); + $currActiveList[0].classList.remove('idsk-header-web__nav-list-item--active'); } - toggleClass($toggleButton, 'idsk-header-extended__navigation-item--active'); + toggleClass($toggleButton, 'idsk-header-web__nav-list-item--active'); document.addEventListener('click', this.$module.boundCheckBlurMenuItemClick, true); } @@ -181,8 +185,8 @@ HeaderWeb.prototype.handleSubmenuClick = function (e) { * handle click outside menu or "blur" the item link */ HeaderWeb.prototype.checkBlurMenuItemClick = function () { - var $currActiveList = this.$module.querySelectorAll('.idsk-header-extended__navigation-item--active'); - $currActiveList[0].classList.remove('idsk-header-extended__navigation-item--active'); + var $currActiveList = this.$module.querySelectorAll('.idsk-header-web__nav-list-item--active'); + $currActiveList[0].classList.remove('idsk-header-web__nav-list-item--active'); document.removeEventListener('click', this.$module.boundCheckBlurMenuItemClick, true); } @@ -191,13 +195,11 @@ HeaderWeb.prototype.checkBlurMenuItemClick = function () { * @param {object} e */ HeaderWeb.prototype.showMobileMenu = function (e) { - var $hamburgerMenuButton = this.$module.querySelector('.idsk-js-header-extended-side-menu'); - - this.$module.classList.add("idsk-header-extended--show-mobile-menu"); - document.getElementsByTagName("body")[0].style.overflow = "hidden"; - if (document.activeElement == $hamburgerMenuButton) { - this.$lastMenuElement.focus(); - } + 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'); + } /** * Hide mobile menu diff --git a/src/idsk/components/header-web/template.njk b/src/idsk/components/header-web/template.njk index 4c8a77e97b..e6aef9d49d 100644 --- a/src/idsk/components/header-web/template.njk +++ b/src/idsk/components/header-web/template.njk @@ -29,7 +29,7 @@
+
{% 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' }} - -
-
-
+ {% 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 %} - -
- - {{ brandBar | safe }} - - {{ mainSection | safe }} - - {{ navBar | safe }} - - {{ bannerSection | safe }} - +
+ {{ brandBar | safe }} + {{ mainSection | safe }} + {{ navBar | safe }} + {{ bannerSection | safe }}
\ No newline at end of file From 922d5d5e7b2bce396e5918a8f68d5b7cf4fc49f5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Adri=C3=A1n=20K=C3=B3=C5=A1a?= Date: Wed, 6 Oct 2021 13:51:33 +0200 Subject: [PATCH 10/33] cookie pattern page init commit --- app/views/vzory/stranka-o-cookies.njk | 37 +++++++++++++++++++++++++++ config/idskContentStructure.json | 1 + 2 files changed, 38 insertions(+) create mode 100644 app/views/vzory/stranka-o-cookies.njk diff --git a/app/views/vzory/stranka-o-cookies.njk b/app/views/vzory/stranka-o-cookies.njk new file mode 100644 index 0000000000..2eb6a84eac --- /dev/null +++ b/app/views/vzory/stranka-o-cookies.njk @@ -0,0 +1,37 @@ +{% 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.

+

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
    • +
+ +{% endblock %} \ No newline at end of file diff --git a/config/idskContentStructure.json b/config/idskContentStructure.json index 5faacf03b1..8d935f6e7b 100644 --- a/config/idskContentStructure.json +++ b/config/idskContentStructure.json @@ -32,6 +32,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", From 90e16b85396d5158cd0f03eec24b55ac01570852 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Adri=C3=A1n=20K=C3=B3=C5=A1a?= Date: Wed, 6 Oct 2021 14:33:11 +0200 Subject: [PATCH 11/33] hot-fix header web --- .../components/header-web/_header-web.scss | 14 +++++++++- src/idsk/components/header-web/header-web.js | 14 ++++++---- .../components/header-web/header-web.yaml | 6 ++++- src/idsk/components/header-web/template.njk | 27 ++++++++++++++----- 4 files changed, 47 insertions(+), 14 deletions(-) diff --git a/src/idsk/components/header-web/_header-web.scss b/src/idsk/components/header-web/_header-web.scss index 04309da6cb..d5eb92974c 100644 --- a/src/idsk/components/header-web/_header-web.scss +++ b/src/idsk/components/header-web/_header-web.scss @@ -121,7 +121,7 @@ .govuk-body-s { display: inline-block; } - + .govuk-body-s, .govuk-link { margin: govuk-spacing(2) 0; @@ -184,6 +184,18 @@ } } } + + @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 { diff --git a/src/idsk/components/header-web/header-web.js b/src/idsk/components/header-web/header-web.js index 6072d6c690..e84829e38d 100644 --- a/src/idsk/components/header-web/header-web.js +++ b/src/idsk/components/header-web/header-web.js @@ -41,10 +41,12 @@ HeaderWeb.prototype.init = function () { $module.boundCheckBlurLanguageSwitcherClick = this.checkBlurLanguageSwitcherClick.bind(this); // check for e-goverment button - var $eGovermentButton = $module.querySelector('.idsk-header-web__brand-gestor-button'); - if ($eGovermentButton) { + var $eGovermentButtons = $module.querySelectorAll('.idsk-header-web__brand-gestor-button'); + if ($eGovermentButtons.length > 0) { // Handle $eGovermentButton click event - $eGovermentButton.addEventListener('click', this.handleEgovermentClick.bind(this)); + nodeListForEach($eGovermentButtons, function ($eGovermentButton) { + $eGovermentButton.addEventListener('click', this.handleEgovermentClick.bind(this)); + }.bind(this)) } // check for menu items @@ -100,10 +102,12 @@ HeaderWeb.prototype.handleBackTabbing = function (e) { * @param {object} e */ HeaderWeb.prototype.handleEgovermentClick = function (e) { - var $eGovermentButton = this.$module.querySelector('.idsk-header-web__brand-gestor-button'); + 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'); - toggleClass($eGovermentButton, 'idsk-header-web__brand-gestor-button--active'); + nodeListForEach($eGovermentButtons, function ($eGovermentButton) { + toggleClass($eGovermentButton, 'idsk-header-web__brand-gestor-button--active'); + }.bind(this)) } diff --git a/src/idsk/components/header-web/header-web.yaml b/src/idsk/components/header-web/header-web.yaml index 323e22be16..64ef0ec757 100644 --- a/src/idsk/components/header-web/header-web.yaml +++ b/src/idsk/components/header-web/header-web.yaml @@ -55,6 +55,10 @@ params: 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 @@ -143,7 +147,7 @@ params: required: false description: Classes of second button -- name: +- name: search type: object required: false description: Allows you to use search bar if is needed diff --git a/src/idsk/components/header-web/template.njk b/src/idsk/components/header-web/template.njk index 8fc7586d93..bee4c50f8c 100644 --- a/src/idsk/components/header-web/template.njk +++ b/src/idsk/components/header-web/template.njk @@ -17,16 +17,29 @@ {% if brand.nationalEmblem %}
{% endif %} - + + Oficiálna stránka {% if brand.gestorLink %} - SK - - {{ brand.gestorLink.text if brand.gestorLink.text else 'e-Gov' }} + + {{ brand.gestorLink.text if brand.gestorLink.text else 'slovenského e-govermentu' }} {% else %} - SK + {% endif %} + + {# MOBILE VERSION GESTOR LINK/BUTTON #} + + SK + {% if brand.gestorLink %} + + {{ brand.gestorLink.mobileText if brand.gestorLink.mobileText else 'e-gov' }} + + {% else %} + {% endif %} @@ -83,7 +96,7 @@ {% set mainButtons %}
{% if main.loginButton %} - -
\ No newline at end of file +
From 0dffdd83959a851ef8c90270f9782cd70d837677 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Adri=C3=A1n=20K=C3=B3=C5=A1a?= Date: Tue, 12 Oct 2021 10:36:42 +0200 Subject: [PATCH 16/33] hot fix mobile menu background --- .../components/header-web/_header-web.scss | 19 +++++++++++++------ 1 file changed, 13 insertions(+), 6 deletions(-) diff --git a/src/idsk/components/header-web/_header-web.scss b/src/idsk/components/header-web/_header-web.scss index 1d55b2a404..c33f373aeb 100644 --- a/src/idsk/components/header-web/_header-web.scss +++ b/src/idsk/components/header-web/_header-web.scss @@ -731,14 +731,19 @@ } &--active { - background-color: $idsk-header-background-secondary; + + @include mq($from: desktop) { + background-color: $idsk-header-background-secondary; + } .idsk-header-web__nav-list-item-link { - &:link, - &:hover, - &:visited { - color: $idsk-header-text-secondary; + @include mq($from: desktop) { + &:link, + &:hover, + &:visited { + color: $idsk-header-text-secondary; + } } &:focus, @@ -868,7 +873,9 @@ display: none; @include govuk-clearfix; - background-color: $idsk-header-background-secondary; + @include mq($from: desktop) { + background-color: $idsk-header-background-secondary; + } &-list { background-color: $idsk-header-dark-blue; From 5b110ddb0325524b39313a407b43f473fbec913f Mon Sep 17 00:00:00 2001 From: Tibor Dulovec Date: Tue, 12 Oct 2021 11:11:58 +0200 Subject: [PATCH 17/33] Removed breadcrumb from homepage vzor, edited formatting --- app/views/vzory/homepage.njk | 637 ++++++++++++++++++----------------- 1 file changed, 331 insertions(+), 306 deletions(-) diff --git a/app/views/vzory/homepage.njk b/app/views/vzory/homepage.njk index 9b15cf050d..4e967795bb 100644 --- a/app/views/vzory/homepage.njk +++ b/app/views/vzory/homepage.njk @@ -7,130 +7,140 @@ {% from "../../../src/idsk/components/footer-extended/macro.njk" import idskFooterExtended %} {% block styles %} - + .idsk-blue-banner__image { + display: block; + margin-bottom: 30px; + } + } + + + {% 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,75 +151,67 @@ 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 %} @@ -219,21 +221,21 @@ 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 +243,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 +283,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 +294,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 +305,38 @@ }) }}
- {{ 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 +373,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 +389,10 @@

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.

@@ -403,7 +411,9 @@

G2G služby

- +

Regionálny rozvoj

- 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 Regionálny rozvoj. + 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 + Regionálny rozvoj.

@@ -470,13 +484,14 @@ }) }}
- +

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 @@ -492,70 +507,80 @@

Podujatia

- Najbližšie podujatia organizované ministerstvom a s podporou ministerstva. Informácií o všetkých udalostiach nájdete na podstránke Podujatia. + Najbližšie podujatia organizované ministerstvom a s podporou ministerstva. Informácií o všetkých udalostiach + nájdete na podstránke Podujatia.

-
-
-
-
- Pandémia COVID-19 ešte viac zvýraznila potrebu urýchliť digitálnu transformáciu v Európe -
-
26.02.2021
+
+
+
+
+ Pandémia + COVID-19 ešte viac zvýraznila potrebu urýchliť digitálnu transformáciu v Európe
+
26.02.2021
-
-
-
- Hackaton - vytváranie šablóny webovej stránky -
-
26.02.2021
+
+
+
+
+ Hackaton + - vytváranie šablóny webovej stránky
+
26.02.2021
-
-
-
- ID-SK workshop #6 -
-
26.02.2021
+
+
+
+
+ ID-SK workshop #6
+
26.02.2021
-
-
-
- Pandémia COVID-19 ešte viac zvýraznila potrebu urýchliť digitálnu transformáciu v Európe -
-
26.02.2021
+
+
+
+
+ Pandémia + COVID-19 ešte viac zvýraznila potrebu urýchliť digitálnu transformáciu v Európe
+
26.02.2021
-
-
-
- Hackaton - vytváranie šablóny webovej stránky -
-
26.02.2021
+
+
+
+
+ Hackaton + - vytváranie šablóny webovej stránky
+
26.02.2021
-
-
-
- ID-SK workshop #6 -
-
26.02.2021
+
+
+
+
+ ID-SK workshop #6
+
26.02.2021
+
-

Projekty a spolupráce MIRRI

+

Projekty a spolupráce MIRRI

- Slovensko je neodlučnou súčasťou európskeho digitálneho priestoru, ktorý pomáha formovať strategické smerovanie digitalizácie u nás. Viac informácií nájdete na na podstránke Informatizácia. + Slovensko je neodlučnou súčasťou európskeho digitálneho priestoru, ktorý pomáha formovať strategické smerovanie + digitalizácie u nás. Viac informácií nájdete na na podstránke + Informatizácia.

@@ -596,37 +621,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 +661,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 +723,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 +743,17 @@ subtitles: [ { - item:"Pomoc", + item:"Pomoc", href:"#" - }, + }, { item:"Cookies", href:"#" - }, + }, { item:"Kontakty", href:"#" - }, + }, { item:"Mapa Stránky", href:"#" @@ -736,17 +761,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 %} From 375ed6b8592140d9a7f4349c7feeb22efa780a10 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Adri=C3=A1n=20K=C3=B3=C5=A1a?= Date: Tue, 12 Oct 2021 11:35:39 +0200 Subject: [PATCH 18/33] wip cookie page pattern --- app/views/vzory/stranka-o-cookies.njk | 166 +++++++++++++++++--------- 1 file changed, 110 insertions(+), 56 deletions(-) diff --git a/app/views/vzory/stranka-o-cookies.njk b/app/views/vzory/stranka-o-cookies.njk index 53c6e0751a..672925db9b 100644 --- a/app/views/vzory/stranka-o-cookies.njk +++ b/app/views/vzory/stranka-o-cookies.njk @@ -89,67 +89,121 @@
{% set exampleComponentHtml %} -
-
-

Zmena cookie nastavení

- - -
-
- - Chcete prijať funkčné cookies? - -
-
- - -
-
- - -
-
- -
-
- -
-
- - Chcete priať analytické cookies? - -
-
- - -
-
- - -
-
- -
-
- - - -
+
+
+

Zmena cookie nastavení

+
+
+
+ + Chcete prijať funkčné cookies? + +
+
+ +
+
+ + +
+
+ +
+
+ +
+
+ + Chcete priať analytické cookies? + +
+
+ + +
+
+ + +
+
+ +
+
+ + +
+
+
{% endset %} {{exampleComponentHtml | safe}} 
{{ exampleComponentHtml }}
+
+

Ak používateľ nastaví alebo zmení nastavenia cookies, použite zelený notifikačný banner na potvrdenie tejto aktivity. Taktiež im umožnite jednoduchý návrat na predchádzajúcu stránku.

+
+
+
+ {% set exampleComponentHtml %} + + {% 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 From 12388e893b216186149521a5464e937e5dca1265 Mon Sep 17 00:00:00 2001 From: Tibor Dulovec Date: Tue, 12 Oct 2021 13:39:41 +0200 Subject: [PATCH 19/33] Hide search suggestions if bottom menu is empty. --- .../examples/exampleIntroBlock3.njk | 25 +++++++++++++++++++ app/views/komponenty/intro-block.njk | 12 ++++++++- 2 files changed, 36 insertions(+), 1 deletion(-) create mode 100644 app/views/komponenty/examples/exampleIntroBlock3.njk 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/intro-block.njk b/app/views/komponenty/intro-block.njk index c104c6189a..28e15d8dd5 100644 --- a/app/views/komponenty/intro-block.njk +++ b/app/views/komponenty/intro-block.njk @@ -87,6 +87,16 @@ {{exampleComponentHtml | safe}}
+
+

Úvodný blok bez návrhov pri vyhľadávaní +

+
+ {% set exampleComponentHtml %} + {% include "../komponenty/examples/exampleIntroBlock3.njk" %} + {% endset %} + {{exampleComponentHtml | safe}} +
+
@@ -98,4 +108,4 @@
-{% endblock %} \ No newline at end of file +{% endblock %} From bcb336ff1528ad00e72e549629ea760419d569c7 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Adri=C3=A1n=20K=C3=B3=C5=A1a?= Date: Tue, 12 Oct 2021 16:07:42 +0200 Subject: [PATCH 20/33] header web fix after testing, not showing menu on mobile menu(electronic service) --- app/views/header-web/index.njk | 1 + .../components/header-web/_header-web.scss | 52 ++++++++----- src/idsk/components/header-web/header-web.js | 17 ++++ .../components/header-web/header-web.yaml | 47 ++++++----- src/idsk/components/header-web/template.njk | 77 +++++++++++-------- 5 files changed, 118 insertions(+), 76 deletions(-) diff --git a/app/views/header-web/index.njk b/app/views/header-web/index.njk index f97c2aaf68..33743d745a 100644 --- a/app/views/header-web/index.njk +++ b/app/views/header-web/index.njk @@ -6,6 +6,7 @@ {{ idskHeaderWeb({ headerType: "website", brand: { + gestor: true, languages: [ { text: "Slovenčina", diff --git a/src/idsk/components/header-web/_header-web.scss b/src/idsk/components/header-web/_header-web.scss index 1d55b2a404..dc23a92eef 100644 --- a/src/idsk/components/header-web/_header-web.scss +++ b/src/idsk/components/header-web/_header-web.scss @@ -16,25 +16,6 @@ box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.15); - &::before { - 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; - } - &__flag { background-color: govuk-colour("black"); -webkit-mask: url(/assets/images/header-web/flag.svg) no-repeat center; @@ -104,6 +85,26 @@ } } + /* 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; @@ -751,8 +752,7 @@ } } - .idsk-header-web__link-arrow, - .idsk-header-web__link-arrow-mobile { + .idsk-header-web__link-arrow { background-color: $idsk-header-text-secondary; } } @@ -1041,5 +1041,15 @@ 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 index 621a1cea97..bd5814f57d 100644 --- a/src/idsk/components/header-web/header-web.js +++ b/src/idsk/components/header-web/header-web.js @@ -18,6 +18,13 @@ HeaderWeb.prototype.init = function () { 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; @@ -71,6 +78,16 @@ HeaderWeb.prototype.init = function () { $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 diff --git a/src/idsk/components/header-web/header-web.yaml b/src/idsk/components/header-web/header-web.yaml index 64ef0ec757..c9bbff55f7 100644 --- a/src/idsk/components/header-web/header-web.yaml +++ b/src/idsk/components/header-web/header-web.yaml @@ -21,14 +21,36 @@ params: required: false description: BrandBar object including language selector. It is voluntary for website, projectWebsite. For electronicService it is MANDATORY!!! params: - - name: nationalEmblem - type: bolean - required: false - description: Allows you to use national Emblem - 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 @@ -46,23 +68,6 @@ params: type: string required: false description: link to english mutation - - 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: main type: object diff --git a/src/idsk/components/header-web/template.njk b/src/idsk/components/header-web/template.njk index 5eda9f8e4b..26baa08b3b 100644 --- a/src/idsk/components/header-web/template.njk +++ b/src/idsk/components/header-web/template.njk @@ -1,5 +1,10 @@ {% from "../button/macro.njk" import idskButton %} +{# SLOVAK TRICOLOR #} +{% set tricolor %} +
+{% endset %} + {# BRAND BAR #} {% set brandBar %} {% set brand = params.brand %} @@ -14,38 +19,40 @@
-
- {% if brand.nationalEmblem %} -
- {% endif %} - - Oficiálna stránka - {% if brand.gestorLink %} - - {{ brand.gestorLink.text if brand.gestorLink.text else 'slovenského e-govermentu' }} - - {% else %} - - {% endif %} - - {# MOBILE VERSION GESTOR LINK/BUTTON #} - - SK - {% if brand.gestorLink %} - - {{ brand.gestorLink.mobileText if brand.gestorLink.mobileText else 'e-gov' }} - - {% else %} - - {% endif %} - -
+ {% 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 %}
- {% elif main.logginButton %} + {% elif main.loginButton %}
@@ -316,8 +324,9 @@
+ {{ bannerSection | safe }} + {{ tricolor | safe }} {{ brandBar | safe }} {{ mainSection | safe }} {{ navBar | safe }} - {{ bannerSection | safe }}
\ No newline at end of file From 5324ffb58bfc4142ddc16ae1eaef032c797da9a8 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Adri=C3=A1n=20K=C3=B3=C5=A1a?= Date: Wed, 13 Oct 2021 11:31:53 +0200 Subject: [PATCH 21/33] header web accessibility fix --- app/views/header-web/index.njk | 2 -- src/idsk/components/header-web/template.njk | 10 +++++----- 2 files changed, 5 insertions(+), 7 deletions(-) diff --git a/app/views/header-web/index.njk b/app/views/header-web/index.njk index 33743d745a..b27137884b 100644 --- a/app/views/header-web/index.njk +++ b/app/views/header-web/index.njk @@ -41,7 +41,6 @@ navBar: { navigation: [ { - link: '#1', text: 'Občan', submenu: [ { @@ -63,7 +62,6 @@ ] }, { - link: '#2', text: 'Podnikateľ', submenu: [ { diff --git a/src/idsk/components/header-web/template.njk b/src/idsk/components/header-web/template.njk index 26baa08b3b..d3109ba730 100644 --- a/src/idsk/components/header-web/template.njk +++ b/src/idsk/components/header-web/template.njk @@ -241,7 +241,7 @@ role="navigation" aria-label="Hlavná navigácia"> {% for item in navigation.slice(0, 5) %}
  • - {{ item.text }} {% if item.submenu %} @@ -250,8 +250,8 @@ {% endif %} {% if item.submenu and (item.submenu | length < 6) %} -
    -
      +
      +
        {% for subItem in item.submenu %}
      • {% elif item.submenu %} -
        +
        -
        {% set exampleComponentHtml %}
        -
        -

        Zmena cookie nastavení

        -
        -
        -
        - - Chcete prijať funkčné cookies? - -
        -
        - - -
        -
        - - -
        -
        - -
        -
        - -
        -
        - - Chcete priať analytické cookies? - -
        -
        - - -
        -
        - - -
        -
        - -
        +
        +
        +
        +
        + + +
        - - - -
        -
        - {% endset %} - {{exampleComponentHtml | safe}} +
        + +
        + 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. +
        + +
        +
        +
        + +
        - 
        {{ exampleComponentHtml }}
        -
        -

        Ak používateľ nastaví alebo zmení nastavenia cookies, použite zelený notifikačný banner na potvrdenie tejto aktivity. Taktiež im umožnite jednoduchý návrat na predchádzajúcu stránku.

        +
        + +
        + 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. +
        + +
        +
        +
        + + +
        -
        -
        - {% set exampleComponentHtml %} -
        {% endset %} From 3f9faf73af111142241d3c803e76a9a1e1181407 Mon Sep 17 00:00:00 2001 From: Tibor Dulovec Date: Wed, 13 Oct 2021 12:56:41 +0200 Subject: [PATCH 23/33] Intro-block edited by figma --- app/views/komponenty/intro-block.njk | 2 +- app/views/vzory/homepage.njk | 107 ++++++++---------- .../components/intro-block/intro-block.scss | 83 ++++++++------ src/idsk/components/intro-block/template.njk | 40 +++---- .../search-component/search-component.scss | 1 + 5 files changed, 117 insertions(+), 116 deletions(-) diff --git a/app/views/komponenty/intro-block.njk b/app/views/komponenty/intro-block.njk index 28e15d8dd5..f20f40fd9b 100644 --- a/app/views/komponenty/intro-block.njk +++ b/app/views/komponenty/intro-block.njk @@ -88,7 +88,7 @@
        -

        Úvodný blok bez návrhov pri vyhľadávaní +

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

        {% set exampleComponentHtml %} diff --git a/app/views/vzory/homepage.njk b/app/views/vzory/homepage.njk index 4e967795bb..e4e6f29e51 100644 --- a/app/views/vzory/homepage.njk +++ b/app/views/vzory/homepage.njk @@ -1,5 +1,4 @@ {% extends "layout.njk" %} -{% from "breadcrumbs/macro.njk" import govukBreadcrumbs %} {% from "../../../src/idsk/components/header-extended/macro.njk" import idskHeaderExtended %} {% from "../../../src/idsk/components/intro-block/macro.njk" import idskIntroBlock %} {% from "../../../src/idsk/components/card/macro.njk" import idskCard %} @@ -8,6 +7,10 @@ {% block styles %}