search

baraja-core / admin-bar

Smart admin bar with simple interface for CMS.
MIT License
2 stars 1 forks source link

Automatické posunutí obsahu celé stránky pod AdminBar #8

Closed janbarasek closed 3 years ago

janbarasek commented 3 years ago

Tento balík přidává černý admin bar do všech stránek, pokud je uživatel přihlášen.

Bar se automaticky přes CSS styl pozicuje fixně na začátku stránky. Styly jsou pak umístěny přímo v tomto balíku, přičemž balík zajišťuje jejich korektní vykreslení do stránky, pokud je Bar zobrazen.

Styly: https://github.com/baraja-core/admin-bar/blob/master/src/assets/style.css

Šablona je pak implementována jako phtml soubor, který je optimalizován na rychlost renderu: https://github.com/baraja-core/admin-bar/blob/master/src/assets/content.phtml

Při vykreslení Baru se stává, že se vykreslí přes hlavní obsah stránky.

Příklad:

Snímek obrazovky 2021-08-13 v 9 55 19

Zkus vymyslet způsob, jak obsah stránky posunout o fixní počet pixelů (Bar je vždy stejně vysoký, rozměry najdeš ve stylu) a tím se zajistí, že bude stránka korektně vidět.

Například takto:

Snímek obrazovky 2021-08-13 v 9 56 13

Řešení si představuji tak, že se posune obsah <body> o fixní horní margin, zatímco Bar bude pozicován fixně, takže zůstane na začátku stránky.

Logiku testuj v libovolném projektu a pak sem pošli Pull request.

Díky.

danieldobry370 commented 3 years ago

Stačí jen přidat do baraja-core\admin-bar-src-\assets\style.css:

body {
    margin-top: 45px;
}
janbarasek commented 3 years ago

Funguje to, i když má stránka fixní hlavičku?

janbarasek commented 3 years ago

Řešení musí fungovat i v případě, kdy si web fixuje hlavičku přes CSS styl top: 0 (navíc tam může mít přepínač important). Nezapomeň na obecnost. Stránka nemusí obsahovat <body> element a pozice prvků může být vypočítána dynamicky.

Teoretické řešení:

Hrubá představa je ta, že admin bar vykreslíš na zápornou souřadnici, tj. top bude na -25px, a potom se ti povede posunout celou stránku dolů, protože jakékoli jiné řešení nemusí fungovat obecně, a taky nesmíš nikdy rozbít javascript, pokud náhodou na stránce nějak počítá rozměry.

janbarasek commented 3 years ago

Problém zafixování hlavičky řešil třeba i sám Google v jeho náhledu historie stránky. Zkus prozkoumat jeho implementaci:

Snímek obrazovky 2021-08-16 v 15 01 17

Stačí do Googlu zadat: cache:php.baraja.cz.

danieldobry370 commented 3 years ago

Řešení googlu taky není bez chyby. Celou stránku zabalí do divu a nepočítá s prvkem který má position-top:0. image

janbarasek commented 3 years ago

Chápu. Zkus najít nějaké vhodné řešení, které bude mít co nejméně nevýhod a bude fungovat na co největší množství případů.

Pravděpodobně budeme muset součástí CMS napsat pravidlo, jak se má správně šablona konfigurovat, aby s Admin Barem vypadala vždy dobře.

danieldobry370 commented 3 years ago

Přesně tak. Co se týče wordpressu tak ani ten nějak nebojuje s position-top: 0. Tvůrci šablon prostě ten styl nepoužívají.

danieldobry370 commented 3 years ago

Adminbar wordpressu po přenastavení navigace na position: 0 v css souboru. image

janbarasek commented 3 years ago

Pojďme to zatím udělat jen přes ten CSS selector pro body a časem promyslíme lepší řešení.