forked from alphagov/govuk-frontend
-
Notifications
You must be signed in to change notification settings - Fork 20
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #115 from id-sk/test
Test
- Loading branch information
Showing
87 changed files
with
5,269 additions
and
429 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,30 @@ | ||
| {% from "../../../../src/idsk/components/feedback/macro.njk" import idskFeedback %} | ||
| {{ idskFeedback({ | ||
| counter : 0, | ||
| characterLength : 200, | ||
| feedbackOptions: [ | ||
| { | ||
| name:"Veľmi nespokojný", | ||
| textArea:true, | ||
| value: 1 | ||
| }, | ||
| { | ||
| name:"Nespokojný", | ||
| textArea:true, | ||
| value: 2 | ||
| }, | ||
| { | ||
| name:"Ani spokojný ani nespokojný", | ||
| textArea:true, | ||
| value: 3 | ||
| }, | ||
| { | ||
| name:"Spokojný", | ||
| value: 4 | ||
| }, | ||
| { | ||
| name:"Veľmi spokojný", | ||
| value: 5 | ||
| } | ||
| ]}) | ||
| }} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,49 @@ | ||
| {% extends "layout.njk" %} | ||
| {% from "breadcrumbs/macro.njk" import govukBreadcrumbs %} | ||
|
|
||
| {% set pageName = "Spätná väzba" %} | ||
|
|
||
| {% block beforeContent %} | ||
| {{ govukBreadcrumbs({ | ||
| "items": [ | ||
| { text: 'ID-SK frontend', href: '/' + legacyQuery }, | ||
| { text: pageName } | ||
| ] | ||
| }) }} | ||
| {% endblock %} | ||
|
|
||
| {% block content %} | ||
| <span class="govuk-caption-xl">Webové komponenty</span> | ||
| <h1 class="govuk-heading-xl">{{pageName}}</h1> | ||
| <p class="govuk-body-l">Spätná väzba | ||
| </p> | ||
| <div class="govuk-grid-row"> | ||
| <div class="govuk-grid-column-two-thirds"> | ||
| <h2 class="govuk-heading-s">Obsah:</h2> | ||
| <ul class="govuk-list"> | ||
| <li> | ||
| <a href="#ukazka-spatna-vazba">Príklad spätnej väzby</a> | ||
| </li> | ||
| </ul> | ||
| </div> | ||
|
|
||
| <div class="govuk-grid-column-full"> | ||
| <h3 class="govuk-heading-m" id="ukazka-spatna-vazba">Príklad spätnej väzby</h3> | ||
| <div class="example"> | ||
| {% set exampleComponentHtml %} | ||
| {% include "../komponenty/examples/exampleFeedback.njk" %} | ||
| {% endset %} | ||
| {{exampleComponentHtml | safe}} | ||
| </div> | ||
| </div> | ||
|
|
||
| <div class="govuk-grid-column-two-thirds"> | ||
| <h2 class="govuk-heading-l" id="priklady">Rozšírené príklady pre spätnú väzbu</h2> | ||
| <ul class="govuk-list"> | ||
| <li> | ||
| <a href="/custom-components/feedback">Rozšírené príklady spätnej väzby</a> | ||
| </li> | ||
| </ul> | ||
| </div> | ||
| </div> | ||
| {% endblock %} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,90 @@ | ||
| {% extends "layout.njk" %} | ||
| {% from "breadcrumbs/macro.njk" import govukBreadcrumbs %} | ||
|
|
||
| {% set pageName = "In-page navigation" %} | ||
|
|
||
| {% block beforeContent %} | ||
| {{ govukBreadcrumbs({ | ||
| "items": [ | ||
| { text: 'ID-SK frontend', href: '/' + legacyQuery }, | ||
| { text: pageName } | ||
| ] | ||
| }) }} | ||
| {% endblock %} | ||
|
|
||
| {% block content %} | ||
| <div class="govuk-width-container"> | ||
|
|
||
| <span class="govuk-caption-xl">Navigácia na stránke</span> | ||
| <h1 class="govuk-heading-xl">{{pageName}}</h1> | ||
| <p class="govuk-body-l"> | ||
| Navigácia na stránke (angl. In-page Navigation) použite pri dlhších stránkach s konkrétnym obsahom. Napríklad pri článkoch, stránkach so životopisom, stránkach s obsahom k životným situáciám alebo pre dlhšie štruktúrované dokumenty akými sú príručky, vyhlášky, zákony a pod. | ||
| </p> | ||
| <p class="govuk-body-l"> | ||
| Navigácia na stránke zobrazuje používateľovi prehľad obsahu danej stránky (na základe použitých nadpisov v rámci stránky). Vďaka tomu sa používateľ lepšie a rýchlejšie zorientuje v obsahu, ktorý mu ponúkate. | ||
| </p> | ||
|
|
||
| <div class="govuk-grid-row"> | ||
| <div class="govuk-grid-column-two-thirds"> | ||
| <h2 class="govuk-heading-s">Obsah:</h2> | ||
| <ul class="govuk-list"> | ||
| <li><a href="#ake-vlastnosti-ma-navigacia-na-stranke">Aké vlastnosti má navigácia na stránke?</a></li> | ||
| <li><a href="#vzor-navigacie-na-stranke">Vzor navigácie na stránke</a></li> | ||
| </ul> | ||
| </div> | ||
|
|
||
| <div class="govuk-grid-column-full"> | ||
| <h3 class="govuk-heading-m" id="ake-vlastnosti-ma-navigacia-na-stranke">Aké vlastnosti má navigácia na stránke?</h3> | ||
| <p class="govuk-body"> | ||
| Navigácia na stránke by sa mala generovať automaticky na základe nadpisov, ktoré na stránke používate, aby ste používateľom pomohli intuitívne štruktúrovať jej obsah. | ||
| </p> | ||
| <h3 class="govuk-heading-m">Desktop:</h3> | ||
| <p class="govuk-body"> | ||
| Navigácia na stránke je vždy vľavo a v rozložení ¼ obrazovky a ¾ obrazovky obsah stránky. Pri verzii pre desktop navigácia “pláva” - to znamená, že navigácia zostane pri scrollovaní nadol v hornej časti obrazovky tak, aby mal používateľ prístup a prehľad k obsahu na stránke. | ||
| </p> | ||
| <div class="govuk-grid-row"> | ||
| <div class="govuk-grid-column-full"> | ||
| <div class="example example-mobile example-mobile-scroll"> | ||
| <iframe | ||
| src="/custom-components/in-page-navigation/default/preview" | ||
| height="310px" | ||
| ></iframe> | ||
| </div> | ||
| </div> | ||
| </div> | ||
|
|
||
| <h3 class="govuk-heading-m">Mobilná verzia:</h3> | ||
| <p class="govuk-body"> | ||
| Pri verzii pre mobilné telefóny je navigácia na stránke zobrazená ako lišta na začiatku stránky. Pri skrolovaní nadol sa lišta pripne pod hlavičku tak, aby mal používateľ po celý čas prezerania obsahu prístup k navigácii. Pri kliknutí na odkaz v lište sa rozbalí obsah navigácie na stránke. | ||
| </p> | ||
| <p class="govuk-body"> | ||
| V prípade, že je obsahu veľa (t.j. okno s navigáciou by presahovalo viac ako polovicu obrazovky zariadenia), sa obsah v rámci navigácie bude dať posúvať ako zoznam. | ||
| </p> | ||
| <p class="govuk-body"> | ||
| Ak je niektorý z názvov obsahu dlhší ako je šírka obrazovky zariadenia, zobrazí začiatok názvu a pokračovanie názvu bude znázornené tromi bodkami. | ||
| </p> | ||
| <div class="govuk-grid-row"> | ||
| <div class="govuk-grid-column-one-half"> | ||
| <div class="example example-mobile example-mobile-scroll"> | ||
| <iframe | ||
| src="/custom-components/in-page-navigation/default/preview" | ||
| height="300px" | ||
| ></iframe> | ||
| </div> | ||
| </div> | ||
| </div> | ||
|
|
||
|
|
||
| <div class="govuk-grid-column-two-thirds"> | ||
| <h3 class="govuk-heading-m" id="vzor-navigacie-na-stranke">Vzor navigácie na stránke</h3> | ||
| <ul class="govuk-list"> | ||
| <li><a href="/vzory/vzor-navigacie-na-stranke" title="Rozšírený vzor navigácia na stránke">Rozšírený vzor navigácia na stránke</a></li> | ||
| </ul> | ||
| </div> | ||
|
|
||
| </div> | ||
|
|
||
| </div> | ||
|
|
||
| </div> | ||
| {% endblock %} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,115 @@ | ||
| {% extends "layout.njk" %} | ||
| {% from "breadcrumbs/macro.njk" import govukBreadcrumbs %} | ||
|
|
||
| {% set pageName = "Úvodný blok pre webové sídla" %} | ||
|
|
||
| {% block beforeContent %} | ||
| {{ govukBreadcrumbs({ | ||
| "items": [ | ||
| { text: 'ID-SK frontend', href: '/' + legacyQuery }, | ||
| { text: pageName } | ||
| ] | ||
| }) }} | ||
| {% endblock %} | ||
|
|
||
| {% block content %} | ||
| <span class="govuk-caption-xl">Webové komponenty</span> | ||
| <h1 class="govuk-heading-xl">{{pageName}}</h1> | ||
| <p class="govuk-body-l"> | ||
| Pri tvorbe novej webovej stránky je okrem povinnej hlavičky pre webové sídla [link na hlavičku pre webové sídla] a pätičky s feedback barom [link na pätičku pre webové sídla] povinný aj tento úvodný blok. | ||
| </p> | ||
| <div class="govuk-grid-row"> | ||
| <div class="govuk-grid-column-two-thirds"> | ||
| <h2 class="govuk-heading-s">Obsah:</h2> | ||
| <ul class="govuk-list"> | ||
| <li> | ||
| <a href="#skladba">Z čoho sa skladá úvodný blok? | ||
| </a> | ||
| </li> | ||
| <li> | ||
| <a href="#ukazka-uvodny-block-homepage">Úvodný blok domovskej stránky | ||
| </a> | ||
| </li> | ||
| <li> | ||
| <a href="#ukazka-uvodny-block-blue">Úvodný blok podstránky</a> | ||
| </li> | ||
| <li> | ||
| <a href="#ukazka-uvodny-block-grey">Populárny obsah v úvodnom bloku</a> | ||
| </li> | ||
| </ul> | ||
| <h3 class="govuk-heading-m" id="skladba">Z čoho sa skladá úvodný blok?</h3> | ||
| <p class="govuk-body">Skladá sa z:</p> | ||
| <ul class="govuk-list"> | ||
| <li> | ||
| <a >a) nadpisu, | ||
| </a> | ||
| </li> | ||
| <li> | ||
| <a >b) krátkeho textu, | ||
| </a> | ||
| </li> | ||
| <li> | ||
| <a >c) dominantného vyhľadávacieho poľa so šírkou ⅔ obrazovky v prípade desktopu a celou šírkou obrazovky v prípade mobilných zariadení, | ||
| </a> | ||
| </li> | ||
| <li> | ||
| <a >d) skratky k často vyhľadávaným výrazom pod vyhľadávacím poľom, | ||
| </a> | ||
| </li> | ||
| <li> | ||
| <a >e) populárneho obsahu.</a> | ||
| </li> | ||
| </ul> | ||
| </div> | ||
| </div> | ||
| <div class="govuk-grid-row"> | ||
| <div class="govuk-grid-column-full"> | ||
| <h3 class="govuk-heading-m" id="ukazka-uvodny-block-homepage">Úvodný blok domovskej stránky | ||
| </h3> | ||
| <p class="govuk-body">Úvodný blok domovskej stránky slúži ako jedna z foriem navigácie používateľa po webovom sídle. Nadpis a podnadpis slúžia na intuitívne uistenie používateľa, že sa naozaj nachádza na webovom sídle vašej inštitúcie. Podnadpis môžete využiť aj ako odkaz na podstránku s detailnejšími informáciami o vašej inštitúcii (v hlavnom menu je zbytočný). Dominantnou a nevyhnutnou súčasťou úvodného bloku domovskej stránky je vyhľadávacie pole. Doplnkom k vyhľadávaciemu poľu je pole s piatimi najčastejšie hľadanými výrazmi či frázami, ktoré by sa malo aktualizovať automaticky (toto nastavenie si však musíte zabezpečiť pri implementácii tohto vzoru). | ||
| </p> | ||
|
|
||
| <div class="example"> | ||
| {% set exampleComponentHtml %} | ||
| {% include "../komponenty/examples/exampleIntroBlock.njk" %} | ||
| {% endset %} | ||
| {{exampleComponentHtml | safe}} | ||
| </div> | ||
| </div> | ||
| <div class="govuk-grid-column-full"> | ||
| <h3 class="govuk-heading-m" id="ukazka-uvodny-block-blue">Úvodný blok podstránky</h3> | ||
| <p class="govuk-body">Webová stránka môže slúžiť na komunikáciu viacerých dôležitých tém, na základe čoho môže byť webová stránka aj štruktúrovaná. Niektorá z tém môže zahŕňať dostatok obsahu na to, aby "dostala" vlastnú podstránku. Úvodný blok podstránky by mal byť úvodom všetkých, tematicky ladených podstránok. Taktiež slúži ako jedna z foriem navigácie používateľa. Narozdiel od domovskej stránky, úvodný blok podstránky neobsahuje vyhľadávacie pole. Obsahuje však nadpis, podnadpis a komponent populárny obsah. | ||
| </p> | ||
| <div class="example"> | ||
| {% set exampleComponentHtml %} | ||
| {% include "../komponenty/examples/exampleIntroBlock2.njk" %} | ||
| {% endset %} | ||
| {{exampleComponentHtml | safe}} | ||
| </div> | ||
| </div> | ||
| <div class="govuk-grid-column-full"> | ||
| <h3 class="govuk-heading-m" id="ukazka-uvodny-block-grey">Populárny obsah v úvodnom bloku | ||
| </h3> | ||
| <p class="govuk-body">Súčasťou úvodného bloku je komponent zvýrazňujúci populárny obsah. Komponent populárny obsah sa skladá z nadpisu a piatich textových odkazov na najnavštevovanejšie podstránky vášho webu. Populárny obsah odporúčame taktiež nastaviť na automatickú aktualizáciu na základe webovej analytiky. | ||
| </p> | ||
| <p class="govuk-body">Komponent populárny obsah má tri základné variácie pozadia: bez pozadia (so zarovnaním vpravo), so šedým a s modrým pozadím (so zarovnaním vľavo za pomoci odrážok). | ||
| </p> | ||
| <div class="example"> | ||
| {% set exampleComponentHtml %} | ||
| {% include "../komponenty/examples/exampleIntroBlock1.njk" %} | ||
| {% endset %} | ||
| {{exampleComponentHtml | safe}} | ||
| </div> | ||
| </div> | ||
| </div> | ||
| <div class="govuk-grid-row"> | ||
| <div class="govuk-grid-column-full"> | ||
| <h2 class="govuk-heading-l" id="priklady">Rozšírené príklady pre úvodný blok</h2> | ||
| <ul class="govuk-list"> | ||
| <li> | ||
| <a href="/custom-components/intro-block">Rozšírené príklady úvodného bloku</a> | ||
| </li> | ||
| </ul> | ||
| </div> | ||
| </div> | ||
| {% endblock %} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.