02.08 Boxy – Časové osy
Zdrojové CSS: /src/css/molecules/box/_timeline.scss
Defaultní
- Zveřejnění rozvrhu 1. července 2015 v 0:00 hod.
- Začátek registrace předmětů 1. července 2015 v 0:00 hod.
- Začátek registrace předmětů 1. července 2015 v 0:00 hod.
- Zveřejnění rozvrhu 1. července 2015 v 0:00 hod.
- Začátek registrace předmětů 1. července 2015 v 0:00 hod.
- Začátek registrace předmětů 1. července 2015 v 0:00 hod.
Zarovnaná doprostřed
Molekula vychází z defaultní molekuly, pouze je zarovnaná doprostřed. Nastavuje se modifikátorem box-timeline--center na .box-timeline
- Zveřejnění rozvrhu 1. července 2015 v 0:00 hod.
- Začátek registrace předmětů 1. července 2015 v 0:00 hod.
- Začátek registrace předmětů 1. července 2015 v 0:00 hod.
- Zveřejnění rozvrhu 1. července 2015 v 0:00 hod.
- Začátek registrace předmětů 1. července 2015 v 0:00 hod.
- Začátek registrace předmětů 1. července 2015 v 0:00 hod.
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.
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.
S boxy s omezení šířky
Modifikace molekuly s boxy. Maximální šířka boxu se omezí na 800px. Nastavuje se modifikátorem box-timeline--two-third na .box-timeline, kterému se nechává modifikátor box-timeline--boxes.
-
Sociální pedagogové pomáhají v Angole
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.
Button
-
Patent pomůže boji s rakovinou
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.
-
Rok 2007 v Muni
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.
S boxy s větším omezení šířky
Modifikace molekuly s boxy. Maximální šířka boxu se omezí na 542px. Nastavuje se modifikátorem box-timeline--half na .box-timeline, kterému se nechává modifikátor box-timeline--boxes.
-
Sociální pedagogové pomáhají v Angole
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.
Button
-
Patent pomůže boji s rakovinou
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.
-
Rok 2007 v Muni
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.
Č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
-
Čtvrtek
24. 3.
– 4. 5.Workshopy iPAD v akademickém prostředí – jaro 2016
Kancelář e-learningu FF MU připravila pro jarní semestr 2016 další sérii workshopů iPAD v akademické...
-
Čtvrtek
24. 3.
Workshopy iPAD v akademickém prostředí – jaro 2016
Kancelář e-learningu FF MU připravila pro jarní semestr 2016 další sérii workshopů iPAD v akademické...
-
Čtvrtek
24. 3.
Workshopy iPAD v akademickém prostředí – jaro 2016
Kancelář e-learningu FF MU připravila pro jarní semestr 2016 další sérii workshopů iPAD v akademické...
Prosinec 2016
-
Čtvrtek
24. 3.
Workshopy iPAD v akademickém prostředí – jaro 2016
Kancelář e-learningu FF MU připravila pro jarní semestr 2016 další sérii workshopů iPAD v akademické...
-
Čtvrtek
24. 3.
Workshopy iPAD v akademickém prostředí – jaro 2016
Kancelář e-learningu FF MU připravila pro jarní semestr 2016 další sérii workshopů iPAD v akademické...
-
Čtvrtek
24. 3.
Workshopy iPAD v akademickém prostředí – jaro 2016
Kancelář e-learningu FF MU připravila pro jarní semestr 2016 další sérii workshopů iPAD v akademické...
Leden - ukázka kombinace s jinými boxy
-
Soutěž Pro vodu - úvodní worshop "Od nápadu k realizaci"
Cílem vyhlašované soutěže o Cenu rektora Masarykovy univerzity pro vynikající pedagogy je ocenit kvalitní pedagogickou činnost zaměstnanců Masarykovy univerzity. Záměrně jsou proto posuzovány pouze pedagogické aktivity nominovaných.
-
Soutěž Pro vodu - úvodní worshop "Od nápadu k realizaci"
Cílem vyhlašované soutěže o Cenu rektora Masarykovy univerzity pro vynikající pedagogy je ocenit kvalitní pedagogickou činnost zaměstnanců Masarykovy univerzity. Záměrně jsou proto posuzovány pouze pedagogické aktivity nominovaných.
-
Soutěž Pro vodu - úvodní worshop "Od nápadu k realizaci"
Cílem vyhlašované soutěže o Cenu rektora Masarykovy univerzity pro vynikající pedagogy je ocenit kvalitní pedagogickou činnost zaměstnanců Masarykovy univerzity. Záměrně jsou proto posuzovány pouze pedagogické aktivity nominovaných.
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.
-
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse sit amet
-
2
Nadpis aktivního kroku
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse sit amet
-
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.
-
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse sit amet
-
Nadpis aktivního kroku
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse sit amet
-
Nadpis kroku
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse sit amet
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.