fsylvain/RenewCMS
1
1 Fork 0
Code Issues Pull Requests Packages Projects Releases 20 Wiki Activity

fix: design harmonization on last features

Browse Source
This commit is contained in:
fsylvain committed 2026-10-07 18:20:18 +02:00
1 parent 953be7342d
commit 70c8492f4f
23 files changed
+526 -840
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

web/src/components/ActivityFeedCard.vue
+24 -35
View File
@@ -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>
web/src/components/MediaCleanupCard.vue
+1 -1
View File
@@ -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">
web/src/components/RetentionCard.vue
+26 -29
View File
@@ -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>
web/src/components/UpdatesCard.vue
+6 -4
View File
@@ -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>