/* Правим основния контейнер вертикален (колона) */ #jazzy-actions { display: flex !important; flex-direction: column !important; width: 100% !important; gap: 10px !important; /* Разстояние между редовете */ } /* Правим и вътрешния div на главните бутони вертикален */ #jazzy-actions > div:first-child { display: flex !important; flex-direction: column !important; width: 100% !important; gap: 10px !important; margin: 0 !important; } /* Форсираме Bootstrap контейнерите да заемат 100% широчина */ #jazzy-actions .form-group, #jazzy-actions .object-tools { width: 100% !important; margin: 0 !important; display: block !important; } /* Караме самите бутони и линкове вътре да изпълнят целия ред */ #jazzy-actions .btn, #jazzy-actions input[type="submit"], #jazzy-actions .object-tools a { display: block !important; width: 100% !important; text-align: center !important; /* Центрира текста в бутона */ box-sizing: border-box !important; } /* ==================================================== ТУК НАГЛАСЯШ ПОДРЕДБАТА ОТГОРЕ НАДОЛУ (1 е най-отгоре): ==================================================== */ /* "Запиши" */ #jazzy-actions input[name="_save"] { order: 1 !important; } #jazzy-actions input[name="_saveasnewcopy"] { order: 2 !important; } /* "Запиши и продължи с редакцията" */ #jazzy-actions input[name="_continue"] { order: 3 !important; } /* "Запиши и добави нов" */ #jazzy-actions input[name="_addanother"] { order: 4 !important; } /* "История" */ #jazzy-actions .object-tools { order: 5 !important; } /* "Изтрий" */ #jazzy-actions .form-group:has(a[href*="/delete/"]) { order: 6 !important; } /* Същото правило, но за линка директно (в submit_line.html на tasks/task бутонът "Изтрий" не е обвит в .form-group, затова селекторът по-горе не съвпада и бутонът пада на order: 0 — отпред). */ #jazzy-actions a[href*="/delete/"] { order: 6 !important; } /* ==================================================== Бутоните ("Запази", "Запази и продължи редакция" и пр.) винаги горе вдясно, до табовете на формата — навсякъде по системата. jazzmin/templates/admin/change_form.html слага табовете в .col-12.col-lg-9 и бутоните в .col-12.col-lg-3 един до друг в един .row (9+3=12, точно запълват първия ред). Проблемът е, че някои change_form темплейти (entrance, apartment, task) добавят допълнителни кутии МЕЖДУ табовете и бутоните в DOM-а (виж after_field_sets в съответните change_form.html), а Bootstrap-овият ред пренася на нов ред по реда на елементите — затова доп. кутия бута бутоните надолу/настрани. Тук пренареждаме визуално (без да пипаме DOM-а): табовете - ред 1, бутоните - ред 2 (веднага до табовете, защото 9+3=12 не оставя място за нищо друго на първия ред), а всяка доп. кутия с клас .after-actions-box пада на ред 3, под всичко. Темплейтите, които добавят такива кутии, трябва да им слагат този клас. */ #content-main .row > .col-12.col-lg-9:not(.after-actions-box) { order: 1 !important; } #content-main .row > .col-12.col-lg-3 { order: 2 !important; } #content-main .row > .after-actions-box { order: 3 !important; } /* Филтърът "Вход" (Апартаменти и Задачи, data-name="entrance__id__exact") се фиксира на 323px на всички размери екран (виж media query по-долу, където изрично е изваден от reset-а), за да е широк колкото името на входа дори когато не е избрана стойност. */ .form-group:has(select[data-name="entrance__id__exact"]) .select2-container { width: 450px !important; min-width: 450px !important; max-width: 450px !important; } .form-group:has(select[data-name="entrance__id__exact"]) { width: 450px !important; min-width: 450px !important; } /* Тъй като селектът е вътре в .form-group, разширяваме самия контейнер */ .form-group:has(select[data-name="apartment__entrance"]) .select2-container { min-width: 450px !important; width: 100% !important; /* контролира се от родителя */ } .form-group:has(select[data-name="apartment__entrance"]) { min-width: 480px !important; /* отваря място в самата секция за филтри */ } .form-group:has(select[data-name="task_type"]) .select2-container { min-width: 400px !important; width: 100% !important; /* контролира се от родителя */ } .form-group:has(select[data-name="task_type"]) { min-width: 400px !important; /* отваря място в самата секция за филтри */ } /* На по-малки монитори/лаптоци (< 1400px) филтър-колоната на Jazzmin (обикновено col-md-3, ~250-300px) е много по-тясна от горните min-width стойности (400-450px), направени за голям десктоп монитор. Без този override селектите разпъват филтър-колоната извън наличната ширина и чупят целия layout (хоризонтално преливане на страницата). Тук връщаме min-width на 0, за да могат селектите да се свият до ширината на реалния си родител (width: 100% по-горе продължава да важи и ги прави да заемат наличното място). */ @media (max-width: 1919.98px) { .form-group:has(select[data-name="apartment__entrance"]) .select2-container, .form-group:has(select[data-name="apartment__entrance"]), .form-group:has(select[data-name="task_type"]) .select2-container, .form-group:has(select[data-name="task_type"]) { min-width: 0 !important; } } /* Филтърът "Вход" в "Изпратени имейли" (emails.EmailLogAdmin) ползва data-name="entrance" (не "entrance__id__exact" както в Апартаменти/Задачи — виж emails/admin.py EmailLogEntranceListFilter.parameter_name), затова се нуждае от собствено правило. Скопирано е до .model-emaillog, защото "entrance"/"apartment" не са уникални data-name-и в системата (напр. entrances/admin.py, nomenclatures/admin.py, tasks/admin.py също имат филтър с parameter_name="apartment") — без този скоуп правилото би разширило и несвързани филтри на други страници. */ .model-emaillog .form-group:has(select[data-name="entrance"]) .select2-container { width: 450px !important; min-width: 450px !important; max-width: 450px !important; } .model-emaillog .form-group:has(select[data-name="entrance"]) { width: 450px !important; min-width: 450px !important; } .model-emaillog .form-group:has(select[data-name="apartment"]) .select2-container { width: 220px !important; min-width: 220px !important; max-width: 220px !important; } .model-emaillog .form-group:has(select[data-name="apartment"]) { width: 220px !important; min-width: 220px !important; } @media (max-width: 1919.98px) { .model-emaillog .form-group:has(select[data-name="entrance"]) .select2-container, .model-emaillog .form-group:has(select[data-name="entrance"]), .model-emaillog .form-group:has(select[data-name="apartment"]) .select2-container, .model-emaillog .form-group:has(select[data-name="apartment"]) { min-width: 0 !important; } } /* БЕЗ рамка с вътрешен скрол — скролва самата страница вертикално. overflow трябва да е visible и по двете оси, иначе контейнерът става скрол-кутия и sticky хедърът се лепи за нея вместо за прозореца. Хоризонтален скрол не е нужен — текстът в клетките се пренася (виж по-долу). Изключение: под 1400px (виж media query по-долу при #result_list thead th) — при списъци с много колони (напр. Задачи, 15 колони за админ) пренасянето само по себе си смачква всяка колона до нечетливост на по-малък лаптоп екран, затова там нарочно връщаме хоризонтален скрол и жертваме sticky хедъра (виж обяснението там защо не могат да съжителстват). */ .card-body.table-responsive { overflow: visible !important; max-height: none !important; } /* Колоните се събират в наличната ширина чрез пренасяне на текста на нов ред, а дългите думи (имейли) се чупят, за да не разпъват таблицата. ВАЖНО: тук съзнателно НЕ ползваме `word-break: break-word` — браузърът третира тази (legacy) стойност все едно overflow-wrap е "anywhere" и при изчисляване на минималната ширина на колоната, независимо какво пише в overflow-wrap. Това кара table-layout: auto да свива колоната твърде агресивно и обикновени думи (имена) се чупят буква по буква. Само overflow-wrap: break-word чупи дума единствено когато наистина не се побира, без да влияе на оразмеряването на колоната. */ #result_list { width: 100% !important; } #result_list td { white-space: normal !important; overflow-wrap: break-word; } /* Заглавията се пренасят само по думи, никога буква по буква. Така колоните пазят разумна минимална ширина и не се смачкват. */ #result_list thead th, #result_list thead th a { white-space: normal !important; word-break: normal !important; overflow-wrap: normal !important; hyphens: none !important; } #result_list thead th { position: sticky; top: 57px; /* лепи се под фиксирания navbar на Jazzmin (височина ~57px) */ z-index: 1020; /* По-висок z-index, за да минава НАД съдържанието на редовете (td) */ background-color: #ffffff !important; /* Задължително плътен цвят, за да не се вижда текст под хедъра */ box-shadow: inset 0 -2px 0 #dee2e6; /* Тънка Bootstrap линия отдолу, за да изглежда естествено */ } #result_list thead th a { display: inline-block; color: #495057; } /* Под 1400px (по-малки лаптоци, напр. 14" MacBook Pro) връщаме хоризонтален скрол за таблици с много колони (Задачи и др.) вместо да разчитаме само на пренасяне на текст — с 10+ колони пренасянето смачква всяка колона до нечетливост, вместо просто да не се вижда наведнъж всичко. sticky хедърът НЕ може да остане активен тук: щом .card-body.table-responsive стане скрол-контейнер (overflow-x: auto), той автоматично се превръща и в containing block за position: sticky на thead th (CSS спецификацията прави overflow-y auto веднага щом overflow-x не е visible) — thead-ът вече не се лепи за прозореца при вертикален скрол на страницата, а за самия table-responsive контейнер, което на практика изглежда счупено/неточно позиционирано. По-безопасно е да изключим sticky тук, отколкото да рискуваме този вече документиран проблем (виж коментара при .card-body.table-responsive по-горе). JS-ът, който сетва inline top (adjustTheadStickyOffset в templates/admin/tasks/task/change_list.html), продължава да тече без грешка — просто top спира да има ефект, щом position стане static. */ @media (max-width: 1919.98px) { .card-body.table-responsive { overflow-x: auto !important; overflow-y: visible !important; } #result_list thead th { position: static !important; box-shadow: none !important; } /* Стандартният Bootstrap padding (0.75rem = 12px от всяка страна, 24px общо на колона) и 15px шрифт са замислени за голям монитор. При 12-15 колони (Апартаменти, Задачи) това само по себе си добавя 300-400px никому ненужно празно място. Свиваме и двете тук — целта е таблицата реално да се събере в наличната ширина на типичен лапток екран (виж overflow-x: auto по-горе като fallback, само за краен случай — не като основен план). */ #result_list td, #result_list th { padding: 4px 6px !important; font-size: 0.75rem !important; } } .row input[type='checkbox'] { width:25px; height:25px; background:white; border-radius:5px; border:2px solid #555; } /* Премахва стрелките за Chrome, Safari, Edge и Opera */ input[type="number"]::-webkit-outer-spin-button, input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none !important; appearance: none !important; margin: 0 !important; display: none !important; /* Форсира Safari да ги скрие */ } /* Премахва стрелките за Firefox */ input[type=number] { -moz-appearance: textfield; } .d-sm-inline{ display:none !important; } /* Избор на година под admin календара (виж static/admin/js/admin/DateTimeShortcuts.js — локален override, който добавя този ред). Стандартният Django календар позволява смяна на годината само чрез стрелките за месец (12 клика за 1 година), затова тук слагаме директен