Obecný popis

Pomocou triedy col-xs a col-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-*-small a rodičom row-small.

1 / 7

2 / 7

3 / 7

4 / 7

5 / 7

6 / 7

7 / 7

[Zdrojový kód]

<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-*-big a rodičom row-big.

1 / 3

2 / 3

3 / 3

[Zdrojový kód]

<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-*.

1 / 7

2 / 7

3 / 7

4 / 7

5 / 7

6 / 7

7 / 7

1 / 3

2 / 3

3 / 3

[Zdrojový kód]

<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-*-auto pri triede col-*.

1 / 5

2 / 5

3 / 5 auto

4 / 5

5 / 5

[Zdrojový kód]

<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

1 / 3

2 / 3 veľkosť 7

3 / 3

[Zdrojový kód]

<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

.col-xs-4

.col-xs-2

.col-xs-6

.col-md-5

.col-md-4

.col-md-3

[Zdrojový kód]

<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š

.col-xs-3.col-sm-7

.col-xs-7.col-md-3

.col-xs-2

[Zdrojový kód]

<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-*.

1 / 3 zarovnanie na top

2 / 3 zarovnanie na top

3 / 3 zarovnanie na top

1 / 3 zarovnanie na center

2 / 3 zarovnanie na center

3 / 3 zarovnanie na center

1 / 3 zarovnanie na bottom

2 / 3 zarovnanie na bottom

3 / 3 zarovnanie na bottom

1 / 3 zarovnanie na top

2 / 3 zarovnanie na bottom

3 / 3 zarovnanie na center

[Zdrojový kód]

<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-*.

1 / 2 zarovnanie na ľavobok

2 / 2 zarovnanie na ľavobok

1 / 2 zarovnanie na pravobok

2 / 2 zarovnanie na pravobok

1 / 2 zarovnanie na stred

2 / 2 zarovnanie na stred

1 / 2 zarovnanie okolo

2 / 2 zarovnanie okolo

1 / 2 zarovnanie medzi

2 / 2 zarovnanie medzi

[Zdrojový kód]

<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-gutters na row v prípade, že sa to týka všetkých buniek.
Pomocou triedy no-gutters-col na konkrétnu buňku.
Pomocou triedy no-gutter-left-col na konkrétnu buňku, ak nechcem odsadenie zľava.
Pomocou triedy no-gutter-right-col na 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.

.col-xs-12.col-sm-6.col-md-8

.col-xs-6.col-md-4

.col-xs-12.col-sm-6.col-md-8

.col-xs-6.col-md-4.no-gutters-col

.col-xs-8.col-sm-3

.col-xs-4.col-md-9.no-gutter-left-col

.col-xs-8.col-sm-3.no-gutter-right-col

.col-xs-4.col-md-9

[Zdrojový kód]

<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)

1 / 3 veľkosť 7

2 / 3 veľkosť 8 (pretože 7 + 8 = 15 > 12, tak sa táto buňka zalomí na nový riadok)

3 / 3 veľkosť 3

[Zdrojový kód]

<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-* a last-*.
Jedná se len o vizuálnu stránku.

1 / 3 bez poradia

2 / 3, ale posledný

3 / 3, ale prvý

[Zdrojový kód]

<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úť.

.col-sm-4

.col-sm-4.offset-sm-4

.col-sm-3 .offset-sm-3

.col-sm-6 .offset-sm-3

[Zdrojový kód]

<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 a pull-*-"číslo" do ľava.

1 / 2 .col-sm-9.push-sm-3

2 / 2 .col-sm-3.pull-sm-9

[Zdrojový kód]

<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

Level 1: .col-sm-9

Level 1.2: .col-xs-8 .col-sm-5

Level 1.2: .col-xs-4 .col-sm-6

[Zdrojový kód]

<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

.w100100%

.w9595%

.w9090%

.w8585%

.w8080%

.w7575%

.w7070%

.w6565%

.w6060%

.w5555%

.w5050%

.w4545%

.w4040%

.w3535%

.w3030%

.w2525%

.w2020%

.w1515%

.w1010%

Pixels

.wPix100100px

.wPix200200px

.wPix300300px

.wPix400400px

.wPix500500px

.wPix600600px

.wPix700700px

.wPix800800px

.wPix900900px

.wPix10001000px

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

.hide

Po kliknutí skryje prvek a pak zobrazí prvek do bloku

.posRel - relativní pozicováni
.posAbs - absolutní pozicováni

.posRel

span {  
 position:relative;
 right:5px;
 bottom:95px;
}

Text

.posAbs

span { 
 position:absolute; 
 left:10px;
 top:5px;
}

Text

.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 weight napríklad a-text--14-17-400 pre font-size: 14px, line-height: 17px a font-weight: 400.

.a-text--11-13-400

.a-text--12-15-400

.a-text--12-17-400

.a-text--14-17-400

Kombinácie farieb fontov

Názov je tvorený kombináciou a-text--farba TS-farba TN-farba CH napríklad a-text--b54w70w70 pre @black54 v Tipsportu, @white70 v Tipsportu Night a @white70 v Chanci.

.a-text--b54w70w70

.a-text--b87w100w100

.a-text--w100w100w100

Nečíslovaný seznam

Odrážka 1
Odrážka 2
Odrážka 3
Odrážka 4
Odrážka 5

[Zdrojový kód nečíslovaného seznamu]

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ň
1. Odrážka 1.1 úroveň
  1. Odrážka 1.1.1 úroveň
2. Odrážka 1.2 úroveň
  1. Odrážka 1.2.1 úroveň
    1. Odrážka 1.2.1.1 úroveň
    2. Odrážka 1.2.1.2 úroveň
Odrážka 2. úroveň
1. Odrážka 2.1 úroveň

[Zdrojový kód číslovaného seznamu]

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

[Zdrojový kód číslovaného seznamu s nadpisy]

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
24.3.2015 15:48:20	.rowTop	320 Kč
24.3.2015 15:48:20		320 Kč
24.3.2015 15:48:20	.rowDisabled	320 Kč
24.3.2015 15:48:20	.rowBot	320 Kč
24.3.2015 15:48:20		320 Kč
24.3.2015 15:48:20	.rowSelected	320 Kč

[Zdrojový kód standardní tabulky]

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č

[Zdrojový kód úzké tabulky]

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í
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

[Zdrojový kód univerzální tabulky]

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-label má iba estetickú funkciu a vyjadruje istú príslušnosť. a-tag je 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

Test

[Zdrojový kód]

<div class="a-label">Test</div>

Kód pre label live

Použitý modifikátor je a-label--live.

Lorem

[Zdrojový kód]

<div class="a-label a-label--live">Lorem</div>

Kód pre label top

Použitý modifikátor je a-label--top.

Ipsum

[Zdrojový kód]

<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

dolor sit amet

[Zdrojový kód]

<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, --bottomLeft a --bottomRight použitých na m-ribbon a m-ribbon__text.
Rodič musí mať nastavenú position: reltive.

Kódy pre všetky štyri rohy

top

[Zdrojový kód]

<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

Výběr možnosti:

Popisek...

[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

Výběr možností:

Popisek...

Popisek... neaktivní nezaškrtnuté tlačítko

Popisek... neaktivní zaškrtnuté tlačítko

[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

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

[Zdrojový kód ScrollBoxu]

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

[Zdrojový kód 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

%

[Zdrojový kód 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

[Zdrojový kód tlačítka s ikonou]

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í

2.00

Vybraný

2.00

Nejsázenější

2.00

S rohy

2.00

Neaktivní

[Zdrojový kód tlačítka kurzu]

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í

Remíza 2.00

Vybraný

Remíza 2.00

S rohy

Remíza 2.00

Neaktivní

Remíza

[Zdrojový kód tlačítka kurzu v live]

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

[Zdrojový kód 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á

[Zdrojový kód tooltipu]

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

[Zdrojový kód pro loader]

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

[Zdrojový kód standardního tabu]

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

[Zdrojový kód tabu s ikonami]

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ŠÍ

[Zdrojový kód stránkování vlevo nad tabulkou]

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ŠÍ

[Zdrojový kód stránkování vpravo nad tabulkou]

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ŠÍ

[Zdrojový kód dvou seznamů nad tabulkou]

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ŠÍ

[Zdrojový kód stránkování vlevo pod tabulkou]

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ŠÍ

[Zdrojový kód stránkování vpravo pod tabulkou]

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

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras et nisi id lorem tempor semper. Suspendisse ante. Integer ligula urna, venenatis quis, placerat vitae, commodo quis, sapien. Quisque nec lectus. Sed non dolor. Sed congue, nisi in pharetra consequat, odio diam pulvinar arcu, in laoreet elit risus id ipsum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Praesent tellus enim, imperdiet a, sagittis id, pulvinar vel, tortor. Integer nulla. Sed nulla augue, lacinia id, vulputate eu, rhoncus non, ante. Integer lobortis eros vitae quam. Phasellus sagittis, ipsum sollicitudin bibendum laoreet, arcu erat luctus lacus, vel pharetra felis metus tincidunt diam. Cras ac augue in enim ultricies aliquam.

Rozbalovací obsah

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras et nisi id lorem tempor semper. Suspendisse ante. Integer ligula urna, venenatis quis, placerat vitae, commodo quis, sapien. Quisque nec lectus. Sed non dolor. Sed congue, nisi in pharetra consequat, odio diam pulvinar arcu, in laoreet elit risus id ipsum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Praesent tellus enim, imperdiet a, sagittis id, pulvinar vel, tortor. Integer nulla. Sed nulla augue, lacinia id, vulputate eu, rhoncus non, ante. Integer lobortis eros vitae quam. Phasellus sagittis, ipsum sollicitudin bibendum laoreet, arcu erat luctus lacus, vel pharetra felis metus tincidunt diam. Cras ac augue in enim ultricies aliquam.

[Zdrojový kód komponenty rozbalovacího obsahu]

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--center zavesenej na m-directory__element prípadne pre zarovnanie k spodnému okraju class-ou m-directory__element--bottom.
Aktívny prvok zoznamu indikuje stavová trieda m-directory__square--isActive zavesená na m-directory__element.

Defaultný kód bez žiadného špecialného nastavenia

Zadání a potvrzení e-mailu

Potvrzení telefoního čísla

Změna hesla

Dokončení

[Zdrojový kód]

<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

Zadání a potvrzení e-mailu

Potvrzení telefoního čísla

[Zdrojový kód]

<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

Zadání a potvrzení e-mailu

Potvrzení telefoního čísla

[Zdrojový kód]

<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

Zadání a potvrzení e-mailu

Potvrzení telefoního čísla

Změna hesla

[Zdrojový kód]

<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--center zavesenej na m-directory__element prípadne pre zarovnanie k spodnému okraju class-ou m-directory__element--center.
Aktívny prvok zoznamu indikuje stavová trieda m-directory__square--isActive zavesená na m-directory__element.

Defaultný kód bez žiadného špecialného nastavenia

Zadání a potvrzení e-mailu

Potvrzení telefoního čísla

Změna hesla

Pred dokončením

Dokončení

[Zdrojový kód]

<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

Zadání a potvrzení e-mailu

Potvrzení telefoního čísla

[Zdrojový kód]

<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

Zadání a potvrzení e-mailu

Potvrzení telefoního čísla

[Zdrojový kód]

<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

Zadání a potvrzení e-mailu

Potvrzení telefoního čísla

Změna hesla

[Zdrojový kód]

<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

Titulek menu

[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

[Zdrojový kód]

<div class="a-headline">Hlavný nadpis bloku</div>

Hlavný nadpis bloku s ľavým a pravým rozložením (grid varianta)

Hlavný nadpis bloku s ľavým a pravým rozložením

[Zdrojový kód]

<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.

Podnadpis

[Zdrojový kód podnadpisu]

<div class="a-subheadline">Podnadpis</div>

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:writeMessageBox nebo javascriptová funkce tip.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čítko

Varianta 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!

[Zdrojový kód - Hlášky]

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:writeMessageBox s parametrem insidePane nebo javascriptová funkce tip.utils.CommonsUI.createMessageBoxInsidePane
pokud vkládáte hlášku uvnitř panelu použijte parametr insidePane s hodnotou true

Varianta základní (parametr `insidePane="true"`)

NADPIS

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"`)

NADPIS

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!

[Zdrojový kód - hlášky uvnitř panelu]

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:writeMessageTitleBox nebo javascriptová funkce tip.utils.CommonsUI.createMessageBoxWithHeader

Základní varianta

Nadpis panelu

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"`)

Nadpis panelu

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čítko

[Zdrojový kód - hlášky včetně panelu]

TAG :

<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

Hlavička panelu

text v panelu bez vnitřního okraje...

[Zdrojový kód panelu 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

Hlavička panelu

text v panelu s vnitřním okrajem...

[Zdrojový kód panelu 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

Hlavička panelu

text v panelu s vnitřním okrajem...

Hlavička panelu

text v panelu s vnitřním okrajem...

[Zdrojový kód dvou panelů 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

... text v bublině ...

[Zdrojový kód panelu s bublinou]

HTML:

<div class="bubblePane bubblePaneLeft">
  <div class="triangle"></div>
  <div class="bubbleText">... text v bublině ...</div>
</div>

Bublina vpravo

... text v bublině ...

Bublina vpravo, která je neaktivní

... text v bublině, který je neaktivní...

Bublina tenká vlevo

... text v tenké bublině ...

[Zdrojový kód tenkého panelu s bublinou]

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

.Border()

.BorderTop()

.BorderLeft()

.BorderBottom()

.BorderRight()

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

.BorderPane()

.BorderPaneTop()

.BorderPaneLeft()

.BorderPaneBottom()

.BorderPaneRight()

Avataři

Nový avatar

bez avataru (fotky):
nickname

s avatarom bezny:

nickname

s avatarom tmavy:

nickname

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

test

[Zdrojový kód použití avatara]

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

[Zdrojový kód použití ikonek]

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

Definice rozliseni layoutu

@col1 - levy sloupec
@col2 - stredovy sloupec
@col3 - pravy sloupec
@maxContentWidth - 1366px
@minContentWidth - 1024px
@responsiveMaxWidth1 - Responsivita(1275px)

@col1

220px

@col2

600px

@col3

280px

@minContentWidth

1024px

@responsiveMaxWidth1

1275px

@maxContentWidth

1366px

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

@fontWeightL

@fontWeightR

@fontWeightM

@fontWeightB

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

@widthSmall a @heightSmall - 115px
@widthMedium a @heightMedium - 170px
@widthBig a @heightBig - 250px

115px

170px

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

1

[Zdrojový kód bubliny s počtem]

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

[Zdrojový kód Indikátor On/Off]

HTML:

<div class="onlineIndicator on">  // online
</div>
<div class="onlineIndicator off">  // offline
</div>

Popisek kategorie

popisek kategorie u článků

category label [Zdrojový kód Popisek kategorie]

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--color5 a dále m-cylinderChart__value--active (zelená) a .m-cylinderChart__value--inactive (šedý sloupec i text)

62 %

Výhra

15 %

Remíza

23 %

Prohra

[Zdrojový kód sloupcového grafu]

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 title vložte lokalizovaný názov ikony.
Pozor, a-icon je display: block aby 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 title vložte lokalizovaný názov ikony.
Pozor, a-icon je display: block aby 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 prípade použitia na inom mieste doporučujem vytvoriť nový styl.
Do title vlož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 classy o-footer__icon
V prípade použitia na inom mieste doporučujem vytvoriť nový styl.
Do title vlož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__rating rozšíriť o x-krát 20px nejakou rozširujúcou classou (m-/o/-p-).
Percenta u a-ratingReport__stars a-ratingReport__stars--top vyjadrujú 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).

Hodnocení blogu

4.2(65x)

Hodnocení blogu

Zatím nehodnocen

Hodnocení blogu

Odpad!

0.0(13x)

Aktívne hodnotenie

Odpad!

[Zdrojový kód]

<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-chipList a jednotlivé chipy pak následne do m-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

Test

[Zdrojový kód]

<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-chipList a jednotlivé chipy pak následne do m-chipList__element. Toto použitie sa postará o paddingy.

Test

[Zdrojový kód]

<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átor o-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.

Test

Button

Test

Button

[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átor m-registrationTimer--block.
Jednotlivé časové informácie a ich úrovne sa riadia rozšírenim m-registrationTimer__number o modifikátor m-registrationTimer__number--lvl3 pripadne m-registrationTimer__number--lvl2.
V reactu je to komponenta tip.components.client.Countdown.

Defaultný kód so zarovnaním do riadku

Do vypršení dočasného konta zbývá:

29

dni

5

hodin

6

minut

[Zdrojový kód]

<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

Do vypršení dočasného konta zbývá:

29

dni

5

hodin

6

minut

[Zdrojový kód]

<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

29

dni

5

hodin

6

minut

[Zdrojový kód]

<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.

Test podnadpis

Test krátky perex

Test obsah karty

Test tlačítko

[Zdrojový kód]

<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 stavom m-cardTicket--cancelled, m-cardTicket--continued, m-cardTicket--unevaluated, m-cardTicket--can_cancel, m-cardTicket--branch, m-cardTicket--unknown pre šedú, m-cardTicket--cashout, m-cardTicket--won pre zelenú, m-cardTicket--void, m-cardTicket--minus pre fialovú, m-cardTicket--lost pre červenú.

Použitie:

Zobrazenie tiketov v prehľadu.

Dnes

11:22:33

KOM

LIVE

Můj pojmenovaný tiket

8 příležitostí, 4 skupiny

Zařazeno do soutěže: Tipliga

Vsazeno

50 000 Kč

Možná výhra

123 45,67 Kč

Okamžité vyplacení

120 000 Kč

m-cardTicket--cancelled, m-cardTicket--continued, m-cardTicket--unevaluated, m-cardTicket--can_cancel, m-cardTicket--branch, m-cardTicket--unknown

m-cardTicket--cashout, m-cardTicket--won

m-cardTicket--void, m-cardTicket--minus

m-cardTicket--lost

[Zdrojový kód]

<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ží.

nějaký MARATON

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í

Přesunout dolů

[Zdrojový kód]

<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ží.

CHCI HRÁT

NĚJAKÝ MARATON

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. Více...

Start soutěže: za 3d 2h 28m
Celková dotace: 10 000 000 Net
Počet hráčů: 12 500

CHCI HRÁT

[Zdrojový kód]

<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>

rodic by nemal mat zadny obsah a pridat sa mu class-a "o-loaderWrapper" a do tela elementu by se mnel vlozit kod s m-loader

Komponenta avataru v chipu, na "a-chipAvatar__icon" udelat JS funkciu, ze po kliknuti dany element zmizne. Zachovala som povodnu kostru podle chipu, ale je otazne, ci tady ma smysl to mat ako input a label.
Bez avataru

janaobzerova2004

S avatarem

janaobzerova2004

Jeden uzivatel vybraty, jeste je moznost napsat dalsich, do "m-autocomplete m-autocompleteFormElement__autocomplete" pridat vysledky z naseptavaca. Neni poresena delka, to v stylech neudelam, treba ju v JS vypocitat.

Komu

janaobzerova2004

Dvaja uzivatelia vybraty, je mozne napsat dalsieho

Komu

janaobzerova2004

S naplnenym listem naseptavace

Komu

janaobzerova2004
janao
obzerovajana

Celé jméno

Error message

Celé jméno

Error message

Celé jméno

75 / 100

Error message

Celé jméno

75 / 100

Error message

Celé jméno

175 / 100

Error message

242

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

Můj pojmenovaný tiket

Tiket inspiroval 20 hráčů.

Tiket je součástí analýzy München - Bremerhaven (3.z).

Tiket inspiroval více než 100 hráčů a je součástí analýzy Schwartzman Diego Sebastian - Munar Jaume.

Tiket hráče nickname

Tiket byl inspirovaný tiketem/analýzou hráče lowpaak.

Tiket byl vsazený na pobočce.

Neveřejný tiket

Tiket bude za okamžik vyplacen.

Skupina X X.XX

22. 12. 2018 (St)

13:45

EX

Sněhová pokrývka v cm (vyhodnoceno dle údajů na chmi.cz lorem ipsum lorem ipsum)

Celková sněhová pokrývka v cm podle chmi.cz bude 24.12.2018 7:00 SEČ na met. stanici Ostrava-Mošnov: Něco (co by se celé nevešlo na předchozí řádek)

100.00

Probíhá

999:999

Prodl. - 10.min (12:26, 20:19, 27:14, 25:25, 34:34)

Tohle je nějaká poznámka číslo jedna. Pro ilustraci je celkem dost dost dlouhá.

200.00

Aktuální kurz

—

Dnes

13:45

EX

Roskilde - Brabrand

Výsledek zápasu - Dvojtip: Neprohra Roskilde

100.00

Probíhá

3:0

2. pol. - 76. min (2:0, 1:0)

Aktuální kurz

100.00

Dnes

13:45

EX

Roskilde - Brabrand

Výsledek zápasu - Dvojtip: Neprohra Roskilde

100.00

Probíhá

3:0

2. pol. - 76. min (2:0, 1:0)

Vyhodnoceno jako poloviční prohra

Dnes

13:45

EX

Roskilde - Brabrand

Výsledek zápasu - Dvojtip: Neprohra Roskilde

100.00

Probíhá

3:0

2. pol. - 76. min (2:0, 1:0)

Vrácení vkladu

Můj pojmenovaný tiket

Tiket inspiroval 20 hráčů.

Tiket je součástí analýzy München - Bremerhaven (3.z).

Tiket inspiroval více než 100 hráčů a je součástí analýzy Schwartzman Diego Sebastian - Munar Jaume.

Tiket hráče nickname

Tiket byl inspirovaný tiketem/analýzou hráče lowpaak.

Tiket byl vsazený na pobočce.

Neveřejný tiket

Tiket bude za okamžik vyplacen.

Celkový kurz (s bonifikací 1.05)

2.50

Vklad

1 000,00 Kč

Možná výhra

2 500,00 Kč

Celkový kurz bez Extratipu

2.00

Možná výhra bez Extratipu

2 000,00 Kč

Celkový kurz

2.50

Vklad

1 000,00 Kč

Skutečná výhra

2 000,00 Kč

Cashout

1 500,00 Kč

OKAMŽITĚ VYPLATIT

Cashout

není možný

OKAMŽITĚ VYPLATIT

Funkci okamžitého vyplacení lze použít až po vyhodnocení aspoň jednoho zápasu na tiketu.

Cashout

1 500,00 Kč

NÁZEV SOUTĚŽE

Vklad do soutěže

50,00 Kč

Skutečná výhra v soutěži

150,00 bodů

ZPĚT NA PŘEHLED

STORNOVÁNÍ TIKETU

Stornovat tiket?

ZRUŠIT

STORNOVAT

ZPĚT NA PŘEHLED

STORNOVÁNÍ TIKETU

Tiket lze stornovat max. 5 minut po vsazení a nesmí obsahovat již rozehraný zápas. Tento tiket nesplňuje některou z podmínek, a proto nelze stornovat.

OK

ZPĚT NA PŘEHLED

ODESLÁNÍ TIKETU KAMARÁDOVI

Vyberte kamaráda a případně doplňte text zprávy

Přezdívka kamaráda

Text zprávy (nepovinné)

JED

3

10 Kč

je přílohou

ZRUŠIT

ODESLAT

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.