Obecný popis
- Pomocou triedy
col-xsacol-xs-"číslo"definuje rozmery pre všetky rozlíšenia (mobile-first). *vymeňte za xs/sm/md/xm/lg a"číslo"za číslo z rozsahu 1-12.
|
XSmall ≥0 |
Small ≥768px |
Medium ≥1024px |
XMedium ≥1142px |
Large ≥1261px |
|
|---|---|---|---|---|---|
| Class prefix | .col-xs- |
.col-sm- |
.col-md- |
.col-xm- |
.col-lg- |
| Počet stĺpcov | 12 | ||||
| Šírka odsadenia .row | 16px (8px zľava a zprava) | ||||
| Šírka odsadenia .row-small | 8px (4px zľava a zprava) | ||||
| Šírka odsadenia .row-big | 24px (12px zľava a zprava) | ||||
| Zanorovateľné | Áno | ||||
| Poradie | Áno | ||||
Menší padding pomocou -small
- Pomocou triedy
col-*-smalla rodičomrow-small.
<div class="row row-small">
<div class="col-xs col-xs-small">
1 / 7
</div>
<div class="col-xs col-xs-small">
2 / 7
</div>
<div class="col-xs col-xs-small">
3 / 7
</div>
<div class="col-xs col-xs-small">
4 / 7
</div>
<div class="col-xs col-xs-small">
5 / 7
</div>
<div class="col-xs col-xs-small">
6 / 7
</div>
<div class="col-xs col-xs-small">
7 / 7
</div>
</div>
Väčší padding pomocou -big
- Pomocou triedy
col-*-biga rodičomrow-big.
<div class="row row-big">
<div class="col-xs col-xs-big">
1 / 3
</div>
<div class="col-xs col-xs-big">
2 / 3
</div>
<div class="col-xs col-xs-big">
3 / 3
</div>
</div>
Rovnaká width
- Pomocou triedy
col-*.
<div class="row">
<div class="col-xs">
1 / 7
</div>
<div class="col-xs">
2 / 7
</div>
<div class="col-xs">
3 / 7
</div>
<div class="col-xs">
4 / 7
</div>
<div class="col-xs">
5 / 7
</div>
<div class="col-xs">
6 / 7
</div>
<div class="col-xs">
7 / 7
</div>
</div>
<div class="row">
<div class="col-xs">
1 / 3
</div>
<div class="col-xs">
2 / 3
</div>
<div class="col-xs">
3 / 3
</div>
</div>
Jedna width automaticky podľa obsahu
- Pomocou triedy
col-*-autopri triedecol-*.
<div class="row">
<div class="col-xs">
1 / 5
</div>
<div class="col-xs">
2 / 5
</div>
<div class="col-xs col-xs-auto">
3 / 5 auto
</div>
<div class="col-xs">
4 / 5
</div>
<div class="col-xs">
5 / 5
</div>
</div>
Jedna buňka s pevne danou width
- Pomocou triedy
col-*-"číslo". - Hodí sa primárne, keď nie je možné row správne rozdeliť, napr. na 2.5 - 7 - 2.5
<div class="row">
<div class="col-xs">
1 / 3
</div>
<div class="col-xs-7">
2 / 3 veľkosť 7
</div>
<div class="col-xs">
3 / 3
</div>
</div>
Responsive
<div class="row">
<div class="col-xs-4">
.col-xs-4
</div>
<div class="col-xs-2">
.col-xs-2
</div>
<div class="col-xs-6">
.col-xs-6
</div>
</div>
<div class="row">
<div class="col-md-5">
.col-md-5
</div>
<div class="col-md-4">
.col-md-4
</div>
<div class="col-md-3">
.col-md-3
</div>
</div>
Miš maš
<div class="row">
<div class="col-xs-3 col-sm-7">
.col-xs-3.col-sm-7
</div>
<div class="col-xs-7 col-md-3">
.col-xs-7.col-md-3
</div>
<div class="col-xs-2">
.col-xs-2
</div>
</div>
Zarovnanie
Vertikálne
- Pomocou triedy
top-*,bottom-*,middle-*. - U jednotlivých buňkách je to pomocou triedy
self-auto-*,self-start-*,self-end-*,self-middle-*,self-baseline-*,self-stretch-*.
<div class="flex-fix">
<div class="row top-xs">
<div class="col-xs">
1 / 3 zarovnanie na top
</div>
<div class="col-xs">
2 / 3 zarovnanie na top
</div>
<div class="col-xs">
3 / 3 zarovnanie na top
</div>
</div>
<div class="row middle-xs">
<div class="col-xs">
1 / 3 zarovnanie na center
</div>
<div class="col-xs">
2 / 3 zarovnanie na center
</div>
<div class="col-xs">
3 / 3 zarovnanie na center
</div>
</div>
<div class="row bottom-xs">
<div class="col-xs">
1 / 3 zarovnanie na bottom
</div>
<div class="col-xs">
2 / 3 zarovnanie na bottom
</div>
<div class="col-xs">
3 / 3 zarovnanie na bottom
</div>
</div>
<div class="row">
<div class="col-xs self-start-xs">
1 / 3 zarovnanie na top
</div>
<div class="col-xs self-end-xs">
2 / 3 zarovnanie na bottom
</div>
<div class="col-xs self-middle-xs">
3 / 3 zarovnanie na center
</div>
</div>
</div>
Horizontálne
- Pomocou triedy
start-*,end-*,center-*,around-*,between-*.
<div class="row start-xs">
<div class="col-xs-4">
1 / 2 zarovnanie na ľavobok
</div>
<div class="col-xs-4">
2 / 2 zarovnanie na ľavobok
</div>
</div>
<div class="row end-xs">
<div class="col-xs-4">
1 / 2 zarovnanie na pravobok
</div>
<div class="col-xs-4">
2 / 2 zarovnanie na pravobok
</div>
</div>
<div class="row center-xs">
<div class="col-xs-4">
1 / 2 zarovnanie na stred
</div>
<div class="col-xs-4">
2 / 2 zarovnanie na stred
</div>
</div>
<div class="row around-xs">
<div class="col-xs-4">
1 / 2 zarovnanie okolo
</div>
<div class="col-xs-4">
2 / 2 zarovnanie okolo
</div>
</div>
<div class="row between-xs">
<div class="col-xs-4">
1 / 2 zarovnanie medzi
</div>
<div class="col-xs-4">
2 / 2 zarovnanie medzi
</div>
</div>
Bez paddingu v buňkách
- Pomocou triedy
no-guttersnarowv prípade, že sa to týka všetkých buniek. - Pomocou triedy
no-gutters-colna konkrétnu buňku. - Pomocou triedy
no-gutter-left-colna konkrétnu buňku, ak nechcem odsadenie zľava. - Pomocou triedy
no-gutter-right-colna konkrétnu buňku, ak nechcem odsadenie zprava. - Nastavenie je voči všetkým responsivným variantám, nie je možné nastaviť samostatne pre breakpoint.
<div class="row no-gutters"> <div class="col-xs-12 col-sm-6 col-md-8">.col-xs-12.col-sm-6.col-md-8</div> <div class="col-xs-6 col-md-4">.col-xs-6.col-md-4</div> </div> <div class="row"> <div class="col-xs-12 col-sm-6 col-md-8">.col-xs-12.col-sm-6.col-md-8</div> <div class="col-xs-6 col-md-4 no-gutters-col">.col-xs-6.col-md-4.no-gutters-col</div> </div>
Wrappovanie
- Buňky sa automaticky zalamujú podľa veľkosti (ako sa zmestia na riadok)
<div class="row">
<div class="col-xs-7">
1 / 3 veľkosť 7
</div>
<div class="col-xs-8">
2 / 3 veľkosť 8
</div>
<div class="col-xs-3">
3 / 3 veľkosť 3
</div>
</div>
Poradie
- Pomocou triedy
first-*alast-*. - Jedná se len o vizuálnu stránku.
<div class="row">
<div class="col-xs">
1 / 3 bez poradia
</div>
<div class="col-xs last-xs">
2 / 3, ale posledný
</div>
<div class="col-xs first-xs">
3 / 3, ale prvý
</div>
</div>
Odsadenie
- Pomocou triedy
offset-*-"číslo"je možné buňku posunúť.
<div class="row"> <div class="col-sm-4">.col-sm-4</div> <div class="col-sm-4 offset-sm-4">.col-sm-4.offset-sm-4</div> </div> <div class="row"> <div class="col-sm-3 offset-sm-3">.col-sm-3 .offset-sm-3</div> <div class="col-sm-3 offset-sm-3">.col-sm-3 .offset-sm-3</div> </div> <div class="row"> <div class="col-sm-6 offset-sm-3">.col-sm-6 .offset-sm-3</div> </div>
Push a pull
- Poradie je možné meniť aj pomocou triedy
push-*-"číslo"do prava apull-*-"číslo"do ľava.
<div class="row"> <div class="col-sm-9 push-sm-3">1 / 2 .col-sm-9.push-sm-3</div> <div class="col-sm-3 pull-sm-9">2 / 2 .col-sm-3.pull-sm-9</div> </div>
Zanorovanie
<div class="row"> <div class="col-sm-9 push-sm-3">1 / 2 .col-sm-9.push-sm-3</div> <div class="col-sm-3 pull-sm-9">2 / 2 .col-sm-3.pull-sm-9</div> </div>
Obtékání prvku
.floatL- Obtékání prvku zleva.floatR- Obtékání prvku zprava.clear- Zrušení obtékání
.floatL
.floatR
Zarovnání textu
.alignL
- Zarovnání textu doleva
.alignR
- Zarovnání textu doprava
.alignC
- Zarovnání textu na střed
.vAlignT- Vertikální zarovnání textu co nejvýše.vAlignM- Vertikální zarovnání textu na střed.vAlignBs- Vertikální zarovnání textu na na účaří řádku
Hlášky - třídy
.cErrorDisColor- Chybová hláška.cWarnDisColor- Varovací hláška.cOkDisColor- Potvrzující hláška
Padding a Margin
| Třída | Popisek | Třída | Popisek |
|---|
Relativní šířky
Percentage
Pixels
Div jako tabulka
| Třída | Popisek |
|---|---|
| .divTable | Zobrazení divu jako tabulky |
| .divTableTr | Zobrazení divu jako řádku |
| .divTableTd, divTableTh | Zobrazení divu jako buňky |
Pozicování
| Třída | Popisek | Třída | Popisek |
|---|
Ostatní důležité vychytávky
.posRel- relativní pozicováni.posAbs- absolutní pozicováni
.posRel
span {
position:relative;
right:5px;
bottom:95px;
}
.posAbs
span {
position:absolute;
left:10px;
top:5px;
}
.wrap
- Slovo bude zalomeno, pokud se nevejde na řádek
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut condimentum libero ut leo convallis.
.noWrap
- Text nebude automaticky zalamován ale bude na jednom řádku
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut condimentum libero ut leo convallis.
- .mousePointer - Vzhled kurzoru myši - ručička - znázorňuje klikací oblast
- .mouseDefault - Vzhled kurzoru myši - šipky - defaultní zobrazení kurzoru
- .bgTrans - Pozadí bude transparentní
Flexbox
.flexBoxRow
- vyskláda flexbox položky do řádku.
.flexBoxColumn
- vyskláda flexbox položky do svislého směru.
Náhrady farieb
- rgb(75,161,229) | #4BA1E5 je nahradená TS-BLUE-MAIN
- rgb(102,102,102) | #666666 je nahradená BLACK-54
- rgb(180,180,180) | #B4B4B4 je nahradená BLACK-38
- rgb(164,164,164) | #A4A4A4 je nahradená BLACK-38
- rgb(60,60,60) | #3C3C3C je nahradená BLACK-26
- rgb(70,70,70) | #464646 je nahradená BLACK-26
- rgb(226,226,226) | #E2E2E2 je nahradená BLACK-12
- rgb(217,217,217) | #D9D9D9 je nahradená BLACK-12
- rgb(230,230,230) | #E6E6E6 je nahradená BLACK-12
- rgb(239,239,239) | #EFEFEF je nahradená BLACK-6
- rgb(92,92,92) | #5C5C5C je nahradená BLACK-6
- rgb(216,216,216) | #D8D8D8 je nahradená WHITE-70
- rgb(76,76,76) | #4C4C4C je nahradená WHITE-70 alebo BLACK-54
- rgb(150,150,150) | #969696 je nahradená WHITE-50
- rgb(170,170,170) | #AAAAAA je nahradená WHITE-50
- rgb(120,120,120) | #787878 je nahradená WHITE-30
Kombinácie veľkosti fontov/line-height/font-weight
- Názov je tvorený kombináciou
a-text--font size-line height-font weightnapríklada-text--14-17-400pre font-size: 14px, line-height: 17px a font-weight: 400.
Kombinácie farieb fontov
- Názov je tvorený kombináciou
a-text--farba TS-farba TN-farba CHnapríklada-text--b54w70w70pre @black54 v Tipsportu, @white70 v Tipsportu Night a @white70 v Chanci.
Nečíslovaný seznam
- Odrážka 1
- Odrážka 2
- Odrážka 3
- Odrážka 4
- Odrážka 5
HTML:
<ul class="list"> <li>Odrážka 1</li> <li>Odrážka 2</li> <li>Odrážka 3</li> <li>Odrážka 4</li> <li>Odrážka 5</li> </ul>
Číslovaný seznam
- Odrážka 1. úroveň
- Odrážka 1.1 úroveň
- Odrážka 1.1.1 úroveň
- Odrážka 1.2 úroveň
- Odrážka 1.2.1 úroveň
- Odrážka 1.2.1.1 úroveň
- Odrážka 1.2.1.2 úroveň
- Odrážka 1.2.1 úroveň
- Odrážka 1.1 úroveň
- Odrážka 2. úroveň
- Odrážka 2.1 úroveň
HTML:
<ol>
<li>Odrážka 1. úroveň
<ol>
<li>Odrážka 1.1 úroveň
<ol>
<li>Odrážka 1.1.1 úroveň</li>
</ol>
</li>
<li>Odrážka 1.2 úroveň
<ol>
<li>Odrážka 1.2.1 úroveň
<ol>
<li>Odrážka 1.2.1.1 úroveň</li>
<li>Odrážka 1.2.1.2 úroveň</li>
</ol>
</li>
</ol>
</li>
</ol>
</li>
<li>Odrážka 2. úroveň
<ol>
<li>Odrážka 2.1 úroveň</li>
</ol>
</li>
</ol>
Číslovaný seznam s napisy
-
H1 nadpis v číslovaném seznamu
-
H2 nadpis v číslovaném seznamu
-
H3 nadpis v číslovaném seznamu
HTML:
<ol>
<li class="h1Li">
<h1>H1 nadpis v číslovaném seznamu</h1>
</li>
<li class="h2Li">
<h2>H2 nadpis v číslovaném seznamu</h2>
</li>
<li class="h3Li">
<h3>H3 nadpis v číslovaném seznamu</h3>
</li>
</ol>
Tabulky
- hlavička tabulky je barevně podbarvená
- pokud kliknutí na řádek vyvolá nějakou akci, musí být při hoveru podbarvený
- mámě tři druhy tabulek, standardní, úzkou a univerzální
| Třída | Popisek |
|---|---|
| .tbl | Standardní tabulka |
| .tblSlim | Úzká tabulka, která má zmenšený paddingu a písmo |
| .tblHover | Přidá hover na řádky, které na kliknutí vyvolají nějakou akci |
| .colMoney | Třídu používáme pro buňky, který mají peněžní hodnotu(vsazeno, výhra atd.). |
| .rowHeader | Třídu používáme pro řadek kde je hlavička tabulky, nastyluje se ji tím pozadí hlavičky |
| .rowTop | Třídu používáme pro řádky, kde potřebujeme zvýraznit prvních x řádků v tabulce(postupující klienti v žebříčku atd.) |
| .rowBot | Třídu používáme pro řádky, kde potřebujeme zvýraznit posledních x řádků v tabulce(sestupující klienti v žebříčku atd.) |
| .rowDisabled | Třídu používáme pro buňky, který mají indikaci neaktivních řádků |
| .rowSelected | Třídu používáme pro buňky, který mají vybraneho řádku. |
Tabulka standardní
| Datum | Kurz | Vsazeno | Výhra |
|---|---|---|---|
| 24.3.2015 15:48:20 |
.rowTop | 320 Kč | 0 Kč |
| 24.3.2015 15:48:20 |
320 Kč | 0 Kč | |
| 24.3.2015 15:48:20 |
.rowDisabled | 320 Kč | 0 Kč |
| 24.3.2015 15:48:20 |
.rowBot | 320 Kč | 0 Kč |
| 24.3.2015 15:48:20 |
320 Kč | 0 Kč | |
| 24.3.2015 15:48:20 |
.rowSelected | 320 Kč | 0 Kč |
HTML:
<table class="tbl w100">
<thead>
<tr class="rowHeader">
<th></th>
<th></th>
<th></th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
Tabulka úzká
| Datum | Kurz | Vsazeno | Výhra |
|---|---|---|---|
| 24.3.2015 15:48:20 |
1,9 | 320 Kč | 0 Kč |
| 24.3.2015 15:48:20 |
1,9 | 320 Kč | 0 Kč |
HTML:
<table class="tbl tblSlim w100">
<thead>
<tr class="rowHeader">
<th></th>
<th></th>
<th></th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
Tabulka univerzální
| Platební metoda | Poplatek | Limity transakce Kč | Doba zpracování | Vklad |
|---|---|---|---|---|
| Platební karta | 0 Kč | bez omezení | on-line | |
| PayU banka | 20 Kč | bez omezení | on-line | |
| Bankovní převod | 20 Kč | bez omezení | 1 - 3 prac. dny | |
| Vklad na pobočce | 0 Kč | 5 000 K2č / 24 hodin | on-line |
HTML:
<table class="tblUni w100">
<thead>
<tr class="rowHeader">
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
- Rozdiel medzi nálepkou (label) a štítkom (tag) je v použití.
a-labelmá iba estetickú funkciu a vyjadruje istú príslušnosť.a-tagje funkčný element, pomocou ktorého je napríklad možné filtrovať.
Nálepky
- V základnej podobe nemá žiadne farebné/theme nastavenie, to sa pridáva až modifikátorom.
Defaultný kód pre label
<div class="a-label">Test</div>
Kód pre label live
- Použitý modifikátor je
a-label--live.
<div class="a-label a-label--live">Lorem</div>
Kód pre label top
- Použitý modifikátor je
a-label--top.
<div class="a-label a-label--top">Ipsum</div>
Tagy
- Má jenom jeden základný vzhľad, ktorý sa modifikuje v prípade aktívnosti pomocou
a-tag--active. - Aktívna varianta má v sebe ešte ikonu krížika (i001), je to ikona s kódom
spr-i001-0-11-normal-hover.
Defaultný kód pre tag
<div class="a-tag"> <span>dolor sit amet</span> </div> <div class="a-tag a-tag--active"> <span>dolor sit amet</span> <img src="/images/blank.png" height="11" width="11" class="sprIco spr-i001-0-11-normal-hover a-tag__close" alt="" /> </div>
Rohový pásik
- Možnosť umiestnenia do rohov pomocou modifikátorov
--topLeft,--topRight,--bottomLefta--bottomRightpoužitých nam-ribbonam-ribbon__text. - Rodič musí mať nastavenú
position: reltive.
Kódy pre všetky štyri rohy
<div class="m-ribbon m-ribbon--topLeft"> <span class="m-ribbon__text m-ribbon__text--topLeft">top</span> </div>
Vstupní pole
[Zdrojový kód pro vstupní a chybové pole]HTML:
<input type="text" class="edt" placeholder="Vstupní textové pole"> <input type="text" class="edt cBorderError" placeholder="Chybové textové pole">
Víceřádkové vstupní pole
[Zdrojový kód pro vstupní pole]HTML:
<textarea class="txt" placeholder="Víceřádkové vstupní pole"></textarea>
Výběr pole datumu
[Zdrojový kód výběrového pole pro datum]
HTML:
<input type="text" value="" class="edt" id="jsEdtDatePicker" placeholder="Klikněte pro výběr" />
JS:
tip.utils.CommonsUI.setCalendarWidgetToInput($$('jsEdtDatePicker'), tip.utils.Commons.ONLY_DATE_MASK, /[0-9\.]/);
Výběrové pole
[Zdrojový kód pro výběrového pole]
HTML:
<select id="selectBox1" class="sel">
<option value="" selected="selected">Výběrové pole</option>
<option value="">Druha polozka</option>
</select>
Přepínací tlačítka
[Zdrojový kód přepínacího tlačítka]
REACT:
<tip.components.common.forms.Radio id={id} name="name" label={label} checked={checked} value={value} onChange={onChange} />
HTML:
<div class="radWrap">
<input type="radio" id="radioExample1">
<label for="radioExample1">Popisek...</label>
</div>
Zaškrtávací tlačítka
[Zdrojový kód zaškrtávacího tlačítka]
REACT:
<tip.components.common.forms.Checkbox id={id} label={label} checked={checked} onChange={onChange} />
HTML:
<div class="chkWrap">
<input type="checkbox" id="checkboxExample1">
<label for="checkboxExample1">Label...</label>
</div>
ScrollBox
HTML:
<input type="text" value="" class="edt" id="jsEdtDatePicker" placeholder="Klikněte pro výběr" />
JS:
tip.utils.CommonsUI.setCalendarWidgetToInput($$('jsEdtDatePicker'), tip.utils.Commons.ONLY_DATE_MASK, /[0-9\.]/);
HTML:
<select id="selectBox1" class="sel">
<option value="" selected="selected">Výběrové pole</option>
<option value="">Druha polozka</option>
</select>
REACT:
<tip.components.common.forms.Radio id={id} name="name" label={label} checked={checked} value={value} onChange={onChange} />
HTML:
<div class="radWrap"> <input type="radio" id="radioExample1"> <label for="radioExample1">Popisek...</label> </div>
REACT:
<tip.components.common.forms.Checkbox id={id} label={label} checked={checked} onChange={onChange} />
HTML:
<div class="chkWrap"> <input type="checkbox" id="checkboxExample1"> <label for="checkboxExample1">Label...</label> </div>
Nastavitelná šírka pomocou classu "w10..w100"
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nisi nisl, pellentesque eu odio sed, iaculis tempus ante. Nullam consequat ante luctus vestibulum faucibus. Ut sit amet urna vel augue porttitor euismod. Morbi nec consectetur Duis ac mi dignissim, mattis urna sit amet, pellentesque elit. Sed nec nibh ac purus scelerisque facilisis. Mauris vel turpis id nisl faucibus mattis vel a velit. Nullam fermentum neque urna, consectetur tempus mauris hendrerit at.
In ut lectus justo. Integer dapibus in leo sit amet rhoncus. Vivamus rutrum semper iaculis. Aliquam sodales arcu sed mauris commodo volutpat. Etiam est ex, cursus placerat finibus in, pulvinar ac risus. Integer facilisis blandit consectetur. Ut placerat auctor arcu quis dignissim. In hac habitasse platea dictumst. Nullam sagittis purus
vitae turpis convallis hendrerit. Vivamus sed molestie ex. Curabitur id semper ex. Morbi nec auctor felis. Fusce sed lorem eget ipsum dapibus hendrerit sed vel elit. Sed tempor a odio eu imperdiet. Nunc ornare enim vel nisl ultrices, eget scelerisque dui suscipit. Aliquam consectetur, erat in ornare porta, lacus justo imperdiet arcu, eu sodales sapien elit ut massa.
Phasellus pellentesque magna tempor ante porta, id placerat orci accumsan. Integer aliquam lacus quis lacus bibendum, ac iaculis urna viverra. Nulla facilisi. Sed tempor vehicula ultrices. Donec consectetur luctus purus, quis egestas odio. Suspendisse venenatis, nisl at eleifend luctus, libero eros hendrerit nulla, interdum dapibus mi mauris in enim. Maecenas euismod libero ac viverra aliquet. Proin vestibulum lectus eu libero tincidunt mollis.
Praesent a mauris quis nulla convallis vulputate at ac dolor. Nunc posuere venenatis imperdiet. Vivamus luctus, lacus eu laoreet tempus, est massa aliquet quam, non euismod felis nulla at libero. Nam placerat ligula ac turpis varius, a cursus libero sodales. Etiam pulvinar pretium turpis. Proin eget lacus in magna posuere semper ac sit amet mi. Fusce tincidunt eleifend erat sit amet vestibulum. Etiam ipsum turpis, facilisis et consequat in, dictum vitae nulla. Quisque egestas f
HTML:
<div class="centerContentTextFrame">
<div class="textFrameContainer textPaneBlock">
<div class="textContainer p13R w50">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
</div>
SlimScroll
Je nutné includnout jquery.slimscroll.js a potom na pozadovanem prvku zavolat $('.slimScroll').slimScroll() pri refreshi je nutne volat reinicializaci a pak to funguje i na dynamicky se menicim obsahu, vyzkouseno na LIVE foru.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nisi nisl, pellentesque eu odio sed, iaculis tempus ante. Nullam consequat ante luctus vestibulum faucibus. Ut sit amet urna vel augue porttitor euismod. Morbi nec consectetur Duis ac mi dignissim, mattis urna sit amet, pellentesque elit. Sed nec nibh ac purus scelerisque facilisis. Mauris vel turpis id nisl faucibus mattis vel a velit. Nullam fermentum neque urna, consectetur tempus mauris hendrerit at.
In ut lectus justo. Integer dapibus in leo sit amet rhoncus. Vivamus rutrum semper iaculis. Aliquam sodales arcu sed mauris commodo volutpat. Etiam est ex, cursus placerat finibus in, pulvinar ac risus. Integer facilisis blandit consectetur. Ut placerat auctor arcu quis dignissim. In hac habitasse platea dictumst. Nullam sagittis purus
vitae turpis convallis hendrerit. Vivamus sed molestie ex. Curabitur id semper ex. Morbi nec auctor felis. Fusce sed lorem eget ipsum dapibus hendrerit sed vel elit. Sed tempor a odio eu imperdiet. Nunc ornare enim vel nisl ultrices, eget scelerisque dui suscipit. Aliquam consectetur, erat in ornare porta, lacus justo imperdiet arcu, eu sodales sapien elit ut massa.
Phasellus pellentesque magna tempor ante porta, id placerat orci accumsan. Integer aliquam lacus quis lacus bibendum, ac iaculis urna viverra. Nulla facilisi. Sed tempor vehicula ultrices. Donec consectetur luctus purus, quis egestas odio. Suspendisse venenatis, nisl at eleifend luctus, libero eros hendrerit nulla, interdum dapibus mi mauris in enim. Maecenas euismod libero ac viverra aliquet. Proin vestibulum lectus eu libero tincidunt mollis.
Praesent a mauris quis nulla convallis vulputate at ac dolor. Nunc posuere venenatis imperdiet. Vivamus luctus, lacus eu laoreet tempus, est massa aliquet quam, non euismod felis nulla at libero. Nam placerat ligula ac turpis varius, a cursus libero sodales. Etiam pulvinar pretium turpis. Proin eget lacus in magna posuere semper ac sit amet mi. Fusce tincidunt eleifend erat sit amet vestibulum. Etiam ipsum turpis, facilisis et consequat in, dictum vitae nulla. Quisque egestas f
Slider
Double Slider
HTML:
<input type="text" id="sliderRateFromId" class="edtSlider"> <div id="sliderRateId" class="goog-twothumbslider"> <div class="goog-twothumbslider-value-thumb" /div> <div class="goog-twothumbslider-extent-thumb" /div> </div> <input type="text" id="sliderRateToId" class="edtSlider">
JS:
new tip.components.DoubleSlider('sliderRateId', callbackFunction, 1, 1000, 'sliderRateFromId', 'sliderRateToId', tip.components.DoubleSlider.SliderRateValuesIntervals, 2);
Simple slider
HTML:
<div id="simpleSlider" class="goog-slider a-singleSlider a-singleSlider--withDesc"> <div id="simpleSliderScale" class="a-singleSlider__desc" ></div> <div class="goog-slider-line"></div> <div class="goog-slider-thumb"></div> </div> <input id="slimpleSliderValueId" class="edtSlider"/div>
JS:
new tip.components.SimpleSlider('simpleSlider', callbackFunction, 0, 100, 75, '%');
Tlačítka
Tlačítko standardní .btn, mixin: .B1()
[Zdrojový kód tlačítka]REACT:
<tip.components.common.forms.Button text="Tlacitko" onClick={this.click} />
HTML:
<input type="submit" value="Tlačítko" class="btn">
Tlačítko akce .btn.btnAction, mixin: .B3()
[Zdrojový kód tlačítka akce]REACT:
<tip.components.common.forms.Button text="Tlacitko" onClick={this.click} btnAction={true} />
HTML:
<input type="submit" value="Tlačítko akce" class="btn btnAction">
JSP:
<html:submit styleId="" styleClass="btn btnAction"> <w:message key="" bundle=""> </html:submit>
Tlačítko .B1() nebo .B3() s ikonou - velikost ikony je 15px


REACT:
<tip.components.common.forms.Button icon="sprIco spr-i043-0-15-normal" onClick={onClick}/>
<tip.components.common.forms.Button icon="sprIco spr-i043-1-15-normal" onClick={onClick} btnAction={true}/>
HTML:
<div class="btn "><img src="/images/blank.png" class="sprIco spr-i043-0-15-normal" style="width: 15px; height: 15px;"></div> <div class="btn btnAction"><img src="/images/blank.png" class="sprIco spr-i043-1-15-normal" style="width: 15px; height: 15px;"></div>
Tlačítko kurzu .btnRate, mixin: .B4()
Normalní
Vybraný
Nejsázenější
S rohy
Neaktivní
HTML:
Normální:<div class="btnRate">2.00</div>Vybraný:
<div class="btnRate selected">2.00</div>S rohy:
<div class="btnRate">2.00<span class="arrowUp"></span></div> <div class="btnRate">2.00<span class="arrowDown"></span></div>Neaktivní se zámkem:
<div class="btnRate disabled"> <img src="/images/blank.png" width="15" height="15" class="sprIco spr-i131-0-15-inactive"> </div>
Tlačítko kurzů v live .btnRateLive, mixin: .B5()
Normalní
Vybraný
S rohy
Neaktivní
HTML:
Normální:<div class="btnRateLive"> <span class="name">Remíza</span> <span class="value">2.00</span> </div>Vybraný:
<div class="btnRateLive selected"> <span class="name">Remíza</span> <span class="value">2.00</span> </div>S rohy:
<div class="btnRateLive"> <span class="name">Remíza</span> <span class="arrowUp"></span> <span class="value">2.00</span> </div> <div class="btnRateLive"> <span class="name">Remíza</span> <span class="arrowDown"></span> <span class="value">2.00</span> </div>Neaktivní se zámkem:
<div class="btnRateLive disabled"> <span class="name">Remíza</span> <img src="/images/blank.png" width="15" height="15" class="sprIco spr-i131-0-15-inactive"> </div>
Chat Input
HTML:
<div id="contentColumn">
<div id="content3ColLayoutId">
<div id="privateMessagesContainerId" class="textPane">
<div class="sendMessageContainer extended">
<form name="PrivateMessageForm" method="post" class="privateMessageForm">
<div style="display:none;">'
<input type="text" maxlength="40" class="edt recipientNickStyle">
</div>
<div class="smileIco sprIco spr-i118-0-21-normal-hover">
</div>
<div class="message">
<textarea name="message" class="sendMessage txt separator" autocomplete="off" rows="4">
</div>
<div class="submit">
<input type="submit" value="Odeslat zprávu" class="btnAction btn sendMessageSubmit">
</div>
</form>
</div>
</div>
</div>
</div>
JS:
var allWrapper = $$("allWrapper");
var except = $$("except");
tip.utils.CommonsUI.listenToClick(allWrapper,function() {
except.removeAttribute("rows");
except.setAttribute("rows" , "1");
$$("ex").classList.remove("extended");
});
tip.utils.CommonsUI.listenToClick(except,function(e) {
this.removeAttribute("rows");
this.setAttribute("rows" , "4");
$$("ex").classList.add("extended");
e.stopPropagation();
});
Vstupní pole s našeptávačem
[Zdrojový kód vstupního pole s našeptávačem]
JS:
new tip.components.SearchInput($$('inputId'), goog.bind(function() {console.log('key pressed')}, this), 10);
Tooltip
- plovoucí vrstva, která se ve výchozím nastavení automaticky zavře
- nechová se jako modální dialog
- volitelná ikonka křížku, která popup zavírá
JS:
new tip.pages.utils.Tooltip($$('targetElement'), htmlText, null, 2000, true);
Kontextová bublina
- plovoucí vrstva uvnitř stránky
- možnost umístění kontextový bubliny vzhledem k elementu (tL, tR, bL, bR, c)
- nechová se jako modální dialog
- kliknutí mimo kontextový bubliny se automaticky zavře
- možnost automatického zavření kontextový bubliny za určitý čas
- volitelná ikonka křížku, která kontextovou bublinu zavírá
[Zdrojový kód popupu]
REACT:
<tip.components.common.layers.Popup
title={title}
width={300}
refElement={this.wrapElem}
onClose={this.close}
>
// elementy v popupu
</tip.components.common.layers.Popup>
JS:
var popup = new tip.pages.utils.Popup('idPopup', htmlText, $$('targetElement'), 200, 'bL', 'tL');
popup.setMarginBox(10, 10);
popup.show();
Modální dialogy
- typy dialogů jsou rozlišené ikonkou a barvou textu
- obsahuje v pozadí stmívací vrstvu
- zavření dialogu lze klávesou ESC
- pomocí z-indexu překrývají všechny plovoucí vrstvy na stránce
Modální okno
[Zdrojový kód pro modální okno]
REACT:
<tip.components.common.layers.ModalDialog
onPopupClose={onPopupClose}
title={title}
width="500px"
visible={true}
>
..
</tip.components.common.layers.ModalDialog>
JS:
tip.utils.CommonsUI.openDialog('titulek', 'htmlText');
nebo v případě zobrzení iframu v modálním okně
tip.utils.CommonsUI.openDialogWithIframe('titulek', 'url');
Informační dialog
[Zdrojový kód Info dialog]JS:
new tip.components.AlertModalDialog('title', 'msg', undefined, tip.components.AlertModalDialog.TYPE.INFO);
Potvrzovací dialog
[Zdrojový kód potvrzovacího dialogu]JS:
var confirmDialog = new tip.components.ConfirmModalDialog('title', 'msg', this.getLanguage(), goog.bind(function() {
// callback function
confirmDialog.close();
}, this));
Loader
- komponenta s animaci cekani na neco / ze se neco deje ...
Malý 15x15
Menší 21x21
Normální 31x31
REACT:
<tip.components.common.layers.Loaderenabled={loading} fixed={false} overlay={true} size={tip.components.common.layers.Loader.SIZE.BIG} >
// element/y ktere loader obaluje
</tip.components.common.layers.Loader>
JS:
var loaderHtml = tip.utils.CommonsUI.createLoader('myLoader');
var loaderElem = tip.utils.CommonsUI.createLoader('myLoader', 21, true);
JSP:
<w:loader />
<w:loader loaderId="myLoader" size="21" />
Standardní
- Tab1
- Tab2
- Tab3
HTML:
<ul class="tab"> <li class="selected"><span class="tabC">Tab1</span></li> <li><span class="tabC">Tab2</span></li> <li class="dis"><span class="tabC">Tab3</span></li> </ul>
S ikonkami
-
Stream
-
Stav
-
Statistiky
-
Komentáře
HTML:
<ul class="tab">
<li class="selected">
<img src="/images/blank.png" class="sprIco spr-i012-0-21-pressed" width="21" height="21">
<span class="tabC">Stream</span>
</li>
<li>
<img src="/images/blank.png" class="sprIco spr-i040-0-21-normal" width="21" height="21">
<span class="tabC">Stav</span>
</li>
<li>
<img src="/images/blank.png" class="sprIco spr-i041-0-21-normal" width="21" height="21">
<span class="tabC">Statistiky</span>
</li>
<li class="dis">
<img src="/images/blank.png" class="sprIco spr-i037-0-21-normal" width="21" height="21">
<span class="tabC">Komentáře</span>
</li>
</ul>
Stránkování
Vlevo nad tabulkou
- PRVNÍ
- PŘEDCHOZÍ
- 3
- DALŠÍ
HTML:
<ul class="tab"> <li class="tabC">PRVNÍ</li> <li class="tabC">PŘEDCHOZÍ</li> <li class="tabC selected">3</li> <li class="tabC">DALŠÍ</li> </ul>
Vpravo nad tabulkou
- PRVNÍ
- PŘEDCHOZÍ
- 3
- DALŠÍ
HTML:
<div class="pagingWrap">
<ul class="tab">
<li class="tabC">PRVNÍ</li>
<li class="tabC">PŘEDCHOZÍ</li>
<li class="tabC selected">3</li>
<li class="tabC">DALŠÍ</li>
</ul>
</div>
Dva seznamy, strankování vpravo nad tabulkou, vlevo obecný standardní tab
- PONDĚLÍ
- ÚTERÝ
- STŘEDA
- ČTVRTEK
- PRVNÍ
- PŘEDCHOZÍ
- 3
- DALŠÍ
HTML:
<div class="pagingWrap">
<ul class="tab">
<li class="tabC">PONDĚLÍ</li>
<li class="tabC">ÚTERÝ</li>
<li class="tabC selected">STŘEDA</li>
<li class="tabC">ČTVRTEK</li>
</ul>
<ul class="tab">
<li class="tabC">PRVNÍ</li>
<li class="tabC">PŘEDCHOZÍ</li>
<li class="tabC selected">3</li>
<li class="tabC">DALŠÍ</li>
</ul>
</div>
Vlevo pod tabulkou
- PRVNÍ
- PŘEDCHOZÍ
- 3
- DALŠÍ
HTML:
<ul class="tab tabPagingBot"> <li class="tabC">PRVNÍ</li> <li class="tabC">PŘEDCHOZÍ</li> <li class="tabC selected">3</li> <li class="tabC">DALŠÍ</li> </ul>
Vpravo pod tabulkou
- PRVNÍ
- PŘEDCHOZÍ
- 3
- DALŠÍ
HTML:
<div class="pagingWrapBot">
<ul class="tab tabPagingBot">
<li class="tabC">PRVNÍ</li>
<li class="tabC">PŘEDCHOZÍ</li>
<li class="tabC selected">3</li>
<li class="tabC">DALŠÍ</li>
</ul>
</div>
Komponenta rozbalovacího obsahu
Rozbalovací obsah
Rozbalovací obsah
HTML:
<h3 class="zippyHead">Rozbalovací obsah</h3> <div class="zippyContent"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras et nisi id </div>
JS:
tip.utils.CommonsUI.initZippyComponents(document);
Nastylovaný číselný zoznam s radením pod sebou
- Radenie pod sebou ovplyvňuje class-a
m-directory--column. - Šírka elementu je 100%. V prípade nutnosti zmeny šírky či odsadenia, urobte tak novou m- nebo o- classou zavesenou na daný element.
- Zarovnanie prvku je možné zmeniť na stred pomocou class-y
m-directory__element--centerzavesenej nam-directory__elementprípadne pre zarovnanie k spodnému okraju class-oum-directory__element--bottom. - Aktívny prvok zoznamu indikuje stavová trieda
m-directory__square--isActivezavesená nam-directory__element.
Defaultný kód bez žiadného špecialného nastavenia
<div class="m-directory m-directory--column">
<div class="m-directory__element">
<div class="a-aspectRatio a-aspectRatio--1-1 m-directory__square"></div>
<div class="m-directory__text"><strong>Zadání a potvrzení e-mailu</strong></div>
</div>
<div class="m-directory__element">
<div class="a-aspectRatio a-aspectRatio--1-1 m-directory__square"></div>
<div class="m-directory__text"><strong>Potvrzení telefoního čísla</strong></div>
</div>
<div class="m-directory__element">
<div class="a-aspectRatio a-aspectRatio--1-1 m-directory__square"></div>
<div class="m-directory__text"><strong>Změna hesla</strong></div>
</div>
<div class="m-directory__element">
<div class="a-aspectRatio a-aspectRatio--1-1 m-directory__square"></div>
<div class="m-directory__text"><strong>Dokončení</strong></div>
</div>
</div>
Prvý prvok zarovnaný na stred
<div class="m-directory m-directory--column">
<div class="m-directory__element m-directory__element--center">
<div class="a-aspectRatio a-aspectRatio--1-1 m-directory__square"></div>
<div class="m-directory__text"><strong>Zadání a potvrzení e-mailu</strong></div>
</div>
<div class="m-directory__element">
<div class="a-aspectRatio a-aspectRatio--1-1 m-directory__square"></div>
<div class="m-directory__text"><strong>Potvrzení telefoního čísla</strong></div>
</div>
</div>
Prvý prvok zarovnanýk spodnému okraju
<div class="m-directory m-directory--column">
<div class="m-directory__element m-directory__element--bottom">
<div class="a-aspectRatio a-aspectRatio--1-1 m-directory__square"></div>
<div class="m-directory__text"><strong>Zadání a potvrzení e-mailu</strong></div>
</div>
<div class="m-directory__element">
<div class="a-aspectRatio a-aspectRatio--1-1 m-directory__square"></div>
<div class="m-directory__text"><strong>Potvrzení telefoního čísla</strong></div>
</div>
</div>
Druhý prvok v aktívnom stave
<div class="m-directory m-directory--column">
<div class="m-directory__element">
<div class="a-aspectRatio a-aspectRatio--1-1 m-directory__square"></div>
<div class="m-directory__text"><strong>Zadání a potvrzení e-mailu</strong></div>
</div>
<div class="m-directory__element">
<div class="a-aspectRatio a-aspectRatio--1-1 m-directory__square m-directory__square--isActive"></div>
<div class="m-directory__text"><strong>Potvrzení telefoního čísla</strong></div>
</div>
<div class="m-directory__element">
<div class="a-aspectRatio a-aspectRatio--1-1 m-directory__square"></div>
<div class="m-directory__text"><strong>Změna hesla</strong></div>
</div>
</div>
Nastylovaný číselný zoznam s radením vedľa seba
- Radenie vedľa seba ovplyvňuje class-a
m-directory--row. - Šírka elementu je rozrataná automaticky flexboxom. V prípade nutnosti zmeny šírky či odsadenia, urobte tak novou m- nebo o- classou zavesenou na daný element.
- Zarovnanie prvku je možné zmeniť na stred pomocou class-y
m-directory__element--centerzavesenej nam-directory__elementprípadne pre zarovnanie k spodnému okraju class-oum-directory__element--center. - Aktívny prvok zoznamu indikuje stavová trieda
m-directory__square--isActivezavesená nam-directory__element.
Defaultný kód bez žiadného špecialného nastavenia
<div class="m-directory m-directory--row">
<div class="m-directory__element">
<div class="a-aspectRatio a-aspectRatio--1-1 m-directory__square"></div>
<div class="m-directory__text"><strong>Zadání a potvrzení e-mailu</strong></div>
</div>
<div class="m-directory__element">
<div class="a-aspectRatio a-aspectRatio--1-1 m-directory__square"></div>
<div class="m-directory__text"><strong>Potvrzení telefoního čísla</strong></div>
</div>
<div class="m-directory__element">
<div class="a-aspectRatio a-aspectRatio--1-1 m-directory__square"></div>
<div class="m-directory__text"><strong>Změna hesla</strong></div>
</div>
<div class="m-directory__element">
<div class="a-aspectRatio a-aspectRatio--1-1 m-directory__square"></div>
<div class="m-directory__text"><strong>Pred dokončením</strong></div>
</div>
<div class="m-directory__element">
<div class="a-aspectRatio a-aspectRatio--1-1 m-directory__square"></div>
<div class="m-directory__text"><strong>Dokončení</strong></div>
</div>
</div>
Prvý prvok zarovnaný na stred
<div class="m-directory m-directory--row">
<div class="m-directory__element m-directory__element--center">
<div class="a-aspectRatio a-aspectRatio--1-1 m-directory__square"></div>
<div class="m-directory__text"><strong>Zadání a potvrzení e-mailu</strong></div>
</div>
<div class="m-directory__element">
<div class="a-aspectRatio a-aspectRatio--1-1 m-directory__square"></div>
<div class="m-directory__text"><strong>Potvrzení telefoního čísla</strong></div>
</div>
</div>
Prvý prvok zarovnanýk spodnému okraju
<div class="m-directory m-directory--row">
<div class="m-directory__element m-directory__element--bottom">
<div class="a-aspectRatio a-aspectRatio--1-1 m-directory__square"></div>
<div class="m-directory__text"><strong>Zadání a potvrzení e-mailu</strong></div>
</div>
<div class="m-directory__element">
<div class="a-aspectRatio a-aspectRatio--1-1 m-directory__square"></div>
<div class="m-directory__text"><strong>Potvrzení telefoního čísla</strong></div>
</div>
</div>
Druhý prvok v aktívnom stave
<div class="m-directory m-directory--row">
<div class="m-directory__element">
<div class="a-aspectRatio a-aspectRatio--1-1 m-directory__square"></div>
<div class="m-directory__text"><strong>Zadání a potvrzení e-mailu</strong></div>
</div>
<div class="m-directory__element">
<div class="a-aspectRatio a-aspectRatio--1-1 m-directory__square m-directory__square--isActive"></div>
<div class="m-directory__text"><strong>Potvrzení telefoního čísla</strong></div>
</div>
<div class="m-directory__element">
<div class="a-aspectRatio a-aspectRatio--1-1 m-directory__square"></div>
<div class="m-directory__text"><strong>Změna hesla</strong></div>
</div>
</div>
Levé menu
- důležité je dodržet správnou HTML strukturu
- stav rozbalené/nerozbalené podmenu se ukládá do session storage
[Zdrojový kód levého menu]
HTML:
<a href="/ui#menu"><div class="menuTabActive">Titlek menu</div></a>
<ul class="leftMenu js-leftMenuToggleable">
<li class="dir opened">
<div class="ico"></div>
<a>Menu 1</a>
<ul class="leftMenu" id="submenu_id1">
<li><a href="/ui#menu" class="selected">Menu 1.1</a></li>
<li><a href="/ui#menu" class="">Menu 1.2</a></li>
<li><a href="/ui#menu" class="">Menu 1.3</a></li>
</ul>
</li>
<li class="dir closed">
<div class="ico"></div>
<a>Menu 2</a>
<ul class="leftMenu" id="submenu_id2">
<li><a href="/ui#menu" class="">Menu 2.1</a></li>
<li><a href="ui#menu">Menu 2.2</a></li>
<li><a href="/ui#menu" class="">Menu 2.3</a></li>
</ul>
</li>
<li class="dir closed">
<div class="ico"></div>
<a>Menu 3</a>
<ul class="leftMenu" id="submenu_id3">
<li><a href="/ui#menu" class="">Menu 3.1</a></li>
<li><a href="/ui#menu" class="">Menu 3.2</a></li>
<li><a href="/ui#menu" class="">Menu 3.3</a></li>
</ul>
</li>
</ul>
JS:
tip.utils.CommonsUI.initLeftMenuToggleable();
Hlavný nadpis bloku
- O všetko sa stará class-a
a-headline. - Patrí k základným stavebným jednotkám, jeho varianty pridávajte do css pomocou modifikátoru alebo príslušnou m-/o-/t- class-ou.
- V prípade nutnosti rozdelenia na ľavú a pravú časť použite základný grid, nemodifikujte zbytočne element.
Hlavný nadpis bloku s ľavým a pravým rozložením (grid varianta)
<div class="a-headline">
<div class="row">
<div class="col-xs">Hlavný nadpis bloku s ľavým a pravým rozložením</div>
<div class="col-xs col-xs-auto">
<img src="/images/blank.png" height="15" width="15" class="sprIco spr-i009-0-15-normal-hover mousePointer a-sibling--row" title="Smazat" alt="Smazat" />
<img src="/images/blank.png" height="15" width="15" class="sprIco spr-i002-0-15-normal-hover mousePointer a-sibling--row" title="Smazat" alt="Smazat" />
</div>
</div>
</div>
Podnadpis bloku
- O všetko sa stará class-a
a-subheadline. - Patrí k základným stavebným jednotkám, jeho varianty pridávajte do css pomocou modifikátoru alebo príslušnou m-/o-/t- class-ou.
Hlášky
- Máme několik typů hlášek: informační , chybové, výstražné ...
- Informativní -
type="info" - Chybová
type="error" - Varovná -
type="alert" - Potvrzující -
type="success" - Tázací -
type="question"
Hlášky obecné
- používá se jsp tag
w:writeMessageBoxnebo javascriptová funkcetip.utils.CommonsUI.createMessageBox
Základní varianta
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum dolor maxime animi. Ea exercitationem dicta accusantium excepturi laudantium veniam culpa optio doloribus nostrum libero voluptatum ipsa debitis sit illum ut!
Varianta s tlačítkem (parametr buttonHtml="htmlTlacitka")
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum dolor maxime animi. Ea exercitationem dicta accusantium excepturi laudantium veniam culpa optio doloribus nostrum libero voluptatum ipsa debitis sit illum ut!
TlačítkoVarianta bez šedého pozadí a rámečku okolo (parametr hideWrapper="true")
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum dolor maxime animi. Ea exercitationem dicta accusantium excepturi laudantium veniam culpa optio doloribus nostrum libero voluptatum ipsa debitis sit illum ut!
JSP TAG:
<w:writeMessageBox type="info" text="text"/>
JSP:
<jsp:include page="/pages/messages/messages.jsp" flush="true"/> <jsp:param name="bundle" value="payment"/> </jsp:include>
JS:
/**
* Vytvari message box, aby kod byl jednotny a na jednom miste.
* @param {!string} type typ hlasky (error|info|alert|success|question)
* @param {!string} text text hlasky pripadne HTML
* @param {boolean=} opt_hideWrapper true, pokud se ma schovat border a pozadi boxu
* @param {string=} opt_styleId id zaobalujiciho prvku
* @param {tip.objects.Button=} opt_btn tlacitko
* @return {string} html message boxu
*/
tip.utils.CommonsUI.createMessageBox = function(type, text, opt_hideWrapper, opt_styleId, opt_btn)
Hlášky uvnitř panelu
- používá se jsp tag
w:writeMessageBoxs parametreminsidePanenebo javascriptová funkcetip.utils.CommonsUI.createMessageBoxInsidePane - pokud vkládáte hlášku uvnitř panelu použijte parametr
insidePanes hodnotoutrue
Varianta základní (parametr insidePane="true")
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum dolor maxime animi. Ea exercitationem dicta accusantium excepturi laudantium veniam culpa optio doloribus nostrum libero voluptatum ipsa debitis sit illum ut!
Varianta bez šedého pozadí a rámečku okolo (parametr insidePane="false")
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum dolor maxime animi. Ea exercitationem dicta accusantium excepturi laudantium veniam culpa optio doloribus nostrum libero voluptatum ipsa debitis sit illum ut!
JSP TAG:
<div class="textPane textPaneSep"> <div class="contentTab"></div> <w:writeMessageBox type="info" text="text" insidePane="true"/> </div>
JS:
<jsp:include page="/pages/messages/messages.jsp" flush="true"/> <param name="bundle" value="payment"/> <param name="insidePane" value="true"/> </jsp:include>
JS:
/**
* Vytvari message box uvnitr textPane alebo textPaneBlock, aby kod byl jednotny a na jednom miste.
* @param {!string} type typ hlasky (error|info|alert|success|question)
* @param {!string} text text hlasky pripadne HTML
* @param {boolean=} opt_messageWrapper false, pokud je zabaleny v textPaneBlock ==> true, pokud je zabaleny v textPane
* @param {string=} opt_styleId id zaobalujiciho prvku
*/
div.innerHTML = tip.utils.CommonsUI.createMessageBoxInsidePane(type, text, true, opt_styleId);
Hlášky včetně panelu
- používá se jsp tag
w:writeMessageTitleBoxnebo javascriptová funkcetip.utils.CommonsUI.createMessageBoxWithHeader
Základní varianta
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum dolor maxime animi. Ea exercitationem dicta accusantium excepturi laudantium veniam culpa optio doloribus nostrum libero voluptatum ipsa debitis sit illum ut!
Varianta s tlačítkem (parametr buttonHtml="htmlTlacitka")
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum dolor maxime animi. Ea exercitationem dicta accusantium excepturi laudantium veniam culpa optio doloribus nostrum libero voluptatum ipsa debitis sit illum ut!
TlačítkoTAG :
<w:writeMessageTitleBox type="info" key="klicDoBundlu" bundle="nazevBundlu" text="obyčejnýText" headerKey="klicDoBundluProHeader" headerBundle="nazevBundluProHeader" headerText="obyčejnýTextProHeader"/>
JSP :
<jsp:include page="/pages/messages/messages.jsp" flush="true"/> <jsp:param name="bundle" value="payment" /> <jsp:param name="withHeader" value="true" /> </jsp:include>
JS :
/**
* Vytvari message box s headerom, aby kod byl jednotny a na jednom miste.
* @param {!string} type typ hlasky (error|info|alert|success|question)
* @param {!string} text text hlasky pripadne HTML
* @param {!string} headerTitle nazev pro header
* @param {string=} opt_styleId id zaobalujiciho prvku
*/
div.innerHTML = tip.utils.CommonsUI.createMessageBoxWithHeader(type, text, headerTitle, opt_styleId);
Panely
- Každý panel by měl mít hlavičku panelu, která má pozadí barvy úrovně 1
- Máme dva typy panelů .textPane a .textPaneBlock, který se liší vnitřním okrajem v panelu
- Přidáním třídy .top odstraníme rámeček na spodní straně panelu
- Přidáním třídy .bottom odstraníme rámeček na horní straně panelu
- Přidáním třídy .noBorder odstraníme rámeček
- Pokud máme dva panely pod sebou, oddělíme je třídou .textPaneSep, která přidá vnější okraj ke spodní straně panelu
Panel bez vnitřního okraje
HTML:
<div class="textPane"> <div class="contentTab">Hlavička panelu</div> Text v panelu bez vnitřního okraje... </div>
Panel s vnitřním okrajem
HTML:
<div class="textPaneBlock"> <div class="contentTab">Hlavička panelu</div> Text v panelu s vnitřním okrajem... </div>
Dva panely pod sebou
HTML:
<div class="textPaneBlock textPaneSep">
<div class="contentTab">Hlavička panelu</div>
Text v panelu s vnitřním okrajem...
</div>
<div class="textPaneBlock">
<div class="contentTab">Hlavička panelu</div>
Text v panelu s vnitřním okrajem...
</div>
Panely s bublinou
- Bublina se používají k zobrazení soukromých zpráv, komentářů ve fóru, komentáře v analýzách a v redakčních článcích
- Bublina, která má zobáček na levé straně je defaultně modrá, bublina na pravé je světle oranžová
- Třída .bubblePaneLeft definuje bublinu na levé straně, na pravé straně je to třída .bubblePaneRight
- Třída .bubblePaneSlim definuje tenčí bublinu, která se používá v pravých widgetech na webu (LS fórum)
- Třída .bubblePaneDisabled definuje neaktivní bublinu
Bublina vlevo
HTML:
<div class="bubblePane bubblePaneLeft"> <div class="triangle"></div> <div class="bubbleText">... text v bublině ...</div> </div>
Bublina vpravo
Bublina vpravo, která je neaktivní
Bublina tenká vlevo
HTML:
<div class="bubblePane bubblePaneSlim bubblePaneLeft"> <div class="triangle"></div> <div class="bubbleText">... text v bublině ...</div> </div>
Šedá oddělovací linka
- Používáme pouze pro oddělovače v panelech
- Pro oddělovače používáme mixiny
Rámečky kolem panelů
- Používáme pouze kolem celých panelů
- Vypadá podobně jako šedá oddělovací linka ale má jiný styl
- Pokud je to možné, použijeme třídu pro panel.textPane kde je mixin.BorderPane() definován
Avataři
Nový avatar
Parametry
- photoSize - velikost ikony avatara
- bez velikosti: 180px
- mini: 70px
- nano: 42px
- small: 27px
- pico: 15px
- showFlags - true|false = zobrazeni vlaječky vlevo nebo vůbec
- usernameStyleType - bottom|right|off, která určuje, kde se username zobrazí
- showInline - true, zobrazi avatar v jednom radku, jinak normalne (default = false)
Preview
Bez zadané velikosti 180px
Mini 70px
Nano 42px
Small 27px
Pico 15px
JSP:
<jsp:include page="/pages/include/avatar.jsp"> <jsp:param name="clientId" value="10295080" /> <jsp:param name="photoSize" value="mini" /> <jsp:param name="showFlags" value="true" /> <jsp:param name="usernameStyleType" value="bottom" /> </jsp:include>
nebo javascript, kde je nutný mít načtený všechny data pro vytovření avataru
JS:
div.innerHTML = return tip.pages.utils.ClientsUtils.createAvatarHtml(size,
imagePath,
opt_encryptedClientId,
opt_storageCountryId,
opt_username,
opt_clientCountryNameId,
opt_clientFirmId,
opt_staticServerUrl,
opt_showFlags,
opt_usernameStyleType,
opt_tooltip,
opt_showAvatar);
Pravidla
- Standardizované velikosti ikonek: 11, 15, 21 a 31.
- Táto veľkosť ikón sa používala asi do čísla i240.
- Menšia veľkosť ako 11 a väčšia ako 31 by se na webu neměla vyskytovat
- formát třídy použití: sprIco spr-řadačísloIkonky-mutace-velikost-stav příklad: sprIco spr-i001-0-15-normal
Nové pravidla
- standardizované velikosti ikonek: 18 a 24.
- Mutácia je 5 až 8.
- Mutácie 5 a 6 sa farebne riadi pomocou opacity
- Táto veľkosť ikón sa používa asi od čísla i170.
- formát třídy použití: sprIco spr-řadačísloIkonky-mutace-velikost-1x-hover příklad: sprIco spr-i241-5-18-1x
Stavy ikonek
- normal - výchozí stav ikonky
- normal-hover - výchozí stav ikonky s hoverem
- pressed - aktivní stav ikonky
- inactive - neaktivní stav ikonky
Nové stavy ikoniek
- -1x - prvotný stav ikonky
- -1x-hover - stav ikonky s hoverom
- -3x - retina pre mobilný web
HTML:
<img src="/images/blank.png" width="15" height="15" class="sprIco spr-i001-0-15-normal" title="titulek">nebo
JSP:
<html:img src="${STATIC_ADDRESS}images/blank.png" styleClass="sprIco spr-i001-0-15-normal mousePointer" titleKey="" bundle="" height="15" width="15"/>
Prehľad R ikon
Smajlíci
Animované
e001
|
e002
|
e003
|
e004
|
e005
|
e006
|
e007
|
e008
|
e009
|
e010
|
e011
|
e012
|
e013
Fotbalové animované
e014
|
e015
|
e016
|
e017
|
e018
|
e019
|
e020
|
e021
|
e022
|
e023
|
e024
|
e025
|
e026
e027
|
e028
Hokejové animované
e029
|
e030
|
e031
|
e032
|
e033
|
e034
|
e035
|
e036
|
e037
|
e038
|
e039
|
e040
|
e041
|
e042
|
Ostatní
e043
|
e044
|
e045
|
e046
|
e047
|
e048
|
e015
|
e016
|
e017
|
e018
|
e019
|
e020
|
e021
|
e022
|
e023
|
e024
|
e025
|
e026
e027
|
e028
Hokejové animované
e029
|
e030
|
e031
|
e032
|
e033
|
e034
|
e035
|
e036
|
e037
|
e038
|
e039
|
e040
|
e041
|
e042
|
Ostatní
e043
|
e044
|
e045
|
e046
|
e047
|
e048
|
e044
|
e045
|
e046
|
e047
|
e048
Definice rozliseni layoutu
@col1- levy sloupec@col2- stredovy sloupec@col3- pravy sloupec@maxContentWidth- 1366px@minContentWidth- 1024px@responsiveMaxWidth1- Responsivita(1275px)
@col1
@col2
@col3
@minContentWidth
@responsiveMaxWidth1
@maxContentWidth
Zakladni vlastnosti, ze kterych lze skladat komponenty
@fontSizeXXXXL - 40px
@fontSizeXXXL - 34px
@fontSizeXXL - 24px
@fontSizeL - 18px
@fontSizeM - 15px
@fontSizeS - 14px
@fontSizeXS - 13px
@fontSizeXXS - 12px
@fontSizeXXXS - 11px
Light:300
Regular:400
Medium:500
Bold:700
Defaultni velikost pro padding, margin
@distanceXXL:
25px
@distanceXL:
20px
@distanceL:
15px
@distance:
10px
@distanceS:
5px
@distanceXS:
2px
Znovupouzitelne vlastnosti (adepti na mixin)
@paddingRate:
2px
@colExpandWidth:
40px
@tabHeight:
24px
@borderRadius:
2px
@borderRadiusPane:
5px
@colorBorderWidth:
4px
@inputHeight:
27px
@icoSizeA:
11px
@icoSizeB:
15px
@icoSizeC:
21px
Prematch
@colOddWidth:
60px
@matchRowHeight:
42px
@matchRowRightWidth:
367px
@matchRowOdds:
290px
Casino
@widthSmalla@heightSmall- 115px@widthMediuma@heightMedium- 170px@widthBiga@heightBig- 250px
Meter
Statistiky stavu tiketu
Zobrazuje kolik procent příležitostí je na tiketu vyhrávajícíh / prohrávajících / nevyhodnocených
[Zdrojový kód stavu tiketu]
JSP:
<jsp:include page="/pages/include/meter.jsp"> <jsp:param name="ok" value="1" /> <jsp:param name="ko" value="4" /> <jsp:param name="all" value="11" /> </jsp:include>
nebo
SOY:
{call tip.soy.TicketArena.createMeterTicket}
{param title: 'title' /}
{param ok: '1' /}
{param ko: '4' /}
{param all: '11' /}
{param styleClass: '' /}
{/call}
Bublina s počtem
- používá se pro informaci o počtu nepřečtených zpráv, novinek nebo jako počet příležitostí na tiketu
HTML:
<div class="posRel"> // pouze zajisti relativni pozicovani aby mohla byt bublina absolutne pozicovana <div class="unreadedCountContainer"><span class="unreadedCount">1</span></div> </div>
Indikátor On/Off
- online identifikátor -
.onlineIndicator .on - offline identifikátor -
.onlineIndicator .off
HTML:
<div class="onlineIndicator on"> // online </div> <div class="onlineIndicator off"> // offline </div>
Popisek kategorie
- popisek kategorie u článků
HTML:
<span class="categoryLabel"> category label </span>
Sloupcový graf
- používá se pro znázornění poměru, jsou v sociální vrstvě u kurzů a v přehledu Netů za sdílení
- k obarvení sloupečků slouží třídy
.m-cylinderChart__value--color1-.m-cylinderChart__value--color5a dálem-cylinderChart__value--active(zelená) a.m-cylinderChart__value--inactive(šedý sloupec i text)
HTML:
<div class="m-cylinderChart o-eventSheet__chart">
<div class="m-cylinderChart__value m-cylinderChart__value--color1">62 %</div>
<div class="m-cylinderChart__chart m-cylinderChart__chart--color1" style="height:62%;"></div>
<div class="m-cylinderChart__label" title="Výhra">Výhra</div>
</div>
Použitie
- V kóde použité pomocou doťahovania shadow-rootu.
- Zápis
<svg class="a-icon a-icon--XY"><title>XZY</title><use xlink:href="#ID"></use></svg>. - Veľkosti ikon sú 11px, 15px a 21px, iné nie sú definované.
- Do
titlevložte lokalizovaný názov ikony. - Pozor,
a-iconjedisplay: blockaby nevznikali problémy s line-height a white space, doporučujem umiestňovanie do grid systému.
Prehľad
Použitie
- V kóde použité pomocou doťahovania shadow-rootu.
- Zápis
<svg class="a-icon a-icon--16x12"><title>XZY</title><use xlink:href="#ID"></use></svg>. - Veľkosti ikon sú 16x12px a 15x11px, iné nie sú definované.
- Do
titlevložte lokalizovaný názov ikony. - Pozor,
a-iconjedisplay: blockaby nevznikali problémy s line-height a white space, doporučujem umiestňovanie do grid systému.
Prehľad Primary
Použitie
- V kóde použité pomocou doťahovania shadow-rootu.
- Nie su to štandardné ikony s použitím v layotu.
- Použítie:
- v sekcii Vklady/Výplaty pomocou zápisu
<svg class="m-paymentTable__icon--XYZ"><title>XZY</title><use xlink:href="#ID"></use></svg>. - v patičke
<svg class="a-paymentSpr--XYZ"><title>XZY</title><use xlink:href="#ID"></use></svg>. - v sekcii Dokončenia registrace pomocou id v tvare BIC a zápisu
<svg class="o-landingRegPage__svgBank"><title>XZY</title><use xlink:href="#ID"></use></svg>a pre neaktívne<svg class="o-landingRegPage__svgBank"><title>XZY</title><use xlink:href="#IDinac"></use></svg>.
- v sekcii Vklady/Výplaty pomocou zápisu
- V prípade použitia na inom mieste doporučujem vytvoriť nový styl.
- Do
titlevložte lokalizovaný názov ikony.
Prehľad
Použitie
- V kóde použité pomocou doťahovania shadow-rootu.
- Nie su to štandardné ikony s použitím v layotu.
- Použítie:
- v patičke
<svg class="a-partnerSpr--XYZ"><title>XZY</title><use xlink:href="#ID"></use></svg>. Šedý odtieň sa v patičke robí pomocou classyo-footer__icon
- v patičke
- V prípade použitia na inom mieste doporučujem vytvoriť nový styl.
- Do
titlevložte lokalizovaný názov ikony.
Prehľad
Výsledok hodnotenia - hviezdičky
- Šírka defaultných hviezdičiek je 100px. V prípade, že je potreba viac alebo menej hviezdičiek je nutné rodičovský prvok
a-ratingReport__ratingrozšíriť o x-krát 20px nejakou rozširujúcou classou (m-/o/-p-). - Percenta u
a-ratingReport__stars a-ratingReport__stars--topvyjadrujú aka plocha bude žltá/ohodnotená. - Hodnotenie sa zarovnáva na stred, preto je nutné ho umiestniť do nejakého obalovacieho div-u. V deme je umiestnený v gridu.
Ukážka - 100% hodnotenie
Ukážka - 43% hodnotenie
Ukážka - 23% hodnotenie zo 7*
Výsledok hodnotenia - použitie v blogoch
- Možu nastať tri rôzne stavy hodnotenia: Hodnotený, Nehodnotený a Odpad (priemer hodnotenia je nula).
Aktívne hodnotenie
<div class="m-directory m-directory--column">
<div class="m-directory__element">
<div class="a-aspectRatio a-aspectRatio--1-1 m-directory__square"></div>
<div class="m-directory__text"><strong>Zadání a potvrzení e-mailu</strong></div>
</div>
<div class="m-directory__element">
<div class="a-aspectRatio a-aspectRatio--1-1 m-directory__square"></div>
<div class="m-directory__text"><strong>Potvrzení telefoního čísla</strong></div>
</div>
<div class="m-directory__element">
<div class="a-aspectRatio a-aspectRatio--1-1 m-directory__square"></div>
<div class="m-directory__text"><strong>Změna hesla</strong></div>
</div>
<div class="m-directory__element">
<div class="a-aspectRatio a-aspectRatio--1-1 m-directory__square"></div>
<div class="m-directory__text"><strong>Dokončení</strong></div>
</div>
</div>
- Chip je aktívny prvok, ktorý pomáha s výberom/filtráciou.
- Existuje dve veľkosti: štandardná, ktorá nepotrebuje žiadnu modifikáciu a mála s modifikátorom
a-chip--small. - Zoznam chipov je vhodné umiestniť do
m-chipLista jednotlivé chipy pak následne dom-chipList__element. Toto použitie sa postará o paddingy. - Chip je pripravený vo variante
<input type="checkbox"/>pre AND a variante<input type="radio"/>pre OR.
Defaultný kód pre jeden chip
<div class="a-chip">
<input type="checkbox" id="chipA" class="a-chip__input"/>
<label for="chipA" class="a-chip__label">
Test
<div class="a-chip__icon"></div>
</label>
</div>
Kód pre label list chipov
- Zoznam chipov je vhodné umiestniť do
m-chipLista jednotlivé chipy pak následne dom-chipList__element. Toto použitie sa postará o paddingy.
<div class="m-chipList">
<div class="m-chipList__element">
<div class="a-chip">
<input type="radio" id="chipC" name="group" class="a-chip__input" checked />
<label for="chipC" class="a-chip__label">
Test
<div class="a-chip__icon"></div>
</label>
</div>
</div>
<div class="m-chipList__element">
<div class="a-chip">
<input type="radio" id="chipD" name="group" class="a-chip__input" />
<label for="chipD" class="a-chip__label">
Test
<div class="a-chip__icon"></div>
</label>
</div>
</div>
<div class="m-chipList__element">
<div class="a-chip">
<input type="radio" id="chipD" name="group" class="a-chip__input" disabled />
<label for="chipD" class="a-chip__label">
Test
<div class="a-chip__icon"></div>
</label>
</div>
</div>
</div>
- Snackbary poskytujú krátke informácie o stavoch webu. Sú umiestnené v spodnej části obrazovky pred obsahom webu.
- Len jeden snackbar môže byť zobrazený v tú samú dobu. Pokiaľ je potrebné zobraziť viac informácií zobrazujú sa postupne.
- Snackbar mizne automaticky (po 5000ms), preto by nemal obsahovať zápornú call to action (napr. cancel)
- Môže obsahovať jednu alebo žiadnu call to action
- Snackbar je zobrazený v obdĺžnikových boxoch so šedým pozadím. Box je nepriehľadný, aby bol text plne čiteľný. Celý box riadi trieda
o-snackbar, v prípade aktívne zobrazeného snackbaru je rozšírená o modifikátoro-snackbar--visible. - V reactu je to komponenta
tip.components.common.layers.Snackbar. - Snackbar môže byť použitý aj pre zobrazenie chybovej hlášky, vtedy obsahuje modifikátor
o-snackbar--error.
Defaultný kód
- Pre účely použitia v knihovne je kód "vylepšený" position:relative, tá v reálnom použití nie je, viď zdrojový kód.
REACT:
tip.global.appDispatcher.dispatch(tip.react.AppDispatcher.ACTION.SNACKBAR_SHOULD_SHOW, { text: text});
...
<tip.components.common.layers.Snackbar />
HTML:
<div class="o-snackbar o-snackbar--visible" ref="snackbar"> <p class="o-snackbar__text">Test</p> </div>
- Celý odpočet riadi trieda
m-registrationTimer, v prípade zarovnania do bloku je rozšírená o modifikátorm-registrationTimer--block. - Jednotlivé časové informácie a ich úrovne sa riadia rozšírenim
m-registrationTimer__numbero modifikátorm-registrationTimer__number--lvl3pripadnem-registrationTimer__number--lvl2. - V reactu je to komponenta
tip.components.client.Countdown.
Defaultný kód so zarovnaním do riadku
<div class="m-registrationTimer">
<div class="m-registrationTimer__text">Do vypršení dočasného konta zbývá:</div>
<div class="m-registrationTimer__time">
<div class="m-registrationTimer__element">
<div class="m-registrationTimer__number">29</div>
<span class="m-registrationTimer__label">dni</span>
</div>
<div class="m-registrationTimer__element">
<div class="m-registrationTimer__number">5</div>
<span class="m-registrationTimer__label">hodin</span>
</div>
<div class="m-registrationTimer__element">
<div class="m-registrationTimer__number">6</div>
<span class="m-registrationTimer__label">minut</span>
</div>
</div>
</div>
Kód so zarovnaním do bloku
<div class="m-registrationTimer m-registrationTimer--block">
<div class="m-registrationTimer__text">Do vypršení dočasného konta zbývá:</div>
<div class="m-registrationTimer__time">
<div class="m-registrationTimer__element">
<div class="m-registrationTimer__number">29</div>
<span class="m-registrationTimer__label">dni</span>
</div>
<div class="m-registrationTimer__element">
<div class="m-registrationTimer__number">5</div>
<span class="m-registrationTimer__label">hodin</span>
</div>
<div class="m-registrationTimer__element">
<div class="m-registrationTimer__number">6</div>
<span class="m-registrationTimer__label">minut</span>
</div>
</div>
</div>
Farebné stavy odpočtu
<div class="m-registrationTimer">
<div class="m-registrationTimer__time">
<div class="m-registrationTimer__element">
<div class="m-registrationTimer__number m-registrationTimer__number--lvl3">29</div>
<span class="m-registrationTimer__label">dni</span>
</div>
<div class="m-registrationTimer__element">
<div class="m-registrationTimer__number m-registrationTimer__number--lvl2">5</div>
<span class="m-registrationTimer__label">hodin</span>
</div>
<div class="m-registrationTimer__element">
<div class="m-registrationTimer__number">6</div>
<span class="m-registrationTimer__label">minut</span>
</div>
</div>
</div>
- Rozmohl se nám tady takový nešvar. Je to slovíčko - CARD!
- Existuje niekoľko rôznych druhov, odlišujú sa navzájom väčšinou drobnosťami - padding, čiara, zarovnanie, tlačítka.
- O orámovanie kariet sa stará trieda
a-box, samotná trieda*-card*orámovanie, tieň, rádius a pozadie nastavené nemá.
m-card
Použitie:
- Úvodna obrazovka novej registrácie, kde je na výber overenie online alebo ručne.
<div class="a-box m-card">
<div class="m-card__content">
<div class="m-card__subtitle">Test podnadpis</div>
<div class="m-card__perex">Test krátky perex</div>
<div>Test obsah karty</div>
</div>
<div class="m-card__action">
<a href="" class="btn btnAction m-card__btn">Test tlačítko</a>
</div>
</div>
m-cardTicket
- Border po ľavej strane ovplyvňuje modifikátor
m-cardTicket--so stavomm-cardTicket--cancelled, m-cardTicket--continued, m-cardTicket--unevaluated, m-cardTicket--can_cancel, m-cardTicket--branch, m-cardTicket--unknownpre šedú,m-cardTicket--cashout, m-cardTicket--wonpre zelenú,m-cardTicket--void, m-cardTicket--minuspre fialovú,m-cardTicket--lostpre červenú.
Použitie:
- Zobrazenie tiketov v prehľadu.
<div class="a-box m-cardTicket m-cardTicket--can_cancel">
<div class="m-cardTicket__partInfo">
<div class="a-masterAndServant">
<div class="a-masterAndServant__servant">
<div class="m-sepList">
<div class="m-sepList__element">Dnes</div>
<div class="m-sepList__element">11:22:33</div>
<div class="m-sepList__element">KOM</div>
<div class="m-sepList__element">LIVE</div>
</div>
</div>
<div class="a-masterAndServant__master">
Můj pojmenovaný tiket
</div>
</div>
</div>
<div class="m-cardTicket__partIcons a-text--right">
<img src="https://static-test.tipsport.cz/images/blank.png" height="24" width="24" class="m-cardTicket__icon sprIco spr-i172-5-24-1x a-iconOpacity--38">
</div>
<div class="m-cardTicket__partNote">
<div class="m-cardTicket__note">8 příležitostí, 4 skupiny</div>
<div class="m-cardTicket__note">Zařazeno do soutěže: <strong>Tipliga</strong></div>
</div>
<div class="m-cardTicket__partIconsNote a-text--right self-end-xs">
<img src="https://static-test.tipsport.cz/images/blank.png" height="24" width="24" class="m-cardTicket__icon sprIco spr-i217-5-24-1x a-iconOpacity--38">
</div>
<div class="m-cardTicket__partBreak break-xs"></div>
<div class="m-cardTicket__partBet">
<div class="a-masterAndServant">
<div class="a-masterAndServant__servant">
Vsazeno
</div>
<div class="a-masterAndServant__master">
50 000 Kč
</div>
</div>
</div>
<div class="m-cardTicket__partWin">
<div class="a-masterAndServant">
<div class="a-masterAndServant__servant">
Možná výhra
</div>
<div class="a-masterAndServant__master">
123 45,67 Kč
</div>
</div>
</div>
<div class="m-cardTicket__partCash">
<div class="a-masterAndServant">
<div class="a-masterAndServant__servant">
Okamžité vyplacení
</div>
<div class="a-masterAndServant__master">
<span class="a-text--colorFWV">120 000 Kč</span>
</div>
</div>
</div>
</div>
m-cardContest
- Karta ma fixnú šírku 300px.
Použitie:
- Zobrazenie súťaží.
- Jak si vedu
- NEDOKONČIL JSem MARATON
- Dnes zbývá vsadit
- 0 Kč
- Počet hráčů
- 1 500
- Má odměna
- 0 Kč
- Konec soutěže
- za 30 dní
<div class="a-box m-cardContest">
<a href="" class="m-cardContest__imageWrapper">
<img src="https://via.placeholder.com/300x150/ff7bac/ffffff" class="m-cardContest__image">
<div class="m-cardContest__imageText">VÍCE O SOUTĚŽI</div>
<div class="a-labelList m-cardContest__imageLabel">
<div class="a-labelList__element">
MARATON
</div>
<div class="a-labelList__element">
VIP
</div>
<div class="a-labelList__element">
TIPCUP
</div>
</div>
</a>
<div class="m-cardContest__content">
<a href="" class="m-cardContest__headline">nějaký MARATON</a>
<dl class="a-defList m-cardContest__state">
<dt class="a-defList__stateTerm m-cardContest__stateTerm">Jak si vedu</dt>
<dd class="a-defList__stateDetail a-text--colorTOI m-cardContest__stateDetail m-cardContest__stateDetail--imp">NEDOKONČIL JSem MARATON</dd>
<dt class="a-defList__stateTerm m-cardContest__stateTerm">Dnes zbývá vsadit</dt>
<dd class="a-defList__stateDetail a-text--colorTOI m-cardContest__stateDetail">0 Kč</dd>
<dt class="a-defList__stateTerm m-cardContest__stateTerm">Počet hráčů</dt>
<dd class="a-defList__stateDetail a-text--colorTOI m-cardContest__stateDetail">1 500</dd>
<dt class="a-defList__stateTerm m-cardContest__stateTerm">Má odměna</dt>
<dd class="a-defList__stateDetail a-text--colorTOI m-cardContest__stateDetail">0 Kč</dd>
<dt class="a-defList__stateTerm m-cardContest__stateTerm">Konec soutěže</dt>
<dd class="a-defList__stateDetail a-text--colorTOI m-cardContest__stateDetail">za 30 dní</dd>
</dl>
</div>
<div class="btn btnAction a-btn--secundary m-cardContest__btn">Přesunout dolů</div>
</div>
m-cardContest m-cardContest--long
- Karta ma upravenú šírku na 100% s tým, že minimálna výška je 180px.
Použitie:
- Zobrazenie súťaží.
- Start soutěže
- za 3d 2h 28m
- Celková dotace
- 10 000 000 Net
- Počet hráčů
- 12 500
<div class="a-box m-cardContest m-cardContest--long">
<div class="m-cardContest__flexWrapperImage">
<a href="" class="m-cardContest__imageWrapper">
<img src="https://via.placeholder.com/300x150/ff7bac/ffffff" class="m-cardContest__image">
<div class="m-cardContest__imageText">VÍCE O SOUTĚŽI</div>
<div class="a-labelList m-cardContest__imageLabel">
<div class="a-labelList__element">
MARATON
</div>
<div class="a-labelList__element">
VIP
</div>
<div class="a-labelList__element">
TIPCUP
</div>
</div>
</a>
<div class="ninja-lg">
<div class="btn btnAction a-btn--secundary m-cardContest__btn m-cardContest__btn--long">CHCI HRÁT</div>
</div>
</div>
<div class="m-cardContest__flexWrapperContent">
<div class="m-cardContest__flexWrapperInner">
<a href="" class="m-cardContest__headline">NĚJAKÝ MARATON</a>
<div class="m-cardContest__perex m-cardContest__perex--long">
V průběhu roku se můžete těšit na čtyři Tipcupy o miliony Netů. Na závěr roku proběhne Turnaj mistrů, jehož vítěz získá 1 000 000 Kč. Do tohoto turnaje se můžete kvalifikovat přes Tipcupy, nebo přes Tipligu. <a href="">Více...</a>
</div>
</div>
<div class="m-cardContest__flexWrapperInner">
<dl class="a-defList a-defList--icon m-cardContest__state m-cardContest__state--long">
<dt class="a-defList__stateTerm a-defList__stateTerm--icon a-iconBefore a-iconBefore--i202-0-31-pressed m-cardContest__stateTerm">Start soutěže</dt>
<dd class="a-defList__stateDetail a-text--colorTOI m-cardContest__stateDetail">za 3d 2h 28m</dd>
<dt class="a-defList__stateTerm a-defList__stateTerm--icon a-iconBefore a-iconBefore--i203-0-31-pressed m-cardContest__stateTerm">Celková dotace</dt>
<dd class="a-defList__stateDetail a-text--colorTOI m-cardContest__stateDetail">10 000 000 Net</dd>
<dt class="a-defList__stateTerm a-defList__stateTerm--icon a-iconBefore a-iconBefore--i204-0-31-pressed m-cardContest__stateTerm">Počet hráčů</dt>
<dd class="a-defList__stateDetail a-text--colorTOI m-cardContest__stateDetail">12 500</dd>
</dl>
</div>
</div>
<div class="ninja-xs peacemaker-lg">
<div class="btn btnAction a-btn--secundary m-cardContest__btn m-cardContest__btn--fixed">CHCI HRÁT</div>
</div>
</div>
Bez avataru
-
janaobzerova2004
-
janao
-
obzerovajana
243
244
173
170
172
216
217
238
256
190
191
270
271
174
210
222
272
214
240
275
279
277
261
262
273
239
276
278
274
280
STORNOVÁNÍ TIKETU
Pravidla
V rámci redesignu webu byl vytvořen systém komponent, z kterých se skládá web. Cílem dokumentu je popsat základní činnosti s tímto systémem. Popis platí pro vývoj vývoj webu a mobilních aplikací.
Základní činnosti
- vyhledání komponenty
- použití komponenty
- přidání nové komponenty
- úprava komponenty
- odstranění komponenty
Vyhledání komponenty
Při návrhu nových stránek nebo při jejich úpravě řešitelé primárně navrhují z již definovaných komponent. Sada komponent je vždy aktuální a všichni řešitelé ji mají k dispozici.
Použití stávající komponenty
Řešitelé při návrhu využívají všechny dostupné komponenty bez omezení, jen vždy volí z příslušné sady pro Tipsport nebo Chanci.
Přidání nové komponenty
Při řešení se může stát, že požadovaná komponenta chybí. Pak je nutné navrhnout novou komponentu. Návrh může realizovat v obecné rovině kdokoliv (obvykle UX), přidání do komponent schvaluje vedoucí grafického oddělení po grafické stránce a následně vedoucí oddělení webu. Technickou proveditelnost pak schvaluje Správce komponent.
Fyzické přidání do sady komponent provádí přiřazený programátor, který jako první bude komponentu využívat, kontrolu realizace dělá Správce komponent.
Poznámka: Správce komponent je vždy definován teamleaderem webu z jeho týmu a je uveden ve WIKI.
Úprava komponenty
V rámci vývoje se vyskytují situace, kdy bude nutné stávající komponentu upravit. V tomto případě nejprve správce komponent nebo pověřený programátor vyhledá využití komponenty. Úprava a schvalování změny probíhá shodným způsobem jako v případě přidání nové komponenty. Do issue, které řeší změnu, bude vždy doplněn seznam výskytů tak, aby bylo možné při testování zkontrolovat, zda změna nevygenerovala chybu v některém výskytu.
Smazání komponenty
V případě mazání komponenty je nutnou podmínkou nulový výskyt využití. Pověřený programátor nebo správce komponent, zkontrolují, zda komponenta není někde využita. Pokud je tato podmínky splněna, komponenta je ze sady komponent odstraněna.
Poznámka: je potřeba využití kontrolovat pro všechny sady komponent, tedy pro noční režim i CH.
