Skip to content

Commit 683f49b

Browse files
HarshMN2345HarshMN2345
authored
Merge pull request #2745 from appwrite/fix-sessions-and-activity-table-layout
fix: column width for sessions and activity table for smaller devices
2 parents 936666d + 2cd22b9 commit 683f49b

4 files changed

Lines changed: 97 additions & 62 deletions

File tree

‎src/lib/layout/activity.svelte‎

Lines changed: 73 additions & 51 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
import { Container } from '$lib/layout';
44
import DualTimeView from '$lib/components/dualTimeView.svelte';
55
import type { Models } from '@appwrite.io/console';
6-
import { Layout, Table, Card, Empty } from '@appwrite.io/pink-svelte';
6+
import { Layout, Table, Card, Empty, InteractiveText } from '@appwrite.io/pink-svelte';
77
import Button from '$lib/elements/forms/button.svelte';
88
import type { PinkColumn } from '$lib/helpers/types';
99
@@ -14,12 +14,32 @@
1414
export let databasesScreen = false;
1515
export let useCreateLinkForPagination = true;
1616
17+
function getColumnWidth(columnId: string): Pick<PinkColumn, 'width'> {
18+
const widthConfig: Record<
19+
string,
20+
{ insideSheet: number | { min: number }; default: number | { min: number } }
21+
> = {
22+
user: { insideSheet: 140, default: { min: 100 } },
23+
event: { insideSheet: 125, default: { min: 160 } },
24+
location: { insideSheet: 100, default: { min: 120 } },
25+
ip: { insideSheet: { min: 150 }, default: { min: 250 } },
26+
date: { insideSheet: { min: 200 }, default: { min: 180 } }
27+
};
28+
29+
const config = widthConfig[columnId];
30+
if (!config) {
31+
return {};
32+
}
33+
34+
return { width: insideSideSheet ? config.insideSheet : config.default };
35+
}
36+
1737
const columns: PinkColumn[] = [
18-
{ id: 'user', ...(insideSideSheet ? { width: 140 } : {}) },
19-
{ id: 'event', ...(insideSideSheet ? { width: 125 } : {}) },
20-
{ id: 'location', ...(insideSideSheet ? { width: 100 } : {}) },
21-
{ id: 'ip', ...(insideSideSheet ? { width: { min: 150 } } : {}) },
22-
{ id: 'date', ...(insideSideSheet ? { width: { min: 200 } } : {}) }
38+
{ id: 'user', ...getColumnWidth('user') },
39+
{ id: 'event', ...getColumnWidth('event') },
40+
{ id: 'location', ...getColumnWidth('location') },
41+
{ id: 'ip', ...getColumnWidth('ip') },
42+
{ id: 'date', ...getColumnWidth('date') }
2343
];
2444
</script>
2545

@@ -29,55 +49,57 @@
2949
expanded={databasesScreen && !insideSideSheet}
3050
slotSpacing={databasesScreen && !insideSideSheet}>
3151
{#if logs.total}
32-
<div>
33-
<Table.Root {columns} let:root>
34-
<svelte:fragment slot="header" let:root>
35-
<Table.Header.Cell column="user" {root}>User</Table.Header.Cell>
36-
<Table.Header.Cell column="event" {root}>Event</Table.Header.Cell>
37-
<Table.Header.Cell column="location" {root}>Location</Table.Header.Cell>
38-
<Table.Header.Cell column="ip" {root}>IP</Table.Header.Cell>
39-
<Table.Header.Cell column="date" {root}>Date</Table.Header.Cell>
40-
</svelte:fragment>
41-
{#each logs.logs as log}
42-
<Table.Row.Base {root}>
43-
<Table.Cell column="user" {root}>
44-
<Layout.Stack direction="row" alignItems="center">
45-
{#if log.userEmail}
46-
{#if log.userName}
47-
<AvatarInitials size="xs" name={log.userName} />
48-
<Trim>{log.userName}</Trim>
49-
{:else}
50-
<AvatarInitials size="xs" name={log.userEmail} />
51-
<Trim>{log.userEmail}</Trim>
52-
{/if}
52+
<Table.Root {columns} let:root>
53+
<svelte:fragment slot="header" let:root>
54+
<Table.Header.Cell column="user" {root}>User</Table.Header.Cell>
55+
<Table.Header.Cell column="event" {root}>Event</Table.Header.Cell>
56+
<Table.Header.Cell column="location" {root}>Location</Table.Header.Cell>
57+
<Table.Header.Cell column="ip" {root}>IP</Table.Header.Cell>
58+
<Table.Header.Cell column="date" {root}>Date</Table.Header.Cell>
59+
</svelte:fragment>
60+
{#each logs.logs as log}
61+
<Table.Row.Base {root}>
62+
<Table.Cell column="user" {root}>
63+
<Layout.Stack direction="row" alignItems="center">
64+
{#if log.userEmail}
65+
{#if log.userName}
66+
<AvatarInitials size="xs" name={log.userName} />
67+
<Trim>{log.userName}</Trim>
5368
{:else}
54-
<div class="avatar is-size-small">
55-
<span class="icon-anonymous" aria-hidden="true"></span>
56-
</div>
57-
<span class="text u-trim">{log.userName ?? 'Anonymous'}</span>
69+
<AvatarInitials size="xs" name={log.userEmail} />
70+
<Trim>{log.userEmail}</Trim>
5871
{/if}
59-
</Layout.Stack>
60-
</Table.Cell>
61-
<Table.Cell column="event" {root}>
62-
{log.event}
63-
</Table.Cell>
64-
<Table.Cell column="location" {root}>
65-
{#if log.countryCode !== '--'}
66-
{log.countryName}
6772
{:else}
68-
Unknown
73+
<div class="avatar is-size-small">
74+
<span class="icon-anonymous" aria-hidden="true"></span>
75+
</div>
76+
<span class="text u-trim">{log.userName ?? 'Anonymous'}</span>
6977
{/if}
70-
</Table.Cell>
71-
<Table.Cell column="ip" {root}>
72-
{log.ip}
73-
</Table.Cell>
74-
<Table.Cell column="date" {root}>
75-
<DualTimeView time={log.time} showDatetime />
76-
</Table.Cell>
77-
</Table.Row.Base>
78-
{/each}
79-
</Table.Root>
80-
</div>
78+
</Layout.Stack>
79+
</Table.Cell>
80+
81+
<Table.Cell column="event" {root}>
82+
{log.event}
83+
</Table.Cell>
84+
85+
<Table.Cell column="location" {root}>
86+
{#if log.countryCode !== '--'}
87+
{log.countryName}
88+
{:else}
89+
Unknown
90+
{/if}
91+
</Table.Cell>
92+
93+
<Table.Cell column="ip" {root}>
94+
<InteractiveText variant="copy" text={log.ip} isVisible />
95+
</Table.Cell>
96+
97+
<Table.Cell column="date" {root}>
98+
<DualTimeView time={log.time} showDatetime />
99+
</Table.Cell>
100+
</Table.Row.Base>
101+
{/each}
102+
</Table.Root>
81103

82104
<PaginationWithLimit
83105
{limit}

‎src/routes/(console)/+layout.svelte‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -334,7 +334,6 @@
334334
<CommandCenter />
335335
<Shell
336336
showSideNavigation={page.url.pathname !== '/' &&
337-
!page.url.pathname.includes(base + '/account') &&
338337
!page.url.pathname.includes(base + '/card') &&
339338
!page.url.pathname.includes(base + '/onboarding')}
340339
showHeader={!page.url.pathname.includes(base + '/onboarding/create-project')}

‎src/routes/(console)/account/sessions/+page.svelte‎

Lines changed: 12 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,14 @@
1313
import type { PageData } from './$types';
1414
import { addNotification } from '$lib/stores/notifications';
1515
import { onMount } from 'svelte';
16-
import { Badge, Layout, Table, Typography, Icon } from '@appwrite.io/pink-svelte';
16+
import {
17+
Badge,
18+
Layout,
19+
Table,
20+
Typography,
21+
Icon,
22+
InteractiveText
23+
} from '@appwrite.io/pink-svelte';
1724
import { IconGlobeAlt } from '@appwrite.io/pink-icons-svelte';
1825
1926
export let data: PageData;
@@ -92,9 +99,9 @@
9299
<Table.Root
93100
let:root
94101
columns={[
95-
{ id: 'client' },
96-
{ id: 'location', width: 200 },
97-
{ id: 'ip', width: 200 },
102+
{ id: 'client', width: { min: 450 } },
103+
{ id: 'location', width: { min: 200 } },
104+
{ id: 'ip', width: { min: 330 } },
98105
{ id: 'actions', width: 100 }
99106
]}>
100107
<svelte:fragment slot="header" let:root>
@@ -146,7 +153,7 @@
146153
{/if}
147154
</Table.Cell>
148155
<Table.Cell column="ip" {root}>
149-
{session.ip}
156+
<InteractiveText variant="copy" text={session.ip} isVisible />
150157
</Table.Cell>
151158
<Table.Cell column="actions" {root}>
152159
<Button size="xs" secondary on:click={() => logout(session)}>Sign out</Button>

‎src/routes/(console)/project-[region]-[project]/auth/user-[user]/sessions/+page.svelte‎

Lines changed: 12 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,13 @@
11
<script lang="ts">
22
import { EmptySearch, Trim } from '$lib/components';
3-
import { Badge, Layout, Table, Typography, Icon } from '@appwrite.io/pink-svelte';
3+
import {
4+
Badge,
5+
Layout,
6+
Table,
7+
Typography,
8+
Icon,
9+
InteractiveText
10+
} from '@appwrite.io/pink-svelte';
411
import { IconGlobeAlt } from '@appwrite.io/pink-icons-svelte';
512
import { Button } from '$lib/elements/forms';
613
import { isValueOfStringEnum } from '$lib/helpers/types';
@@ -36,9 +43,9 @@
3643
<Table.Root
3744
let:root
3845
columns={[
39-
{ id: 'client' },
40-
{ id: 'location', width: 200 },
41-
{ id: 'ip', width: 200 },
46+
{ id: 'client', width: { min: 450 } },
47+
{ id: 'location', width: { min: 200 } },
48+
{ id: 'ip', width: { min: 200 } },
4249
{ id: 'actions', width: 100 }
4350
]}>
4451
<svelte:fragment slot="header" let:root>
@@ -84,7 +91,7 @@
8491
{/if}
8592
</Table.Cell>
8693
<Table.Cell column="ip" {root}>
87-
{session.ip}
94+
<InteractiveText variant="copy" text={session.ip} isVisible />
8895
</Table.Cell>
8996
<Table.Cell column="actions" {root}>
9097
<Button

0 commit comments

Comments
 (0)