style(notifications): редизайн dropdown — иконки по типу, левый акцент у непрочитанных, sticky-шапка

2026-06-01 10:47:06 +03:00
parent 8641bb6954
commit e88cd431ca
2 changed files with 71 additions and 20 deletions
@@ -528,32 +528,53 @@ body {
 .notif-drop {
  position: fixed;
  left: 246px;
-  width: 320px;
-  max-height: 420px;
+  width: 340px;
+  max-height: 460px;
  overflow-y: auto;
  background: #fff;
  border: 1.5px solid var(--border-h);
-  border-radius: 16px;
-  box-shadow: 0 12px 48px rgba(15,23,42,0.14);
+  border-radius: 18px;
+  box-shadow: 0 16px 56px rgba(15,23,42,.16), 0 4px 16px rgba(15,23,42,.06);
  z-index: 1000;
  display: none;
-  font-size: 0.82rem;
+  font-size: .82rem;
  color: var(--text-2);
 }
 .notif-drop.open { display: block; }
-.notif-drop-header { display: flex; align-items: center; justify-content: space-between; padding: 13px 16px 9px; border-bottom: 1px solid var(--border); }
-.notif-drop-title  { font-family: 'Unbounded', sans-serif; font-size: 0.77rem; font-weight: 800; }
-.notif-read-all    { background: none; border: none; font-size: 0.72rem; color: var(--violet); cursor: pointer; font-family: 'Manrope', sans-serif; font-weight: 600; padding: 0; }
+.notif-drop-header {
+  display: flex; align-items: center; justify-content: space-between;
+  padding: 14px 16px 11px; border-bottom: 1px solid var(--border);
+  position: sticky; top: 0; background: #fff; z-index: 1;
+  border-radius: 18px 18px 0 0;
+}
+.notif-drop-header-left { display: flex; align-items: center; gap: 8px; }
+.notif-drop-title  { font-family: 'Unbounded', sans-serif; font-size: .77rem; font-weight: 800; color: var(--text); }
+.notif-unread-badge { background: var(--violet); color: #fff; font-size: .62rem; font-weight: 800;
+                      padding: 2px 7px; border-radius: 20px; font-family: 'Unbounded', sans-serif; line-height: 1.4; }
+.notif-read-all    { background: none; border: none; font-size: .72rem; color: var(--violet);
+                     cursor: pointer; font-family: 'Manrope', sans-serif; font-weight: 600;
+                     padding: 0; white-space: nowrap; }
 .notif-read-all:hover { text-decoration: underline; }
-.notif-item        { display: flex; gap: 9px; padding: 10px 14px; border-bottom: 1px solid var(--border); cursor: pointer; text-decoration: none; color: inherit; transition: background var(--tr); }
-.notif-item:last-child { border-bottom: none; }
-.notif-item:hover  { background: rgba(155,93,229,0.04); }
-.notif-item.unread { background: rgba(155,93,229,0.06); }
-.notif-dot         { width: 7px; height: 7px; border-radius: 50%; background: var(--violet); flex-shrink: 0; margin-top: 5px; }
-.notif-dot.read    { background: transparent; border: 1.5px solid var(--border-h); }
-.notif-msg         { font-size: 0.79rem; line-height: 1.4; flex: 1; }
-.notif-time        { font-size: 0.68rem; color: var(--text-3); margin-top: 2px; }
-.notif-empty       { padding: 26px 16px; text-align: center; color: var(--text-3); font-size: 0.83rem; }
+
+.notif-item { display: flex; gap: 11px; padding: 11px 16px; cursor: pointer;
+              text-decoration: none; color: inherit; transition: background .15s;
+              position: relative; align-items: flex-start; }
+.notif-item + .notif-item { border-top: 1px solid var(--border); }
+.notif-item:hover  { background: rgba(155,93,229,.04); }
+.notif-item.unread { background: rgba(155,93,229,.05); }
+.notif-item.unread::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0;
+                              width: 3px; background: var(--violet); border-radius: 0 2px 2px 0; }
+
+.notif-icon { width: 34px; height: 34px; border-radius: 10px; flex-shrink: 0;
+              display: flex; align-items: center; justify-content: center;
+              background: var(--ni, rgba(155,93,229,.1)); color: var(--nc, #9B5DE5);
+              margin-top: 1px; }
+.notif-icon .ic { width: 15px; height: 15px; }
+
+.notif-body { flex: 1; min-width: 0; }
+.notif-msg  { font-size: .81rem; line-height: 1.45; color: var(--text); }
+.notif-time { font-size: .67rem; color: var(--text-3); margin-top: 3px; font-weight: 500; }
+.notif-empty { padding: 28px 16px; text-align: center; color: var(--text-3); font-size: .83rem; }

 /* ══════════════════════════════════════════
   PAGE TRANSITIONS (View Transitions API)
@@ -3,6 +3,30 @@
  let _notifOpen = false;
  let _sse = null;

+  const _ICONS = {
+    achievement: { bg:'#FEF3C7', c:'#D97706',
+      svg:'<svg class="ic" viewBox="0 0 24 24"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/></svg>' },
+    assignment: { bg:'#DBEAFE', c:'#2563EB',
+      svg:'<svg class="ic" viewBox="0 0 24 24"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/><line x1="9" y1="13" x2="15" y2="13"/><line x1="9" y1="17" x2="12" y2="17"/></svg>' },
+    grade: { bg:'#DCFCE7', c:'#16A34A',
+      svg:'<svg class="ic" viewBox="0 0 24 24"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/><polyline points="22 4 12 14.01 9 11.01"/></svg>' },
+    revision: { bg:'#FEE2E2', c:'#DC2626',
+      svg:'<svg class="ic" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="12"/><line x1="12" y1="16" x2="12.01" y2="16"/></svg>' },
+    submission: { bg:'#E0F2FE', c:'#0284C7',
+      svg:'<svg class="ic" viewBox="0 0 24 24"><line x1="22" y1="2" x2="11" y2="13"/><polygon points="22 2 15 22 11 13 2 9 22 2"/></svg>' },
+    session: { bg:'rgba(155,93,229,.12)', c:'#9B5DE5',
+      svg:'<svg class="ic" viewBox="0 0 24 24"><polyline points="22 12 18 12 15 21 9 3 6 12 2 12"/></svg>' },
+    join: { bg:'#F0FDF4', c:'#16A34A',
+      svg:'<svg class="ic" viewBox="0 0 24 24"><path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><line x1="19" y1="8" x2="19" y2="14"/><line x1="22" y1="11" x2="16" y2="11"/></svg>' },
+    announcement: { bg:'#EDE9FE', c:'#7C3AED',
+      svg:'<svg class="ic" viewBox="0 0 24 24"><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07A19.5 19.5 0 0 1 4.69 11.9a19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 3.6 1h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9a16 16 0 0 0 6.29 6.29l1.36-1.36a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"/></svg>' },
+  };
+  function _icon(type) {
+    const t = _ICONS[type] || { bg:'rgba(155,93,229,.1)', c:'#9B5DE5',
+      svg:'<svg class="ic" viewBox="0 0 24 24"><path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"/><path d="M13.73 21a2 2 0 0 1-3.46 0"/></svg>' };
+    return `<div class="notif-icon" style="--ni:${t.bg};--nc:${t.c}">${t.svg}</div>`;
+  }
+
  function renderNotifDrop(data) {
    const drop  = document.getElementById('notif-drop');
    const badge = document.getElementById('notif-badge');
@@ -11,13 +35,19 @@
    else badge.style.display = 'none';
    drop.innerHTML = `
      <div class="notif-drop-header">
-        <span class="notif-drop-title">Уведомления</span>
+        <div class="notif-drop-header-left">
+          <span class="notif-drop-title">Уведомления</span>
+          ${data.unread > 0 ? `<span class="notif-unread-badge">${data.unread}</span>` : ''}
+        </div>
        ${data.unread > 0 ? `<button class="notif-read-all" onclick="LS.notif.markAllRead()">Отметить все прочитанными</button>` : ''}
      </div>
      ${data.notifications.length ? data.notifications.map(n => `
        <a class="notif-item${n.is_read ? '' : ' unread'}" href="${LS.safeHref(n.link)}" onclick="LS.notif.click(event,${n.id},'${LS.safeHref(n.link)}')">
-          <div class="notif-dot${n.is_read ? ' read' : ''}"></div>
-          <div><div class="notif-msg">${LS.esc(n.message)}</div><div class="notif-time">${LS.fmtRelTime(n.created_at)}</div></div>
+          ${_icon(n.type)}
+          <div class="notif-body">
+            <div class="notif-msg">${LS.esc(n.message)}</div>
+            <div class="notif-time">${LS.fmtRelTime(n.created_at)}</div>
+          </div>
        </a>`).join('') : '<div class="notif-empty">Уведомлений нет</div>'}`;
  }