Pomoc:Migracja na FandomDesktop

Poniższy poradnik migracji na FandomDesktop powstał jako szybka pomoc przy przenoszeniu starszych wiki korzystających ze skórek Oasis lub Hydra do aktualnej skórki FandomDesktop.

Nowe arkusze CSS i JS

FandomDesktop wprowadza nowe arkusze CSS i JS

• MediaWiki:Fandomdesktop.css
• MediaWiki:Fandomdesktop.js.

Kod znajdujący się do tej pory w arkuszach MediaWiki:Wikia.*, MediaWiki:Hydra.* oraz MediaWiki:HydraDark.* przestanie działać.

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.

Tło społeczności

Nowy kreator motywu umożliwia 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.

Przenośne infoboksy

Zmiany wizualne

• dodaliśmy 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.

  Uwaga: Przy niektórych modyfikacjach 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 */
}

Tabbery

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

Zobacz też

• Zmienne kolorów motywu wprowadzone wraz z FandomDesktop.