Centrum Społeczności
Advertisement

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