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
Takže například nadřazená položka "Solution" má classu submenu-2-col a řadí podřazené položky do dvou sloupců.
Responzivně upraveno. Obrázky jsem pro mobil skryl, 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) a v podstatě nejsme schopni to ovlivnit čistě tak, aby to bylo jako v návrhu.
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. Šipky mají své custom classy.
Každá stránka, na kterou se odkazuje, respektive, která je součástí toho číselníku, má v nastavení stránky svoji unikátní classu. Takže první stránka má classu page-solution-1, druhá page-solution-2 atd.
V případě potřeby přesunutí číselníku do boxu (tak jak je to v návrhu), musí mít tento box classu "box-pages-numbers".
Formulář registrace na událost
Formulář je vyskládaný v poslední sekci události. Má na sobě classu popup-order-form.
Vytvořil jsem custom počítadlo, které přidává počet osob a na základě toho dopočítává cena + cenu s DPH. Momentální provizorní řešení: Do popup (řádek nad počítadlo) je přidáno textové pole (s classou event-price ), do kterého se vyplňuje v CMSku cena, která je pak provázaná s počítadlem. Tohle textové pole se nezobrazí na FE
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
Na boxu je custom classa hover-box, která zajišťuje ten 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.
Upravil jsem, tak aby se logo zobrazovalo tmavé a na hover boxu bílé. Ideálně dodržovat pro tenhle hover typ boxu, aby se do něj loga vkládaly pouze v bílé barvě - tím se zajistí správná funkcionalita.
Poznámka: Logo jsem nechal v PNG formátu a defacto by mělo být jedno v jakém formátu bude.
Odrážky
Odrážky s hvězdičkou děláme pomocí obrázku hvězdičky
Obyčejné odrážky
Něco něco
Něco něco