/* =========================================================================== Narrow screens =========================================================================== Django admin ships its own responsive.css and it handles the ordinary pages well. What it can't know about is the parts this app added - the agenda toolbar, the patient page's panels, the odontogramma - and the chrome above them, which on a phone was eating about 180px before any content appeared. Loaded after brand.css and django's responsive.css, so these win. Two breakpoints, matching django's own so the layouts change together: max-width 1024px - small laptop / tablet landscape max-width 767px - phone =========================================================================== */ /* --- Large screens ------------------------------------------------------ Django admin is sized for a laptop and never grows: its type is 14px whether the window is 1280px or a 27" desktop at 2560px, so on a big monitor the whole interface reads small and thin, marooned in space. The fix is one line per step rather than a rewrite, because django's own base.css contains ZERO px font sizes - all 47 of them are rem, keyed off the root. So moving the root moves the entire interface together, type and the paddings measured in rem alike, in proportion. Every stylesheet this app adds is rem or em too (admin_overrides.css has two px values, both on badges that sit inside em-sized text). Steps rather than a fluid clamp(): a viewport-derived size keeps changing as you resize and never settles on a round number, and these are the three widths that actually matter - large laptop, 1080p desktop, and a 1440p/4K 27". */ @media (min-width: 1600px) { html { font-size: 17px; } } @media (min-width: 1920px) { html { font-size: 18px; } } @media (min-width: 2400px) { html { font-size: 19px; } } /* Two things django measures in px rather than rem, so they stay put while the type around them grows and end up looking pinched: the nav sidebar's width (275px) and the padding inside table cells (8px). Without the second one the rows stay thin lines of text in an ever-wider field - most of what makes a big screen feel sparse is row height, not type size. Both stepped by hand to match the root sizes above. */ @media (min-width: 1600px) { #nav-sidebar { flex-basis: 292px; } td, th { padding: 10px 9px; } } @media (min-width: 1920px) { #nav-sidebar { flex-basis: 310px; } td, th { padding: 11px 10px; } } @media (min-width: 2400px) { #nav-sidebar { flex-basis: 327px; } td, th { padding: 13px 11px; } } /* --- Header ------------------------------------------------------------- */ /* Moved to mobile-nav.css. The phone header is no longer django's layout with a few sizes changed - it is a menu button, the name, and the theme switch, with the greeting under them and the breadcrumb trail gone - so it lives with the drawer that replaced the trail. */ /* --- Changelists -------------------------------------------------------- */ /* The weekday in front of a date in the Agenda list ("Gio 30/07/2026"). First thing worth dropping when the column gets tight: the date is not optional, the day name is. */ @media (max-width: 1024px) { .dl-dow { display: none; } } /* --- The actions bar ("Azione: […] Vai 0 di 27 selezionati") ----------- */ /* Below 1024px django's own responsive.css replaces the bar's padding with "15px 0" - no horizontal padding at all - so "Azione:" and the selected counter end up one pixel off the card's edge. Everything else in the card is inset, so the bar reads as broken rather than as a style. (This file is linked from django's {% block responsive %} for exactly this reason: from extrahead it would load BEFORE django's responsive.css and lose the tie at identical specificity.) */ @media (max-width: 1024px) { #changelist .actions { /* django gives this "width: 100%", and it is not border-box - so the padding below is added OUTSIDE the 100% and the bar hangs past the right edge of its own card by exactly the padding. */ box-sizing: border-box; padding: 12px 16px; gap: 8px 12px; align-items: center; } /* Django's markup puts the select INSIDE the label ("Azione:" and the dropdown are one element), then gives the label the whole row and the select 100% of it - so the dropdown ran the full width of the card and pushed "Vai" onto a line of its own, and the counter onto a third. The label still takes the space that's going spare, but it is allowed to shrink (min-width: 0, which flex items do not do by default), so "Azione: [ ▾ ] Vai" settles on one row and the select gets whatever is left after the button. */ #changelist .actions label { /* Basis 0, not auto: on auto the label claims its full content width first, which already exceeds the row once "Vai" is accounted for, so the button wrapped to a second line and the counter to a third. From 0 it takes what is left after the button instead. */ flex: 1 1 0; min-width: 0; flex-wrap: nowrap; align-items: center; gap: 8px; } /* Capped so that on a tablet-width row, where there is space going spare, the dropdown stops at a sensible size instead of stretching to fill it - a 400px-wide control holding "---------" looks like a mistake. */ #changelist .actions select { flex: 1 1 auto; width: auto; min-width: 0; max-width: 20rem; } /* The gap above handles the spacing now; django's own margins on these would double it, and the counter's left margin would push it out of line with the label above it. */ #changelist .actions .button { margin: 0; } #changelist .actions span.all, #changelist .actions span.clear, #changelist .actions span.question, #changelist .actions span.action-counter { margin: 0; } } /* --- The search toolbar -------------------------------------------------- */ /* After a search django appends a count - "3 risultati (27 in tutto)" - as a sibling of the search box and the Cerca button, all three on one line. There is no room for it on a phone, so it wrapped onto two lines inside the row; the row is as tall as its tallest item, so the Cerca button stretched to two lines' height to match and came out looking swollen. The count is not part of the control, so it goes below it: the row is a wrapping flex line and the count claims the whole of the next one, landing between the search box and the Azione bar. */ @media (max-width: 1024px) { #toolbar form > div { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; row-gap: 10px; } /* Takes what is left after the label and the button, and is allowed to shrink below its content width (flex items are not, by default). */ #toolbar form #searchbar { flex: 1 1 0; min-width: 0; } #toolbar form input[type="submit"] { flex: 0 0 auto; /* django's own margin-left on this would double the gap above. */ margin: 0; } #toolbar form > div > .small.quiet { flex: 1 1 100%; margin: 0; /* Level with the search box above it rather than with the magnifier. */ padding-left: 2px; } } @media (max-width: 767px) { /* Results tables scroll sideways inside their card rather than pushing the page wider - django does this already, but the card added here needs to allow it through. */ #changelist .changelist-form-container { overflow-x: auto; } /* "0 di 27 selezionati", sitting under the Azione bar on every single list, before anything has been selected and whether or not anyone intends to select anything. On a phone that is a line of screen spent saying nothing. :has() rather than a script: :checked is a live pseudo-class, so the counter appears the moment the first box is ticked and goes again when the last one is cleared, with nothing to keep in sync. The bar's other three spans (Tutti i N selezionati / Seleziona tutti / Annulla la selezione) django already hides until they apply. */ #changelist-form:not(:has(.action-select:checked)) .action-counter { display: none; } #changelist #result_list { font-size: 0.78rem; } /* Row height. 8px top and bottom put the rows 34px apart, which on a phone reads as a wall of text - the eye has nothing to travel along. A few points more is enough to separate them. Rows whose text wraps to two lines were already taller and are untouched by this. */ #changelist #result_list th, #changelist #result_list td { padding: 12px 10px; } /* The PDF link, ranged under its own heading. Django pads a heading's cell AND the link inside it, so "RICEVUTA" begins 20px into its column while the value below begins at 10 - a 10px step that is invisible on a long value and obvious on a short one sitting hard against its left edge, which is exactly what "PDF" is. Only the one column is moved: the step is django's own, it is the same on every column, and straightening all of them turned out to squeeze the table and break short values across two lines. */ #changelist #result_list tbody td.field-pdf_link { padding-left: 20px; } /* Stampata, centred under its own heading. Same 10px step as above, made worse by what the value is: a 13px checkbox alone in a column as wide as the eight-letter word above it, so it read as belonging to the column to its left. Centring it needs 30px on the right rather than 10, because django reserves 20px at the end of a sortable heading for the sort arrow - the word centres in what is left after that, and the box has to centre in the same box to land under it. Only this column, and only here. Straightening every column at once is what made the table worse last time: it changed the widths and started breaking short values like "N° 242" across two lines. */ #changelist #result_list tbody td.field-printed { text-align: center; padding-right: 30px; } } /* --- Patient page -------------------------------------------------------- */ /* Deliberately not here. patient_detail.html carries an inline