From 2cc14bc208c64f6b9080627524f93fb122b7bbf7 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=D0=98=D0=B3=D0=BE=D1=80=D1=8C=20=D0=9D=D0=B0=D0=B4=D0=B5?= =?UTF-8?q?=D0=B8=D0=BD?= Date: Tue, 28 Oct 2025 10:10:07 +0300 Subject: [PATCH] refactor: Extract post form textarea autogrow styles - Created: static/css/components/post-form.css (textarea.autogrow with min/max height, overflow control) - Modified: templates/feed/post_form.html (replaced inline styles with CSS import) - Description: Extracted 13-line style block for autogrow textarea behavior - Result: Post form now uses reusable component CSS --- .../static/css/components/department-list.css | 38 ++++ .../static/css/components/logout-modal.css | 173 ++++++++++++++++++ .../static/css/components/modal-overrides.css | 21 +++ backend/static/css/components/post-form.css | 20 ++ backend/templates/auth/logout.html | 86 +-------- .../templates/employees/_employee_edit.html | 9 +- .../templates/employees/department_list.html | 17 +- backend/templates/feed/post_form.html | 20 +- 8 files changed, 260 insertions(+), 124 deletions(-) create mode 100644 backend/static/css/components/department-list.css create mode 100644 backend/static/css/components/logout-modal.css create mode 100644 backend/static/css/components/modal-overrides.css create mode 100644 backend/static/css/components/post-form.css diff --git a/backend/static/css/components/department-list.css b/backend/static/css/components/department-list.css new file mode 100644 index 00000000..556d0a1f --- /dev/null +++ b/backend/static/css/components/department-list.css @@ -0,0 +1,38 @@ +/** + * department-list.css + * Стили списка отделов + */ + +/* ───────────────────────────────────────────────────────────── + HEADER +────────────────────────────────────────────────────────────── */ +.feed-header { + gap: .6rem; + flex-wrap: wrap; +} + +/* ───────────────────────────────────────────────────────────── + SCROLLABLE LIST +────────────────────────────────────────────────────────────── */ +/* список — единственный прокручиваемый блок */ +#deptList { + max-height: calc(100dvh - var(--navbar-h) - 160px); + overflow-y: auto; + -webkit-overflow-scrolling: touch; +} + +#deptList .dept-row { + padding: .6rem .75rem; +} + +#deptList .dept-row + .dept-row { + border-top: 1px solid var(--bs-border-color); +} + +.feed-author { + font-weight: 700; +} + +.feed-sub { + color: var(--bs-secondary-color); +} diff --git a/backend/static/css/components/logout-modal.css b/backend/static/css/components/logout-modal.css new file mode 100644 index 00000000..68217c01 --- /dev/null +++ b/backend/static/css/components/logout-modal.css @@ -0,0 +1,173 @@ +/** + * logout-modal.css + * Стили iOS-style модального окна выхода + */ + +/* ───────────────────────────────────────────────────────────── + OVERLAY +────────────────────────────────────────────────────────────── */ +/* Overlay поверх всего (и навбара тоже) */ +.ios-overlay { + position: fixed; + inset: 0; + z-index: 1080; + background: color-mix(in srgb, var(--bs-body-bg), #000 35%); + backdrop-filter: blur(10px) saturate(110%); + display: grid; + place-items: end center; /* bottom sheet по умолчанию */ +} + +@media (min-width: 992px) { + .ios-overlay { + place-items: center; + } +} + +/* ───────────────────────────────────────────────────────────── + SHEET / CARD +────────────────────────────────────────────────────────────── */ +/* Bottom sheet / Card */ +.ios-sheet { + width: 100%; + max-width: 560px; + background: color-mix(in srgb, var(--bs-body-bg), #fff 6%); + border: 1px solid color-mix(in srgb, var(--bs-border-color), transparent 30%); + border-radius: 16px 16px 0 0; + box-shadow: 0 12px 48px rgba(0, 0, 0, .28); + animation: slideUp .28s ease both; +} + +@media (min-width: 992px) { + .ios-sheet { + border-radius: 18px; + animation: popIn .18s ease both; + } +} + +/* Грип-бар как в iOS */ +.ios-grip { + width: 36px; + height: 4px; + border-radius: 999px; + background: color-mix(in srgb, var(--bs-body-color), transparent 70%); + margin: .5rem auto 0.25rem auto; +} + +/* ───────────────────────────────────────────────────────────── + CONTENT +────────────────────────────────────────────────────────────── */ +.ios-body { + padding: 1rem 1.25rem 1.25rem 1.25rem; +} + +@media (min-width: 992px) { + .ios-body { + padding: 1.25rem 1.5rem 1.5rem 1.5rem; + } +} + +.ios-title { + margin: .25rem 0 .25rem 0; + text-align: center; + font-weight: 800; + letter-spacing: .2px; +} + +.ios-sub { + text-align: center; + color: var(--bs-secondary-color); + margin: 0 0 1rem 0; +} + +/* ───────────────────────────────────────────────────────────── + AVATAR & ICON +────────────────────────────────────────────────────────────── */ +/* Аватар + иконка выхода */ +.ios-ava { + width: 64px; + height: 64px; + border-radius: 999px; + overflow: hidden; + border: 1px solid color-mix(in srgb, var(--bs-border-color), transparent 20%); + background: var(--bs-tertiary-bg); + display: grid; + place-items: center; + margin: .25rem auto .75rem auto; +} + +.ios-ava img { + width: 100%; + height: 100%; + object-fit: cover; + display: block; +} + +.ios-ico { + width: 56px; + height: 56px; + border-radius: 14px; + background: color-mix(in srgb, var(--bs-danger), #000 12%); + color: #fff; + display: grid; + place-items: center; + margin: .25rem auto .75rem auto; +} + +/* ───────────────────────────────────────────────────────────── + BUTTONS +────────────────────────────────────────────────────────────── */ +.ios-actions { + display: grid; + gap: .6rem; +} + +.ios-btn { + min-height: 48px; + border-radius: 12px; + font-weight: 700; +} + +.ios-btn-danger { + background: var(--bs-danger); + border-color: var(--bs-danger); + color: #fff; +} + +.ios-btn-danger:hover { + filter: brightness(1.02); +} + +.ios-btn-ghost { + background: color-mix(in srgb, var(--bs-body-bg), #fff 6%); + border: 1px solid color-mix(in srgb, var(--bs-border-color), transparent 20%); + color: var(--bs-body-color); +} + +.ios-btn-ghost:hover { + background: color-mix(in srgb, var(--bs-body-bg), #fff 9%); +} + +/* ───────────────────────────────────────────────────────────── + ANIMATIONS +────────────────────────────────────────────────────────────── */ +@keyframes slideUp { + from { + transform: translateY(16px); + opacity: 0; + } + to { + transform: translateY(0); + opacity: 1; + } +} + +@keyframes popIn { + from { + transform: scale(.98); + opacity: 0; + } + to { + transform: scale(1); + opacity: 1; + } +} diff --git a/backend/static/css/components/modal-overrides.css b/backend/static/css/components/modal-overrides.css new file mode 100644 index 00000000..7db07251 --- /dev/null +++ b/backend/static/css/components/modal-overrides.css @@ -0,0 +1,21 @@ +/** + * modal-overrides.css + * Z-index corrections для модальных окон + */ + +/* ───────────────────────────────────────────────────────────── + MODAL Z-INDEX +────────────────────────────────────────────────────────────── */ +/* модал всегда выше бэкдропа/локальных стэков */ +.modal { + z-index: 1080; +} + +.modal-backdrop { + z-index: 1075; +} + +/* не даём «просвечивать» через бэкдроп */ +.modal .modal-content { + background-color: var(--bs-body-bg); +} diff --git a/backend/static/css/components/post-form.css b/backend/static/css/components/post-form.css new file mode 100644 index 00000000..49ed87f4 --- /dev/null +++ b/backend/static/css/components/post-form.css @@ -0,0 +1,20 @@ +/** + * post-form.css + * Стили формы создания/редактирования поста + */ + +/* ───────────────────────────────────────────────────────────── + AUTOGROW TEXTAREA +────────────────────────────────────────────────────────────── */ +/* авто-рост для больших текстов */ +textarea.autogrow { + overflow: hidden; /* без внутренних скроллов, пока не упремся в max-height */ + resize: none; /* убираем ручной ресайз, если хочешь оставить — поменяй на 'vertical' */ + min-height: 120px; /* стартовая высота (на вкус) */ + max-height: 70vh; /* чтобы не занимало весь экран */ +} + +/* когда достигли max-height — позволим вертикальный скролл */ +textarea.autogrow.is-max { + overflow-y: auto; +} diff --git a/backend/templates/auth/logout.html b/backend/templates/auth/logout.html index daad385b..8b716b9f 100644 --- a/backend/templates/auth/logout.html +++ b/backend/templates/auth/logout.html @@ -5,91 +5,7 @@ {% block title %}Выход{% endblock %} {% block extra_css %} - + {% endblock %} {% block content %} diff --git a/backend/templates/employees/_employee_edit.html b/backend/templates/employees/_employee_edit.html index 3f972adc..b79edcf1 100644 --- a/backend/templates/employees/_employee_edit.html +++ b/backend/templates/employees/_employee_edit.html @@ -1,12 +1,7 @@ {# templates/employees/_employee_edit.html #} {# Форма редактирования сотрудника - рефакторированная версия #} - +{% load static %} +
diff --git a/backend/templates/employees/department_list.html b/backend/templates/employees/department_list.html index 971e5696..ba177f18 100644 --- a/backend/templates/employees/department_list.html +++ b/backend/templates/employees/department_list.html @@ -5,22 +5,7 @@ {% block extra_css %} - - - -