Pomoc:Strona główna
Strona główna Enkolu[edytuj]
Niniejsza strona opisuje budowę, sposób działania oraz zasady edycji strony głównej Enkolu.
Strona główna została zbudowana z wykorzystaniem:
- szablonów MediaWiki,
- układu CSS Grid,
- klas zdefiniowanych w MediaWiki:Common.css.
Treść poszczególnych paneli nie jest wpisana bezpośrednio do kodu strony głównej. Każdy panel korzysta z osobnego szablonu, dzięki czemu jego zawartość można aktualizować niezależnie.
Ogólna budowa strony[edytuj]
Strona składa się z:
- górnego banera,
- dwóch równoległych kolumn,
- paneli umieszczonych w obu kolumnach.
Układ dwóch kolumn jest zachowywany również na urządzeniach mobilnych.
Za główny układ odpowiadają klasy CSS:
.enkol-main-grid .enkol-main-column
Klasa .enkol-main-grid tworzy dwie równe kolumny:
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
Nie należy dodawać reguły mobilnej zmieniającej układ strony na jedną kolumnę.
Kod strony głównej[edytuj]
Aktualny schemat strony głównej:
{{Banner-góra}}
<div class="enkol-main-grid">
<div class="enkol-main-column">
{{panel głównej
|[[Biblioteka:Katalog artykułów prasowych|Katalog artykułów prasowych]]
|{{Katalog artykułów}}
|#cfc28d
}}
{{panel głównej
|Interesujący artykuł
|{{Artykuł na medal}}
|#cfc28d
}}
{{panel głównej
|Ciekawa grafika
|{{Grafika na medal}}
|#cfc28d
}}
{{panel głównej
|Czy nie wiesz, że...
|{{czy wiesz}}
|#cfc28d
}}
</div>
<div class="enkol-main-column">
{{panel głównej
|Archiwista poleca
|{{Archiwista poleca}}
|#cfc28d
}}
{{panel głównej
|Najnowsze w archiwum
|{{Dodane do archiwum}}
|#cfc28d
}}
{{panel głównej
|O Archiwum
|{{o archiwum główna}}
|#cfc28d
}}
</div>
</div>
<noinclude>
[[Kategoria:Strona główna]]
</noinclude>
__NOTOC__
__NOEDITSECTION__
Szablon „panel głównej”[edytuj]
Szablon:panel głównej jest wspólnym szablonem odpowiadającym za wygląd pojedynczego panelu.
Aktualna konstrukcja:
<includeonly><div class="main-panel">
<div class="main-panel-header" style="background-color:{{{3|#cfc28d}}};">{{{1|}}}</div>
<div class="main-panel-content">{{{2|}}}</div>
</div></includeonly>
Parametry:
| Parametr | Znaczenie | Uwagi |
|---|---|---|
| 1 | tytuł panelu | może zawierać wikilink |
| 2 | treść panelu | najczęściej transkluzja innego szablonu |
| 3 | kolor tła nagłówka | domyślnie #cfc28d
|
Przykład:
{{panel głównej
|Interesujący artykuł
|{{Artykuł na medal}}
|#cfc28d
}}
Za wygląd panelu odpowiadają klasy:
.main-panel .main-panel-header .main-panel-content
Górny baner[edytuj]
Za górną część strony odpowiada Szablon:Banner-góra.
Zawiera:
- nazwę Enkolu,
- krótki opis serwisu,
- liczbę stron,
- liczbę plików,
- zestaw najważniejszych linków nawigacyjnych.
Baner korzysta z klas:
.main-banner .main-banner-intro .main-banner-title .main-banner-stats .main-banner-links
Baner jest wyświetlany na pełnej szerokości strony, ponad obiema kolumnami.
Szablony zawartości paneli[edytuj]
Katalog artykułów prasowych[edytuj]
Szablon:
Wyświetlany w panelu:
Katalog artykułów prasowych
Zawiera krótki opis katalogu oraz automatycznie obliczaną liczbę skatalogowanych artykułów.
Liczba artykułów jest pobierana za pomocą zapytania Semantic MediaWiki.
Aktualizacja tekstu odbywa się bezpośrednio w tym szablonie.
Interesujący artykuł[edytuj]
Szablon:
Wyświetlany w panelu:
Interesujący artykuł
Zawiera:
- ilustrację,
- tytuł wybranego artykułu,
- krótki opis,
- odsyłacz do całego artykułu,
- link do archiwum,
- link do zgłaszania kandydatur.
Ilustracja korzysta z klasy:
.main-featured-image
Linki umieszczone w dolnej części panelu korzystają z:
.main-panel-actions
Zmiana wyróżnionego artykułu wymaga edycji wyłącznie tego szablonu.
Ciekawa grafika[edytuj]
Szablon:
Wyświetlany w panelu:
Ciekawa grafika
Zawiera:
- wyróżnioną grafikę,
- podpis,
- link do archiwum grafik,
- link do zgłaszania kandydatur.
Wykorzystywane klasy:
.main-featured-image .main-featured-caption .main-panel-actions
Grafiki są automatycznie skalowane tak, aby nie przekraczały szerokości panelu.
Czy nie wiesz, że...[edytuj]
Szablon:
Wyświetlany w panelu:
Czy nie wiesz, że...
Zawiera krótką listę ciekawostek oraz linki do archiwum i zgłaszania propozycji.
Lista korzysta z klasy:
.main-didyouknow
Linki w dolnej części korzystają z:
.main-panel-actions
Nowe wpisy należy dodawać zgodnie z instrukcją umieszczoną w samym szablonie.
Archiwista poleca[edytuj]
Szablon:
Wyświetlany w prawej kolumnie.
Zawiera:
- ilustrację wybranego materiału archiwalnego,
- krótki opis,
- link do właściwej strony Archiwum.
Grafika korzysta z klasy:
.main-featured-image
Zmiana polecanego materiału odbywa się wyłącznie poprzez edycję tego szablonu.
Najnowsze w archiwum[edytuj]
Szablon:
Wyświetlany w panelu:
Najnowsze w archiwum
Zawiera ręcznie aktualizowaną listę ostatnio dodanych lub szczególnie interesujących dokumentów.
Lista jest opakowana klasą:
.main-archive-list
Klasa ta ogranicza wcięcie listy i poprawia jej wygląd na wąskich ekranach.
O Archiwum[edytuj]
Szablon:
Wyświetlany w panelu:
O Archiwum
Zawiera krótki tekst informacyjny zachęcający użytkowników do przekazywania i publikowania materiałów archiwalnych.
Szablon nie wymaga specjalnych klas CSS.
Grafiki na stronie głównej[edytuj]
Grafiki znajdujące się w panelach powinny być umieszczane w:
<div class="main-featured-image"> ... </div>
W MediaWiki:Common.css obowiązuje:
.main-featured-image img {
max-width: 100%;
height: auto;
}
Dzięki temu można podać nominalną szerokość grafiki, np.:
[[Plik:Nazwa.jpg|400px]]
Na szerokim ekranie grafika może mieć 400 px, natomiast na telefonie zostanie automatycznie zmniejszona do szerokości panelu.
Nie należy używać:
<center>,align="center",- sztywnych szerokości kontenerów,
- tabel wyłącznie do pozycjonowania grafiki.
Linki akcji[edytuj]
Linki typu:
- Czytaj całość,
- Archiwum,
- Zgłoś kandydaturę
należy umieszczać w:
<div class="main-panel-actions"> ... </div>
Pozwala to zachować wspólne wyrównanie i sposób zawijania linków.
CSS strony głównej[edytuj]
Wszystkie style strony głównej znajdują się w:
w sekcji:
/* ========================================================= STRONA GŁÓWNA ENKOLU ========================================================= */
Podstawowe klasy:
| Klasa | Zastosowanie |
|---|---|
.enkol-main-grid
|
główny układ dwóch kolumn |
.enkol-main-column
|
pojedyncza kolumna strony |
.main-panel
|
pojedynczy panel |
.main-panel-header
|
nagłówek panelu |
.main-panel-content
|
zawartość panelu |
.main-featured-image
|
ilustracja w panelu |
.main-featured-caption
|
podpis pod ilustracją |
.main-panel-actions
|
linki akcji |
.main-didyouknow
|
lista ciekawostek |
.main-archive-list
|
lista nowych materiałów Archiwum |
.main-banner
|
górny baner |
Zasady modyfikacji[edytuj]
Przy zmianach strony głównej należy zachować następujące zasady:
- Treści paneli powinny pozostać w osobnych szablonach.
- Na samej stronie głównej należy definiować przede wszystkim kolejność i rozmieszczenie paneli.
- Nie należy wracać do tabel jako mechanizmu tworzenia głównego układu strony.
- Nie należy stosować ujemnych marginesów ani elementów
floatdo pozycjonowania kolumn. - Nie należy dodawać sztywnych szerokości, które mogą powodować poziome przewijanie strony.
- Grafiki powinny pozostać responsywne.
- Po zmianie CSS należy sprawdzić stronę zarówno na komputerze, jak i na telefonie.
- Układ główny powinien pozostać dwukolumnowy również na telefonie.
Dodawanie nowego panelu[edytuj]
Aby dodać nowy panel, najlepiej:
- utworzyć osobny szablon z jego treścią,
- dodać wywołanie
w odpowiedniej kolumnie.
Przykład:
{{panel głównej
|Tytuł nowego panelu
|{{Nazwa nowego szablonu}}
|#cfc28d
}}
Nie należy wpisywać rozbudowanej treści bezpośrednio do kodu strony głównej.
Usuwanie lub przenoszenie panelu[edytuj]
Panel można przenieść między kolumnami poprzez przeniesienie całego wywołania:
{{panel głównej
...
}}
Nie wymaga to zmian w szablonie zawartości ani w CSS.
Kontrola po zmianach[edytuj]
Po większej zmianie należy sprawdzić:
- widok desktopowy,
- telefon w orientacji pionowej,
- telefon w orientacji poziomej,
- poprawne skalowanie grafik,
- zawijanie długich tytułów,
- brak poziomego przewijania,
- działanie wszystkich linków,
- poprawność transkluzji szablonów.
W przypadku zmian w MediaWiki:Common.css może być konieczne odświeżenie pamięci podręcznej przeglądarki lub ResourceLoadera.