chore: improve custom scroll areas
This commit is contained in:
3252a8
@@ -26,6 +26,7 @@
|
||||
import { onMount, setContext } from "svelte";
|
||||
import { fade } from "svelte/transition";
|
||||
import { Select } from "$components/ui/primitives.js";
|
||||
import { ScrollArea } from "$components/ui/index.js";
|
||||
import { AdminBadge, AdminButton } from "$components/patterns/admin/index.js";
|
||||
|
||||
import BrandMark from "$lib/webapp/BrandMark.svelte";
|
||||
@@ -760,6 +761,7 @@
|
||||
</header>
|
||||
|
||||
<main class="admin-main">
|
||||
<ScrollArea class="admin-main-scroll" maxHeight="none">
|
||||
{#key active}
|
||||
<div class="admin-section-stage" in:fade={sectionFade} out:fade={sectionFade}>
|
||||
{#if active === "stats"}
|
||||
@@ -842,6 +844,7 @@
|
||||
{/if}
|
||||
</div>
|
||||
{/key}
|
||||
</ScrollArea>
|
||||
</main>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
<script>
|
||||
import { ColorInput, FileInput, Input, Textarea } from "$components/ui/index.js";
|
||||
import { ColorInput, FileInput, Input, ScrollArea, Textarea } from "$components/ui/index.js";
|
||||
import {
|
||||
Check,
|
||||
ChevronRight,
|
||||
@@ -824,6 +824,7 @@
|
||||
/>
|
||||
</label>
|
||||
</div>
|
||||
<ScrollArea class="admin-icon-picker-scroll" maxHeight="min(52vh, 460px)">
|
||||
<div class="admin-icon-picker-grid">
|
||||
{#each filteredIconOptions as iconName}
|
||||
{@const Icon = iconComponent(iconName)}
|
||||
@@ -840,5 +841,6 @@
|
||||
</button>
|
||||
{/each}
|
||||
</div>
|
||||
</ScrollArea>
|
||||
</div>
|
||||
</Dialog>
|
||||
|
||||
@@ -4,6 +4,7 @@
|
||||
|
||||
import { fmtTrafficBytes } from "../../lib/admin/format.js";
|
||||
import Badge from "$components/ui/badge.svelte";
|
||||
import { ScrollArea } from "$components/ui/index.js";
|
||||
import * as Card from "$components/ui/card/index.js";
|
||||
import {
|
||||
AdminDashboardGrid,
|
||||
@@ -606,6 +607,7 @@
|
||||
style="width:78%;height:9px;margin-top:6px"
|
||||
></span>
|
||||
</div>
|
||||
<ScrollArea class="admin-panel-dash-nodes-scroll" maxHeight="240px">
|
||||
<div class="admin-panel-dash-nodes-grid">
|
||||
{#each Array(4) as _, m (m)}
|
||||
<div class="admin-panel-dash-node">
|
||||
@@ -621,6 +623,7 @@
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
</ScrollArea>
|
||||
</div>
|
||||
</div>
|
||||
</Card.Content>
|
||||
@@ -1018,6 +1021,7 @@
|
||||
{at("stats_panel_inner_nodes_hint", {}, "")}
|
||||
</p>
|
||||
</div>
|
||||
<ScrollArea class="admin-panel-dash-nodes-scroll" maxHeight="240px">
|
||||
<div class="admin-panel-dash-nodes-grid">
|
||||
{#each panelNodeTraffic.seven.slice(0, PANEL_NODE_TILE_LIMIT) as node}
|
||||
<div class="admin-panel-dash-node">
|
||||
@@ -1031,6 +1035,7 @@
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
</ScrollArea>
|
||||
{#if panelNodeTraffic.seven.length > PANEL_NODE_TILE_LIMIT}
|
||||
<p class="admin-panel-dash-nodes-more">
|
||||
{at(
|
||||
|
||||
@@ -269,7 +269,8 @@
|
||||
{:else if !tickets.length}
|
||||
<div class="admin-empty-state">{at("support_empty", {}, "Тикетов пока нет")}</div>
|
||||
{:else}
|
||||
<div class="support-inbox-list">
|
||||
<ScrollArea class="support-inbox-list" maxHeight="none">
|
||||
<div class="support-inbox-list-inner">
|
||||
{#each tickets as ticket}
|
||||
<SupportInboxRow
|
||||
{ticket}
|
||||
@@ -279,6 +280,7 @@
|
||||
/>
|
||||
{/each}
|
||||
</div>
|
||||
</ScrollArea>
|
||||
{/if}
|
||||
</section>
|
||||
</div>
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<script>
|
||||
import { Label, Separator, Tabs } from "$components/ui/primitives.js";
|
||||
import { Checkbox, Input, Textarea } from "$components/ui/index.js";
|
||||
import { Checkbox, Input, ScrollArea, Textarea } from "$components/ui/index.js";
|
||||
import Dialog from "$components/ui/dialog.svelte";
|
||||
import {
|
||||
AdminBadge,
|
||||
@@ -552,7 +552,7 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="admin-user-logs-wrap">
|
||||
<ScrollArea class="admin-user-logs-wrap" maxHeight="min(52vh, 460px)">
|
||||
{#if userLogsLoading}
|
||||
<AdminTableSkeleton
|
||||
headers={[
|
||||
@@ -604,7 +604,7 @@
|
||||
</tbody>
|
||||
</AdminTable>
|
||||
{/if}
|
||||
</div>
|
||||
</ScrollArea>
|
||||
|
||||
{#if userLogsLoaded && userLogsTotal > userLogsPageSize}
|
||||
<AdminPagination
|
||||
@@ -976,7 +976,9 @@
|
||||
onclose={() => usersStore.updateState({ userMessageConfirmOpen: false })}
|
||||
class="admin-dialog"
|
||||
>
|
||||
<div class="admin-confirm-message-preview">{userMessageDraft}</div>
|
||||
<ScrollArea class="admin-confirm-message-preview" maxHeight="min(280px, 45vh)">
|
||||
{userMessageDraft}
|
||||
</ScrollArea>
|
||||
<div class="admin-dialog-actions">
|
||||
<AdminButton onclick={() => usersStore.updateState({ userMessageConfirmOpen: false })}
|
||||
>{at("btn_cancel", {}, "Отмена")}</AdminButton
|
||||
@@ -1230,7 +1232,7 @@
|
||||
gap: 8px;
|
||||
font-size: 13px;
|
||||
}
|
||||
.admin-user-logs-wrap {
|
||||
:global(.admin-user-logs-wrap) {
|
||||
min-height: 120px;
|
||||
}
|
||||
.admin-user-log-event {
|
||||
|
||||
@@ -30,12 +30,14 @@
|
||||
</Select.Trigger>
|
||||
<Select.Portal>
|
||||
<Select.Content class="admin-select-content" {sideOffset}>
|
||||
<Select.Viewport class="admin-select-viewport">
|
||||
{#each items as item (item.value)}
|
||||
<Select.Item value={item.value} label={item.label} class="admin-select-item">
|
||||
<span>{item.label}</span>
|
||||
<Check size={14} class="admin-select-item-check" />
|
||||
</Select.Item>
|
||||
{/each}
|
||||
</Select.Viewport>
|
||||
</Select.Content>
|
||||
</Select.Portal>
|
||||
</Select.Root>
|
||||
|
||||
@@ -5,6 +5,7 @@
|
||||
import { onMount } from "svelte";
|
||||
import { fade, fly } from "svelte/transition";
|
||||
import Button from "./button.svelte";
|
||||
import ScrollArea from "./scroll-area.svelte";
|
||||
|
||||
export let open = false;
|
||||
export let title = "";
|
||||
@@ -65,7 +66,9 @@
|
||||
<X size={18} />
|
||||
</Button>
|
||||
</div>
|
||||
<ScrollArea class="dialog-body-scroll" maxHeight="none">
|
||||
<slot />
|
||||
</ScrollArea>
|
||||
</section>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
@@ -348,7 +348,7 @@
|
||||
min-height: 0;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
overscroll-behavior: contain;
|
||||
overflow-y: auto;
|
||||
overflow: hidden;
|
||||
overflow-x: hidden;
|
||||
padding: 24px 28px 36px;
|
||||
display: flex;
|
||||
@@ -359,7 +359,14 @@
|
||||
/* Flex children must NOT shrink — otherwise they collapse to fit the
|
||||
container and the main never overflows, breaking scroll. */
|
||||
|
||||
.admin-main > * {
|
||||
.admin-main-scroll {
|
||||
flex: 1 1 auto;
|
||||
min-height: 0;
|
||||
max-height: none;
|
||||
}
|
||||
|
||||
.admin-main > *,
|
||||
.admin-main-scroll > .scroll-area__viewport > * {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
@@ -1048,16 +1055,18 @@
|
||||
color: var(--admin-muted);
|
||||
}
|
||||
|
||||
.admin-panel-dash-nodes-scroll {
|
||||
max-height: 240px;
|
||||
border-radius: 12px;
|
||||
border: 1px solid var(--admin-border);
|
||||
background: color-mix(in srgb, var(--admin-bg) 65%, var(--admin-surface-2));
|
||||
}
|
||||
|
||||
.admin-panel-dash-nodes-grid {
|
||||
display: grid;
|
||||
gap: 8px;
|
||||
grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
|
||||
max-height: 240px;
|
||||
overflow-y: auto;
|
||||
padding: 10px;
|
||||
border-radius: 12px;
|
||||
border: 1px solid var(--admin-border);
|
||||
background: color-mix(in srgb, var(--admin-bg) 65%, var(--admin-surface-2));
|
||||
}
|
||||
|
||||
.admin-panel-dash-node {
|
||||
@@ -2221,12 +2230,14 @@
|
||||
padding-left: 36px;
|
||||
}
|
||||
|
||||
.admin-icon-picker-scroll {
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.admin-icon-picker-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
|
||||
gap: 10px;
|
||||
max-height: min(52vh, 460px);
|
||||
overflow-y: auto;
|
||||
padding: 2px 4px 4px 0;
|
||||
}
|
||||
|
||||
@@ -2726,7 +2737,7 @@
|
||||
/* Keep admin dialogs readable on desktop: base .dialog-card uses min(100%, 520px);
|
||||
this rule must not stretch the card to full viewport width. */
|
||||
width: min(100%, 520px);
|
||||
overflow-y: auto;
|
||||
overflow: hidden;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
overscroll-behavior: contain;
|
||||
}
|
||||
@@ -3842,7 +3853,7 @@
|
||||
z-index: 90;
|
||||
min-width: var(--bits-select-anchor-width);
|
||||
max-height: var(--bits-select-content-available-height, 320px);
|
||||
overflow-y: auto;
|
||||
overflow: hidden;
|
||||
border: 1px solid var(--admin-border);
|
||||
border-radius: 10px;
|
||||
background:
|
||||
@@ -3855,6 +3866,31 @@
|
||||
gap: 1px;
|
||||
}
|
||||
|
||||
.admin-select-viewport {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1px;
|
||||
max-height: inherit;
|
||||
overflow-y: auto;
|
||||
scrollbar-width: thin;
|
||||
scrollbar-color: color-mix(in srgb, var(--admin-muted) 34%, var(--admin-border)) transparent;
|
||||
}
|
||||
|
||||
.admin-select-viewport::-webkit-scrollbar {
|
||||
width: 8px;
|
||||
}
|
||||
|
||||
.admin-select-viewport::-webkit-scrollbar-track {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.admin-select-viewport::-webkit-scrollbar-thumb {
|
||||
border: 2px solid transparent;
|
||||
border-radius: 999px;
|
||||
background: color-mix(in srgb, var(--admin-muted) 34%, var(--admin-border));
|
||||
background-clip: padding-box;
|
||||
}
|
||||
|
||||
.admin-select-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@@ -4050,7 +4086,7 @@
|
||||
|
||||
.admin-confirm-message-preview {
|
||||
max-height: min(280px, 45vh);
|
||||
overflow: auto;
|
||||
overflow: hidden;
|
||||
padding: 12px 14px;
|
||||
border: 1px solid var(--admin-border);
|
||||
border-radius: 10px;
|
||||
@@ -4399,11 +4435,14 @@
|
||||
}
|
||||
|
||||
.support-inbox-list {
|
||||
gap: 8px;
|
||||
min-height: 0;
|
||||
overflow-y: auto;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.support-inbox-list-inner {
|
||||
display: grid;
|
||||
gap: 8px;
|
||||
padding-right: 2px;
|
||||
scrollbar-width: thin;
|
||||
}
|
||||
|
||||
.support-inbox-row {
|
||||
@@ -5033,11 +5072,13 @@
|
||||
}
|
||||
|
||||
.support-inbox-list {
|
||||
align-content: start;
|
||||
min-height: 0;
|
||||
overflow-y: auto;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.support-inbox-list-inner {
|
||||
align-content: start;
|
||||
padding-right: 2px;
|
||||
scrollbar-width: thin;
|
||||
}
|
||||
|
||||
.support-inbox-row {
|
||||
@@ -5263,7 +5304,7 @@
|
||||
height: 100%;
|
||||
min-height: 0;
|
||||
max-height: none !important;
|
||||
overflow: auto;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -5436,15 +5477,17 @@
|
||||
}
|
||||
|
||||
.support-admin-list-panel .support-inbox-list {
|
||||
min-height: 0;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.support-admin-list-panel .support-inbox-list-inner {
|
||||
display: grid;
|
||||
align-content: start;
|
||||
gap: 8px;
|
||||
min-height: 0;
|
||||
height: 100%;
|
||||
overflow: auto;
|
||||
padding: 0;
|
||||
padding-right: 4px;
|
||||
scrollbar-width: thin;
|
||||
}
|
||||
|
||||
.support-admin-list-panel > .admin-empty-state {
|
||||
@@ -5561,7 +5604,7 @@
|
||||
min-height: 0;
|
||||
height: 100%;
|
||||
max-height: none !important;
|
||||
overflow: auto;
|
||||
overflow: hidden;
|
||||
border: 1px solid var(--admin-border);
|
||||
border-radius: 12px;
|
||||
background: color-mix(in srgb, var(--admin-bg) 68%, transparent);
|
||||
@@ -5913,7 +5956,7 @@
|
||||
.support-ticket-dialog .support-admin-message-scroll {
|
||||
height: 100%;
|
||||
min-height: 320px;
|
||||
overflow: auto;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -326,7 +326,7 @@
|
||||
}
|
||||
|
||||
.scroll-area {
|
||||
overflow: auto;
|
||||
overflow: hidden;
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
@@ -854,7 +854,7 @@
|
||||
.ticket-list,
|
||||
.ticket-message-list,
|
||||
.support-admin-messages,
|
||||
.support-inbox-list {
|
||||
.support-inbox-list-inner {
|
||||
display: grid;
|
||||
gap: 10px;
|
||||
}
|
||||
@@ -1457,14 +1457,15 @@
|
||||
align-content: stretch;
|
||||
}
|
||||
|
||||
.support-ticket-list-scroll {
|
||||
min-height: 0;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.support-list-card .ticket-list,
|
||||
.support-user-list-skeleton {
|
||||
align-content: start;
|
||||
min-height: 0;
|
||||
height: 100%;
|
||||
overflow: auto;
|
||||
padding-right: 4px;
|
||||
scrollbar-width: thin;
|
||||
}
|
||||
|
||||
.support-list-card .support-empty-state {
|
||||
@@ -1538,7 +1539,7 @@
|
||||
.support-ticket-screen .support-message-scroll {
|
||||
min-height: 0;
|
||||
height: 100%;
|
||||
overflow: auto;
|
||||
overflow: hidden;
|
||||
padding: 20px;
|
||||
scrollbar-width: thin;
|
||||
}
|
||||
@@ -1717,7 +1718,7 @@
|
||||
.support-ticket-screen .support-message-scroll {
|
||||
min-height: 0;
|
||||
height: 100%;
|
||||
overflow: auto;
|
||||
overflow: hidden;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
|
||||
@@ -30,10 +30,11 @@
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
display: grid;
|
||||
grid-template-rows: auto minmax(0, 1fr);
|
||||
gap: 16px;
|
||||
width: min(100%, 520px);
|
||||
max-height: min(86dvh, 760px);
|
||||
overflow: auto;
|
||||
overflow: hidden;
|
||||
overscroll-behavior: contain;
|
||||
padding: 18px;
|
||||
border: 1px solid var(--border);
|
||||
@@ -43,6 +44,15 @@
|
||||
box-shadow: var(--shadow-strong);
|
||||
}
|
||||
|
||||
.dialog-body-scroll {
|
||||
min-height: 0;
|
||||
max-height: none;
|
||||
}
|
||||
|
||||
.dialog-body-scroll > .scroll-area__viewport {
|
||||
display: grid;
|
||||
}
|
||||
|
||||
.dialog-head {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1fr) auto;
|
||||
@@ -94,7 +104,7 @@
|
||||
|
||||
.payment-dialog-card {
|
||||
max-height: 100%;
|
||||
overflow-y: auto;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.payment-dialog-body {
|
||||
|
||||
@@ -4,7 +4,7 @@
|
||||
import { Check, ChevronsUpDown, LifeBuoy, MessageSquarePlus } from "$components/ui/icons.js";
|
||||
import Button from "$components/ui/button.svelte";
|
||||
import Card from "$components/ui/card.svelte";
|
||||
import { Input, Skeleton, Textarea } from "$components/ui/index.js";
|
||||
import { Input, ScrollArea, Skeleton, Textarea } from "$components/ui/index.js";
|
||||
import { TicketCard } from "$components/patterns/webapp/index.js";
|
||||
import { Select, Tabs } from "$components/ui/primitives.js";
|
||||
import {
|
||||
@@ -296,6 +296,7 @@
|
||||
</Tabs.Root>
|
||||
|
||||
{#if loading}
|
||||
<ScrollArea class="support-ticket-list-scroll" maxHeight="none">
|
||||
<div class="support-user-list-skeleton" aria-label={t("wa_loading")}>
|
||||
{#each Array(5) as _, index (index)}
|
||||
<article class="support-user-ticket-skeleton">
|
||||
@@ -310,6 +311,7 @@
|
||||
</article>
|
||||
{/each}
|
||||
</div>
|
||||
</ScrollArea>
|
||||
{:else if !tickets.length}
|
||||
<div class="support-empty-state" in:fade={{ duration: 180 }}>
|
||||
<MessageSquarePlus size={34} />
|
||||
@@ -317,11 +319,13 @@
|
||||
<small>{t("wa_support_empty_hint")}</small>
|
||||
</div>
|
||||
{:else}
|
||||
<ScrollArea class="support-ticket-list-scroll" maxHeight="none">
|
||||
<div class="ticket-list">
|
||||
{#each tickets as ticket}
|
||||
<TicketCard {ticket} {t} onOpen={(item) => supportStore.openTicket(item.ticket_id)} />
|
||||
{/each}
|
||||
</div>
|
||||
</ScrollArea>
|
||||
{/if}
|
||||
</Card>
|
||||
</main>
|
||||
|
||||
Reference in New Issue
Block a user