Style wydruku (@media print) dla front-endu i panelu administracyjnego - #801
Open
mpasternak wants to merge 3 commits into
Open
Style wydruku (@media print) dla front-endu i panelu administracyjnego#801mpasternak wants to merge 3 commits into
mpasternak wants to merge 3 commits into
Conversation
Przepisany `_print.scss`. Trzy problemy, każdy z inną przyczyną:
1. TŁO. Foundation robi `* { background: transparent !important }`, ale
selektor `*` przegrywa specyficznością z `html { background-color:
#e6e6e6 !important }` z `_layout.scss` (0,0,1 vs 0,0,0) i w ogóle nie
matchuje pseudo-elementów, więc gradient z `.gradient-background::before`
— na dodatek `position: fixed` — szedł na papier jako szara plama.
2. ROZMIARY. Cały projekt wymiarowany jest w `rem`, a przeglądarka nie
przelicza rem-ów na jednostki papierowe: `h1` Foundation (3rem) wychodził
~33 pt, a na stronie autora 24 pt. Teraz rem-base jest zakotwiczony w `pt`
(deterministyczny wydruk niezależny od domyślnej czcionki przeglądarki),
a tekst i nagłówki mają jawne rozmiary. `!important` na nagłówkach jest
konieczne — komponenty mają własne, bardziej specyficzne reguły w rem.
Usunięty też `div { font-size: 9pt }` z poprzedniej wersji: rozmiar
wpisany na KAŻDY div zabija dziedziczenie.
3. CHROME. Ukryte: sticky-nav, title-bar, okruszki, stopka, menu boczne,
baner cookies, baner serwera testowego, komunikaty flash oraz widgety
wstrzykiwane JS-em (UserWay, Freshworks), których nie da się oznaczyć
klasą w szablonie.
Poza tym:
- `.hide-on-print` NIGDY nie miała definicji w CSS (0 wystąpień w każdym
skompilowanym arkuszu). Polegały na niej cztery szablony BPP ORAZ
zewnętrzny `django-countdown`, więc definiujemy klasę zamiast przepisywać
szablony na `hide-for-print` — pakietu z venv i tak nie poprawimy.
- `@import "print"` przeniesiony z `common.scss` na koniec każdego
`app-*.scss`: `common` wchodzi PRZED `foundation-includes`, więc dotąd
nasz blok `@media print` stał w kaskadzie przed blokiem Foundation.
- `@page` z django-constance (WYDRUK_MARGINES_*) w `bare.html` przeniesione
ZA arkusze stylów. `@page` nie ma specyficzności ani `!important` —
decyduje wyłącznie kolejność, a Foundation emituje własne
`@page { margin: .5cm }`, które dotąd po cichu wygrywało. Ustawienia
marginesów uczelni nie miały żadnego efektu.
- Usunięty `div.grid-x { display: block }`: przy `display: block` komórki
tracą kontekst flex, ale ZACHOWUJĄ `max-width` z klas `medium-*`, więc
kafelki strony głównej drukowały się jako wąski słupek na kilka stron.
Zweryfikowane realnym wydrukiem (headless Chrome, A4, dump produkcyjny):
strona główna 7 -> 4 strony. Po wycięciu z obu buildów wszystkich bloków
`@media print` reszta CSS-u jest bajt w bajt identyczna, więc wygląd na
ekranie nie mógł się zmienić.
Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01YDWJPTz55i4uM2A9pFM4Qn
Nowy entrypoint `admin-print.scss` -> `bpp/css/admin-print.css`, wpięty
w Gruntfile (`sass:adminprint` + `concurrent:themes`) i linkowany
w `admin/base_site.html`.
DLACZEGO OSOBNY PLIK, a nie sekcja w admin-themes.scss: admin-style.css,
admin-menu.css i admin-themes.css są linkowane z `media="screen"`.
Reguły `@media print` dopisane do któregokolwiek z nich przeglądarka
pobierze, ale NIGDY nie zastosuje. Nowy arkusz idzie bez `media`,
a jego treść siedzi w `@media print`, więc na ekranie nie zmienia niczego.
Trzy pułapki Grappelliego, wszystkie zmierzone na prawdziwej instalacji:
1. `#grp-content { padding: 80px 20px 50vh }`. Na ekranie `50vh` rezerwuje
miejsce pod przyklejoną stopkę z przyciskami. Na wydruku 1vh to 1%
wysokości PUDEŁKA STRONY — pomiar w trybie print dał
`80px 20px 360px`, czyli pół pustej kartki doklejone do każdego wydruku.
2. `.grp-changelist-results { float: left }`. Wysoki float NIE dzieli się
między strony — przeglądarka przepycha go w całości na następną.
Pierwsza kartka zawierała sam tytuł i była poza tym pusta.
3. `#grp-header { position: fixed }` i `.grp-fixed-footer` — elementy fixed
lądują przy druku na pierwszej stronie NA treści.
Poza tym ukryte: nagłówek admina z pełnym menu modeli (drukował się jako
CAŁA CZARNA PIERWSZA STRONA), breadcrumbs, panel filtrów Grappelliego
i BPP, wyszukiwarka, paginacja, kolumna checkboxów akcji, przyciski
i teksty pomocy w formularzu. Tabele: powtarzany nagłówek na kolejnych
kartkach, ramki zamiast zebry, czarny tekst na białym.
Skala typografii ujednolicona z frontem (`_print.scss`).
Zweryfikowane realnym wydrukiem (headless Chrome, A4, dump produkcyjny):
lista zmian 15 -> 5 stron i 6,5 MB -> 190 KB, formularz 11 -> 10 stron.
Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01YDWJPTz55i4uM2A9pFM4Qn
Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01YDWJPTz55i4uM2A9pFM4Qn
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Po co
Wydruk stron BPP był w praktyce nieużywalny: szare tło, drukująca się
nawigacja i stopka, nagłówki wielkości plakatu, a wydruk z admina zaczynał
się całą czarną stroną z menu modeli. Ten PR porządkuje
@media printosobno dla serwisu publicznego i osobno dla admina.
Efekt (realny wydruk, headless Chrome, A4, dump produkcyjny)
h1Co się zmienia
Front-end — przepisany
src/bpp/static/scss/_print.scss: białe tło,ukryte chrome i widgety zewnętrzne, skala typografii sprowadzona do
rozmiarów dokumentu.
Admin — nowy
src/bpp/static/bpp/scss/admin-print.scss. Osobny plik,bo
admin-style.css,admin-menu.cssiadmin-themes.csssą linkowanez
media="screen"— reguły@media printdopisane do któregokolwiekz nich przeglądarka pobierze, ale nigdy nie zastosuje.
Błędy naprawione przy okazji
Nie były w pierwotnym zakresie, ale każdy sam w sobie psuł wydruk:
hide-on-printnigdy nie istniała w CSS — 0 wystąpień w każdymskompilowanym arkuszu. Polegały na niej cztery szablony BPP oraz
zewnętrzny pakiet
django-countdown. Dlatego klasa zostałazdefiniowana, a nie zamieniona w szablonach na
hide-for-print—pakietu z venv i tak nie poprawimy.
Marginesy strony z django-constance (
WYDRUK_MARGINES_*) byłyignorowane.
@pagenie ma specyficzności ani!important—rozstrzyga wyłącznie kolejność, a blok
<style>stał przedarkuszem, w którym Foundation emituje
@page { margin: .5cm }.Przeniesiony za arkusze.
#grp-content { padding-bottom: 50vh }w Grappellim. Pomiarw trybie print dał
80px 20px 360px— pół pustej kartki doklejonedo każdego wydruku z admina.
.grp-changelist-results { float: left }— wysoki float nie dzielisię między strony, więc szedł w całości na stronę drugą, zostawiając
pierwszą pustą.
@import "print"stał w kaskadzie PRZED blokiem@media printFoundation (bo
common.scsswchodzi przedfoundation-includes).Przeniesiony na koniec każdego
app-*.scss.Weryfikacja
i po zmianie wszystkich bloków
@media printreszta CSS-u jest bajtw bajt identyczna (230 886 B dla
app-green, 232 126 B dlaapp-blue).Ekran nie mógł się zmienić.
pytest -m "not playwright"— 9438 przeszło,0 błędów, 4 pominięte. (W pierwszym przebiegu jeden flake
test_strona_rekordu_naprawde_sie_cachuje— kolizja cache'a międzyworkerami xdist; przy powtórzeniu pełnej suity nie wystąpił, izolowanie
i przy
-n 4przechodzi.)strony autora, listy zmian i formularza w adminie.
npx grunt buildipre-commitprzechodzą.Czego nie zweryfikowano twardo
Marginesy
@pagepotwierdzone strukturalnie (blok stoi za arkuszami,Foundation faktycznie emituje konkurencyjne
@page), ale nie zmierzonew milimetrach na papierze — Playwright
page.pdf()narzuca własny rozmiarstrony, więc nie byłby to uczciwy dowód. Warto kliknąć podgląd wydruku
w Chrome z podkręconą wartością w constance.
🤖 Generated with Claude Code
https://claude.ai/code/session_01YDWJPTz55i4uM2A9pFM4Qn