02.08 Boxy – Časové osy

Zdrojové CSS: /src/css/molecules/box/_timeline.scss

Defaultní

Výchozí molekula pro zobrazení událostí v časovém sledu. Každá položka může být klikatelná a docílíme toho tak, že .box-timeline__inner změníme z elementu span na element a s atributem href.

Tento výpis má jeden stav pro méně důležité události (např. konce akcí), který obarví bod a změnší písmo. Nastavuje se modifikátorem box-timeline__item--end na .box-timeline__item.

Do Google kalendáře

Zarovnaná doprostřed

Molekula vychází z defaultní molekuly, pouze je zarovnaná doprostřed. Nastavuje se modifikátorem box-timeline--center na .box-timeline

Do Google kalendáře

S boxy

Rozšíření defaultní molekuly – Obsah jednolivých událostí ohraničí. Nastavuje se modifikátorem box-timeline--boxes na .box-timeline a lehce se změní HTML vnitřního boxu.

Celý box může být opět odkazem – viz. dokumentace defaultní komponenty.

Uvnitř boxu se může objevit "jakékoliv" HTML. Avšak pokud je obalující .box-timeline__inner elementem a, pak by se uvnitř neměly žádné další objevit. Pokud chcete uvnitř použít atom buttonu, pak ho vytvořte jako element span viz. příklad na dvě třetiny.

Nad boxem může být nadpis, který např. může rozdělovat výpis na roky. Tento nadpis se umisťuje nad .box-timeline__box a může nabývat modifikátor box-timeline__title-date--big pro výraznější nadpis.

Další možností je box podbarvit primární barvou. Toto lze nastavit modifikátorem .box-timeline__box--bg na .box-timeline__box.

Obsah boxu společně s nadpisem by také měl být obalen elementem div.box-timeline__box__content, který provádí clear floatů (bez něj např. floatované obrázky mohou přetéct z boxu ven).

Poslední možností je do boxu přidat obrázek. Toto lze nastavit modifikátorem .box-timeline__box--img na .box-timeline__box a lehce tomu přizpůsobit html (přidat element s obrázkem).

  • 1. Rozmyslete si, co vás baví

    V jakých předmětech jste nejlepší? Co vás baví? Do jakých kroužků chodíte? Čemu se věnujete ve volném čase? Udělejte si seznam toho, co připadá v úvahu. A poraďte se s rodiči, kamarády a lidmi, kteří vás dobře znají. Nemusíte se jejich doporučením řídit, ale může vám přinést úplně jiný pohled.

  • 2. Projděte si nabídku oborů a vyberte favority

    V naší nabídce je přes 1 400 oborů a jejich kombinací. U každého oboru jsou navíc vypsané příbuzné obory. Přečtěte si ohlasy studentů, podívejte se na předměty a vyberte si své favority.

  • Velký nadpis

    3. Zajděte na den otevřených dveří

    V lednu a únoru vyrazte na den otevřených dveří. Promluvíte si se studenty a vyučujícími, získáte spoustu informací z první ruky a budete mít jasnou představu o tom, jestli je tento obor ten pravý. Nic vám nebrání vypravit se na nějakou z přednášek špionážně po vlastní ose.

  • V září nebo v lednu

    3. Zajděte na den otevřených dveří

    V lednu a únoru vyrazte na den otevřených dveří. Promluvíte si se studenty a vyučujícími, získáte spoustu informací z první ruky a budete mít jasnou představu o tom, jestli je tento obor ten pravý. Nic vám nebrání vypravit se na nějakou z přednášek špionážně po vlastní ose.

  • 4. Projděte si nabídku oborů a vyberte favority

    V naší nabídce je přes 1 400 oborů a jejich kombinací. U každého oboru jsou navíc vypsané příbuzné obory. Přečtěte si ohlasy studentů, podívejte se na předměty a vyberte si své favority.

  • 6. Projděte si nabídku oborů a vyberte favority

    V naší nabídce je přes 1 400 oborů a jejich kombinací. U každého oboru jsou navíc vypsané příbuzné obory. Přečtěte si ohlasy studentů, podívejte se na předměty a vyberte si své favority.

  • 5. Projděte si nabídku oborů a vyberte favority

    V naší nabídce je přes 1 400 oborů a jejich kombinací. U každého oboru jsou navíc vypsané příbuzné obory. Přečtěte si ohlasy studentů, podívejte se na předměty a vyberte si své favority.

    V naší nabídce je přes 1 400 oborů a jejich kombinací. U každého oboru jsou navíc vypsané příbuzné obory. Přečtěte si ohlasy studentů, podívejte se na předměty a vyberte si své favority.

    V naší nabídce je přes 1 400 oborů a jejich kombinací. U každého oboru jsou navíc vypsané příbuzné obory. Přečtěte si ohlasy studentů, podívejte se na předměty a vyberte si své favority.

  • 6. Projděte si nabídku oborů a vyberte favority

    Floatovaný obrázek uvnitř

S čísly

Rozšíření defaultní molekuly – Nastavuje se modifikátorem box-timeline--numbers na .box-timeline a lehce se změní HTML vnitřního boxu.

Celý box může být opět odkazem – viz. dokumentace defaultní komponenty.

Uvnitř boxu se může objevit "jakékoliv" HTML. Avšak pokud je obalující .box-timeline__inner elementem a, pak by se uvnitř neměly žádné další objevit. Pokud chcete uvnitř použít atom buttonu, pak ho vytvořte jako element span viz. příklad na dvě třetiny.

Nad boxem může být nadpis, který např. může rozdělovat výpis na roky. Tento nadpis se umisťuje nad .box-timeline__box a může nabývat modifikátor box-timeline__title-date--big pro výraznější nadpis.

Další možností je box podbarvit primární barvou. Toto lze nastavit modifikátorem box-timeline__box--bg na .box-timeline__box.

Poslední možností je do boxu přidat obrázek. Toto lze nastavit modifikátorem box-timeline__box--img na .box-timeline__box a lehce tomu přizpůsobit html (přidat element s obrázkem).

S pozadím

Časová osa událostí

Tato molekula slouží jako kostra pro výpis událostí v nějakém sledu. Do .box-timeline-dates__item lze vkládat "jakékoliv" boxové molekuly. V našem případě používáme molekuly boxů s událostmi a článku.

Defaultně je připaravené s čárou pod kalendáříky, která opticky spojuje celý výpis – což se hodí pouze pro výpis událostí s kalendáři. Pokud chceme tento výpis bez čar, pak k tomu slouží modifikátor box-timeline-dates__item--no-line na .box-timeline-dates__item.

Listopad 2016

Prosinec 2016

Progress bar s čísly

Defaultní molekula pro horizontální výpis kroků. Standardní ukázka bez modifikátorů je krok 3.

První krok je ukázka již hotového stavu. Nastavuje se modifikátorem box-timeline-progress__item--ok na .box-timeline-progress__item. Navíc se do .box-timeline-progress__illust doplní ikonka.

Druhý krok je ukázka aktivní položky. Nastavuje se modifikátorem box-timeline-progress__item--active na .box-timeline-progress__item.

  1. Nadpis vyplněného kroku

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse sit amet

  2. 2

    Nadpis aktivního kroku

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse sit amet

  3. 3

    Nadpis kroku

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse sit amet

Progress bar s ikonami

Horizontální výpis kroků lze také využít i pro vypis nějakých informací s ikonkami. Princip je stejný jako u předchozí molekuly a namísto čísla se vloží atom jakékoliv ikonky.

  1. Nadpis vyplněného kroku

    Popis mollis laoreet nisl id tincidunt. Pellentesque mollis

  2. Nadpis aktivního kroku

    Popis mollis laoreet nisl id tincidunt. Pellentesque mollis

  3. Nadpis kroku

    Popis mollis laoreet nisl id tincidunt. Pellentesque mollis

Progress bar s ikonami - další varianta

Horizontální výpis kroků lze také využít i pro vypis nějakých informací s ikonkami. Princip je stejný jako u předchozí molekuly a namísto čísla se vloží atom jakékoliv ikonky.

Pro odlišené obarvení je potřeba přidat na obal modifikační třídu .box-timeline-progress--reverse

  1. Nadpis vyplněného kroku

    Popis mollis laoreet nisl id tincidunt. Pellentesque mollis

  2. Nadpis aktivního kroku

    Popis mollis laoreet nisl id tincidunt. Pellentesque mollis

  3. Nadpis kroku

    Popis mollis laoreet nisl id tincidunt. Pellentesque mollis