From 1c20bafd05f69bd55091617859e195bd422649bd Mon Sep 17 00:00:00 2001 From: Maxim Dolgolyov Date: Fri, 12 Jun 2026 23:32:43 +0300 Subject: [PATCH] =?UTF-8?q?style(library):=20=D0=B0=D0=BA=D0=BA=D1=83?= =?UTF-8?q?=D1=80=D0=B0=D1=82=D0=BD=D0=B0=D1=8F=20=D0=BA=D0=B0=D1=80=D1=82?= =?UTF-8?q?=D0=BE=D1=87=D0=BA=D0=B0=20=D1=84=D0=B0=D0=B9=D0=BB=D0=B0=20?= =?UTF-8?q?=E2=80=94=20=D0=B4=D0=B5=D0=B9=D1=81=D1=82=D0=B2=D0=B8=D1=8F=20?= =?UTF-8?q?=D0=BE=D1=82=D0=B4=D0=B5=D0=BB=D1=8C=D0=BD=D1=8B=D0=BC=20=D1=80?= =?UTF-8?q?=D1=8F=D0=B4=D0=BE=D0=BC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Раньше метаданные и «Открыть»+3 иконки делили одну строку → на ширине грида дата переносилась криво, кнопки наезжали. Теперь подвал колонкой: метаданные строкой, действия — отдельным рядом (Открыть растягивается, иконки — компактные квадраты 34×34 с лёгким фоном). Без наложений и кривых переносов. Co-Authored-By: Claude Opus 4.8 --- frontend/library.html | 22 +++++++++++----------- 1 file changed, 11 insertions(+), 11 deletions(-) diff --git a/frontend/library.html b/frontend/library.html index 6693a90..34d4c0d 100644 --- a/frontend/library.html +++ b/frontend/library.html @@ -109,17 +109,17 @@ .tag-type { background: rgba(15,23,42,0.06); color: var(--text-3); } .tag-private{ background: rgba(241,91,181,0.1); color: var(--pink); } .tag-public { background: rgba(6,214,100,0.1); color: var(--green); } - .file-footer { display: flex; align-items: center; justify-content: space-between; margin-top: auto; } + /* Подвал карточки: метаданные строкой, действия — отдельным рядом (не теснятся) */ + .file-footer { display: flex; flex-direction: column; gap: 12px; margin-top: auto; } + .file-meta-text { min-width: 0; } .file-size { font-size: 0.75rem; color: var(--text-3); } - .file-actions { display: flex; gap: 6px; } - .btn-dl { padding: 6px 16px; border: none; border-radius: var(--r-pill); background: var(--grad-1); color: #fff; font-family: 'Manrope', sans-serif; font-size: 0.8rem; font-weight: 700; cursor: pointer; text-decoration: none; transition: opacity var(--tr); } + .file-actions { display: flex; gap: 6px; align-items: center; } + .btn-dl { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 5px; padding: 8px 14px; border: none; border-radius: var(--r-pill); background: var(--grad-1); color: #fff; font-family: 'Manrope', sans-serif; font-size: 0.8rem; font-weight: 700; cursor: pointer; text-decoration: none; transition: opacity var(--tr); white-space: nowrap; } .btn-dl:hover { opacity: 0.85; } - .btn-del { padding: 6px 12px; border: 1.5px solid transparent; border-radius: var(--r-pill); background: transparent; font-family: 'Manrope', sans-serif; font-size: 0.8rem; font-weight: 600; color: var(--text-3); cursor: pointer; transition: all var(--tr); } - .btn-del:hover { border-color: var(--pink); color: var(--pink); } - .btn-assign { padding: 6px 12px; border: 1.5px solid transparent; border-radius: var(--r-pill); background: transparent; font-family: 'Manrope', sans-serif; font-size: 0.8rem; font-weight: 600; color: var(--text-3); cursor: pointer; transition: all var(--tr); } - .btn-assign:hover { border-color: var(--violet); color: var(--violet); } - .btn-move { padding: 6px 12px; border: 1.5px solid transparent; border-radius: var(--r-pill); background: transparent; font-family: 'Manrope', sans-serif; font-size: 0.8rem; font-weight: 600; color: var(--text-3); cursor: pointer; transition: all var(--tr); } - .btn-move:hover { border-color: var(--cyan); color: #0aa6b0; } + .btn-del, .btn-assign, .btn-move { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; padding: 0; border: 1.5px solid transparent; border-radius: 10px; background: rgba(15,23,42,0.04); color: var(--text-3); cursor: pointer; transition: all var(--tr); } + .btn-del:hover { border-color: var(--pink); color: var(--pink); background: rgba(241,91,181,0.08); } + .btn-assign:hover { border-color: var(--violet); color: var(--violet); background: rgba(155,93,229,0.08); } + .btn-move:hover { border-color: var(--cyan); color: #0aa6b0; background: rgba(6,214,224,0.08); } /* assign modal */ .src-toggle { display: flex; gap: 6px; margin-bottom: 16px; } @@ -131,7 +131,7 @@ .assign-list-type { font-size: 0.72rem; font-weight: 700; padding: 2px 8px; border-radius: 99px; background: rgba(155,93,229,0.1); color: var(--violet); } .btn-rm-assign { padding: 4px 10px; border: 1.5px solid transparent; border-radius: 99px; background: transparent; font-size: 0.76rem; font-weight: 600; color: var(--text-3); cursor: pointer; transition: all 0.18s; } .btn-rm-assign:hover { border-color: var(--pink); color: var(--pink); } - .uploader { font-size: 0.72rem; color: var(--text-3); } + .uploader { font-size: 0.72rem; color: var(--text-3); margin-top: 3px; } .spinner { width: 32px; height: 32px; border: 3px solid var(--border); border-top-color: var(--violet); border-radius: 50%; animation: spin 0.8s linear infinite; margin: 60px auto; display: block; } .empty { text-align: center; padding: 60px 20px; color: var(--text-3); } @@ -640,7 +640,7 @@ ${f.is_public ? ' Публичный' : ' Приватный'}
-
+
${fmtSize(f.size)} · ${fmtDate(f.created_at)}
Загрузил: ${esc(f.uploader_name)}