maxim.dolgolyov/Learn_System
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style(materials): переработана карточка материала

Browse Source 
- карточка-ссылка: превью-баннер (иконка + человекочитаемая метка + url),
  заголовок снова главный, кнопка «Открыть» вместо сырого URL в теле
- бейдж типа теперь inline-чип в теле (с иконкой) — больше не наезжает на контент
- hover-подъём карточки
- fix: кнопка «В флешкарты» перенесена на карточку-заметку (раньше висела
  на ссылке и не отображалась), заметки теперь можно и раздавать

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
Maxim Dolgolyov
2026-06-04 13:55:27 +03:00
parent aee8597499
commit 0be62d5156
1 changed files with 46 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/my-materials.html
+46 -8
View File
@@ -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 = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 20h9"/><path d="M16.5 3.5a2.1 2.1 0 0 1 3 3L7 19l-4 1 1-4z"/></svg>';
/* 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 = `<span class="mm-kind-chip"><i data-lucide="${KIND_ICON[m.kind] || 'tag'}"></i>${kind}</span>`;
const del = `<button class="mm-btn danger" onclick="delMaterial(${m.id})" title="Удалить"><i data-lucide="trash-2"></i></button>`;
const edit = `<button class="mm-btn" onclick="editMaterial(${m.id})" title="Изменить"><i data-lucide="pencil"></i></button>`;
const ann = (m.kind === 'board' || m.kind === 'image')
@@ -115,11 +140,12 @@
const sh = _canShare
? `<button class="mm-btn" onclick="openShareModal(${m.id})" title="Раздать ученикам"><i data-lucide="send"></i></button>` : '';
const mv = moveSelect(m);
if (m.kind === 'board' || m.kind === 'image') {
return `<div class="mm-card">
<span class="mm-kind-badge">${kind}</span>
<a class="mm-card-media" href="${esc(m.url)}" target="_blank" rel="noopener"><img src="${esc(m.url)}" alt="" loading="lazy"/></a>
<div class="mm-card-body">
${chip}
<div class="mm-card-title">${esc(m.title || kind)}</div>
<div class="mm-card-meta">${meta}</div>
<div class="mm-card-actions">
@@ -131,25 +157,37 @@
</div>
</div>`;
}
if (m.kind === 'link') {
return `<div class="mm-card">
<span class="mm-kind-badge">${kind}</span>
<div class="mm-card-note"><a href="${esc(m.url)}" target="_blank" rel="noopener" style="color:var(--violet)">${esc(m.url)}</a></div>
<a class="mm-card-link" href="${esc(m.url)}" target="_blank" rel="noopener" title="${esc(m.url)}">
<span class="mm-card-link-ic"><i data-lucide="link"></i></span>
<span class="mm-card-link-meta">
<span class="mm-card-link-label">${esc(linkLabel(m.url))}</span>
<span class="mm-card-link-url">${esc(m.url)}</span>
</span>
</a>
<div class="mm-card-body">
${chip}
<div class="mm-card-title">${esc(m.title || kind)}</div>
<div class="mm-card-meta">${meta}</div>
<div class="mm-card-actions">${mv}${fc}${sh}${edit}${del}</div>
<div class="mm-card-actions">
${mv}
<a class="mm-btn primary" href="${esc(m.url)}" target="_blank" rel="noopener"><i data-lucide="external-link"></i> Открыть</a>
${sh}${edit}${del}
</div>
</div>
</div>`;
}
// note
return `<div class="mm-card">
<span class="mm-kind-badge">${kind}</span>
<div class="mm-card-note">${esc(m.body || '')}</div>
<div class="mm-card-body">
${chip}
<div class="mm-card-title">${esc(m.title || kind)}</div>
<div class="mm-card-meta">${meta}</div>
<div class="mm-card-actions">${mv}${edit}${del}</div>
<div class="mm-card-actions">${mv}${fc}${sh}${edit}${del}</div>
</div>
</div>`;
}