fix: design harmonization on last features
This commit is contained in:
fsylvain committed
1 parent
953be7342d
commit
70c8492f4f
23 files changed
+526
-840
No files matched your search
@@ -31,47 +31,36 @@ function metaLine(item: ActivityItem, own: boolean) {
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<UCard
|
||||
<section
|
||||
data-testid="recent-activity-card"
|
||||
:aria-busy="loading && showSkeleton ? 'true' : undefined"
|
||||
:ui="{
|
||||
root: 'min-w-0 rounded-none border border-default bg-default shadow-none ring-0 divide-y-0',
|
||||
header: 'flex items-center gap-2 border-b border-default px-4 py-3 sm:px-4 sm:py-3',
|
||||
body: 'flex flex-col px-4 pt-1 pb-1.5 sm:px-4 sm:pt-1 sm:pb-1.5',
|
||||
}"
|
||||
class="flex min-w-0 flex-col gap-2.5"
|
||||
>
|
||||
<template #header>
|
||||
<h2 class="flex-1 text-base font-semibold text-highlighted">
|
||||
<div class="flex items-baseline justify-between">
|
||||
<h2 class="text-base/6 font-semibold text-highlighted">
|
||||
{{ own ? t('Your recent activity') : t('Recent activity') }}
|
||||
</h2>
|
||||
<RouterLink
|
||||
to="/activity"
|
||||
class="flex items-center gap-1 font-medium text-highlighted underline underline-offset-3 max-lg:min-h-11 lg:min-h-5"
|
||||
>
|
||||
<RouterLink to="/activity" class="text-toned underline underline-offset-3">
|
||||
{{ t('View all') }}
|
||||
<UIcon name="i-lucide-arrow-right" class="size-3.5" />
|
||||
</RouterLink>
|
||||
</template>
|
||||
</div>
|
||||
|
||||
<template v-if="loading">
|
||||
<template v-if="showSkeleton">
|
||||
<div v-if="showSkeleton" class="border border-default bg-default">
|
||||
<div
|
||||
v-for="n in SKELETON_ROWS"
|
||||
:key="n"
|
||||
data-testid="recent-activity-skeleton"
|
||||
class="flex gap-2.5 py-2.5"
|
||||
class="flex min-h-13 items-center gap-3 px-3 py-2 lg:min-h-11"
|
||||
:class="n > 1 ? 'border-t border-muted' : ''"
|
||||
>
|
||||
<USkeleton class="size-6 shrink-0 rounded-none bg-accented" />
|
||||
<div class="flex flex-1 flex-col gap-1.5">
|
||||
<USkeleton
|
||||
class="h-3 rounded-none bg-accented"
|
||||
:class="SKELETON_SENTENCE_WIDTHS[n - 1]"
|
||||
/>
|
||||
<USkeleton class="h-2.5 w-7/20 rounded-none bg-accented" />
|
||||
</div>
|
||||
<USkeleton
|
||||
class="h-3 rounded-none bg-accented"
|
||||
:class="SKELETON_SENTENCE_WIDTHS[n - 1]"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<UAlert
|
||||
@@ -83,13 +72,16 @@ function metaLine(item: ActivityItem, own: boolean) {
|
||||
:close="false"
|
||||
icon="i-lucide-circle-x"
|
||||
:title="t('Couldn\'t load recent activity')"
|
||||
:description="t('Check your connection and try again.')"
|
||||
:ui="{ actions: 'mt-2' }"
|
||||
>
|
||||
<template #actions>
|
||||
<UButton
|
||||
color="neutral"
|
||||
variant="outline"
|
||||
icon="i-lucide-rotate-cw"
|
||||
class="h-11 border border-accented bg-default px-2.5 text-xs text-highlighted ring-0 lg:h-7"
|
||||
:ui="{ leadingIcon: 'size-3.5' }"
|
||||
@click="$emit('retry')"
|
||||
>
|
||||
{{ t('Try again') }}
|
||||
@@ -100,11 +92,11 @@ function metaLine(item: ActivityItem, own: boolean) {
|
||||
<div
|
||||
v-else-if="items.length === 0"
|
||||
data-testid="recent-activity-empty"
|
||||
class="flex flex-col items-center gap-1.5 py-6 text-center"
|
||||
class="flex flex-col items-center gap-1.5 border border-default bg-default px-6 py-8 text-center"
|
||||
>
|
||||
<UIcon name="i-lucide-history" class="size-5 text-muted" />
|
||||
<span class="font-semibold text-highlighted">{{ t('No activity yet') }}</span>
|
||||
<span class="max-w-60 text-muted">
|
||||
<span class="max-w-65 text-muted">
|
||||
{{
|
||||
own
|
||||
? t('Your actions will appear here.')
|
||||
@@ -113,26 +105,23 @@ function metaLine(item: ActivityItem, own: boolean) {
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<ul v-else class="flex flex-col">
|
||||
<ul v-else class="border border-default bg-default">
|
||||
<li
|
||||
v-for="(item, index) in items"
|
||||
:key="item.id"
|
||||
data-testid="recent-activity-row"
|
||||
class="flex items-start gap-2.5 py-2.5"
|
||||
class="flex min-h-13 items-center gap-3 px-3 py-2 lg:min-h-11"
|
||||
:class="index > 0 ? 'border-t border-muted' : ''"
|
||||
>
|
||||
<ActivityAvatar :actor="item.actor" />
|
||||
<div class="flex min-w-0 flex-1 flex-col gap-0.5">
|
||||
<span
|
||||
class="line-clamp-2 text-default wrap-anywhere"
|
||||
data-testid="recent-activity-sentence"
|
||||
>
|
||||
<div class="flex min-w-0 flex-1 flex-col">
|
||||
<span class="truncate text-default" data-testid="recent-activity-sentence">
|
||||
<ActivitySentence :item="item" />
|
||||
</span>
|
||||
<span
|
||||
data-testid="recent-activity-meta"
|
||||
:title="fullLocalTime(item.created_at)"
|
||||
class="truncate text-xs/5 text-muted"
|
||||
class="truncate text-xs text-muted"
|
||||
>
|
||||
{{ metaLine(item, own) }}
|
||||
</span>
|
||||
@@ -146,5 +135,5 @@ function metaLine(item: ActivityItem, own: boolean) {
|
||||
/>
|
||||
</li>
|
||||
</ul>
|
||||
</UCard>
|
||||
</section>
|
||||
</template>
|
||||
@@ -193,7 +193,7 @@ function reviewDuplicates() {
|
||||
<template v-else>
|
||||
<div class="flex items-start gap-3">
|
||||
<div class="flex min-w-0 flex-1 flex-col gap-0.5">
|
||||
<h2 id="media-cleanup-h" class="text-lg font-semibold text-highlighted">
|
||||
<h2 id="media-cleanup-h" class="text-[0.9375rem]/6 font-semibold text-highlighted">
|
||||
{{ t('Media cleanup') }}
|
||||
</h2>
|
||||
<p class="text-pretty text-muted">
|
||||
|
||||
@@ -146,23 +146,20 @@ onBeforeUnmount(clearSavedTimer)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<UCard
|
||||
as="section"
|
||||
<section
|
||||
aria-labelledby="retention-h"
|
||||
data-testid="retention-card"
|
||||
:aria-busy="skeletonVisible ? 'true' : undefined"
|
||||
:ui="{
|
||||
root: 'rounded-none border border-default bg-default shadow-none ring-0 divide-y-0',
|
||||
header: 'flex items-center gap-2 border-b border-default px-4 py-3 sm:px-4 sm:py-3',
|
||||
body: 'flex flex-col gap-4 p-4 sm:p-4',
|
||||
}"
|
||||
class="flex flex-col gap-4 border border-default bg-default p-4 lg:p-5"
|
||||
>
|
||||
<template #header>
|
||||
<div class="flex min-w-0 flex-1 flex-col">
|
||||
<h2 id="retention-h" class="text-base font-semibold text-highlighted">
|
||||
<div class="flex items-start gap-3">
|
||||
<div class="flex min-w-0 flex-1 flex-col gap-0.5">
|
||||
<h2 id="retention-h" class="text-[0.9375rem]/6 font-semibold text-highlighted">
|
||||
{{ t('Retention') }}
|
||||
</h2>
|
||||
<p class="text-xs text-muted">{{ t('How long activity is kept.') }}</p>
|
||||
<p class="text-pretty text-muted">
|
||||
{{ t('How long activity is kept. Only owners can change it.') }}
|
||||
</p>
|
||||
</div>
|
||||
<span
|
||||
aria-live="polite"
|
||||
@@ -184,7 +181,7 @@ onBeforeUnmount(clearSavedTimer)
|
||||
{{ t('Saved') }}
|
||||
</span>
|
||||
</span>
|
||||
</template>
|
||||
</div>
|
||||
|
||||
<template v-if="skeletonVisible">
|
||||
<USkeleton :class="[SKELETON_BAR, 'h-3.5 w-30']" />
|
||||
@@ -244,10 +241,13 @@ onBeforeUnmount(clearSavedTimer)
|
||||
</template>
|
||||
</UAlert>
|
||||
|
||||
<div class="flex max-w-65 flex-col gap-1.5">
|
||||
<span id="retention-label" class="font-medium text-highlighted">
|
||||
{{ t('Keep activity for') }}
|
||||
</span>
|
||||
<div class="flex flex-col gap-3 md:flex-row md:items-start md:justify-between md:gap-4">
|
||||
<div class="flex min-w-0 flex-col gap-0.5">
|
||||
<span id="retention-label" class="font-medium text-highlighted">
|
||||
{{ t('Keep activity for') }}
|
||||
</span>
|
||||
<span class="text-xs text-muted">{{ helperCopy(selected) }}</span>
|
||||
</div>
|
||||
<USelectMenu
|
||||
:model-value="selected"
|
||||
:items="options"
|
||||
@@ -257,15 +257,14 @@ onBeforeUnmount(clearSavedTimer)
|
||||
aria-labelledby="retention-label"
|
||||
color="neutral"
|
||||
variant="outline"
|
||||
class="w-full"
|
||||
class="w-full md:w-40"
|
||||
:ui="{
|
||||
base: 'h-11 rounded-none border border-accented bg-default px-2.5 text-sm ring-0 md:h-8',
|
||||
trailingIcon: 'size-3.5 text-muted',
|
||||
base: 'h-11 rounded-none border border-accented bg-default px-3 text-base ring-0 md:h-8 md:text-sm',
|
||||
trailingIcon: 'size-4 text-muted',
|
||||
content: 'min-w-48',
|
||||
}"
|
||||
@update:model-value="choose($event as number)"
|
||||
/>
|
||||
<span class="text-xs text-muted">{{ helperCopy(selected) }}</span>
|
||||
</div>
|
||||
|
||||
<UAlert
|
||||
@@ -316,22 +315,20 @@ onBeforeUnmount(clearSavedTimer)
|
||||
"
|
||||
/>
|
||||
|
||||
<USeparator />
|
||||
|
||||
<dl class="flex flex-col gap-1.5">
|
||||
<div class="flex flex-col md:flex-row md:gap-3">
|
||||
<dt class="shrink-0 text-muted md:w-30">{{ t('Last cleanup') }}</dt>
|
||||
<dd data-testid="retention-last" class="text-highlighted">
|
||||
<dl class="flex flex-col gap-1 text-toned">
|
||||
<div class="flex flex-wrap gap-x-1">
|
||||
<dt class="after:content-[':']">{{ t('Last cleanup') }}</dt>
|
||||
<dd data-testid="retention-last">
|
||||
{{ lastCleanupLine(settings) }}
|
||||
</dd>
|
||||
</div>
|
||||
<div class="flex flex-col md:flex-row md:gap-3">
|
||||
<dt class="shrink-0 text-muted md:w-30">{{ t('Next cleanup') }}</dt>
|
||||
<div class="flex flex-wrap gap-x-1">
|
||||
<dt class="after:content-[':']">{{ t('Next cleanup') }}</dt>
|
||||
<dd data-testid="retention-next" class="text-highlighted">
|
||||
{{ nextCleanupLine(settings) }}
|
||||
</dd>
|
||||
</div>
|
||||
</dl>
|
||||
</template>
|
||||
</UCard>
|
||||
</section>
|
||||
</template>
|
||||
@@ -412,6 +412,7 @@ const block = computed<Block>(() => {
|
||||
"This site can't update itself from the browser yet. Whoever manages your server can set it up once, or update RenewCMS for you.",
|
||||
)
|
||||
},
|
||||
meta: lastChecked.value,
|
||||
}
|
||||
}
|
||||
if (props.status.available) {
|
||||
@@ -427,6 +428,7 @@ const block = computed<Block>(() => {
|
||||
[props.status.current],
|
||||
)
|
||||
},
|
||||
meta: lastChecked.value,
|
||||
}
|
||||
}
|
||||
return {
|
||||
@@ -602,7 +604,7 @@ const notes = computed(() => {
|
||||
id="updates-h"
|
||||
ref="heading"
|
||||
tabindex="-1"
|
||||
class="self-start text-lg font-semibold text-highlighted focus:outline-2 focus:outline-offset-4 focus:outline-primary"
|
||||
class="self-start text-[0.9375rem]/6 font-semibold text-highlighted focus:outline-2 focus:outline-offset-4 focus:outline-primary"
|
||||
>
|
||||
{{ t('Updates') }}
|
||||
</h2>
|
||||
@@ -689,7 +691,7 @@ const notes = computed(() => {
|
||||
class="inline-flex items-center gap-1.5 self-start text-sm font-medium text-highlighted underline underline-offset-3"
|
||||
>
|
||||
{{ t('How to update') }}
|
||||
<UIcon name="i-lucide-arrow-up-right" class="size-3.5" />
|
||||
<UIcon name="i-lucide-external-link" class="size-3.5" />
|
||||
</a>
|
||||
|
||||
<a
|
||||
@@ -700,7 +702,7 @@ const notes = computed(() => {
|
||||
class="inline-flex items-center gap-1.5 self-start text-sm font-medium text-highlighted underline underline-offset-3"
|
||||
>
|
||||
{{ t('How to update') }}
|
||||
<UIcon name="i-lucide-arrow-up-right" class="size-3.5" />
|
||||
<UIcon name="i-lucide-external-link" class="size-3.5" />
|
||||
</a>
|
||||
|
||||
<a
|
||||
@@ -711,7 +713,7 @@ const notes = computed(() => {
|
||||
class="inline-flex items-center gap-1.5 self-start text-sm font-medium text-highlighted underline underline-offset-3"
|
||||
>
|
||||
{{ t('Read the release notes') }}
|
||||
<UIcon name="i-lucide-arrow-up-right" class="size-3.5" />
|
||||
<UIcon name="i-lucide-external-link" class="size-3.5" />
|
||||
</a>
|
||||
</section>
|
||||
</template>
|
||||
@@ -1193,7 +1193,8 @@ export const messages = {
|
||||
'Actions on your site will appear here.': 'Les actions sur votre site apparaîtront ici.',
|
||||
'Your actions will appear here.': 'Vos actions apparaîtront ici.',
|
||||
Retention: 'Conservation',
|
||||
'How long activity is kept.': 'Durée de conservation de l’activité.',
|
||||
'How long activity is kept. Only owners can change it.':
|
||||
'Durée de conservation de l’activité. Seul le propriétaire peut la modifier.',
|
||||
'Keep activity for': 'Conserver l’activité pendant',
|
||||
'90 days': '90 jours',
|
||||
'365 days': '365 jours',
|
||||
|
||||
+150
-153
@@ -206,167 +206,164 @@ onMounted(loadArticles)
|
||||
@dismiss="dismissBanner"
|
||||
/>
|
||||
|
||||
<div
|
||||
class="grid grid-cols-1 gap-4 lg:grid-cols-[minmax(0,1fr)_--spacing(105)] lg:items-start"
|
||||
>
|
||||
<RecentActivityCard class="lg:order-2" />
|
||||
<div class="flex min-w-0 flex-col gap-5 lg:order-1 lg:gap-7">
|
||||
<template
|
||||
v-if="(loadState === 'loading' && showSkeleton) || loadState === 'default'"
|
||||
>
|
||||
<div class="grid grid-cols-3 gap-3">
|
||||
<div
|
||||
v-for="tile in statTiles"
|
||||
:key="tile.label"
|
||||
data-testid="stat-tile"
|
||||
class="flex flex-col gap-1 border border-default bg-default p-4"
|
||||
>
|
||||
<template v-if="loadState === 'loading'">
|
||||
<USkeleton class="h-7 w-10 rounded-none bg-accented" />
|
||||
<USkeleton class="h-3 w-17.5 rounded-none bg-accented" />
|
||||
</template>
|
||||
<template v-else>
|
||||
<span class="text-2xl font-semibold text-highlighted">{{
|
||||
formatNumber(tile.value)
|
||||
}}</span>
|
||||
<span class="text-muted">{{ tile.label }}</span>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<section class="flex flex-col gap-2.5">
|
||||
<div class="flex items-baseline justify-between">
|
||||
<h2 class="text-lg font-semibold text-highlighted">
|
||||
{{ t('Recently updated') }}
|
||||
</h2>
|
||||
<RouterLink
|
||||
to="/article"
|
||||
class="text-toned underline underline-offset-3"
|
||||
>
|
||||
{{ t('All articles') }}
|
||||
</RouterLink>
|
||||
</div>
|
||||
<div
|
||||
v-if="loadState === 'loading'"
|
||||
aria-busy="true"
|
||||
class="border border-default bg-default"
|
||||
>
|
||||
<div
|
||||
v-for="n in RECENT_LIST_SIZE"
|
||||
:key="n"
|
||||
class="flex min-h-13 items-center gap-3 border-t border-muted px-3 py-2 lg:min-h-11"
|
||||
>
|
||||
<USkeleton
|
||||
class="h-3 max-w-[60%] flex-1 rounded-none bg-accented"
|
||||
/>
|
||||
<USkeleton class="h-5 w-14 rounded-none bg-accented" />
|
||||
</div>
|
||||
</div>
|
||||
<ul
|
||||
v-else
|
||||
data-testid="recent-list"
|
||||
class="border border-default bg-default"
|
||||
>
|
||||
<li v-for="article in recentArticles" :key="article.id">
|
||||
<RouterLink
|
||||
:to="`/article/${article.id}/edit`"
|
||||
class="flex min-h-13 items-center gap-3 border-t border-muted px-3 py-2 lg:min-h-11"
|
||||
>
|
||||
<span
|
||||
class="min-w-0 flex-1 truncate font-medium text-highlighted"
|
||||
>
|
||||
{{ article.title }}
|
||||
</span>
|
||||
<ArticleStatusBadge :online="article.is_online" />
|
||||
<span class="hidden w-27.5 text-right text-muted lg:inline">
|
||||
{{ formatRelativeDate(article.updated_at) }}
|
||||
</span>
|
||||
</RouterLink>
|
||||
</li>
|
||||
</ul>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<UEmpty
|
||||
v-else-if="loadState === 'empty'"
|
||||
variant="outline"
|
||||
icon="i-lucide-file-text"
|
||||
:title="t('Write your first article')"
|
||||
:description="
|
||||
t(
|
||||
'It starts as a draft, so nothing appears on your site until you publish it.',
|
||||
)
|
||||
"
|
||||
:ui="{
|
||||
root: 'gap-3 rounded-none border border-default px-6 py-12 ring-0 sm:px-6 sm:py-12 lg:px-6 lg:py-12',
|
||||
header: 'max-w-none gap-3',
|
||||
avatar: 'mb-0 size-11 rounded-none bg-elevated text-xl text-toned',
|
||||
title: 'text-[1.125rem] font-semibold',
|
||||
description: 'max-w-85 text-base text-wrap text-muted',
|
||||
body: 'max-w-none',
|
||||
}"
|
||||
>
|
||||
<template #actions>
|
||||
<UButton
|
||||
icon="i-lucide-plus"
|
||||
class="h-11 px-4 lg:h-8"
|
||||
@click="openNewArticleModal"
|
||||
>
|
||||
{{ t('New article') }}
|
||||
</UButton>
|
||||
</template>
|
||||
</UEmpty>
|
||||
|
||||
<UAlert
|
||||
v-else-if="loadState === 'error'"
|
||||
role="alert"
|
||||
color="error"
|
||||
variant="soft"
|
||||
orientation="vertical"
|
||||
:close="false"
|
||||
icon="i-lucide-circle-x"
|
||||
:title="t('Couldn\'t load your articles')"
|
||||
:description="t('Check your connection and try again.')"
|
||||
:ui="{ actions: 'mt-2' }"
|
||||
>
|
||||
<template #actions>
|
||||
<UButton
|
||||
color="neutral"
|
||||
variant="outline"
|
||||
icon="i-lucide-rotate-cw"
|
||||
class="h-7 bg-default px-2.5 text-xs text-highlighted"
|
||||
:ui="{ leadingIcon: 'size-3.5' }"
|
||||
@click="loadArticles"
|
||||
>
|
||||
{{ t('Try again') }}
|
||||
</UButton>
|
||||
</template>
|
||||
</UAlert>
|
||||
|
||||
<div class="flex items-start gap-3.5 border border-default bg-default p-4">
|
||||
<div class="flex min-w-0 flex-col gap-5 lg:gap-7">
|
||||
<template
|
||||
v-if="(loadState === 'loading' && showSkeleton) || loadState === 'default'"
|
||||
>
|
||||
<div class="grid grid-cols-3 gap-3">
|
||||
<div
|
||||
class="flex size-9 shrink-0 items-center justify-center bg-secondary-200 text-primary-900 dark:bg-secondary-300"
|
||||
v-for="tile in statTiles"
|
||||
:key="tile.label"
|
||||
data-testid="stat-tile"
|
||||
class="flex flex-col gap-1 border border-default bg-default p-4"
|
||||
>
|
||||
<UIcon name="i-lucide-plug" class="size-4.5" />
|
||||
<template v-if="loadState === 'loading'">
|
||||
<USkeleton class="h-7 w-10 rounded-none bg-accented" />
|
||||
<USkeleton class="h-3 w-17.5 rounded-none bg-accented" />
|
||||
</template>
|
||||
<template v-else>
|
||||
<span class="text-2xl font-semibold text-highlighted">{{
|
||||
formatNumber(tile.value)
|
||||
}}</span>
|
||||
<span class="text-muted">{{ tile.label }}</span>
|
||||
</template>
|
||||
</div>
|
||||
<div class="flex flex-1 flex-col gap-1">
|
||||
<h2 class="text-base/5 font-semibold text-highlighted">
|
||||
{{ t('Connect your website') }}
|
||||
</div>
|
||||
|
||||
<section class="flex flex-col gap-2.5">
|
||||
<div class="flex items-baseline justify-between">
|
||||
<h2 class="text-base/6 font-semibold text-highlighted">
|
||||
{{ t('Recently updated') }}
|
||||
</h2>
|
||||
<p class="text-pretty text-muted">
|
||||
{{
|
||||
t(
|
||||
'Your site reads published articles from RenewCMS. Share this guide with whoever builds it.',
|
||||
)
|
||||
}}
|
||||
</p>
|
||||
<RouterLink
|
||||
to="/integration"
|
||||
class="mt-1 self-start font-medium text-highlighted underline underline-offset-3"
|
||||
to="/article"
|
||||
class="text-toned underline underline-offset-3"
|
||||
>
|
||||
{{ t('Open the guide') }}
|
||||
{{ t('All articles') }}
|
||||
</RouterLink>
|
||||
</div>
|
||||
<div
|
||||
v-if="loadState === 'loading'"
|
||||
aria-busy="true"
|
||||
class="border border-default bg-default"
|
||||
>
|
||||
<div
|
||||
v-for="n in RECENT_LIST_SIZE"
|
||||
:key="n"
|
||||
class="flex min-h-13 items-center gap-3 border-t border-muted px-3 py-2 lg:min-h-11"
|
||||
>
|
||||
<USkeleton
|
||||
class="h-3 max-w-[60%] flex-1 rounded-none bg-accented"
|
||||
/>
|
||||
<USkeleton class="h-5 w-14 rounded-none bg-accented" />
|
||||
</div>
|
||||
</div>
|
||||
<ul
|
||||
v-else
|
||||
data-testid="recent-list"
|
||||
class="border border-default bg-default"
|
||||
>
|
||||
<li v-for="article in recentArticles" :key="article.id">
|
||||
<RouterLink
|
||||
:to="`/article/${article.id}/edit`"
|
||||
class="flex min-h-13 items-center gap-3 border-t border-muted px-3 py-2 lg:min-h-11"
|
||||
>
|
||||
<span
|
||||
class="min-w-0 flex-1 truncate font-medium text-highlighted"
|
||||
>
|
||||
{{ article.title }}
|
||||
</span>
|
||||
<ArticleStatusBadge :online="article.is_online" />
|
||||
<span class="hidden w-27.5 text-right text-muted lg:inline">
|
||||
{{ formatRelativeDate(article.updated_at) }}
|
||||
</span>
|
||||
</RouterLink>
|
||||
</li>
|
||||
</ul>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<UEmpty
|
||||
v-else-if="loadState === 'empty'"
|
||||
variant="outline"
|
||||
icon="i-lucide-file-text"
|
||||
:title="t('Write your first article')"
|
||||
:description="
|
||||
t(
|
||||
'It starts as a draft, so nothing appears on your site until you publish it.',
|
||||
)
|
||||
"
|
||||
:ui="{
|
||||
root: 'gap-3 rounded-none border border-default px-6 py-12 ring-0 sm:px-6 sm:py-12 lg:px-6 lg:py-12',
|
||||
header: 'max-w-none gap-3',
|
||||
avatar: 'mb-0 size-11 rounded-none bg-elevated text-xl text-toned',
|
||||
title: 'text-[1.125rem] font-semibold',
|
||||
description: 'max-w-85 text-base text-wrap text-muted',
|
||||
body: 'max-w-none',
|
||||
}"
|
||||
>
|
||||
<template #actions>
|
||||
<UButton
|
||||
icon="i-lucide-plus"
|
||||
class="h-11 px-4 lg:h-8"
|
||||
@click="openNewArticleModal"
|
||||
>
|
||||
{{ t('New article') }}
|
||||
</UButton>
|
||||
</template>
|
||||
</UEmpty>
|
||||
|
||||
<UAlert
|
||||
v-else-if="loadState === 'error'"
|
||||
role="alert"
|
||||
color="error"
|
||||
variant="soft"
|
||||
orientation="vertical"
|
||||
:close="false"
|
||||
icon="i-lucide-circle-x"
|
||||
:title="t('Couldn\'t load your articles')"
|
||||
:description="t('Check your connection and try again.')"
|
||||
:ui="{ actions: 'mt-2' }"
|
||||
>
|
||||
<template #actions>
|
||||
<UButton
|
||||
color="neutral"
|
||||
variant="outline"
|
||||
icon="i-lucide-rotate-cw"
|
||||
class="h-7 bg-default px-2.5 text-xs text-highlighted"
|
||||
:ui="{ leadingIcon: 'size-3.5' }"
|
||||
@click="loadArticles"
|
||||
>
|
||||
{{ t('Try again') }}
|
||||
</UButton>
|
||||
</template>
|
||||
</UAlert>
|
||||
|
||||
<RecentActivityCard />
|
||||
|
||||
<div class="flex items-start gap-3.5 border border-default bg-default p-4">
|
||||
<div
|
||||
class="flex size-9 shrink-0 items-center justify-center bg-secondary-200 text-primary-900 dark:bg-secondary-300"
|
||||
>
|
||||
<UIcon name="i-lucide-plug" class="size-4.5" />
|
||||
</div>
|
||||
<div class="flex flex-1 flex-col gap-1">
|
||||
<h2 class="text-base/5 font-semibold text-highlighted">
|
||||
{{ t('Connect your website') }}
|
||||
</h2>
|
||||
<p class="text-pretty text-muted">
|
||||
{{
|
||||
t(
|
||||
'Your site reads published articles from RenewCMS. Share this guide with whoever builds it.',
|
||||
)
|
||||
}}
|
||||
</p>
|
||||
<RouterLink
|
||||
to="/integration"
|
||||
class="mt-1 self-start font-medium text-highlighted underline underline-offset-3"
|
||||
>
|
||||
{{ t('Open the guide') }}
|
||||
</RouterLink>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -430,7 +430,7 @@ onBeforeUnmount(() => {
|
||||
</UAlert>
|
||||
|
||||
<div v-else class="flex items-center justify-between gap-4">
|
||||
<span class="text-lg font-semibold text-highlighted">{{ t('Version') }}</span>
|
||||
<span class="text-[0.9375rem]/6 font-semibold text-highlighted">{{ t('Version') }}</span>
|
||||
<USkeleton
|
||||
v-if="loadState === 'loading' && showSkeleton"
|
||||
data-testid="settings-skeleton"
|
||||
|
||||
@@ -198,14 +198,16 @@ describe('Home rows, unknown action, failed login and not interactive', () => {
|
||||
expect(router.currentRoute.value.path).toBe('/home')
|
||||
})
|
||||
|
||||
it('clamps a long sentence to two lines', async () => {
|
||||
it('truncates a long sentence on one line', async () => {
|
||||
const items = [makeItem({ id: 1, target: target('article', '8', 'T'.repeat(150)) })]
|
||||
await mountHome('owner', {
|
||||
[ACTIVITY_ROUTE]: () => page(items),
|
||||
[ARTICLES_ROUTE]: () => response(200, articles),
|
||||
})
|
||||
|
||||
expect(rows()[0]!.find('.line-clamp-2').exists()).toBe(true)
|
||||
expect(rows()[0]!.find('[data-testid="recent-activity-sentence"]').classes()).toContain(
|
||||
'truncate',
|
||||
)
|
||||
expect(rows()[0]!.find('[data-testid="recent-activity-meta"]').classes()).toContain(
|
||||
'truncate',
|
||||
)
|
||||
@@ -322,22 +324,19 @@ describe('Home card and article list are independent', () => {
|
||||
})
|
||||
})
|
||||
|
||||
describe('Home layout is two columns from lg and stacked below', () => {
|
||||
it('uses the lg two-column grid with the 420 px column and no max-width cap', async () => {
|
||||
describe('Home layout puts Recent activity full width below Recently updated', () => {
|
||||
it('renders the section after the recent list inside the same single column', async () => {
|
||||
await mountHome('owner', {
|
||||
[ACTIVITY_ROUTE]: () => page(recentItems(1)),
|
||||
[ARTICLES_ROUTE]: () => response(200, articles),
|
||||
})
|
||||
|
||||
const grid = card().element.parentElement!
|
||||
expect(grid.className).toContain('lg:grid-cols-[minmax(0,1fr)_--spacing(105)]')
|
||||
expect(grid.className).toContain('lg:items-start')
|
||||
expect(grid.className).toContain('gap-4')
|
||||
const capped = [grid, grid.parentElement!].some((element) =>
|
||||
/(^|\s)max-w-/.test(element.className),
|
||||
)
|
||||
expect(capped).toBe(false)
|
||||
expect(card().classes()).toContain('lg:order-2')
|
||||
const column = card().element.parentElement!
|
||||
expect(column.className).not.toContain('grid-cols')
|
||||
const list = column.querySelector('[data-testid="recent-list"]')!
|
||||
expect(
|
||||
list.compareDocumentPosition(card().element) & Node.DOCUMENT_POSITION_FOLLOWING,
|
||||
).toBeTruthy()
|
||||
})
|
||||
})
|
||||
|
||||
|
||||
Reference in new issue
Block a user