Global Lua Modules/Mbox/pl

Mbox jest modułem do tworzenia okienek z komunikatami.

Funkcje[]

Szerokie możliwości dostosowywania z klasami, stylami wewnątrz linii i dostarczanymi selektorami CSS.
Opcjonalne funkcje takie jak obrazy, lewa krawędź, tekst po prawej stronie (np. na skróty) oraz możliwość schowania komunikatu.

Installation[]

Moduł[]

Najpierw należy zainstalować sam moduł. Nie musisz kopiować kodu. Po prostu stwórz moduł o nazwie Moduł:Mbox (lub dowolnej innej, pamiętaj tylko aby potem poprawić wywołania #invoke) i dodaj poniższy kod.

return require('Dev:Mbox')

CSS[]

Następnie dodaj poniższy CSS do swojego Common.css lub Wikia.css.

Mbox posiada dwa typy reguł CSS. Pierwszy typ to CSS dla struktury/funkcji i ten nie powinien być modyfikowany, w najgorszym wypadku jego zmiana może uszkodzić komunikaty. Drugi typ to wygląd Mboxów, który powinien zostać zmodyfikowany aby odpowiadał potrzebom Twojej społeczności. Zobacz sekcję #Style aby dowiedzieć się więcej o selektorach związanych z wyglądem.

Poniższy CSS reprezentuje bazę dla Mboxów i może zostać znaleziony na stronie MediaWiki:Global Lua Modules/Mbox.css.

.mbox {
    --type-important: rgba(200, 0, 0, 0.8);
    --type-moderate: rgba(233, 124, 47, 0.8);
    --type-minor: rgba(241, 197, 37, 0.8);
    display: flex;
    position: relative;
    background-color: rgba(255, 255, 255, 0.7);
    border: 1px solid #d6d6d6;
    border-left-width: 8px;
    border-left-color: #d6d6d6;
    border-radius: 3px;
    margin-bottom: 5px;
    min-height: 32px;
}

.mbox.mbox-type-important {
    border-left-color: var(--type-important);
}

.mbox.mbox-type-moderate {
    border-left-color: var(--type-moderate);
}

.mbox.mbox-type-minor {
    border-left-color: var(--type-minor);
}

.mbox__content {
    display: table;
    box-sizing: border-box;
    width: 100%;
    padding: 8px 15px;
}

.mbox__content__image {
    display: table-cell;
    width: 40px;
    height: 100%;
    text-align: center;
    vertical-align: middle;
    padding-right: 15px;
}

.mbox__content__wrapper {
    display: table-cell;
    vertical-align: middle;
}

.mbox__content__header {
    display: block;
    font-weight: bold;
}

.mbox__content__text {
    display: block;
}

.mbox__content__text__comment {
    font-size: small;
}

.mbox__content__aside {
    display: table-cell;
    width: 100px;
    vertical-align: middle;
    text-align: center;
    padding-left: 15px;
    border-left: 1px solid #d6d6d6;
}

.mbox__close {
    position: absolute;
    right: 0;
    top: 0;
    padding: 2px 7px;
    font-weight: bold;
    font-size: 16px;
    color: #bbb;
    cursor: pointer;
    transition: all .15s ease-in;
}

.mbox__close:hover {
    color: #777;
}

.mbox__close:after {
    content: '×';
}

.mw-collapsed + .mbox__close {
    transform: rotate(45deg);
    padding: 4px 7px 5px 2px;
}

/* Ensure text is readable in the FandomDesktop dark theme. */
.theme-fandomdesktop-dark .mbox {
    background-color: var(--theme-page-background-color--secondary);
    border-color: var(--theme-border-color);
}

Szablon[]

Ten szablonzostał zaprojektowany aby być używanym jak zwykły szablon. Aby tego dokonać po prostu utwórz szablon (np. Szablon:Komunikat) z następującą treścią:

{{#invoke:Mbox|main}}

Teraz utworzony przez Ciebie szablon będzie akceptował parametry opisane poniżej.

Można je także aplikać bezpośrednio do wywołania #invoke i będą działać jak wartości domyślne. Ich wartości zostaną nadpisane przez te same parametry podane do szablonu.

Parameters[]

Przykłady użycia tych parametrów znajdują się w sekcji #Przykłady.

Parametr	Opis	Wymagany?	Wartość domyślna
`class`	Dodatkowe klasy do podstawowego elementu `.mbox`.	Nie	—
`bordercolor`	Kolor najgrubszej, lewej krawędzi komunikatu.	Nie	Domyślny stylu
`type`	Typ mboxa zadeklarowany w zmiennych CSS. Dotyczy koloru najgrubszej, lewej krawędzi komunikatu.	Nie	—
`bgcolor`	Kolor tła komunikatu.	Nie	Domyślny stylu
`style`	Dodatkowe wewnątrzliniowe style dla podstawowego elementu `.mbox`.	Nie	—
`image`	Obraz dodawany z lewej strony treści komunikatu.	Nie	—
`imagewidth`	Szerokość obrazu (wysokość jest dopasowywana automatycznie).	Nie	`80px`
`imageadjust`	For center/left/right/thumb	Nie	—
`imagelink`	Link do którego kieruje obraz (może to być na przykład związana kategoria konserwacyjna). Jeśli nie podano, obrazu nie będzie można kliknąć.	Nie	—
`header`	Nagłówek (pogrubiony tekst na górze). Zazwyczaj używa się go aby bardzo krótko opisać treść komunikatu. Gdy mbox jest zamknięty wyświetla sie tulko nagłówek.	Nie	—
`text`	Tekst umieszczany pod nagłówkiem, zazwyczaj używany do wyjaśnienia treści komunikatu z dodatkowymi szczegółami. Gdy mbox jest zamknięty, tekst będzie ukryty.	Nie	—
`comment`	Mniejszy tekst umieszczony pod głównym tekstem, zazwyczaj zawiera dodatkowe linki lub kontekst komunikatu. Gdy mbox jest zamknięty, ten tekst będzie ukryty.	Nie	—
`aside`	Tekst umieszczony w małej przestrzeni z prawej strony komunikatu oddzielonej jasnoszarą przedziałką. Najczęściej wykorzystywany do ktrótkiego objaśnienia użytych skrótów (np. na stronach polityk wiki). Gdy mbox jest zamknięty, ten tekst będzie ukryty.	Nie	—
`id`	Domyślnie jeden przycisk zamykania zamknie wszystkie mboxy na stronie. Jednakże zmiana tego parametru może być wykorzystana aby nadać nazwę implementacji mbox (np. „Szablon:Zalążek” może mieć `\|id = zalazek`) i zmienić ten stan rzeczy.	Nie	—
`collapsed`	Domyślnie mbox nie będzie zwinięty i pełna jego treść będzie wyświetlona. Aby to zmienić możesz użyć tego szablonu (np. `\|collapsed=true` sprawi, że komunikat będzie domyślnie zwinięty).	Nie	—

Style[]

Niektóre społeczności mogą chcieć zmienić wygląd komunikatów. Najpopularniejsze opcje stylowania przedstawiono poniżej z użyciem CSS-u.

 .mbox {
    /* tło całego komunikatu */;
    background-color: ;

    /* kolor ramki wokół całego komunikatu */
    border-color: ;

    /* grubość ramki wokół całego komunikatu */
    border-width: ;

    /* domyślny kolor najgrubszej ramki z lewej strony; zwróć uwagę, że ta wartość może zostać zmieniona z poziomu szablonu przy użyciu parametru „color” */
    border-left-color: ;

    /* zaokrąglenie na krawędziach */;
    border-radius: ;

    /* rozmiar tekstu wewnątrz komunikatu */
    font-size: ;
}

.mbox__content {
    /* odstęp wewnątrz komunikatu */
    padding: ;
}

.mbox__content__image {
    /* minimalna szerokość obrazu w komunikacie (jeśli większa użyj parametru „imagewidth” w szablonie) */
    width: ;

    /* przestrzeń z lewej strony tekstu (tj. po prawej od obrazu) */
    padding-right: ;
}

.mbox__content__text__comment {
    /* rozmiar tekstu z parametru „comment” */
    font-size: ;
}

.mbox__content__aside {
    /* wszystkie modyfikacje przestrzeni z parametru „aside” mogą zostać dodane tutaj */

    /* maksymalna szerokość przestrzeni aside */
    width: ;
}

.mbox__close {
    /* wygląd symbolu zamykania */
}

.mbox__close:after {
    /* nadpisz tutaj zawartość własności „content” jeśli nie chcesz aby symbolem zamykania było x */
    content: "";
}

.mw-collapsed + .mbox__close {
   /* modyfikacje symbolu zamykania gdy komunikat jest zamknięty */
}

.mw-collapsed + .mbox__close:after {
   /* nadpisz tutaj zawartość własności „content” jeśli nie chcesz aby symbolem zamykania gdy komunikat jest zamknięty było x */
   content: "";
}

Uwagi techniczne

Moduł mbox używa konwencji BEM selektorów ze względu na czytelność i aby uczynić przyszłe rozszerzenia struktury HTML prostszymi.
Dodatkowe wewnątrzliniowe style do podstawowego elementu .mbox mogą zostać dodane w parametrze style w szablonie.

Przykłady[]

Różne parametry[]

Podstawowy komunikat[]

{{mbox
|header      = Tekst nagłówka
|text        = Normalny tekst
|bordercolor = red
|id          = test1
}}

Zwraca:

Tekst nagłówka

Normalny tekst

Używanie typów[]

Aby używać typów należy dodać zmienne oraz klasy pomocnicze CSS. Na przykład:

 :root {
    --type-important: rgba(200, 0, 0, 0.8);
    --type-moderate: rgba(233, 124, 47, 0.8);
    --type-minor: rgba(241, 197, 37, 0.8);
}

/* NB: The following helper classes are required after &lt;https://github.com/Wikia/app/commit/db84dac8d9bcaaf5d0bee993b11dc77c6792dc79&gt;. */

.mbox.mbox-type-important {
    border-left-color: var(--type-important);
}

.mbox.mbox-type-moderate {
    border-left-color: var(--type-moderate);
}

.mbox.mbox-type-minor {
    border-left-color: var(--type-minor);
}

Jeśli dodano:

{{mbox
|header = Tekst nagłówka
|type   = important
|text   = Normalny tekst
|id     = test2
}}

Zwraca:

Tekst nagłówka

Normalny tekst

Obraz[]

{{mbox
|header     = Tekst nagłówka
|text       = Normalny tekst
|image      = Wiki.png
|imagelink  = Global Lua Modules
|imagewidth = 50px
|id         = test3
}}

Zwraca:

Tekst nagłówka

Normalny tekst

Aside[]

{{mbox
|header = Tekst nagłówka
|type   = important
|text   = Normalny tekst
|aside  = Tekst aside
|id     = test4
}}

Zwraca:

Tekst nagłówka

Normalny tekst

Tekst aside

Wszystkiego po trochu[]

{{mbox
|header    = Tekst nagłówka
|text      = Normalny tekst
|comment   = Tekst komentarza
|image     = Wiki.png
|aside     = Tekst aside
|id        = test5
|collapsed = true
}}

Zwraca:

Tekst nagłówka

Normalny tekst

Tekst komentarza

Tekst aside

Mboxy ze zmienionymi stylami[]

Standardowy/domyślny styl[]

{{mbox
|header  = Tekst nagłówka
|text    = Normalny tekst
|comment = Tekst komentarza
|image   = Wiki.png
|aside   = Tekst aside
|id      = standard
}}

Zwraca:

Tekst nagłówka

Normalny tekst

Tekst komentarza

Tekst aside

Styl Wookieepedii[]

Odtwarza wygląd w:c:starwars:Template:Citation.

Pomóż mi, <username>, jesteś moją jedyną nadzieją

Ten artykuł lub sekcja wymaga dodania przypisów zgodnie z wytycznymi podawania źródeł na Wookieepedii.

Ten artykuł potrzebuje odpowiednich przypisów. Pomóż nam go ulepszyć podając prawidłowe materiały źródłowe. Po zakończeniu pracy usuń ten komunikat.

CSS

.mbox {
    background-color: #7bb0d8;
    border: none;
    border-radius: 10px;
}
 
.mbox__close {
    color: #0c8787;
    font-weight: normal;
    font-size: 13px;
}
 
.mbox__close:after {
    content: '[hide]';
}
 
.mw-collapsed + .mbox__close {
    transform: none;
    padding: 2px 7px;
}
 
.mw-collapsed + .mbox__close:after {
    content: '[show]';
}

Styl Final Fantasy Wiki[]

Odtwarza wygląd w:c:finalfantasy:Template:Rename.

Auron: Po zmianie nazwy wychodzimy.

Zgodnie z politykami wiki, ta strona ma nieodpowiednią nazwę. Administratorzy powinni ją przenieść i zaktualizować linki na stronach się do niej odnoszących.

CSS

.theme-fandomdesktop-light .mbox {
    border-top: 1px solid #afaa84;
    border-radius: 10px;
    background: linear-gradient(180deg,rgba(255,255,246,1) 0,rgba(247,219,185,1) 40px);
}

.theme-fandomdesktop-dark .mbox {
    border-top: 3px solid #1e9de3 !important;
    border: 0;
    background: linear-gradient(180deg,rgba(5,37,78,.5) 0,rgba(5,37,78,.5) 75%,rgba(5,37,78,0));
}

Uwagi techniczne i różności[]

W tym module nie istnieje parametr category. Aby dodać kategorię do strony używającej konkretnej implementacji Mboxa dodaj kod <includeonly>[[Kategoria:{{{category}}}]]</includeonly>. Jeśli chcesz aby dodanie kategorii było opcjonalne, dodaj <includeonly>{{#ifeq: {{{1|}}} | nocat | | [[Kategoria:{{{category}}}]] }}</includeonly>.

Global Lua Modules/Mbox/pl

Contents

Funkcje[]

Installation[]

Moduł[]

CSS[]

Szablon[]

Parameters[]

Style[]

Przykłady[]

Różne parametry[]

Podstawowy komunikat[]

Używanie typów[]

Obraz[]

Aside[]

Wszystkiego po trochu[]

Mboxy ze zmienionymi stylami[]

Standardowy/domyślny styl[]

Styl Wookieepedii[]

Styl Final Fantasy Wiki[]

Uwagi techniczne i różności[]

See also[]