From 0be62d5156f17c4fbc5f7e29b6f31ce895463fd0 Mon Sep 17 00:00:00 2001 From: Maxim Dolgolyov Date: Thu, 4 Jun 2026 13:55:27 +0300 Subject: [PATCH] =?UTF-8?q?style(materials):=20=D0=BF=D0=B5=D1=80=D0=B5?= =?UTF-8?q?=D1=80=D0=B0=D0=B1=D0=BE=D1=82=D0=B0=D0=BD=D0=B0=20=D0=BA=D0=B0?= =?UTF-8?q?=D1=80=D1=82=D0=BE=D1=87=D0=BA=D0=B0=20=D0=BC=D0=B0=D1=82=D0=B5?= =?UTF-8?q?=D1=80=D0=B8=D0=B0=D0=BB=D0=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - карточка-ссылка: превью-баннер (иконка + человекочитаемая метка + url), заголовок снова главный, кнопка «Открыть» вместо сырого URL в теле - бейдж типа теперь inline-чип в теле (с иконкой) — больше не наезжает на контент - hover-подъём карточки - fix: кнопка «В флешкарты» перенесена на карточку-заметку (раньше висела на ссылке и не отображалась), заметки теперь можно и раздавать Co-Authored-By: Claude Opus 4.8 (1M context) --- frontend/my-materials.html | 54 ++++++++++++++++++++++++++++++++------ 1 file changed, 46 insertions(+), 8 deletions(-) diff --git a/frontend/my-materials.html b/frontend/my-materials.html index 1bbee43..9a54b66 100644 --- a/frontend/my-materials.html +++ b/frontend/my-materials.html @@ -26,7 +26,8 @@ .mm-chip-edit:hover { opacity: 1; } .mm-chip-add { border-style: dashed; } .mm-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; } - .mm-card { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; overflow: hidden; display: flex; flex-direction: column; position: relative; } + .mm-card { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; overflow: hidden; display: flex; flex-direction: column; position: relative; transition: border-color .14s, box-shadow .14s, transform .14s; } + .mm-card:hover { border-color: rgba(155,93,229,0.3); box-shadow: 0 8px 24px rgba(15,23,42,0.08); transform: translateY(-2px); } .mm-card-media { background: #f1f5f9; aspect-ratio: 16/10; display: flex; align-items: center; justify-content: center; overflow: hidden; } .mm-card-media img { width: 100%; height: 100%; object-fit: contain; background: #fff; } .mm-card-note { padding: 14px 16px; font-size: 0.84rem; color: var(--text-2); white-space: pre-wrap; word-break: break-word; max-height: 180px; overflow: auto; line-height: 1.55; flex: 1; } @@ -39,7 +40,17 @@ .mm-btn.danger:hover { border-color: #ef4444; color: #ef4444; } .mm-btn svg { width: 13px; height: 13px; } .mm-move { padding: 4px 6px; border: 1px solid var(--border); border-radius: 8px; font-size: .74rem; background: var(--surface); color: var(--text-2); max-width: 130px; margin-right: auto; } - .mm-kind-badge { position: absolute; top: 8px; left: 8px; font-size: 0.68rem; font-weight: 700; padding: 3px 8px; border-radius: 99px; background: rgba(155,93,229,0.12); color: var(--violet); } + .mm-kind-chip { display: inline-flex; align-items: center; gap: 4px; font-size: 0.66rem; font-weight: 700; padding: 3px 9px; border-radius: 99px; background: rgba(155,93,229,0.12); color: var(--violet); margin-bottom: 8px; } + .mm-kind-chip svg { width: 11px; height: 11px; } + .mm-card-link { display: flex; align-items: center; gap: 12px; padding: 18px 16px; background: linear-gradient(135deg, rgba(155,93,229,0.10), rgba(6,182,212,0.08)); text-decoration: none; } + .mm-card-link:hover { background: linear-gradient(135deg, rgba(155,93,229,0.16), rgba(6,182,212,0.12)); } + .mm-card-link-ic { width: 42px; height: 42px; border-radius: 12px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; background: #fff; color: var(--violet); box-shadow: 0 2px 6px rgba(155,93,229,0.18); } + .mm-card-link-ic svg { width: 20px; height: 20px; } + .mm-card-link-meta { display: flex; flex-direction: column; gap: 2px; min-width: 0; } + .mm-card-link-label { font-size: 0.82rem; font-weight: 700; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } + .mm-card-link-url { font-size: 0.7rem; color: var(--text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } + .mm-btn.primary { background: var(--violet); border-color: var(--violet); color: #fff; } + .mm-btn.primary:hover { background: #7c3aed; border-color: #7c3aed; color: #fff; } .mm-empty { padding: 60px 20px; text-align: center; color: var(--text-3); } .mm-empty svg { width: 38px; height: 38px; opacity: 0.4; margin-bottom: 12px; } @media (max-width: 640px) { .mm-grid { grid-template-columns: 1fr 1fr; } .mm-main { padding: 18px 14px; } } @@ -91,7 +102,20 @@ } const KIND_LABEL = { board: 'Доска', note: 'Заметка', link: 'Ссылка', image: 'Изображение' }; + const KIND_ICON = { board: 'layout-template', note: 'sticky-note', link: 'link', image: 'image' }; const PENCIL = ''; + + /* Human-readable label for a saved link (host for external, type for internal) */ + function linkLabel(u) { + u = String(u || ''); + if (/^https?:\/\//i.test(u)) { try { return new URL(u).host; } catch (e) { return u; } } + if (u.startsWith('/textbook')) return 'Раздел учебника'; + if (u.startsWith('/course')) return 'Курс'; + if (u.startsWith('/lesson') || u.startsWith('/online-lesson')) return 'Урок'; + if (u.startsWith('/exam')) return 'Экзамен'; + if (u.startsWith('/lab')) return 'Лаборатория'; + return 'Ссылка'; + } let _mats = []; let _cols = []; const _filter = { col: 'all', kind: 'all', q: '' }; @@ -106,6 +130,7 @@ function card(m) { const kind = KIND_LABEL[m.kind] || m.kind; const meta = `${esc(m.source_title || '')}${m.source_title ? ' · ' : ''}${fmtDate(m.created_at)}`; + const chip = `${kind}`; const del = ``; const edit = ``; const ann = (m.kind === 'board' || m.kind === 'image') @@ -115,11 +140,12 @@ const sh = _canShare ? `` : ''; const mv = moveSelect(m); + if (m.kind === 'board' || m.kind === 'image') { return `
- ${kind}
+ ${chip}
${esc(m.title || kind)}
${meta}
@@ -131,25 +157,37 @@
`; } + if (m.kind === 'link') { return `
- ${kind} -
${esc(m.url)}
+ + + + ${esc(linkLabel(m.url))} + ${esc(m.url)} + +
+ ${chip}
${esc(m.title || kind)}
${meta}
-
${mv}${fc}${sh}${edit}${del}
+
+ ${mv} + Открыть + ${sh}${edit}${del} +
`; } + // note return `
- ${kind}
${esc(m.body || '')}
+ ${chip}
${esc(m.title || kind)}
${meta}
-
${mv}${edit}${del}
+
${mv}${fc}${sh}${edit}${del}
`; }