Vzhled:Timeless

Příručka k zobrazením MediaWiki - kategorie

Timeless Stav rozšíření: stabilní
Napsal(i)	Isarra
Zásady kompatibility	Vydání snímků následuje MediaWiki. Master zachovává zpětnou kompatibilitu.
MediaWiki	1.31+
Licence	GNU General Public License 2.0 nebo pozdější
Ke stažení	Stáhnout zobrazení Git [?]: stáhněte si Git master procházet úložiště (Phabricator · GitHub) zobrazit historii přispěvatelé repozitáře (GitHub) kontrola kódu
Příklad	mediawiki.org This article
Parametry $wgTimelessBackdropImage
Čtvrtletní stahování	0
Používání veřejných wikin	2,938 (Ranked 13th)
Veřejné wikiny používající jako výchozí vzhled	165
Přeložte rozšíření $2, používá-li lokalizaci z translatewiki.net
Vagrant role	timeless
Problémy	Otevřené úkoly · Nahlásit chybu

Domovská stránka anglické Wikipedie ve vzhledu Timeless zobrazená na mobilním telefonu

Timeless silně podporuje responzivní webdesign a je optimalizován pro širokou škálu šířek obrazovek, od úzkých obrazovek mobilních telefonů až po široké monitory.

Vzhled je založen na Winter a je pokusem začlenit návrhy z této diskuse o pumpách ve vesnici z roku 2015.

Instalace

Tento vzhled je součástí MediaWiki verze 1.31 a vyšších. Zbývající konfigurační pokyny je stále nutné dodržovat.

• Pokud používáte Vagrant , instalujte s těmito parametry vagrant roles enable timeless -p

Ruční instalace

• Stáhněte soubor/y a vložte je do adresáře pojmenovaného Timeless ve vaší složce skins/.
• Na konec vašeho souboru LocalSettings.php přidejte řádek s následujícím kódem:

  wfLoadSkin( 'Timeless' );
  

• Vyžaduje nastavení v konfiguračním souboru.
• Dokončeno - Přejděte na stránku Special:Version vaší wiki a zkontrolujte, zda bylo zobrazení úspěšně nainstalováno.

Funkce

Na rozdíl od minimalistického vzhledu Minerva , který je výchozím vzhledem pro mobilní telefony, Timeless zahrnuje funkcionalitu tématu zaměřeného na stolní počítače, jako je Vzhled:Vector , výchozí vzhled pro stolní počítače, na všechny velikosti obrazovek.

Timeless navíc nabízí v horní liště, vedle tlačítek "Editovat" a "Zobrazit historii", zřetelný praktický odkaz na seznam příspěvků uživatelů.

Obecným cílem je vytvořit plně funkční vzhled, který klade důraz jak na obsah, tak na nástroje pro úpravy, s více režimy zobrazení pro zobrazení všeho, se zaměřením pouze na obsah (Winter) nebo přepnutím na tmavé/noční zobrazení. Jednoho dne to skutečně bude možné.

Na rozdíl od MobileFrontendu/Minervy Timeless nuceně nemění styl tabulek pro mobilní rozlišení a místo toho očekává a povzbuzuje uživatele, aby si sami vytvářeli responzivní tabulky a šablony optimalizované pro jejich konkrétní použití.

S Skin:Timeless-DarkCSS si uživatelé mohou ručně zapnout tmavé pozadí pro snížení namáhání očí a úsporu energie na AMOLED displejích. Pokyny jsou k dispozici na dané stránce.

Budoucím cílem je vytvořit plně funkční vzhled, který:

1. Klade důraz jak na obsah, tak na nástroje pro úpravu,
2. S více režimy zobrazení pro zobrazení všeho, se zaměřením pouze na obsah (Winter), nebo
3. Přepne na tmavé/noční zobrazení.

Detaily reagujícího vývoje webových stránek

Tato část je založena na výchozí konfiguraci.

≥1340 pixelů

Nad simulovanou šířkou obrazovky 1340 pixelů je web viditelný ve třech sloupcích. Některé sekce navigace webu se nacházejí na levé straně oblasti obsahu (např. "Navigace", "Nástroje"), zatímco jiné jsou na pravé straně ("Další", "Tisk/export", "Na jiných projektech", "V jiných jazycích", "Kategorie").

Počínaje simulovanou šířkou zobrazovací oblasti prohlížeče okolo 1900 pixelů je šířka středového sloupce s obsahem pevně stanovena na 1261 pixelů, zatímco u starších vzhledů Vector a MonoBook se šířka může neomezeně rozšiřovat s šířkou obrazovky.

Neomezené šířky obsahu lze s tímto vzhledem dosáhnout pomocí tohoto úryvku kódu CSS.

Pomocí tohoto CSS kódu mohou uživatelé volitelně zobrazit navigační sekce ze třetího (pravého) sloupce v prvním (levém) sloupci, jak již bylo provedeno na 1339 až 1100 pixelů šířky prohlížeče.

1339 až 1100 pixelů

Stránka je viditelná ve dvou sloupcích. Sekce navigace webu na pravé straně oblasti obsahu se přesunou na levou stranu pod stávající sekce.

Méně než 1100 pixelů

Stránka je viditelná v jednom sloupci. Oblast obsahu vyplňuje celou plochu obrazovky. Kategorie se zobrazují ve spodní části stránky, kde jsou na číslech Vector a Monobook .

Navigační sekce webu jsou sbaleny do horního navigačního panelu s textovými popisky a aktuálně se zobrazují a skrývají pomocí JavaScript, nikoli čistě pomocí CSS, jak je implementováno v Skin:MinervaNeue s použitím :checked.

Méně než 851 pixelů

Responzivní design stránky Timeless s rozlišením pod 851 pixely se přizpůsobí obrazovkám mobilních telefonů.

Textové popisky na navigačních prvcích nad oblastí obsahu (např. "Stránka", "Diskuse", "Editovat", "Editovat zdroj", "Zobrazit historii") se z důvodu úspory místa v horizontální rovině nezobrazují. Místo obou se zobrazují pouze ikony.

Navigační sekce webu jsou sbaleny do horního navigačního panelu s popisky ikon.

Úryvky CSS

Tyto úryvky kódu lze použít k úpravě vzhledu vzhledu vložením do MediaWiki:Timeless.css jako administrátor MediaWiki, do vlastního CSS uživatelského prostoru jako běžný uživatel nebo do uživatelského vzhledu rozšíření prohlížeče jako návštěvník.

Neurčitá šířka obsahu

Pokud jde o kritiku omezené šířky obsahu, při použití tohoto úryvku kódu CSS se šířka středového (obsahového) sloupce a modré prostřední čáry barevného pruhu nad ním neomezeně rozšiřuje s šířkou obrazovky.

/* Neurčitá šířka obsahu */
@media screen and (min-width: 851px) {
    .color-middle-container,
    .ts-inner { max-width: none; }
}

Jednostranné navigační menu

Pomocí tohoto úryvku kódu se prvky navigační nabídky na pravé straně (#mw-related-navigation) budou i nadále zobrazovat v levém sloupci (pod #mw-site-navigation), stejně jako při šířce prohlížeče 1100 až 1330 pixelů, a to i při šířce prohlížeče nad 1340 pixelů, a to pro uživatele, kteří preferují jednostrannou navigační nabídku, známou ze vzhledů Vector a MonoBook .

Kód funguje také v kombinaci s výše uvedeným kódem pro neomezenou šířku obsahu.

/* Jednostranné navigační menu */
@media (min-width: 1340px) {
  #mw-content-block {
    display: block;
  }
  #mw-content,
  #content-bottom-stuff {
    margin-left: 14em;
  }
  #mw-content-wrapper {
    float: right;
    margin-left: -14em;
    width: 100%;
  }
  #mw-related-navigation {
    width: 14em;
    padding: 0 1em 0 0;
  }
  div.color-middle {
    margin-right: 0;
  }
  .mw-wiki-logo {
  	display: inline-block;
  }
}

/* Zarovnání horního barevného pruhu se sloupci stránky */
.ts-inner {
  padding: 0 0 0 1em;
}

/* Zarovnání spodních log */
#footer { padding-right: 1em; }

Modernizovaná písma v horní liště

Následující kód CSS přidává k aktuálně používaným patkovým písmům (Linux Libertine, Times New Roman atd.) uživatelského jména a navigačních nabídek v horním panelu zobrazených mezi 852 a 1100 pixely sadu moderních typů bezpatkových písem (včetně záložních písem).

/* Modernizace písma horního panelu */
#mw-header *,
#mw-site-navigation *,
#mw-related-navigation * {
    font-family: 'Segoe UI','Segoe UI Emoji','Segoe UI Symbol','Lato','Liberation Sans','Noto Sans','Helvetica Neue','Helvetica',sans-serif;
}

/* Vyhněte se ořezávání písmen pomocí následovných znaků: g,j,p,q,y */
#personal h2 span {
    height: 1.5em;
    position:relative;
    bottom:0.1em
}

/* Nášivka s trojúhelníkovou polohou */
#personal h2::after {
   position: relative;
   bottom: 0.5em;
}

Zvýraznění názvu sekce při navigaci

Tento úryvek kódu CSS zvýrazňuje záhlaví poslední sekce při navigace, aby se k němu usnadnil návrat při procházení dlouhého dokumentu.

.mw-headline:target {
  background-color: gold;
}

Starší záplaty

Uživatelé a správci vzdáleného rozhraní starších instalací MediaWiki s dřívější a méně vyspělou verzí tohoto vzhledu mohou dočasně doplnit tyto záplaty kódu, aby vyřešili nedostatky ve vzhledu:

/* Optimalizace šířky: Zabraňuje příliš úzkému vzhledu na mobilních telefonech */
@media (max-width:850px) {
  #mw-content  { padding: 0.5em 0.5em 3em; }
  #firstHeading { width: 100%; }
  #mw-header-container { padding: 3.75em 0.5em 0.35em; }
  #site-navigation h2 { left: 0.5em; }
  #p-logo-text { left: 3em; }
  #user-tools h2 { right: 1em; }
  #site-tools h2 { right: 4em; }
}

/* Oprava odsazení obsahu (dodatečně upraví odsazení na úrovni záhlaví, pokud chybí) */
#toc ul ul {
  margin: 0 0 0 2em;
}

Konfigurace

Následující jsou podporovány pouze v MediaWiki 1.34+

$wgTimelessBackdropImage (string, default 'cat.svg')

Nastavte to stejně, jako byste použili $wgLogo pro vhodný obrázek na pozadí. Doporučení je svg soubor nastavený na šířku 500-750px: svg pro podporu HiDPI. Velikost může být libovolná, ale bude mít za následek podobný vzhled obsahu za ním jako u výchozí kočky.

Aby pozadí potenciálně fungovalo bez úprav i s dalšími barevnými motivy pozadí, pokud budou později implementovány, doporučuje se průhledný jednobarevný obrázek s krytím černé/bílé 20–50 %, kde alfa hodnoty černobílých částí jsou rovněž kolem 10–50/255, protože by to mělo umožnit fungování na většině věcí, které nejsou čistě bílé/černé.

Příklady (které ve skutečnosti nedodržují výše uvedené doporučení, a proto pravděpodobně nebudou fungovat na tmavém pozadí): Timeless backdrop (wiktionary).svg a Timeless backdrop (metawiki).svg

$wgTimelessLogo (null|string|array, default null)

Speciální vykreslování loga, umožňující vytvoření vlastních log konkrétně pro Timeless (například čtvercová verze loga bez slovního označení, aby se zabránilo duplicitě s hlavičkou). Také poskytuje o něco lepší podporu HiDPI než použití hodnoty $wgLogoHD, protože to funguje pouze pro loga o rozměrech 135x135px a zmenšuje všechna loga s vysokým rozlišením na tuto velikost.

Lze použít k odkazování na soubor nahraný na wiki pomocí funkce Timeless (nezapomeňte soubor chránit, pokud toto používáte) jednoduše zadáním názvu souboru, nebo můžete ručně zadat podrobnosti o cestě k logu pomocí pole.

Pro opětovné použití hodnot $wgLogo a $wgLogoHD, které již jsou nastaveny pro logo o nominální velikosti 160x160px, ale kde i HD verze mají správnou velikost:

$wgTimelessLogo = [
	'1x' => $wgLogo,
	'1.5x' => $wgLogoHD['1.5x'],
	'2x' => $wgLogoHD['2x'],
	'width' => 160,
	'height' => 160
];

Použití File:Cows.svg nahraného souboru na Wiki:

$wgTimelessLogo = 'Cows.svg';

• Upozorňujeme, že nahraná loga fungují nejlépe jako SVG nebo jako rastry o velikosti 2x nebo větší a budou zmenšena pro každé cílové rozlišení. Tento přístup samozřejmě vyžaduje povolení nahrávání souborů a zobrazování miniatur.
• Doporučené nominální velikosti se pravděpodobně pohybují kolem 135 pixelů až 165 pixelů.

$wgTimelessWordmark (null|string|array, default null)

Použití obrázku místo výchozího patkového textu Linux Libertine pro slovní označení záhlaví banneru. Stejný přístup k použití jako u $wgTimelessLogo.

Anglická Wikipedie by tedy mohla použít Wikipedia wordmark.svg, například takto:

$wgTimelessWordmark = 'Wikipedia wordmark.svg';

Nebo zadejte pole pro každou verzi rozlišení a rozměry, jak je uvedeno výše (upřímně řečeno, pravděpodobněji s nimi).

• Pokud nepoužíváte nahraný soubor na wiki, je nutné zadat rozměry.
• Doporučená nominální velikost až 200 pixelů na šířku a 38 pixelů na výšku.

Upozorňujeme, že Timeless podporuje slovní značky a loga HiDPI nastavená na hodnotu Příručka:$wgLogos , takže pokud nemáte žádný zvláštní důvod, doporučuje se používat pouze tuto hodnotu. Zejména vykreslování názvu webu může, ale nemusí vyžadovat obrázek slovního znaku pro správné vykreslení, protože styly pro textový nadpis jsou v podstatě jen odhady, které nebudou vždy fungovat. Mezi další možnosti pro správné vykreslení slovního označení patří:

• Nastavení vlastního CSS v Timeless.css wiki, například no-wrap nebo jiná hodnota velikosti písma
• Nastavení jiného zobrazovaného řetězce změnou obsahu zprávy timeless-sitetitle