Megamenu
Počty sloupců jsou řešeny přes classy, které se přidávají nadřazené položce v CMSku. Jsou tři druhy class:
submenu-1-col - jeden sloupec
submenu-2-col - dva sloupce
submenu-3-col - tři sloupce
PŘÍKLAD: nadřazená položka "Solution" má classu submenu-2-col a řadí podřazené položky do dvou sloupců.
Responzivně upraveno. Obrázky jsou pro mobil skryty, takže jsou v mobilním menu jen názvy + popisky.
POZN.:
Oproti návrhu je tam jedna odchylka na desktopu. Položky se v návrhu řadí do sloupců (první sloupce 1 - 3, druhý sloupec, 4 - 6). Z hlediska strukutry kódu jsou položky v řádku (1. řádek = 1 a 2; 2. řádek = 3 a 4; 3. řádek = 5 a 6).
Solution 1-6
Číselník je vyskládaný ve sdílené sekci v bloku Layout, obsahuje classu "layout-numbers". Obsahuje čísla stránek, které mají odkazy na jednotlivé stránky.
Každá stránka, na kterou se odkazuje, respektive, která je součástí číselníku, má v nastavení stránky svoji unikátní classu. Takže první stránka má třídu page-solution-1, druhá page-solution-2 atd.
Vzhledem k tomu, že se sdílená sekce číselníku vkládá do jednotlivých boxů, které jsou na dané stránce, tak tento box na stránce musí mít třídu "box-pages-numbers", aby se do něj sdílená sekce číselníku vložila.
Formulář registrace na událost
Formulář je vyskládaný v poslední sekci události. Má na sobě classu popup-order-form.
Součástí formuláře je počítadlo, které přidává počet osob a na základě toho dopočítává cenu + cenu s DPH
Cena události se zadává v CMS v nastavení dané události na základě, které se pak propíše do popup formuláře
Zaškrtávací políčko má třídu company-info - vkládá do formuláře fakturační údaje
Vstupní boxy s logy a hover obrázkem
LINK NA HOVER BOX VE STYLEGUIDE
Na boxu je custom classa hover-box, která zajišťuje hover efekt - odhalení fotky, přebarvení textů na bílo. V CMSku se ty změny neprojevují a boxu se nastavuje jako pozadí daná fotka, která se pak na FE zobrazí na hover.
Upraveno tak aby se logo zobrazovalo tmavé a na hover boxu bílé. Ideálně dodržovat pro tento hover typ boxu, aby se do něj loga vkládaly pouze v bílé barvě - tím se zajistí správná funkcionalita.
POZN.:
Logo ponecháno v PNG formátu a defacto by mělo být jedno v jakém formátu bude.
Odrážky
OBYČEJNÉ ODRÁŽKY
Úkázkový text
Úkázkový text
ODRÁŽKY S HVĚZDIČKOU JAKO TEXTOVÝ BLOK - třída block-list na textovém bloku
Úkázkový text
Úkázkový text
STARÝ ZPŮSOB - MENŠÍ HVĚZDIČKY: Odrážky s hvězdičkou děláme pomocí obrázku hvězdičky