HOME

5h-3LL 1.0
DIR: /srv/http/adent.cz/tisic.cz.test2/pages/help
/srv/http/adent.cz/tisic.cz.test2/pages/help/
Current File : /srv/http/adent.cz/tisic.cz.test2/pages/help/master-elementy.php
<?php /*
 title=Nápověda pro administraci stránek
 &description=Karlův cvičební MVC, aby pochopil, jak se dneska programuje :)
 &keywords= 
 &role=master
 &groups=
*/ ?>

<h1>Nápověda pro default elementy SPZ</h1>

<p>Elementy jsou takový malý "SCSS Framework" pro zjednodušení tvorby stránek. 
    <br />- SCSS se upravuje v <code>/scss/partials/_adc-elements.scss</code>. HTML je zpravidla v <code>/elements/</code>, pro "velkou" fotogalerii pak ve <code>/views/</code></p>

<div class="adc-tabs">
    <ul>
        <li class="active"><a href="#adc-tab">TABy (ouška)</a></li>
        <li><a href="#adc-accordion">Harmonika</a></li>
        <li><a href="#adc-menu">Menu</a></li>
        <li><a href="#layouty">Layouty</a></li>
        <li><a href="#drobnosti">CSS drobnosti</a></li>
        <li><a href="#mozna">Má tohle smysl více rozepisovat?</a></li>
    </ul>
    
    <!-- adc-tab -->
    <div class="active" id="adc-tab">
        <p>adc-udělátko na jednoduchou výrobu oušek (takových, jako jsou nad tímto odstavcem):</p>
        <dl class="adc-accordion">
            <dt>Napíšeme si <strong>HTML</strong>:</dt>
            <dd>
                <p>(pozor, zatím nepodporujeme více "oušek" na stránce... :/ je to ale jen otázka úpravy JavaScriptu, tak kdyby bylo potřeba, Karel to upraví :)</p>
                <?php
                    $str = <<<'EOD'
<div class="adc-tabs">
    <ul>
        <li class="active"><a href="#jmeno-ouska-1">Ouško 1</a></li>
        <!-- nastav si jmeno-ouska-1 na jméno podle potřeby, je potřeba ho pak změnit i v 'id' odpovídajícího divu -->
        <!-- na každý tab funguje i odkaz z jiných stránek, např. http://mvc.karel/help/master-elementy#jmeno-ouska-1 -->
        <li><a href="#jmeno-ouska-2">Ouško2</a></li>
    </ul>
    
    <!-- vidět bude (při načtení stránky) jen ten div, který bude mít class="active" -->
    <div class="active" id="jmeno-ouska-1">
        <p>Obsah ouška 1...</p>
    </div>   
    <div id="jmeno-ouska-2">
        <p>Obsah ouška 2...</p>
    </div>   
</div>   
EOD;
                    echo TextShortcutsUti::showCode('Příklad HTML kódu:', $str, 'html') ;
                ?>   
                <p>Důležité je držet strukturu 
                    <br /><strong>div class='adc-tabs'
                    <br />- ul 
                    <br />- - li a href='#jméno_ouška' [volitelně li class='active' pro nastavení výchozího zobrazovaného ouška]
                    <br />- - li... (opakovat, kolikrát je potřeba)
                    <br />- div id='jméno_ouška'  [volitelně div class='active' pro nastavení výchozího zobrazovaného divu]
                    <br />- div... (opakovat, kolikrát je potřeba)
                    </strong>
                </p>
            </dd>
            <dt>Nastylovat si <strong>existující CSS</strong> pro class='adc-tabs' a její vnořené ul, li, a, div:</dt>
            <dd>
                <p>(styl už je standardně ve style.css obsažen, edituj v <code>/scss/partials/_adc-elements.scss</code>)
                    <br />(pokud ouška adc-tabs ve webu nepotřebuješ a chceš optimalizovat CSS, tak
                    <br />1. smaž definici stylu v <code>/scss/partials/_adc-elements.scss</code> a 
                    <br />2. zakomentuj v <code>/scss/partials/_adc-mixins.scss</code> řádek @import "mixins/adc-tabs";)
                </p>
                <?php
                    $str = <<<'EOD'
.adc-tabs {
    
    // menu bude v řádku a položky budou mít text-align:center;
    @include adc-tabs(inline, center); 
    
    // nastavení pomocných barev SASS funkcí lighten(zesvětli) a darken(ztmav)
    $adc-color-adctab-stdtext: darken($adc-color-main-lighter,20%);
    $adc-color-adctab-stdbg: lighten($adc-color-main-lighter,30%);
    
    // nastavení barev pro ouška - text standard, pozadí standard, text active, pozadí active
    @include adc-tabs-colors(
        $adc-color-adctab-stdtext, 
        $adc-color-adctab-stdbg, 
        rgba(255,255,255,0.9), 
        $adc-color-main-lighter
    );
    
    // nastavení designu - '>ul', 'li' a 'a'
    // - především margin, padding a border... ostatní jen s velkou rozvahou :)
    >ul {
        margin-top: 0;
        padding: 0.5rem 1rem 0 1rem;
        border-bottom: 3px solid $adc-color-main;
    
        li {
            border: 1px solid currentcolor;
            border-bottom: 0;

            border-top-left-radius: 5px;
            border-top-right-radius: 5px;

            a {
                padding: 0.5rem 1.5rem 0.5rem 1.5rem ;
            }
        }
    }
    
}
EOD;
                    echo TextShortcutsUti::showCode('Příklad SCSS kódu v <code>/scss/partials/_adc-elements.scss</code> (přenos do naší "normální" šablony bude složitější :(... ):', $str, 'css') ;
                ?>   
                <p>Kód je v SCSS a dost si pomáhá mixiny (funkcemi) adc-tabs-logic() a adc-tabs-colors(), které zajišťují definici prvků, které "nejsou vidět" 
                    <br />(tj. zajišťují spíše funkčnost, jako kam nastavit tu správnou barvu a tak).
                </p>
                <p>Pro správný design základní verze adc-tabs tak stačí především
                    <strong>
                    <br />- nastavit v parametrech 1. mixinu orientaci celých oušek a textu v položkách menu - adc-tabs(inline/column, hodnota pro text-align)
                    <br />- nastavit v parametrech 2. mixinu barvy - v pořadí text standard, pozadí standard, text active, pozadí active
                    <br />- v dalším CSS nastavit "boxy" (margin, padding a border) pro 'ul', 'li' a 'a'
                    </strong>
                </p>
                <p>Poznámka: definice .adc-tabs je v souboru <code>/scss/partials/_adc-elements.scss</code> a definice mixinů je v <code>/scss/partials/_adc-mixins.scss</code>.
                </p>
            </dd>
            <dt><strong>Javascript:</strong> je v SPZ automaticky, tak jen pro úplnost a případnou optimalizaci stránek:</dt>
            <dd>
                <p>Funkčnost zajišťuje <strong>JavaScript</strong>, který je standardně vložený v /js/scripts.js 
                    <br />(tj. standardně není potřeba s JavaScriptem při vytváření HTML oušek nic zařizovat :).
                </p>
                <?php
                    $str = <<<'EOD'
//
//      Funkce pro adc-TABS
//      -------------------
//      - zařizuje funkčnosti pro "ouška" (mají (a) menu v 'ul' a (b) příslušné obsahy v 'div')
//      - nepodporuje více "oušek" na stránce :/
//      - funkčnost 1: po načtení stránky zjistit z URL, jestli nemáme určený tab k zobrazení
//      - funkčnost 2: přepínat ouška klikáním na menu :) 
//
$(document).ready(function() {

// Já vím, chtělo by to společnou funkci na nastavení aktivního tabu v divu, ale už to asi přepisovat nebudu... ;-)    
    
    // I. Při načtení stránky
    // při prvním načtení si přečíst URL adresu 
    // - zjistit, jestli v ní není nastaveno v odkazu '#jmeno-tabu'
    var parsedUrl = String(window.location).split('#');
    
    // a pak případně zobrazit správný tab
    // !!! pokud bychom někdy chtěli podoporovat více "oušek" na stránce, 
    // !!! mělo by se tohle volat na $('adc.tabs').each()
    if (typeof parsedUrl[1] !== 'undefined') {
        var tabToSwitchTo = '#' + parsedUrl[1];
        
        // odebrat class="active" všem 'li'
        $(".adc-tabs>ul li").removeClass("active");
        
        // přidat  class="active" 'li', který odpovídá informaci z adresy
        $(".adc-tabs>ul li").each( function() {
            if ($(this).children('a').attr('href') == tabToSwitchTo) {
                $(this).addClass("active");
            }
        });
        
        // odebrat class="active" všem '.adc-tabs>div'
        $(".adc-tabs>ul div").removeClass("active");
        
        // přidat class="active" 'div', který patří k 'li', který odpovídá informaci z adresy
        $(".adc-tabs>ul div").each( function() {
            if ($(this).attr('id') == tabToSwitchTo) {
                $(this).addClass("active");
            }
        });
        
        // a přejít na začátek stránky (odkaz na id zobrazí stránku až od toho id...)
        $('html,body').scrollTop(0);
    }

    // II. Při každém kliknutí na odkaz v menu oušek
    // přepínat ouška na kliknutí
    $(".adc-tabs>ul a").click( function(e) {
        
		tis = $(this);                            // odkaz, na který se kliklo
        tisId = tis.attr('href').replace('#',''); // adresa href našeho 'a' = id divu, který zobrazíme
        
        // odebrat class="active" všem 'li' v tabu
        tis.parent().parent().children('li').removeClass("active");
        
        // přidat  class="active" 'li', na který se kliklo, a zjistit z něj hodnotu z data-tab
        tis.parent().addClass("active");
        
        // odebrat class="active" všem '.adc-tabs>div'
        tis.parent().parent().parent().children("div").removeClass("active");
        
        // přidat class="active" 'div', který patří k 'li', na který se kliklo
        tis.parent().parent().parent().children("div").each( function() {
            if ($(this).attr("id") == tisId) {
                $(this).addClass("active");
            }
        });
        
        // zakázat další propagování odkazu (nechceme přecházet dál na odkaz)
        e.stopPropagation();
        return false; 
    });
});
EOD;
                    echo TextShortcutsUti::showCode('JS funkce:', $str, 'js') ;
                ?>   
                    <p>Pro případnou optimalizaci stránek lze funkci z tohoto obecného skriptu vyčlenit a vkládat ji jen do stránek, kde jsou ouška potřeba...</p>
                <li>Nastavit, <strong>které ouško bude vidět při prvním zobrazení</strong>, se dá nastavit pomocé <code>class="active</code> pro 'li' i 'div'.</li>
                <li>Nastavit, <strong>které ouško bude aktivní, z odkazu z jiné stránky</strong> - odkazem na #id, např. na <a href="http://mvc.karel/help/master-elementy#adc-tab">http://mvc.karel/help/master-elementy#adc-tab</a></li>
            </dd>
        </dl>
    </div>
  
    <!-- adc-accordion -->
    <div id="adc-accordion">
        <p>adc-udělátko na jednoduchou výrobu "harmoniky" - zobrazení dvojic "nadpis"-"obsah" s tím, že "obsahy" se schovávají 
            <br />(takových, jako jsou pod tímto odstavcem).</p>
        <dl class="adc-accordion">
            <dt>Napíšeme si <strong>HTML</strong>:</dt>
            <dd>
                <p>Udělátko je docela "tvárné". Potřebuje jenom to, aby se v obalovacím divu pravidelně opakovaly elementy "nadpis" a "obsah":</p>
                <?php
                    $str = <<<'EOD'
<!-- můžeme použít "obvyklou" kombinaci 'h3' a 'p': -->
<div class="adc-accordion">
    <!-- pomocí class 'expanded' můžeme nechat rozbalit libovolný obsah při prvním načtení -->
    <!-- ... technicky class 'expanded' 1. rozbaluje následující prvek a 2. mění rozbalovací šipku na "nahoru" -->
    <h3 class="expanded">Jedna</h3>
    <p>Bližší popis jedna...</p>
    <h3>Dva</h3>
    <p>Bližší popis dva...</p>
    <h3>Tři</h3>
    <p>Bližší popis tři...</p>
</div>

<!-- nebo taky 'dl', 'dt', 'dd': -->
<dl class="adc-accordion">
    <!-- pomocí class 'expanded' můžeme nechat rozbalit libovolný obsah při prvním načtení -->
    <!-- ... technicky class 'expanded' 1. rozbaluje následující prvek a 2. mění rozbalovací šipku na "nahoru" -->
    <dt class="expanded">Jedna</dt>
    <dd>Bližší popis jedna...</dd>
    <dt>Dva</dt>
    <dd>Bližší popis dva...</dd>
    <dt>Tři</dt>
    <dd>Bližší popis tři...</dd>
</dl>

<!-- nebo cokoli jiného, co se vhodně opakuje :) -->
EOD;
                    echo TextShortcutsUti::showCode('Příklad HTML kódu:', $str, 'html') ;
                ?>   
            </dd>
            <dt>Nastylovat si <strong>existující CSS</strong> pro class='adc-accordion' její vnořené prvky:</dt>
            <dd>
                <p>(styl už je standardně ve style.css obsažen, edituj v <code>/scss/partials/_adc-elements.scss</code>)</p>
                <?php
                    $str = <<<'EOD'
/*
 *  adc-ACCORDION - HARMONIKA
 *
 */
.adc-accordion {
    // nastavení logiky harmoniky - liché "nadpisy" mají myš-odkaz, sudé "obsahy" jsou schované
    @include adc-accordion-logic(); 
    
    // šipky u "nadpisů" - 4 parametry pro adc-arrow() v pořadí
    // 1. směr šipky: $direction='down'(výchozí) | 'up' | 'left' | 'right'
    // 2. pozice šipky: $position='left'(výchozí 1rem) | 'right'
    // 3. šířka šipky: $width (výchozí 1rem)
    // 4. barva šipky: $color (výchozí currentColor)
    // 
    // šipka pro zavřené "nadpisy"
    &>*:nth-child(odd):not(.expanded)::after {
        @include adc-arrow-outline('down','right'); 
    }
    // šipka pro rozevřené "nadpisy"
    &>*:nth-child(odd).expanded::after {
        @include adc-arrow-outline('up','right'); 
    }
    
    // class 'expanded' 1. rozbaluje následující prvek a 2. mění šipku
    .expanded {
        &+* {
            display: block;
        }
    }

    // pokud je potřeba něco dalšího, račte si doplnit...

}
EOD;
                    echo TextShortcutsUti::showCode('Příklad SCSS kódu v <code>/scss/partials/_adc-elements.scss</code> (přenos do naší "normální" šablony bude složitější :(... ):', $str, 'css') ;
                ?>   
                <p>Kód je v SCSS a lehce si pomáhá mixinem (funkcí) adc-accordion-logic(), která zajišťuje jen definici prvků, které "nejsou vidět" 
                    <br />(konkrétně změní na lichých elementech kurzor myši na "ukazovátko" a sudé elementy nastaví na display:none;).
                </p>
                <p>(pokud harmoniku adc-accordion ve webu nepotřebuješ a chceš optimalizovat CSS, tak
                    <br />1. smaž definici stylu v <code>/scss/partials/_adc-elements.scss</code> a 
                    <br />2. zakomentuj v <code>/scss/partials/_adc-mixins.scss</code> řádek @import "mixins/adc-accordion";)
                </p>
                <p>Poznámka: definice .adc-accordion je v souboru <code>/scss/partials/_adc-elements.scss</code> a definice mixinů je v <code>/scss/partials/_adc-mixins.scss</code>.
                </p>
            </dd>
            <dt><strong>Javascript:</strong> je v SPZ automaticky, <strong>jednoduše zapíná/vypíná animaci rozbalování obsahu</strong>... <strong>(a bacha na verzi JQuery!)</strong>:</dt>
            <dd>
                <p>Funkčnost zajišťuje <strong>JavaScript</strong>, který je standardně vložený v /js/scripts.js 
                    <br />(tj. standardně není potřeba s JavaScriptem při vytváření HTML oušek nic zařizovat :).
                </p>
                <p><strong>Animace</strong> se zapíná/vypíná odkomentováním/zakomentováním řádku <code>tis.next().slideToggle('100');</code>.</p>
                <p><strong>POZOR!</strong> Funkce potřebuje JQuery 3.5 a vyšší, protože využívá metody .odd() a .even(), které v předchozích verzích nebyly implementovány.
                    <br />(ale zase předchozí způsob využití se už nebude dále podporovat...)
                </p>
                <p><strong>POZOR 2!</strong> Mám pocit, že funkce jsou v JQuery aktuální verze 3.5.1 přehozené (funkce pro výběr lichých prvků vybírá sudé a naopak. Až to spraví, bude se muset maličko poupravit náš JS kód.</p>
                <p><strong>Poznámka:</strong> První řádek kódu řeší vyznačení přístupnosti přes klávesnici (tabindex, role). Vlastní funkce se pak spouští jak přes kliknutí, tak přes klávesnici.</p>
                
                <?php
                    $str = <<<'EOD'
//      Funkce pro adc-ACCORDION
//      ------------------------
//
//      - zařizuje funkčnosti pro "harmoniku" (má sudé a liché "HTML elementy")
//      - po kliknutí na lichý element:
//      - funkčnost 1: zobrazí se jeho bezprostředně následující element
//      - funkčnost 2: přepne se rozbalovací / zabalovací šipka (přepne se class 'expanded')
//
$(document).ready(function() {

    // každý lichý prvek je "klikatelný" a funguje tak vlastně jako <button> - tak to tak nastavíme (kvůli přístupnosti)
	// - pozor, JQuery 3.5.1 pro liché prvky vyžaduje metodu .even() !!! ??? 
    $(".adc-accordion").children().even().each( function(e) { $(this).attr("tabindex","0"); $(this).attr("role","button") } )
    
    // při kliknutí na lichý prvek
	// 	- pozor, JQuery 3.5.1 pro liché prvky vyžaduje metodu .even() !!! ??? 
	$(".adc-accordion").children().even().on('keypress click', function(e) {
        
        tis = $(this);    // prvek, na který se kliklo

        // přepni viditelnost následujícího prvku s animací 
        // (pokud nechceš animaci, zakomentuj následující 1 řádek)
        tis.next().slideToggle('100');
        
        // přepnutí class 'expanded'
        tis.toggleClass('expanded');
    });
});
EOD;
                    echo TextShortcutsUti::showCode('JS funkce:', $str, 'js') ;
                ?>   
                <p>Pro případnou optimalizaci stránek lze funkci z tohoto obecného skriptu vyčlenit a vkládat ji jen do stránek, kde je harmonika potřeba...</p>
            </dd>
        </dl>

    </div>
	
    <!-- adc-menu -->
    <div id="adc-menu">
        <h3>Vložení menu do layoutu</h3>
        <ol>
            <li><strong>Menu se (zatím) generuje</strong> z pole uloženého v <code>/elements/data/menu.php</code>. (Časem to doufám bude v databázi...:)</li>
            <li>Menu <strong>není "jen jedno"</strong> (ani hlavní menu, pokud má vnořená menu). Dílčí menu mají jména <code>name</code>('main', 'footer', 'ofirme' apod.).</li>
            <li>Když se jméno dílčího menu napíše do proměnné <code>dropdown</code> u jiné položky menu, "vnoří" se do této položky.</li>
            <li>Díky této vazbě lze hlavní menu a vnořené menu "oddělit" (zobrazit každé zvlášť); 
                <br />menu lze zobrazovat tak, že se bude zobrazovat vnořené menu do aktivní položky.</li>
            <li>Menu <strong>se vkládá do layoutu</strong> funcí <code>&lt;?php /* Vypsání hlavního menu */ echo $this->menuManager->build('main', false); ?&gt;</code>
                <br />to <code>false</code> znamená, že menu nebude zobrazovat vnořená menu rekurzivně; když se napíše <code>true</code> (nebo nic), budou se zobrazovat i vnořená (dropdown) menu.
            </li>
            <li>Pokud máme "odtržené vnořené menu", vkládá se funkcí <code>&lt;?php /* Vypsání menu 2. úrovně */ echo $this->menuManager->buildL2('main'); ?&gt;</code></li>
        </ol>

        <h3>Stylování menu</h3>
        <ol>
            <li><strong>SCSS se styluje</strong> v <code>/scss/partials/_adc-header.scss</code> a případně <code>_adc-footer.scss</code> (tam, kam patří).</li>
            <li>Stylování <strong>vychází z toho</strong>, že
                <ul>
                    <li>Do klasického <code>ul-li</code> menu se přidávají classy 
                        <br />-- <code>dropdown</code> pro vnořená menu (a časem doprogramuju 'role="button"' a možná i nějaké ARIA...)
                        <br />-- <code>active</code> pro položku, která patří k aktuálně načtené stránce
                        <br />-- <code>expanded</code> pro rozbalené (normálně na začátku neviditelné) menu
                    </li>
                </ul>
            </li>
            <li>Stylování <strong>je navržené</strong> tak, že se "zvlášť" generuje
                <br />-- "logika" (schovávání, zobrazování, rozbalování a tak),
                <br />-- barvičky a
                <br />-- "zbývající design" (tj. hlavně marginy, paddingy, bordery, ::aftery a ::befory ;-)))
            </li>
            <li>Ve stylování se využívají <strong>"zjednodušující SCSS funkce"</strong>, které jsou v <code>/scss/mixins/_adc-menu.scss</code>. 
                <br />-- <code>adc-menu-logic()</code> pro tu "logiku"
                <br />-- <code>adc-menu-colors()</code> pro nastavení barev 
                <br />(<em>ta automaticky dopočítává (trochu ztmaví) barvy pro <code>expanded</code> menu; pokud bude někdo chtít jiné barvy, musí se dostylovat ručně (nebo upravit funkci, je to zatím de facto beta verze :)</em>)
                <br />Do funkcí by se ideálně nemělo moc sahat, když už, tak do funkce na barvičky (funkce s 'colors' v názvu :)
            </li>
        </ol>
    </div>

    <!-- Layuoty -->
    <div id="layouty">
        <p>Předpřipravené HTML / CSS layuouty</p>
        <dl class="adc-accordion">
            <dt>Úplně jednoduchý web:</dt>
            <dd>
                <p>Jde tak trochu o "vedlejší produkt" fotogalerie se čtvercovými obrázky:
                    <br />Když obrázek obalíme dvěma HTML tagy, dostaneme z něj čtvercový náhled čistě pomocí CSS, jako třeba</p>
                <div class="adc-square-image" style="width:10rem">
                    <span>
                        <img src="/img/admin/spotted-owlet-5093773_640.jpg" alt=""/>
                    </span>
                </div>
                <?php
                    $str = <<<'EOD'
<div class="adc-square-image" style="width:10rem">
    <span>
        <img src="/img/admin/fantasy-5060076_640.jpg" alt=""/>
    </span>
</div>
EOD;
                    echo TextShortcutsUti::showCode('Příklad HTML kódu:', $str, 'html') ;
                ?>   
                <p>Stačí jen použít předdefinovanou class <code>adc-square-image</code>. 
                    <br />Místo <code>&lt;div&gt;</code> lze použít třeba <code>&lt;a&gt;</code>, ale <code>&lt;span&gt;</code> musí zůstat.
                </p>
                <p><strong>Pozor</strong>: <code>adc-square-image</code> má nastavený <code>display: block;</code> - pokud by to nevyhovovalo, dá se předělat, stačí říct :)</p>
                <p><strong>Pozor 2</strong>: výchozí nastavení <code>padding</code> je <code>0.75rem</code>.
                    <br />Pokud by nevyhovovalo, lze si místo <code>adc-square-image</code> nastavit vlastní class podle následujícího vzoru (definuje se snadno přes mixin):
                </p>
                <?php
                    $str = <<<'EOD'
.adc-square-image-special {
  @include adc-square-img($img-padding:2rem)
}
EOD;
                    echo TextShortcutsUti::showCode('Definice vlastního CSS stylu s paddingem 2rem:', $str, 'css') ;
                ?>                 
            </dd>

            <dt>"Proužkatý" web:</dt>
            <dd>
                <p>Bloky, které chceme rozdělit do sloupců, prostě obalíme extra <code>div</code>em s předdefinovaným class <code>adc-cols-equal-X</code>, kde X je 2 až 12. 
                    <br />Je to tak trochu úlitba bootstrapovému formátování :)</p>
                <p>Například 4 sloupce vyrobíme takhle:</p>
                <?php
                    $str = <<<'EOD'
<div class="adc-cols-equal-4">
    <div style="background-color: aqua">Já jsem DIV!</div>
    <div style="background-color: aqua">Já jsem DIV!</div>
    <div style="background-color: aqua">Já jsem DIV!</div>
    <div style="background-color: aqua">Já jsem DIV!</div>
    <div style="background-color: aqua">Já jsem DIV!</div>
    <div style="background-color: aqua">Já jsem DIV!</div>
</div>
EOD;
                    echo TextShortcutsUti::showCode('Příklad HTML kódu:', $str, 'html') ;
                ?>   
                <p>Výsledkem je tohle:</p>
                <div class="adc-cols-equal-4">
                    <div style="background-color: aqua">Já jsem DIV!</div>
                    <div style="background-color: aqua">Já jsem DIV!</div>
                    <div style="background-color: aqua">Já jsem DIV!</div>
                    <div style="background-color: aqua">Já jsem DIV!</div>
                    <div style="background-color: aqua">Já jsem DIV!</div>
                    <div style="background-color: aqua">Já jsem DIV!</div>
                </div>
                <p>Příslušné (S)CSS je nadefinováno v <code>/scss/partials/_adc-elements.scss</code> pomocí mixinu v <code>/scss/mixins/_adc-grid-easy-framework.scss</code>.</p>
            </dd>

            <dt>CSS GRID web:</dt>
            <dd>
                <p>Bloky, které chceme rozdělit do sloupců, prostě obalíme extra <code>div</code>em s předdefinovaným class <code>adc-cols-equal-X</code>, kde X je 2 až 12. 
                    <br />Je to tak trochu úlitba bootstrapovému formátování :)</p>
                <p>Například 4 sloupce vyrobíme takhle:</p>
                <?php
                    $str = <<<'EOD'
<div class="adc-cols-equal-4">
    <div style="background-color: aqua">Já jsem DIV!</div>
    <div style="background-color: aqua">Já jsem DIV!</div>
    <div style="background-color: aqua">Já jsem DIV!</div>
    <div style="background-color: aqua">Já jsem DIV!</div>
    <div style="background-color: aqua">Já jsem DIV!</div>
    <div style="background-color: aqua">Já jsem DIV!</div>
</div>
EOD;
                    echo TextShortcutsUti::showCode('Příklad HTML kódu:', $str, 'html') ;
                ?>   
                <p>Výsledkem je tohle:</p>
                <div class="adc-cols-equal-4">
                    <div style="background-color: aqua">Já jsem DIV!</div>
                    <div style="background-color: aqua">Já jsem DIV!</div>
                    <div style="background-color: aqua">Já jsem DIV!</div>
                    <div style="background-color: aqua">Já jsem DIV!</div>
                    <div style="background-color: aqua">Já jsem DIV!</div>
                    <div style="background-color: aqua">Já jsem DIV!</div>
                </div>
                <p>Příslušné (S)CSS je nadefinováno v <code>/scss/partials/_adc-elements.scss</code> pomocí mixinu v <code>/scss/mixins/_adc-grid-easy-framework.scss</code>.</p>
            </dd>

        </dl>
    </div>
	
    <!-- Drobnosti -->
    <div id="drobnosti">
        <p>adc-malinkatá-udělátka ;-)</p>
        <dl class="adc-accordion">
            <dt>Čtvercové náhledy obrázků:</dt>
            <dd>
                <p>Jde tak trochu o "vedlejší produkt" fotogalerie se čtvercovými obrázky:
                    <br />Když obrázek obalíme dvěma HTML tagy, dostaneme z něj čtvercový náhled čistě pomocí CSS, jako třeba</p>
                <div class="adc-square-image" style="width:10rem">
                    <span>
                        <img src="/img/admin/spotted-owlet-5093773_640.jpg" alt=""/>
                    </span>
                </div>
                <?php
                    $str = <<<'EOD'
<div class="adc-square-image" style="width:10rem">
    <span>
        <img src="/img/admin/fantasy-5060076_640.jpg" alt=""/>
    </span>
</div>
EOD;
                    echo TextShortcutsUti::showCode('Příklad HTML kódu:', $str, 'html') ;
                ?>   
                <p>Stačí jen použít předdefinovanou class <code>adc-square-image</code>. 
                    <br />Místo <code>&lt;div&gt;</code> lze použít třeba <code>&lt;a&gt;</code>, ale <code>&lt;span&gt;</code> musí zůstat.
                </p>
                <p><strong>Pozor</strong>: <code>adc-square-image</code> má nastavený <code>display: block;</code> - pokud by to nevyhovovalo, dá se předělat, stačí říct :)</p>
                <p><strong>Pozor 2</strong>: výchozí nastavení <code>padding</code> je <code>0.75rem</code>.
                    <br />Pokud by nevyhovovalo, lze si místo <code>adc-square-image</code> nastavit vlastní class podle následujícího vzoru (definuje se snadno přes mixin):
                </p>
                <?php
                    $str = <<<'EOD'
.adc-square-image-special {
  @include adc-square-img($img-padding:2rem)
}
EOD;
                    echo TextShortcutsUti::showCode('Definice vlastního CSS stylu s paddingem 2rem:', $str, 'css') ;
                ?>                 
            </dd>

            <dt>Rozdělení do 2-12 stejných sloupců:</dt>
            <dd>
                <p>Bloky, které chceme rozdělit do sloupců, prostě obalíme extra <code>div</code>em s předdefinovaným class <code>adc-cols-equal-X</code>, kde X je 2 až 12. 
                    <br />Je to tak trochu úlitba bootstrapovému formátování :)</p>
                <p>Například 4 sloupce vyrobíme takhle:</p>
                <?php
                    $str = <<<'EOD'
<div class="adc-cols-equal-4">
    <div style="background-color: aqua">Já jsem DIV!</div>
    <div style="background-color: aqua">Já jsem DIV!</div>
    <div style="background-color: aqua">Já jsem DIV!</div>
    <div style="background-color: aqua">Já jsem DIV!</div>
    <div style="background-color: aqua">Já jsem DIV!</div>
    <div style="background-color: aqua">Já jsem DIV!</div>
</div>
EOD;
                    echo TextShortcutsUti::showCode('Příklad HTML kódu:', $str, 'html') ;
                ?>   
                <p>Výsledkem je tohle:</p>
                <div class="adc-cols-equal-4">
                    <div style="background-color: aqua">Já jsem DIV!</div>
                    <div style="background-color: aqua">Já jsem DIV!</div>
                    <div style="background-color: aqua">Já jsem DIV!</div>
                    <div style="background-color: aqua">Já jsem DIV!</div>
                    <div style="background-color: aqua">Já jsem DIV!</div>
                    <div style="background-color: aqua">Já jsem DIV!</div>
                </div>
                <p>Příslušné (S)CSS je nadefinováno v <code>/scss/partials/_adc-elements.scss</code> pomocí mixinu v <code>/scss/mixins/_adc-grid-easy-framework.scss</code>.</p>
            </dd>

            <dt>"Systémové zprávy":</dt>
            <dd>
                <p>SPZ má předdefinované <strong>CSS styly pro zobrazování "systémových zpráv"</strong>:</p>
                <ul>
                    <li>obecné styly s nedafinovanou barvou textu a pozadí <span class="adc-success">adc-success</span>, <span class="adc-warning">adc-warning</span>, <span class="adc-error">adc-error</span> a <span class="adc-info">adc-info</span>, a pak</li>
                    <li>styly pro odstavce <code>&lt;p&gt;</code> s rámečkem:
                        <p class="adc-success">Styl pro nahlášení "úspěchu" - <code>&lt;p class="adc-success"&gt;...&lt;/p&gt;</code></p>
                        <p class="adc-warning">Styl pro "varování" - <code>&lt;p class="adc-warning"&gt;...&lt;/p&gt;</code></p>
                        <p class="adc-error">Styl pro nahlášení "chyby" - <code>&lt;p class="adc-error"&gt;...&lt;/p&gt;</code></p>
                        <p class="adc-info">Styl pro oznámení "neutrální informace" - <code>&lt;p class="adc-info"&gt;...&lt;/p&gt;</code></p>
                    </li>
                </ul>
            </dd>

            <dt>Automatické doplňování ikon k odkazům:</dt>
            <dd>
                <p class="adc-warning">Pozor: Automatické přidávání ikonek k odkazům vyžaduje, aby měl web přilinkován ikonkový font FontAwesome.</p>
                <p><strong>SPZ automaticky doplňuje ikonky k odkazům</strong>, které</p>
                <ul>
                    <li>vedou <strong>"mimo web"</strong> (tj. mají <code>target="blank"</code>): <a href="http://www.adent.cz" target=""blank">ADENT</a><br /> 
                        (přidání ikonky se dá zamezit přes <code>class="not-link-out"</code> a automaticky se nedává k PDF souborům), <br />
                        nebo</li>
                    <li>odkazují na <strong>vybrané druhy souborů</strong> (soubory s nějakou příponou):
                        <ul>
                            <li><a href="soubor.doc">*.doc*</a> (dá se přidat i ručně přes class <code>&lt;a class="file-word" ...&gt;</code>)</li>
                            <li><a href="soubor.xls">*.xls*</a> (dá se přidat i ručně přes class <code>&lt;a class="file-excel" ...&gt;</code>)</li>
                            <li><a href="soubor.ppt">*.ppt*</a> (dá se přidat i ručně přes class <code>&lt;a class="file-powerpoint" ...&gt;</code>)</li>
                            <li><a href="soubor.txt">*.txt*</a> (dá se přidat i ručně přes class <code>&lt;a class="file-text" ...&gt;</code>)</li>
                            <li><a href="soubor.pdf">*.pdf*</a> (dá se přidat i ručně přes class <code>&lt;a class="file-pdf" ...&gt;</code>)</li>
                            <li><a href="soubor.zip">*.zip, *.arj, *.rar, *.gz</a> (dá se přidat i ručně přes class <code>&lt;a class="file-zip" ...&gt;</code>)</li>
                        </ul>
                    </li>
                </ul>
                <p><strong>Ručně se dají přidat další ikonky:</strong></p>
                <ul>
                    <li><a class="file-file" href="soubor.xxx">obecný soubor</a> přes class <code>&lt;a class="file-file" ...&gt;</code>)</li>
                    <li><a class="file-video" href="soubor.xxx">video</a> přes class <code>&lt;a class="file-video" ...&gt;</code>)</li>
                    <li><a class="file-image" href="soubor.xxx">obrázek</a> přes class <code>&lt;a class="file-image" ...&gt;</code>)</li>
                </ul>
                <p><strong>Přidání ikonky k odkazu na soubor se dá zabránit</strong> přidáním <code>class="no-file"</code></p>
            </dd>

            <dt>Jednoduchý CSS GRID help:</dt>
            <dd>
                <p>Když chceme třeba <strong>rozdělit <code>div</code> na 3 sloupce v poměru 1:2:3</strong>, lze to jednoduše (na 3 CSS řádky) udělat přes CSS GRID.</p>
                <p>V naší ukázce to uděláme tak, že budeme mít <code>&lt;div class="obal"&gt;</code> a v něm 3 další <code>&lt;div&gt;</code> (pro každý sloupec jeden).</p>
                <p><strong>CSS pravidla</strong> se (pro potřeby rozdělení na 3 sloupce - ne pro design) definují jen pro <code>.obal</code>:</p>
                <?php
                    $str = <<<'EOD'
.obal {
    display: grid;
    grid-gap: 6px;
    grid-template-columns: 1fr 2fr 3fr;
}
EOD;
                    echo TextShortcutsUti::showCode('Příklad CSS kódu:', $str, 'css') ;
                ?>   
                <p><em>Poznámka: <code>grid-gap</code> je šířka mezery mezi buňkami GRIDu</em>.</p>
                <p><strong>HTML kód</strong> by pak vypadal takhle:</p>
                <?php
                    $str = <<<'EOD'
<div class="obal">
    <div>První sloupec</div>
    <div>Druhý sloupec</div>
    <div>Třetí sloupec</div>
</div>
EOD;
                    echo TextShortcutsUti::showCode('Příklad HTML kódu:', $str, 'html') ;
                ?>                   
                <p><em>Poznámka: Když chceme 3 sloupce a jeden řádek, musí mít v HTML DOM <code>&lt;div class="obal"&gt;</code> právě 3 přímé potomky (každý z nich pro jeden sloupec).<br />
                    Čtvrtý potomek by začal druhý řádek, sedmý potomek třetí řádek atd., šířka sloupců by byla 1:2:3 pro všechny řádky.</em></p>
                <p>Výsledkem je tohle:</p>
                <div style="display:grid; grid-gap:6px; grid-template-columns: 1fr 2fr 3fr;">
                    <div style="background-color: aqua">První sloupec</div>
                    <div style="background-color: aqua">Druhý sloupec</div>
                    <div style="background-color: aqua">Třetí sloupec</div>
                </div>
                <p class="adc-warning">Zatímco v Bootstrapu píšeme požadovaný poměr pro šířku sloupců do buněk GRIDu, v CSS GRIDu ho píšeme do obalového <code>div</code>.</p>
            </dd>


            <dt>SCSS šipky:</dt>
            <dd>
                <p>... předpřipravený blok, je nutné doplnit text... :)</p>
                <p>Například 4 sloupce vyrobíme takhle:</p>
                <?php
                    $str = <<<'EOD'
<div class="adc-cols-equal-4">
    <div style="background-color: aqua">Já jsem DIV!</div>
    <div style="background-color: aqua">Já jsem DIV!</div>
    <div style="background-color: aqua">Já jsem DIV!</div>
    <div style="background-color: aqua">Já jsem DIV!</div>
    <div style="background-color: aqua">Já jsem DIV!</div>
    <div style="background-color: aqua">Já jsem DIV!</div>
</div>
EOD;
                    echo TextShortcutsUti::showCode('Příklad HTML kódu:', $str, 'html') ;
                ?>   
                <p>Výsledkem je tohle:</p>
                <div class="adc-cols-equal-4">
                    <div style="background-color: aqua">Já jsem DIV!</div>
                    <div style="background-color: aqua">Já jsem DIV!</div>
                    <div style="background-color: aqua">Já jsem DIV!</div>
                    <div style="background-color: aqua">Já jsem DIV!</div>
                    <div style="background-color: aqua">Já jsem DIV!</div>
                    <div style="background-color: aqua">Já jsem DIV!</div>
                </div>
                <p>Příslušné (S)CSS je nadefinováno v <code>/scss/partials/_adc-elements.scss</code> pomocí mixinu v <code>/scss/mixins/_adc-grid-easy-framework.scss</code>.</p>
            </dd>

        </dl>
    </div>
	
    <!-- mozna -->
    <div id="mozna">
        <ul style="margin-top:-1.5rem; ">
            <li>elementy Fotogalerie:
                <br />- element pro "rámec" fotogalerie
                <br />- element pro jednu fotku fotogalerie
                <br />- element pro zobrazení do seznamu fotogalerií (odkaz)
            </li>
            <li>element pro zobrazení přihlášení / přihlášeného uživatele</li>
            <li>něco z <a href="http://vyvoj.adent.cz/vyvoj/adc-samples/">ADC Samples</a>?</li>
            <li>...</li>
        </ul>

    </div>
	
</div>