Mercury i tabele

Tabele mają za zadanie ułatwić umieszczenie danych w prosty i czytelny sposób, często wraz z możliwością ich sortowania. To jednak na FANDOMIE dość kontrowersyjny temat jeśli w grę wchodzą urządzenia mobilne. Dlaczego? Wiele użytkowników, czy nawet tutejsza strona pomocy zaznacza, że można ich używać do tworzenia układu strony. Możemy znaleźć więcej tabel użytych do pozycjonowania, niż faktycznego przedstawiania informacji. Na urządzeniach mobilnych gdzie ekran jest dużo mniejszy, taki nieresponsywny układ nigdy nie wyświetli się dobrze, gdyż jest on dostosowany do innego ekranu. Przez to wiele osób porzuca kompatybilność z Mercurym dla ich wygody, pomimo że to oni używają dostarczonych im narzędzi w niewłaściwy sposób, ale nie o tym ten blog.

Chcę tutaj przedstawić jak tabele są interpretowane przez mobilną skórkę i jak zadbać o to by właściwie wyświetlały się na urządzeniach mobilnych. Przed przeczytaniem polecam zobaczyć blog "W obronie Mercury'ego", który opisuje dlaczego warto popracować nad dostępnością zawartości naszych wiki.

Tabela tabeli nie równa

Zwykła tabela na polskiej NFS Wiki

Tabela z colspanem na Arrowwersum

Wielokrotnie zagnieżdżone tabele na angielskiej NFS Wiki

Tabela na Mercurym może się wyświetlać na trzy różne sposoby:

• "przenośna" tabela - zwykła tabela używana do przedstawiania danych przystosowana do urządzeń mobilnych
• tabela z colspanem/rowspanem - tabela, która w niektórych miejscach łączy komórki, zamiast tła posiada krawędzie, które pozwalają zobaczyć gdzie takie połączenia występują
• zagnieżdżone tabele - tabela w tabeli, nie posiada żadnych krawędzi - najczęściej stosowane do pozycjonowania elementów

Infoboks nie musi wyglądać jak infoboks

Zacznijmy od końca: tak jak wcześniej wspomniałem zagnieżdżone tabele nie powinny być używane do tworzenia układów. Zamiast tego możesz np. zaprojektować specjalny infoboks, który będzie poprawnie wyświetlał ładnie dane na Mercurym i specjalnie go ostylować za pomocą np. grida by wyglądał tak jak tabelkowy poprzednik. Jeśli to nie możliwe, możesz oznaczyć tabelę jako ukrytą na Mercurym za pomocą typu szablonu, bądź okalając go divem z klasą hidden, która automatycznie ukrywa daną zawartość na Mercurym. Jednak żadna z tych opcji nie działa na ten moment w aplikacjach społeczności (np. Game Guides).

Tabela z colspanem i data-portable="true"

Następny typ: colspan/rowspan jest często używany do łączenia kolumn w jedną, czy odseparowanie części tabeli od drugiej. W pierwszym wypadku możemy rozbić je na dwie osobne, bądź złączyć zawartość w komórkach i oddzielić je np. niełamiącymi spacjami. W drugim wypadku tak jak na podanym zdjęciu możemy się pokusić o ustawienie parametru data-portable="true" w tabeli, przez co zostanie zastosowany normalny wygląd tabel. Nie rekomenduję używania tego w każdej sytuacji, ponieważ mogą pokazać się związane z tym błędy i jeżeli na taki krok się decydujesz polecam sprawdzić, czy na pewno wszystko wyświetla się poprawnie i czytelnie.

Dla zaawansowanych

Jeżeli nie interesuje Cię dokładne działanie tabel na Mercurym przejdź do podsumowania.

Tabele przez Mercurego są przed wyświetleniem sprawdzane, czy nie zawierają one zagnieżdżonych tabel i czy nie zawierają colspanów/rowspanów, dzięki czemu do tabel przypisywany jest odpowiedni wrapper (div z odpowiednią klasą) i właściwość data-portable, które zmieniają sposób jej wyświetlania. Te, które zawierają w nazwach przypisanych klas cząstkę "infobox", są przetwarzane inaczej.

Zwykłe tabele dostają specjalne przenośne style z tłem i nie zawierają żadnych krawędzi pomiędzy poszczególnymi komórkami. Jest ona otoczona divem z klasami: article-table-wrapper i portable-table-wrappper, a ona sama otrzymuje parametr data-portable="true".

Jeżeli tabela zawiera colspan/rowspan do tabeli nie zostanie dodany parametr data-portable, a okalał ją będzie article-table-wrapper. Spowoduje to, że tabela nie będzie miała tła, ale pomiędzy komórkami w tabeli zostanie zastosowane obramowanie (1px solid #F2F6FA). Możemy również na niej zastosować style z "przenośnych" tabel poprzez manualne ustawienie atrybutu data-portable.

W wypadku zagnieżdżenia Mercury nie stosuje żadnych krawędzi. Wartość data-portable w takich tabelach jest ustawiona na false i nie można jej manualnie zmienić, a główna tabela jest dodatkowo otoczona divem z klasami: article-table-wrapper i portable-table-wrappper.

Kod odpowiedzialny za tabele na Mercurym

Przetwarzanie tabeli

• app/includes/wikia/parser/templatetypes/handlers/DataTables.class.php

Tworzenie wrappera

• mobile-wiki/app/components/article-content.js

handleTables() {
    this.$('table:not([class*=infobox], .dirbox, .pi-horizontal-group)').not('table table')
        .each((index, element) => {
            const $element = this.$(element),
                wrapper = `<div class="article-table-wrapper${element.getAttribute('data-portable') ? ' portable-table-wrappper' : ''}"/>`;
            $element.wrap(wrapper);
        });
}

Style tabel

• mobile-wiki/app/styles/module/article/_table.scss
• mobile-wiki/app/styles/module/article/_portable-table.scss

/* article-table-wrappper */
.article-table-wrapper {
    border: 1px solid #F2F6FA;
    overflow: auto;
    -webkit-overflow-scrolling: touch
}

.article-table-wrapper table {
    border-collapse: collapse;
    width: 100%
}

.article-table-wrapper table.infobox td,
.article-table-wrapper table.infobox th { width: 50% }

.article-table-wrapper td,
.article-table-wrapper th { padding: 10px }

.article-table-wrapper td figure,
.article-table-wrapper th figure {
    display: inline-block;
    margin: 0
}

.article-table-wrapper td figure figcaption,
.article-table-wrapper td:empty,
.article-table-wrapper th figure figcaption { display: none }

.article-table-wrapper td figure.has-caption .chevron,
.article-table-wrapper th figure.has-caption .chevron { margin-bottom: 0 }

.article-table-wrapper th {
    text-align: left;
    vertical-align: top
}

.article-table-wrapper td:not(:last-child),
.article-table-wrapper th:not(:last-child) { border-right: 1px solid #F2F6FA }
.article-table-wrapper tr:not(:last-of-type) { border-bottom: 1px solid #F2F6FA }


/* portable-table-wrappper */
.portable-table-wrappper {
    border: 0;
    margin: 0 -1.125rem 2.25rem
}

.portable-table-wrappper table {
    border: 0;
    border-left: 1.125rem solid #FFF;
    border-right: 1.125rem solid #FFF
}


.portable-table-wrappper td:not(:last-child),
.portable-table-wrappper th:not(:last-child) { border-right: 0 }
.portable-table-wrappper tr:not(:last-of-type) { border-bottom: 0 }


/* table[data-portable=true] */
table[data-portable=true] { font-size: .875rem }

table[data-portable=true] img { max-width: 168px }

table[data-portable=true] td,
table[data-portable=true] th {
    padding: 12px 1.125rem;
    max-width: 224px
}

table[data-portable=true] td:not(:first-child),
table[data-portable=true] th:not(:first-child) { padding-left: 0 }

table[data-portable=true] td:not(:first-child):not(:last-child),
table[data-portable=true] th:not(:first-child):not(:last-child) { padding-right: 56px }

table[data-portable=true] th {
    background-color: #E6EBF2;
    vertical-align: top
}

table[data-portable=true] tr:nth-child(odd) td { background-color: #F2F6FA }

Podsumowanie

Nawet pomimo poprawek zaproponowanych wcześniej, tabele ze względu na swoje rozmiary nie będą dopasowane do urządzeń mobilnych. Co prawda tabele można horyzontalnie przewijać, ale czasami powinniśmy też ograniczyć liczbę występujących kolumn. Starajmy się też unikać wpychania wszystkiego na siłę do tabel. Nie ma potrzeby zawierania jej w każdym artykule, gdy trzeba coś wymieniać.

Chciałbym tutaj również obalić twierdzenie:

Staraj się nie zmieniać niczego oprócz wyglądu tabeli za pomocą niestandardowych klas lub atrybutu style. Natomiast możesz bezpiecznie korzystać z standardowych klas, takich jak article-table.– Blog "W obronie Mercury'ego"

Dopóki nie używamy w tabeli predefiniowanych klas przez Mercurego nie będzie miało to żadnego wpływu na to jak tabela się będzie wyświetlała. Możesz spokojnie używać zarówno klas wikitable jak i article-table, czy dodać sortable, a nawet niestandardowych klas, dopóki nazwy nie będą się kłócić, co jest bardzo mało prawdopodobne. Tak samo jak w innych przypadkach tutaj też jest ignorowany atrybut style i jego zawartości na Mercurym nie uświadczymy. W sekcji "dla zaawansowanych" zawarłem co konkretnie wpływa na wygląd tabel.

Mam nadzieję, że choć trochę pomogłem z zachowaniem kompatybilności tabel na urządzeń mobilnych. Do następnego!

Pozostałe blogi

Typy szablonów

Mercury i tabele

TERAZ CZYTASZ

Ten blog został wyróżniony.

Kliknij tutaj, aby subskrybować wyróżnione blogi.

Zobacz więcej