Pomoc:Przygotowanie FandomDesktopu

Przełączanie między skórkami

Aby wypróbować FandomDesktop, użyj linku z powiadomienia informującego o takiej możliwości lub wejdź na swoją stronę Preferncji i wybierz zakładkę Wygląd. Tam znajdziesz opcję wyboru między obecną skórką Oasis/Hydra lub nową FandomDesktop. Po wybraniu FandomDesktop, dostępne będą dodatkowe opcje, umożliwiające personalizację korzystania z tej skórki.

Używając tej samej strony możesz powrócić do korzystania z obecnej skórki np. w celach testowych. Warto jest przygotować się przed migracją na nową skórkę, która nastąpi tego lata.

Nowe arkusze CSS i JS dla skórki

MediaWiki:Fandomdesktop.css oraz MediaWiki:Fandomdesktop.js

Zmiany dotyczące Fandomu jak i Gamepedii

Tabbery

Klasa .tabber pozostanie niezmieniona. Nazwy pozostałych klas zostają wycofane oraz zastąpioe tymi z Fandom Design System classes: .wds-tabs__tab dla tytułów zakładek oraz .wds-tabs__content dla ich zawartości.

Podstawowy układ

• Migracja z Wiki z Gamepedii
  • cała zawartość strony (z nawigacją) dotychczas dostępna pod #pageWrapper znajduje się teraz w klasie .resizable-container, z tą różnicą, że nawigacja jest na górze strony;
  • zawartość strony (bez nawigacji) jest teraz objęta klasą .page, która zawiera treść strony oraz prawy panel (jeżeli prawy panel jest wyświetlany, element dodatkowo posiada klasę .has-right-rail);
  • treść strony jest teraz objęta klasą .page__main, która zawiera nagłówek, treść artykułu oraz stopkę;
  • zawartość artykułu, dostępna dotychczas pod identyfikatorem #content lub klasą .mw-body obecnie znajduje się pod identyfikatorem #content lub klasą .page-content;
  • nagłówek strony ma klasę .page-header;
  • stopka strony ma klasę .page-footer;
  • prawy panel ma identyfikator #WikiaRailWrapper oraz klasę .WikiaRail.
• Migracja z Wiki z Fandomu
  • cała zawartość strony (z nawigacją) dotychczas dostępna w klasie .WikiaPage ma obecnie klasę .resizable-container;
  • zawartość strony (z prawym panelem) dotychczas dostępna w klasie .WikiaPageContentWrapper obecne ma klasę .page (jeżeli prawy panel jest wyświetlany, ma wówczas także klasę .has-right-rail). Zawiera treść strony oraz prawy panel;
  • treść strony w elemencie z identyfikatorem #WikiaMainContentContainer i klasą .WikiaMainContentContainer jest obecnie dostępna w elemencie z klasą .page__main. Zawiera on nagłówek, treść artykułu oraz stopkę;
  • treść artykułu (#content lub .WikiaArticle) ma obecnie identyfikator #content i klasę .page-content;
  • nagłówek strony (#PageHeader lub .page-header) jest dostępna pod klasą .page-header;
  • stopka strony ma klasę .page-footer;
  • prawy panel (dotychczas #WikiaRailWrapper lub .WikiaRail) obecnie ma klasę .right-rail-wrapper.

Przenośne infoboksy

Zmiany wizualne

• zostaje dodane domyślne obramowanie wokół infoboksu;
• tła tytułów (.pi-title) i nagłówków (.pi-header) są domyślnie ustawione na kolor odcieni (--theme-accent-color), a kolor tekstu jest wyliczany na jego podstawie oraz zapisywany pod zmienną CSS --theme-accent-label-color. Dla niektórych modyfikacji wyglądu może to spowodować nieczytelność tekstów tytułów i nagłówków. Zalecanym rozwiązaniem jest:

.portable-infobox {
  --pi-secondary-background--label: #WŁASNY_KOLOR_TEKSTU_NAGŁÓWKA;
}

Zmiana znaczników dla zakładek

• Znaczniki HTML dla zakładek tagu <panel> oraz zakładek dla grup obrazów zostały całkowicie zmienione, co oznacza, że dotyczasowe modyfikacje nie będą już działały.

Dawne znaczniki dla grup obrazów (uproszczone):

<div class="pi-image-collection">
  <ul class="pi-image-collection-tabs">
    <li class="pi-tab-link pi-item-spacing current">
      <span class="pi-tab-label">
        TYTUŁ
      </span>
    </li>
  </ul>

  <div class="pi-image-collection-tab-content current">
    <figure class="pi-item pi-image">
      <a class="image image-thumbnail">
        OBRAZ LUB FILM
      </a>
    </figure>
  </div>
</div>

Nowe znaczniki dla grup obrazów (uproszczone):

<div class="pi-image-collection wds-tabber">
  <div class="wds-tabs__wrapper">
    <ul class="wds-tabs"> 
      <li class="wds-tabs__tab wds-is-current">
        <span class="wds-tabs__tab-label">
          TYTUŁ
        </span>
      </li>
    </ul>
  </div>
  <div class="wds-tab__content wds-is-current">
    <figure class="pi-item pi-image">
      <a class="image image-thumbnail">
        OBRAZ LUB FILM
      </a>
    </figure>
  </div>
</div>

Dawne znaczniki dla paneli (uproszczone):

<section class="pi-item pi-panel pi-border-color">
  HEADER
  <div class="pi-panel-scroll-wrapper">
    <ul class="pi-section-navigation">
      <li class="pi-section-tab pi-section-active">
        <div class="pi-section-label">
          LABEL
        </div>
      </li>
    </ul>
  </div>
  <div class="pi-section-contents">
    <div class="pi-section-content pi-section-active">
      CONTENT
    </div>
  </div>
</section>

Nowe znaczniki dla paneli (uproszczone):

<section class="pi-item pi-panel pi-border-color wds-tabber">
  HEADER
  <div class="wds-tabs__wrapper">
    <ul class="wds-tabs">
      <li class="wds-tabs__tab wds-is-current">
        <div class="wds-tabs__tab-label">
          LABEL
        </div>
      </li>
    </ul>
  </div>
  <div class="wds-tab__content wds-is-current">
    CONTENT
  </div>
</section>

Zmienne CSS używane przez przenośne infoboksy

.portable-infobox {
  --pi-background: /* GŁÓWNY KOLOR TŁA */
  --pi-secondary-background: /* KOLOR TŁA TYTUŁÓW I NAGŁÓWKÓW */
  --pi-secondary-background--label: /* KOLOR TEKSTU TYTUŁÓW I NAGŁÓWKÓW */
  --pi-border-color: /* KOLOR KRAWĘDZI */
}

Tło społeczności

Nowy kreator motywu umożliwi szersze modyfikacje wyglądu tła strony. Jeżeli jednak wolisz przenieść swoje dotychczasowe modyfikacje w CSS/JS, nazwa nowej klasy to .fandom-community-header__background.

Zmiany w funkcjach w porównaniu z Oasisem

Galeria

Galerie na FandomDesktop będą oparte na rozwiązaniu dostępnym w standardowym MediaWiki.

Więcej informacji znajdziesz na https://www.mediawiki.org/wiki/Help:Images#Gallery_syntax.

Dwie zasadnicze zmiany w składni galerii to:

• Dla ustalenia typu galerii, należy używać atrybutu mode' zamiast type. Dla zapewnienia kompatybilności, atrybut będzie wspierany na FandomDesktop, jednak zachęcamy by nowe galerie tworzyć już z atrybutem mode.
• Wsparcie dla niektórych właściwości galerii zostanie wycofane. Poniżej znajduje się ich pełna lista:

Atrybuty elementu <gallery>

Atrybut	Wsparcie	Uwagi
Zwykłe galerie
type	Tymczasowo wspierany	Powinien zostać zastąpiony atrybutem "mode".
widths	Wspierany
columns	Niewspierany	Może zostać zastąpiony odpowiednikiem "perrow".
perrow	Wspierany
position	Niewspierany
spacing	Niewspierany
orientation	Niewspierany
captionposition	Niewspierany	captionposition="within" można zastąpić podobnie wyglądającym mode="packed-overlay"
captionalign	Niewspierany
captiontextcolor	Niewspierany
bordersize	Niewspierany
bordercolor	Niewspierany
hideaddbutton	Niewspierany
caption	Wspierany
Pokaz slajdów
widths	Wspierany
crop	Niewspierany
showrecentuploads	Niewspierany
position	Niewspierany
Slider
orientation	Wspierany

Dodatkowe uwagi:

• Galerie Fandomu są domyślnie wyświetlane bez obramowań obrazów, natomiast galerie MediaWiki domyślnie je wyśwetlają. Aby zachować dotychczasowy wygląd, należy dokonać modyfikacji w CSS lub dodać mode="nolines" do wszystkich galerii.

Zmiany w funkcjach w porównaniu z Hydra/HydraDark

Galerie

Nowy typ galerii - slider

Społeczności z Gamepedii będą mogły korzystać z galerii typu slider.

Sposób użycia:

<gallery mode="slider">
Obraz.jpg
Obraz2.jpg
...
</gallery>

Slider używa jednego dodatkowego atrybutu orientation, które przyjmuje wartości "bottom" (domyślna) lub "right" i pozwala na ustalenie pozycji nawigacji slidera.

Zmienne dotyczące skórki

Na skórce FandomDesktop, użytkownicy będą mogli korzystać ze zmiennych zawierających kolory poszczególnych elementów skórki. Zmienne te będą dostępne w CSS.

• Przykładowa wartość heksadecymalna (hex): #ffffff
• Przykładowa wartość kolorów RGB (czerwony, zielony, niebieski): 0,0,0

Nazwa zmiennej	Opis
--theme-accent-color	Kolor odcieni z kreatora motywu, jako wartość heksadecymalna
--theme-accent-color--hover	Kolor odcieni z kreatora motywu, rozjaśniona bądź przyciemniona o 20% (zależnie od motywu), jako wartość heksadecymalna
--theme-accent-color--rgb	Kolor odcieni z kreatora motywu, jako wartość RGB
--theme-accent-dynamic-color-1	kolor dynamic-1 dla odcieni. Zobacz sekcję "Dynamiczne kolory" po więcej informacji.
--theme-accent-dynamic-color-1--rgb	wartości RGB dla koloru dynamic-1 dla odcieni. Zobacz sekcję "Dynamiczne kolory" po więcej informacji.
--theme-accent-dynamic-color-2	kolor dynamic-2 dla odcieni. Zobacz sekcję "Dynamiczne kolory" po więcej informacji.
--theme-accent-dynamic-color-2--rgb	wartości RGB dla koloru dynamic-2 dla odcieni. Zobacz sekcję "Dynamiczne kolory" po więcej informacji.
--theme-accent-label-color	Kolor tekstu pasujący do --theme-accent-color background, jako wartość heksadecymalna
--theme-alert-color	Kolor ostrzeżenia (czerwonawy), dostosowany kontrastowo do koloru tła strony, jako wartość heksadecymalna
--theme-alert-color--hover	Kolor ostrzeżenia (czerwonawy), dostosowany kontrastowo do koloru tła strony, rozjaśniona bądź przyciemniona o 20% (zależnie od motywu), jako wartość heksadecymalna
--theme-alert-color--rgb	Kolor ostrzeżenia (czerwonawy), dostosowany kontrastowo do koloru tła strony, jako wartość RGB
--theme-alert-label	Kolor tekstu ostrzeżenia pasujący do --theme-alert-color background, jako wartość heksadecymalna
--theme-body-background-color	Kolor tła społeczności z kreatora motywu, jako wartość heksadecymalna
--theme-body-background-image	Adres URL do obrazu tła, pobrany z kreatora motywu, jako ciąg znaków
--theme-body-dynamic-color-1	kolor dynamic-1 dla tła artykułu. Zobacz sekcję "Dynamiczne kolory" po więcej informacji.
--theme-body-dynamic-color-1--rgb	wartości RGB dla koloru dynamic-1 dla tła artykułu. Zobacz sekcję "Dynamiczne kolory" po więcej informacji.
--theme-body-dynamic-color-2	kolor dynamic-2 color for body background. Zobacz sekcję "Dynamiczne kolory" po więcej informacji.
--theme-body-dynamic-color-2--rgb	wartości RGB dla koloru dynamic-2 dla tła artykułu. Zobacz sekcję "Dynamiczne kolory" po więcej informacji.
--theme-body-text-color	Kolor tekstu pasujący do koloru tła --body-background-color, jako wartość heksadecymalna
--theme-body-text-color--hover	Kolor tekstu pasujący do koloru tła --body-background-color, rozjaśniony bądź przyciemniony o 20% (zależnie od motywu), jako wartość heksadecymalna
--theme-border-color	Pasujący kolor krawędzi oparty na --theme-page-background-color, jako wartość heksadecymalna
--theme-border-color--rgb	Pasujący kolor krawędzi oparty na --theme-page-background-color, jako wartości RGB
--theme-link-color	Kolor linków pobrany z kreatora motywu, jako wartość heksadecymalna
--theme-link-color--hover	Kolor linków pobrany z kreatora motywu, rozjaśniony bądź przyciemniony o 20% (zależnie od motywu), jako wartość heksadecymalna
--theme-link-color--rgb	Kolor linków pobrany z kreatora motywu, jako wartości RGB
--theme-link-dynamic-color-1	kolor dynamic-1 dla linków. Zobacz sekcję "Dynamiczne kolory" po więcej informacji.
--theme-link-dynamic-color-1--rgb	wartości RGB koloru dynamic-1 dla linków. Zobacz sekcję "Dynamiczne kolory" po więcej informacji.
--theme-link-dynamic-color-2	kolor dynamic-2 dla linków. Zobacz sekcję "Dynamiczne kolory" po więcej informacji.
--theme-link-dynamic-color-2--rgb	wartości RGB koloru dynamic-2 dla linków. Zobacz sekcję "Dynamiczne kolory" po więcej informacji.
--theme-link-label-color	Kolor tekstu pasujący do --theme-link-color background, jako wartość heksadecymalna
--theme-message-color	Kolor powiadomienia (niebieskawy), dostosowany kontrastowo do koloru tła strony, jako wartość heksadecymalna
--theme-message-label	Kolor tekstu pasujący do --theme-message-color background, jako wartość heksadecymalna
--theme-page-accent-mix-color	Mieszanka koloru tła strony oraz koloru odcieni w proporcji 50:50
--theme-page-background-color	Kolor tła artykułu z kreatora motywu, jako wartość heksadecymalna
--theme-page-background-color--rgb	Kolor tła artykułu z kreatora motywu, jako wartości RGB
--theme-page-background-color--secondary	Drugorzędny kolor oparty na --theme-page-background-color, zmieszany nieco z białym lub czarnym kolorem (zależnie od motywu), jako wartość heksadecymalna
--theme-page-dynamic-color-1	Kolor dynamic-1 dla koloru tła artykułu. Zobacz sekcję "Dynamiczne kolory" po więcej informacji.
--theme-page-dynamic-color-1--rgb	Wartości rgb dla koloru dynamic-1 dla koloru tła artykułu. Zobacz sekcję "Dynamiczne kolory" po więcej informacji.
--theme-page-dynamic-color-2	Kolor dynamic-2 dla koloru tła artykułu. Zobacz sekcję "Dynamiczne kolory" po więcej informacji.
--theme-page-dynamic-color-2--rgb	Wartości rgb dla koloru dynamic-2 dla koloru tła artykułu. Zobacz sekcję "Dynamiczne kolory" po więcej informacji.
--theme-page-text-color	Kolor tekstu artykułu. Alias dla --theme-page-dynamic-color-2.
--theme-page-text-color--hover	Kolor tekstu po najechaniu dla artykułu
--theme-page-text-color--rgb	Wartości RGB dla koloru tekstu artykułu
--theme-page-text-mix-color	Mieszanka kolorów tła artykułu oraz koloru dynamic-2 w stosunku 50:50
--theme-sticky-nav-background-color	Kolor nawigacji wiki, ustawiany w kreatorze motywu
--theme-sticky-nav-dynamic-color-1	Kolor dynamic-1 dla nawigacji wiki. Zobacz sekcję "Dynamiczne kolory" po więcej informacji.
--theme-sticky-nav-dynamic-color-1--rgb	Wartości RGB kolor dynamic-1 dla nawigacji wiki. Zobacz sekcję "Dynamiczne kolory" po więcej informacji.
--theme-sticky-nav-dynamic-color-2	Kolor dynamic-2 dla nawigacji wiki. Zobacz sekcję "Dynamiczne kolory" po więcej informacji.
--theme-sticky-nav-dynamic-color-2--rgb	Wartości RGB kolor dynamic-2 dla nawigacji wiki. Zobacz sekcję "Dynamiczne kolory" po więcej informacji.
--theme-sticky-nav-text-color	Kolor tekstu dla nawigacji. Alias dla --theme-sticky-nav-dynamic-color-1
--theme-sticky-nav-text-color--hover	Kolor tekstu dla nawigacji po najechaniu
--theme-success-color	Kolor powodzenia (zielonkawy), dostosowany kontrastowo do koloru tła strony, jako wartość heksadecymalna
--theme-success-color--rgb	Kolor powodzenia (zielonkawy), dostosowany kontrastowo do koloru tła strony, jako wartości RGB
--theme-success-label	Kolor tekstu dopasowany do --theme-success-color, jako wartość heksadecymalna
--theme-warning-color	Kolor ostrzeżenia (żółtawy), dostosowany kontrastowo do koloru tła strony, jako wartość heksadecymalna
--theme-warning-label	Kolor tekstu dopasowany do --theme-warning-color, jako wartość heksadecymalna

Dynamiczne kolory

Dynamiczne kolory ustanawiane są na podstawie ich tła. Są wyliczane, aby osiągnąć jak najlepszy kontrast.

• dynamic-color-1 to czarny (logo Fandomu - #0E191A) dla jasnych teł lub biały (#FFFFFF) dla ciemnych teł.
• dynamic-color-2 to ciemnoszary (#3A3A3A) dla jasnych teł lub jasnoszary (#E6E6E6) dla ciemnych teł.

Klasy dla motywów

Możesz doprecyzować swoje modyfikacje na wiki dla poszczególnych motywów na wiki za pomocą klas:

• .theme-fandomdesktop-light dla jasnego motywu,
• .theme-fandomdesktop-dark dla ciemnego motywu.