Changelogs

Classnames

Prefix

Všetky classy s lb-prefixom boli premenované na vpm- prefix.

Je to z toho dôvodu, aby bolo hneď na prvý pohľad jasné, že ide o classy, ktoré boli vytvorené a použité čisto pre účely tohto projektu.

Menovite ide o tieto classy :

• .lb-color-disabled zmenené na .vpm-color-disabled
• .lb-border-disabled zmenené na .vpm-border-disabled
• .lb-text-align-right zmenené na .vpm-text-align-right
• .lb-background-color-grey zmenené na .vpm-background-color-grey
• .lb-vertical-align-middle zmenené na .vpm-vertical-align-middle
• .lb-info-mark-width-40 zmenené na .vpm-info-mark-width-40

Samozrejme bolo potrebné zmeniť tieto názvy aj vo všetkých HTML súboroch, v ktorých sa vyskytovali.

Header

Header, ktorý sme používali v prvej fáze tohto projektu bolo nutné upraviť vlastným CSS kódom, pretože IDSK header neponúkal a dodnes neponúka možnosť zobrazenia hlavičky, ako sme potrebovali.

Zmeniť štruktúru tohto kódu bolo potrebné z dôvodu, že v prvej fáze projektu sme pracovali iba s hlavičkou pre prihláseného používateľa a takto zapísaný kód ovplyvňuje každú hlavičku, ktorú by sme v jednotlivých obrazovkách použili, bez ohľadu na to, či sa jedná o hlavičku prihláseného alebo neprihláseného používateľa.

Cieľom tohto kódu však bola úprava iba hlavičky pre prihláseného používateľa. A preto sa kód musel zmeniť nasledovne:

.idsk-header__product-name {
  font-weight: bold !important;
}

.vpm-custom-header {
  .idsk-header__logo {
    width: auto !important;
  }

  .idsk-\!-text-align {
    &-right {
      text-align: right !important;
    }
    &-center {
      text-align: center !important;
    }
  }

  .idsk-\!-align-left {
    float: left !important;
  }
  .idsk-\!-align-right {
    float: right !important;
  }
}
                

Hlavnou zmenou je to, že pribudla nová classa .vpm-custom-header, ktorá je rodičom všetkých ostatných a aplikuje sa iba na header pre prihláseného používateľa, keďže iba tento header potrebujeme pozmeniť. Header pre neprihláseného používateľa korešponduje s navrhnutým dizajnom bez nutnosti ho meniť.

Odstránené classy

Niektoré classy boli odstránené alebo nahradené classami, ktoré defaultne ponúka ID-SK, respektíve GOV-UK.

Menovite ide o tieto classy :

• .lb-display-inline-block nahradená za .govuk-!-display-inline-block
• .lb-visibility-hidden odstránená - nebola potrebná a nebola využitá na žiadnej obrazovke

Opäť bolo teda potrebné poupraviť aj HTML súbory, v ktorých sa nahradená classa nachádzala.

Opravy rozbitého dizajnu

Počas dizajnovania druhej fázy tohto projektu sme identifikovali, že niektoré komponenty sa nesprávajú na mobilných zariadeniach tak, ako by sa mali alebo ako by sme očakávali. Preto bolo nutné tieto komponenty opraviť.

Tabuľky

Pokiaľ tabulky obsahovali väčšie množstvo údajov, tak na mobilných zariadeniach stránku rozbili a pretŕčali z nej von.

Riešením tohto problému bolo obalenie tabuľky do divu, ktorý má nastavenú classu .vpm-table-overflow-x.

Táto classa sa prejaví, ak je rozlíšenie obrazovky menšie ako 500px, a to tak, že obsah tabuľky bude posuvný.

@media screen and (max-width: 500px) {
  .vpm-table-overflow-x {
    overflow-x: scroll !important;
  }
}
                

V prípade, že sa jedná o tabuľku, pod ktorou sa nacháda stránkovanie, toto stránkovanie musí byť umiestnené mimo divu s touto classou. Predídeme tak tomu, že sa bude posúvať spolu s tabuľkou.

Opäť bolo teda potrebné poupraviť všetky HTML súbory, v ktorých sa tabuľky nachádzajú.

Tlačidlá umiestnené vedľa seba

Pokiaľ stránka obsahovala tlačidlá umiestnené vedľa seba (prevažne v spodnej časti stránky, kde fungovali ako navigácia medzi predošlou a nasledujúcou obrazovkou), tak na mobilných zariadeniach stránku rozbili a pretŕčali z nej von.

Dialo sa to pretože tieto tlačidlá boli obalené divom, ktorý mal classu .govuk-button-group. Táto classa zabezpečovala to, že sa tieto tlačidlá správne umiestnia vedľa seba a sú od seba vziadelné 15px.

Problém však nastal, keď sa pri mobilnom zobrazení tieto tlačidlá natiahli na celú šírku stránky a zobrazili sa pod sebou. Margin, ktorý zabezpečoval 15px medzery medzi jednotlivými tlačidlami nebol vynulovaný, a tak tieto tlačidlá pretŕčali zo stránky a rozbíjali ju.

Riešením v tomto prípade bolo definovanie media query, ktoré tento margin odstráni presne vtedy, keď sa tlačidlá naťahujú na celú šírku stránky.

@media screen and (max-width: 640px) {
  .govuk-button-group {
    margin-right: 0 !important;
  }
}
              

Zmenené obrazovky z prvej fázy

V každej obrazovke, v ktorej sa nachádza detail pracovnej ponuky (všetky stavy) bolo sídlo zalomené z jedného riadku do troch riadkov.

Niektoré obrazovky z prvej fázy bolo nutné zmeniť alebo im vytvoriť ďalšiu variantu alebo dokonca rozšíriť flow o ďalšie obrazovky na základe DFŠ.

Konkrétne ide o tieto obrazovky:

• Profil kandidáta
• Rozcestník
• Detail aktuálnej ponuky

A boli zmenené nasledovne:

• Profil kandidáta - varianta: zverejnil údaje
• Profil kandidáta - varianta: nezverejnil údaje
• Rozcestník
• Detail aktuálnej ponuky

Nové obrazovky (rozšírenie flowu):

• Moji kandidati
• Moji kandidati - detail aktívneho kandidáta
• Moji kandidati - detail neaktívneho kandidáta

Profil kandidáta - varianta: zverejnil údaje

Konkrétne zmeny v tejto obrazovke:

• Zmenený text pod nadpisom Kandidát 3
• Zmenený text v roletke Prečo nemôžem kontaktovať kandidáta priamo?
• Nové tlačidlo Pridať do Moji kandidáti

Profil kandidáta - varianta: nezverejnil údaje

Konkrétne zmeny v tejto obrazovke:

• Zmenený text pod nadpisom Kandidát 3
• Pribudli kontaktné údaje, ktoré kandidát zverejnil zamestnávateľom
• Text, ktorý hovorí o tom, že aj napriek tomu, že kandidát zverejnil svoje kontaktné údaje má zamestnávateľ možnosť využiť kontaktovanie za pomoci úradu práce
• Nové tlačidlo Pridať do Moji kandidáti

V oboch prípadoch po kliknutí na tlačidlo Kontakovať úrad, flow pokračuje touto obrazovkou.

Rozcestník

Konkrétne zmeny v tejto obrazovke:

• Zmenený nadpis
• Zmenený úvodný text pod nadpisom
• Pridaný nový flow do akordeónu - Moji kandidáti

Vo flowe Moji kandidáti sa nachádza zoznam kandidátov, ktorých si zamestnávateľ "označí" pomocou tlačidla Pridať do Moji kandidáti, ktoré sa nachádza v profile kandidáta.

Detail aktuálnej ponuky

Konkrétne zmeny v tejto obrazovke:

• Zmenený úvodný text pod nadpisom
• Zmenený vysvetľujúci text pod úvodným textom
• Zmenený text informujúci o stave ponuky a počte kandidátov
• Zoznam kandidáti premenovaný na Vhodní kandidati a vložený do akordeónu
• Nový zoznam Uchádzači, ktorý taktiež pribudol do akordeónu

Rozdiel medzi uchádzačmi a kandidátmi je taký, že kandidátov systém na pozadí spája na základe vzájomnej zhody, kdežto uchádzači sa o túto pracovnú pozíciu uchádzajú tak, že na ňu reagovali odoslaním svojho profilu.

Moji kandidáti

Zoznam Mojich kandidátov sa delí do dvoch akordeónov, a to na aktívni kandidáti a neaktívni kandidáti. Kandidát sa stane neaktívnym vtedy, keď sa odhlási z úradu práce a teda jeho profil na portáli VPM zanikne.

Po kliknutí na Moji kandidáti, z Rozcestníku flow pokračuje touto obrazovkou.

Detaily profilu aktívneho a neaktívneho kandidáta sa líšia :

Moji kandidati - detail aktívneho kandidáta

Moji kandidati - detail neaktívneho kandidáta