lokses/ACORE
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Чат: аккуратный сайдбар списков ЛС и каналов

Browse Source 
- Единый скролл вместо жёсткого max-height:35% на ЛС и flex:1 на каналах
  (убран пустой провал под каналами)
- Секции-заголовки — компактные uppercase-подписи в стиле портала
- Строки ЛС и каналов выровнены по единому левому краю (0.75rem)

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
lokses
2026-07-28 15:55:26 +03:00
parent caa728158b
commit ea2cc9daca
2 changed files with 20 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files
static/assets/js/chat.js
+1 -1
View File
@@ -297,7 +297,7 @@ function chatBuildChannelRow(channelId, label, subLabel, opts) {
opts = opts || {};
var row = document.createElement('div');
row.id = 'chat-channel-row-' + channelId;
row.style.cssText = 'display:flex; align-items:center; gap:0.5rem; padding:0.5rem 0.625rem; border-bottom:1px solid var(--color-border); cursor:pointer;' +
row.style.cssText = 'display:flex; align-items:center; gap:0.5rem; padding:0.5rem 0.75rem; border-bottom:1px solid var(--color-border); cursor:pointer;' +
(channelId === chatCurrentChannelId ? ' background:hsl(0 72% 44% / 0.06);' : '');
row.onmouseover = function () { if (channelId !== chatCurrentChannelId) row.style.background = 'var(--color-muted)'; };
row.onmouseout = function () { if (channelId !== chatCurrentChannelId) row.style.background = ''; };
templates/pages/chat.html
+19 -14
View File
@@ -13,20 +13,25 @@
<div id="chat-app" style="display:grid; grid-template-columns:260px 1fr; gap:1.25rem; height:calc(100vh - 15rem); max-height:640px;">
<div style="background:var(--color-card); border-radius:0.75rem; border:1px solid var(--color-border); box-shadow:0 1px 2px rgb(0 0 0/0.05); display:flex; flex-direction:column; overflow:hidden;">
<div style="padding:0.75rem; border-bottom:1px solid var(--color-border); display:flex; align-items:center; justify-content:space-between;">
<span style="font-size:0.8125rem; font-weight:500; color:var(--color-foreground);">Особисті повідомлення</span>
<button type="button" class="btn btn-ghost btn-icon" style="width:1.5rem; height:1.5rem;" onclick="chatOpenNewDmPicker()" aria-label="Нове повідомлення">
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="12" x2="12" y1="5" y2="19"/><line x1="5" x2="19" y1="12" y2="12"/></svg>
</button>
</div>
<div id="chat-dm-list" style="max-height:35%; overflow-y:auto; border-bottom:1px solid var(--color-border);">
<div style="padding:0.75rem; text-align:center; font-size:0.75rem; color:var(--color-muted-foreground);">Завантаження…</div>
</div>
<div style="padding:0.75rem; border-bottom:1px solid var(--color-border);">
<span style="font-size:0.8125rem; font-weight:500; color:var(--color-foreground);">Канали</span>
</div>
<div id="chat-channel-list" style="overflow-y:auto; flex:1;">
<div style="padding:1rem; text-align:center; font-size:0.8125rem; color:var(--color-muted-foreground);">Завантаження…</div>
<div style="flex:1; overflow-y:auto; padding-bottom:0.5rem;">
<div style="display:flex; align-items:center; justify-content:space-between; padding:0.75rem 0.75rem 0.375rem;">
<span style="font-size:0.6875rem; font-weight:600; letter-spacing:0.06em; text-transform:uppercase; color:var(--color-muted-foreground);">Особисті повідомлення</span>
<button type="button" class="btn btn-ghost btn-icon" style="width:1.5rem; height:1.5rem;" onclick="chatOpenNewDmPicker()" aria-label="Нове повідомлення">
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="12" x2="12" y1="5" y2="19"/><line x1="5" x2="19" y1="12" y2="12"/></svg>
</button>
</div>
<div id="chat-dm-list">
<div style="padding:0.5rem 0.75rem; font-size:0.75rem; color:var(--color-muted-foreground);">Завантаження…</div>
</div>
<div style="padding:0.75rem 0.75rem 0.375rem; margin-top:0.25rem;">
<span style="font-size:0.6875rem; font-weight:600; letter-spacing:0.06em; text-transform:uppercase; color:var(--color-muted-foreground);">Канали</span>
</div>
<div id="chat-channel-list">
<div style="padding:0.5rem 0.75rem; font-size:0.8125rem; color:var(--color-muted-foreground);">Завантаження…</div>
</div>
</div>
</div>