Skip to content

Commit 60dd927

Browse files
surajshetty3416surajshetty3416
committed
fix: List view style for longer page titles
1 parent 71dd904 commit 60dd927

File tree

1 file changed

+63
-61
lines changed

1 file changed

+63
-61
lines changed

‎frontend/src/components/PageListItem.vue

Lines changed: 63 additions & 61 deletions
Original file line numberDiff line numberDiff line change
@@ -1,73 +1,75 @@
11
<template>
2-
<router-link
3-
:to="{ name: 'builder', params: { pageId: page.page_name } }"
4-
class="col-span-full h-fit w-full flex-grow">
2+
<router-link :to="{ name: 'builder', params: { pageId: page.page_name } }" class="h-fit w-full">
53
<div
6-
class="group relative flex w-full gap-3 overflow-hidden rounded-2xl border-b-[1px] border-outline-gray-1 p-3 hover:cursor-pointer hover:bg-surface-gray-1"
4+
class="group relative flex w-full justify-between overflow-hidden rounded-2xl border-b-[1px] border-outline-gray-1 p-3 hover:cursor-pointer hover:bg-surface-gray-1"
75
:class="{
86
'bg-surface-gray-2': selected,
97
}">
10-
<img
11-
width="140"
12-
height="82"
13-
:src="page.preview"
14-
onerror="this.src='/assets/builder/images/fallback.png'"
15-
class="block w-36 overflow-hidden rounded-lg bg-surface-gray-1 object-cover shadow-md" />
16-
<div class="flex flex-1 items-start justify-between">
17-
<span class="flex h-full flex-col justify-between text-base text-gray-700 dark:text-zinc-200">
18-
<div>
19-
<div class="flex items-center gap-1">
20-
<p class="truncate font-medium text-ink-gray-9">
21-
{{ page.page_title || page.page_name }}
22-
</p>
23-
</div>
24-
<div class="mt-2 flex items-center gap-2 text-ink-gray-6">
25-
<div v-show="page.published">
26-
<AuthenticatedUserIcon
27-
title="Limited access"
28-
class="size-4 text-ink-amber-3"
29-
v-if="page.authenticated_access" />
30-
<GlobeIcon class="size-4" title="Publicly accessible" v-else />
8+
<div class="flex w-[90%] gap-3 overflow-hidden">
9+
<img
10+
width="140"
11+
height="82"
12+
:src="page.preview"
13+
onerror="this.src='/assets/builder/images/fallback.png'"
14+
class="block w-36 flex-shrink-0 overflow-hidden rounded-lg bg-surface-gray-1 object-cover shadow-md" />
15+
<div class="flex items-start justify-between">
16+
<span class="flex h-full flex-col justify-between text-base">
17+
<div>
18+
<div class="flex items-center gap-1">
19+
<p
20+
class="max-w-[75%] truncate font-medium text-ink-gray-9"
21+
:title="page.page_title || page.page_name">
22+
{{ page.page_title || page.page_name }}
23+
</p>
24+
</div>
25+
<div class="mt-2 flex items-center gap-2 text-ink-gray-6">
26+
<div v-show="page.published">
27+
<AuthenticatedUserIcon
28+
title="Limited access"
29+
class="size-4 text-ink-amber-3"
30+
v-if="page.authenticated_access" />
31+
<GlobeIcon class="size-4" title="Publicly accessible" v-else />
32+
</div>
33+
<p class="max-w-[75%] truncate text-sm">
34+
{{ page.route }}
35+
</p>
3136
</div>
32-
<p class="text-sm">
33-
{{ page.route }}
34-
</p>
3537
</div>
36-
</div>
37-
<div class="flex items-baseline gap-2 text-ink-gray-6">
38-
<UseTimeAgo v-slot="{ timeAgo }" :time="page.modified">
39-
<p class="mt-1 block text-sm">Last updated {{ timeAgo }} by {{ page.modified_by }}</p>
40-
</UseTimeAgo>
41-
</div>
42-
</span>
43-
<div class="flex items-center gap-2">
44-
<Badge theme="green" v-if="page.published" class="dark:bg-green-900 dark:text-green-400">
45-
Published
46-
</Badge>
47-
<Avatar
48-
:shape="'circle'"
49-
:image="null"
50-
:label="page.owner"
51-
class="[&>div]:bg-surface-gray-2 [&>div]:text-ink-gray-4 [&>div]:group-hover:bg-surface-gray-4 [&>div]:group-hover:text-ink-gray-6"
52-
size="sm"
53-
:title="`Created by ${page.owner}`" />
54-
<Dropdown
55-
:options="[
56-
{ label: 'Duplicate', onClick: () => store.duplicatePage(page), icon: 'copy' },
57-
{ label: 'View in Desk', onClick: () => store.openInDesk(page), icon: 'arrow-up-right' },
58-
{ label: 'Delete', onClick: () => store.deletePage(page), icon: 'trash' },
59-
]"
60-
size="sm"
61-
placement="right">
62-
<template v-slot="{ open }">
63-
<FeatherIcon
64-
name="more-horizontal"
65-
class="h-4 w-4 font-bold text-ink-gray-6"
66-
@click="open"></FeatherIcon>
67-
</template>
68-
</Dropdown>
38+
<div class="flex items-baseline gap-2 text-ink-gray-6">
39+
<UseTimeAgo v-slot="{ timeAgo }" :time="page.modified">
40+
<p class="mt-1 block text-sm">Last updated {{ timeAgo }} by {{ page.modified_by }}</p>
41+
</UseTimeAgo>
42+
</div>
43+
</span>
6944
</div>
7045
</div>
46+
<div class="flex gap-2">
47+
<Badge theme="green" v-if="page.published" class="dark:bg-green-900 dark:text-green-400">
48+
Published
49+
</Badge>
50+
<Avatar
51+
:shape="'circle'"
52+
:image="null"
53+
:label="page.owner"
54+
class="[&>div]:bg-surface-gray-2 [&>div]:text-ink-gray-4 [&>div]:group-hover:bg-surface-gray-4 [&>div]:group-hover:text-ink-gray-6"
55+
size="sm"
56+
:title="`Created by ${page.owner}`" />
57+
<Dropdown
58+
:options="[
59+
{ label: 'Duplicate', onClick: () => store.duplicatePage(page), icon: 'copy' },
60+
{ label: 'View in Desk', onClick: () => store.openInDesk(page), icon: 'arrow-up-right' },
61+
{ label: 'Delete', onClick: () => store.deletePage(page), icon: 'trash' },
62+
]"
63+
size="sm"
64+
placement="right">
65+
<template v-slot="{ open }">
66+
<FeatherIcon
67+
name="more-horizontal"
68+
class="h-4 w-4 font-bold text-ink-gray-6"
69+
@click="open"></FeatherIcon>
70+
</template>
71+
</Dropdown>
72+
</div>
7173
</div>
7274
</router-link>
7375
</template>

0 commit comments

Comments
 (0)