valknar/sexy
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style: refine admin edit forms and fix mobile padding

Browse Source 
- Remove back button from admin entity edit pages (sidebar handles navigation)
- Remove cancel button from video/article forms, make submit button full-width
- Show actual entity title + subtitle on video/article edit pages
- Remove asterisks from Title/Slug field labels in i18n
- Remove px-3 sm:px-0 from all admin list page headers/filters (fixes mobile padding)

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Sebastian Krüger
2026-03-09 18:38:38 +01:00
parent fddc3f15d0
commit 3a8fa7d8ce
12 changed files with 61 additions and 82 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
packages/frontend/src/lib/i18n/locales/en.ts
View File

@@ -951,8 +951,8 @@ export default {
cover_image: "Cover image", cover_image: "Cover image",
tags: "Tags", tags: "Tags",
publish_date: "Publish date", publish_date: "Publish date",
title_field: "Title *", title_field: "Title",
slug_field: "Slug *", slug_field: "Slug",
title_slug_required: "Title and slug are required", title_slug_required: "Title and slug are required",
image_uploaded: "Image uploaded", image_uploaded: "Image uploaded",
image_upload_failed: "Image upload failed", image_upload_failed: "Image upload failed",

6
packages/frontend/src/routes/admin/articles/+page.svelte
View File

@@ -68,7 +68,7 @@
<Meta title={$_("admin.articles.title")} description={null} /> <Meta title={$_("admin.articles.title")} description={null} />
<div class="py-3 sm:py-6 lg:pl-6"> <div class="py-3 sm:py-6 lg:pl-6">
<div class="flex items-center justify-between mb-6 px-3 sm:px-0"> <div class="flex items-center justify-between mb-6">
<h1 class="text-2xl font-bold">{$_("admin.articles.title")}</h1> <h1 class="text-2xl font-bold">{$_("admin.articles.title")}</h1>
<div class="flex items-center gap-3"> <div class="flex items-center gap-3">
<span class="text-sm text-muted-foreground" <span class="text-sm text-muted-foreground"
@@ -84,7 +84,7 @@
</div> </div>
<!-- Filters --> <!-- Filters -->
<div class="flex flex-wrap items-center gap-3 mb-4 px-3 sm:px-0"> <div class="flex flex-wrap items-center gap-3 mb-4">
<Input <Input
placeholder={$_("admin.articles.search_placeholder")} placeholder={$_("admin.articles.search_placeholder")}
class="max-w-xs" class="max-w-xs"
@@ -204,7 +204,7 @@
<!-- Pagination --> <!-- Pagination -->
{#if data.total > data.limit} {#if data.total > data.limit}
<div class="flex items-center justify-between mt-4 px-3 sm:px-0"> <div class="flex items-center justify-between mt-4">
<span class="text-sm text-muted-foreground"> <span class="text-sm text-muted-foreground">
{$_("admin.users.showing", { {$_("admin.users.showing", {
values: { values: {

27
packages/frontend/src/routes/admin/articles/[id]/+page.svelte
View File

@@ -98,11 +98,11 @@
<Meta title={$_("admin.article_form.edit_title")} description={null} /> <Meta title={$_("admin.article_form.edit_title")} description={null} />
<div class="py-3 sm:py-6 lg:pl-6"> <div class="py-3 sm:py-6 lg:pl-6">
<div class="flex items-center gap-4 mb-6"> <div class="mb-6">
<Button variant="ghost" href="/admin/articles" size="sm" class="shrink-0"> <h1 class="text-2xl font-bold">{data.article.title}</h1>
<span class="icon-[ri--arrow-left-line] h-4 w-4 mr-1"></span>{$_("common.back")} <p class="text-xs text-muted-foreground mt-0.5">
</Button> {data.article.slug}{data.article.category ? " · " + data.article.category : ""}{data.article.author ? " · " + data.article.author.artist_name : ""}
<h1 class="text-2xl font-bold">{$_("admin.article_form.edit_title")}</h1> </p>
</div> </div>
<Card class="bg-card/50 border-primary/20 max-w-4xl"> <Card class="bg-card/50 border-primary/20 max-w-4xl">
@@ -246,16 +246,13 @@
<span class="text-sm">{$_("admin.common.featured")}</span> <span class="text-sm">{$_("admin.common.featured")}</span>
</label> </label>
<div class="flex gap-3 pt-2"> <Button
<Button onclick={handleSubmit}
onclick={handleSubmit} disabled={saving}
disabled={saving} class="cursor-pointer w-full bg-gradient-to-r from-primary to-accent hover:from-primary/90 hover:to-accent/90"
class="cursor-pointer bg-gradient-to-r from-primary to-accent hover:from-primary/90 hover:to-accent/90" >
> {saving ? $_("admin.common.saving") : $_("admin.common.save_changes")}
{saving ? $_("admin.common.saving") : $_("admin.common.save_changes")} </Button>
</Button>
<Button variant="outline" href="/admin/articles">{$_("common.cancel")}</Button>
</div>
</CardContent> </CardContent>
</Card> </Card>
</div> </div>

22
packages/frontend/src/routes/admin/articles/new/+page.svelte
View File

@@ -80,10 +80,7 @@
<Meta title={$_("admin.article_form.new_title")} description={null} /> <Meta title={$_("admin.article_form.new_title")} description={null} />
<div class="py-3 sm:py-6 lg:pl-6"> <div class="py-3 sm:py-6 lg:pl-6">
<div class="flex items-center gap-4 mb-6"> <div class="mb-6">
<Button variant="ghost" href="/admin/articles" size="sm" class="shrink-0">
<span class="icon-[ri--arrow-left-line] h-4 w-4 mr-1"></span>{$_("common.back")}
</Button>
<h1 class="text-2xl font-bold">{$_("admin.article_form.new_title")}</h1> <h1 class="text-2xl font-bold">{$_("admin.article_form.new_title")}</h1>
</div> </div>
@@ -198,16 +195,13 @@
<span class="text-sm">{$_("admin.common.featured")}</span> <span class="text-sm">{$_("admin.common.featured")}</span>
</label> </label>
<div class="flex gap-3 pt-2"> <Button
<Button onclick={handleSubmit}
onclick={handleSubmit} disabled={saving}
disabled={saving} class="cursor-pointer w-full bg-gradient-to-r from-primary to-accent hover:from-primary/90 hover:to-accent/90"
class="cursor-pointer bg-gradient-to-r from-primary to-accent hover:from-primary/90 hover:to-accent/90" >
> {saving ? $_("admin.common.creating") : $_("admin.article_form.create")}
{saving ? $_("admin.common.creating") : $_("admin.article_form.create")} </Button>
</Button>
<Button variant="outline" href="/admin/articles">{$_("common.cancel")}</Button>
</div>
</CardContent> </CardContent>
</Card> </Card>
</div> </div>

6
packages/frontend/src/routes/admin/comments/+page.svelte
View File

@@ -57,14 +57,14 @@
<Meta title={$_("admin.comments.title")} description={null} /> <Meta title={$_("admin.comments.title")} description={null} />
<div class="py-3 sm:py-6 lg:pl-6"> <div class="py-3 sm:py-6 lg:pl-6">
<div class="flex items-center justify-between mb-6 px-3 sm:px-0"> <div class="flex items-center justify-between mb-6">
<h1 class="text-2xl font-bold">{$_("admin.comments.title")}</h1> <h1 class="text-2xl font-bold">{$_("admin.comments.title")}</h1>
<span class="text-sm text-muted-foreground" <span class="text-sm text-muted-foreground"
>{$_("admin.users.total", { values: { total: data.total } })}</span >{$_("admin.users.total", { values: { total: data.total } })}</span
> >
</div> </div>
<div class="flex flex-wrap gap-3 mb-4 px-3 sm:px-0"> <div class="flex flex-wrap gap-3 mb-4">
<Input <Input
placeholder={$_("admin.comments.search_placeholder")} placeholder={$_("admin.comments.search_placeholder")}
class="max-w-xs" class="max-w-xs"
@@ -153,7 +153,7 @@
</div> </div>
{#if data.total > data.limit} {#if data.total > data.limit}
<div class="flex items-center justify-between mt-4 px-3 sm:px-0"> <div class="flex items-center justify-between mt-4">
<span class="text-sm text-muted-foreground"> <span class="text-sm text-muted-foreground">
{$_("admin.users.showing", { {$_("admin.users.showing", {
values: { values: {

6
packages/frontend/src/routes/admin/queues/+page.svelte
View File

@@ -128,12 +128,12 @@
<Meta title={$_("admin.queues.title")} description={null} /> <Meta title={$_("admin.queues.title")} description={null} />
<div class="py-3 sm:py-6 lg:pl-6"> <div class="py-3 sm:py-6 lg:pl-6">
<div class="flex items-center justify-between mb-6 px-3 sm:px-0"> <div class="flex items-center justify-between mb-6">
<h1 class="text-2xl font-bold">{$_("admin.queues.title")}</h1> <h1 class="text-2xl font-bold">{$_("admin.queues.title")}</h1>
</div> </div>
<!-- Queue cards --> <!-- Queue cards -->
<div class="flex flex-wrap gap-3 mb-6 px-3 sm:px-0"> <div class="flex flex-wrap gap-3 mb-6">
{#each queues as queue (queue.name)} {#each queues as queue (queue.name)}
{@const isSelected = selectedQueue === queue.name} {@const isSelected = selectedQueue === queue.name}
<div <div
@@ -196,7 +196,7 @@
{#if selectedQueue} {#if selectedQueue}
<!-- Status filter tabs --> <!-- Status filter tabs -->
<div class="flex gap-1 mb-4 px-3 sm:px-0 flex-wrap"> <div class="flex gap-1 mb-4 flex-wrap">
{#each STATUS_FILTERS as f (f.value ?? "all")} {#each STATUS_FILTERS as f (f.value ?? "all")}
<Button <Button
variant={selectedStatus === f.value ? "default" : "outline"} variant={selectedStatus === f.value ? "default" : "outline"}

6
packages/frontend/src/routes/admin/recordings/+page.svelte
View File

@@ -67,14 +67,14 @@
<Meta title={$_("admin.recordings.title")} description={null} /> <Meta title={$_("admin.recordings.title")} description={null} />
<div class="py-3 sm:py-6 lg:pl-6"> <div class="py-3 sm:py-6 lg:pl-6">
<div class="flex items-center justify-between mb-6 px-3 sm:px-0"> <div class="flex items-center justify-between mb-6">
<h1 class="text-2xl font-bold">{$_("admin.recordings.title")}</h1> <h1 class="text-2xl font-bold">{$_("admin.recordings.title")}</h1>
<span class="text-sm text-muted-foreground" <span class="text-sm text-muted-foreground"
>{$_("admin.users.total", { values: { total: data.total } })}</span >{$_("admin.users.total", { values: { total: data.total } })}</span
> >
</div> </div>
<div class="flex flex-wrap items-center gap-3 mb-4 px-3 sm:px-0"> <div class="flex flex-wrap items-center gap-3 mb-4">
<Input <Input
placeholder={$_("admin.recordings.search_placeholder")} placeholder={$_("admin.recordings.search_placeholder")}
class="max-w-xs" class="max-w-xs"
@@ -177,7 +177,7 @@
</div> </div>
{#if data.total > data.limit} {#if data.total > data.limit}
<div class="flex items-center justify-between mt-4 px-3 sm:px-0"> <div class="flex items-center justify-between mt-4">
<span class="text-sm text-muted-foreground"> <span class="text-sm text-muted-foreground">
{$_("admin.users.showing", { {$_("admin.users.showing", {
values: { values: {

6
packages/frontend/src/routes/admin/users/+page.svelte
View File

@@ -88,7 +88,7 @@
<Meta title={$_("admin.users.title")} description={null} /> <Meta title={$_("admin.users.title")} description={null} />
<div class="py-3 sm:py-6 lg:pl-6"> <div class="py-3 sm:py-6 lg:pl-6">
<div class="flex items-center justify-between mb-6 px-3 sm:px-0"> <div class="flex items-center justify-between mb-6">
<h1 class="text-2xl font-bold">{$_("admin.users.title")}</h1> <h1 class="text-2xl font-bold">{$_("admin.users.title")}</h1>
<span class="text-sm text-muted-foreground" <span class="text-sm text-muted-foreground"
>{$_("admin.users.total", { values: { total: data.total } })}</span >{$_("admin.users.total", { values: { total: data.total } })}</span
@@ -96,7 +96,7 @@
</div> </div>
<!-- Filters --> <!-- Filters -->
<div class="flex flex-wrap items-center gap-3 mb-4 px-3 sm:px-0"> <div class="flex flex-wrap items-center gap-3 mb-4">
<Input <Input
placeholder={$_("admin.users.search_placeholder")} placeholder={$_("admin.users.search_placeholder")}
class="max-w-xs" class="max-w-xs"
@@ -228,7 +228,7 @@
<!-- Pagination --> <!-- Pagination -->
{#if data.total > data.limit} {#if data.total > data.limit}
<div class="flex items-center justify-between mt-4 px-3 sm:px-0"> <div class="flex items-center justify-between mt-4">
<span class="text-sm text-muted-foreground"> <span class="text-sm text-muted-foreground">
{$_("admin.users.showing", { {$_("admin.users.showing", {
values: { values: {

5
packages/frontend/src/routes/admin/users/[id]/+page.svelte
View File

@@ -130,10 +130,7 @@
<Meta title={data.user.artist_name || data.user.email} description={null} /> <Meta title={data.user.artist_name || data.user.email} description={null} />
<div class="py-3 sm:py-6 lg:pl-6"> <div class="py-3 sm:py-6 lg:pl-6">
<div class="flex items-center gap-4 mb-6"> <div class="mb-6">
<Button variant="ghost" href="/admin/users" size="sm" class="shrink-0">
<span class="icon-[ri--arrow-left-line] h-4 w-4 mr-1"></span>{$_("common.back")}
</Button>
<div> <div>
<h1 class="text-2xl font-bold">{data.user.artist_name || data.user.email}</h1> <h1 class="text-2xl font-bold">{data.user.artist_name || data.user.email}</h1>
<p class="text-xs text-muted-foreground"> <p class="text-xs text-muted-foreground">

6
packages/frontend/src/routes/admin/videos/+page.svelte
View File

@@ -65,7 +65,7 @@
<Meta title={$_("admin.videos.title")} description={null} /> <Meta title={$_("admin.videos.title")} description={null} />
<div class="py-3 sm:py-6 lg:pl-6"> <div class="py-3 sm:py-6 lg:pl-6">
<div class="flex items-center justify-between mb-6 px-3 sm:px-0"> <div class="flex items-center justify-between mb-6">
<h1 class="text-2xl font-bold">{$_("admin.videos.title")}</h1> <h1 class="text-2xl font-bold">{$_("admin.videos.title")}</h1>
<div class="flex items-center gap-3"> <div class="flex items-center gap-3">
<span class="text-sm text-muted-foreground" <span class="text-sm text-muted-foreground"
@@ -81,7 +81,7 @@
</div> </div>
<!-- Filters --> <!-- Filters -->
<div class="flex flex-wrap items-center gap-3 mb-4 px-3 sm:px-0"> <div class="flex flex-wrap items-center gap-3 mb-4">
<Input <Input
placeholder={$_("admin.videos.search_placeholder")} placeholder={$_("admin.videos.search_placeholder")}
class="max-w-xs" class="max-w-xs"
@@ -209,7 +209,7 @@
<!-- Pagination --> <!-- Pagination -->
{#if data.total > data.limit} {#if data.total > data.limit}
<div class="flex items-center justify-between mt-4 px-3 sm:px-0"> <div class="flex items-center justify-between mt-4">
<span class="text-sm text-muted-foreground"> <span class="text-sm text-muted-foreground">
{$_("admin.users.showing", { {$_("admin.users.showing", {
values: { values: {

27
packages/frontend/src/routes/admin/videos/[id]/+page.svelte
View File

@@ -107,11 +107,11 @@
<Meta title={$_("admin.video_form.edit_title")} description={null} /> <Meta title={$_("admin.video_form.edit_title")} description={null} />
<div class="py-3 sm:py-6 lg:pl-6"> <div class="py-3 sm:py-6 lg:pl-6">
<div class="flex items-center gap-4 mb-6"> <div class="mb-6">
<Button variant="ghost" href="/admin/videos" size="sm" class="shrink-0"> <h1 class="text-2xl font-bold">{data.video.title}</h1>
<span class="icon-[ri--arrow-left-line] h-4 w-4 mr-1"></span>{$_("common.back")} <p class="text-xs text-muted-foreground mt-0.5">
</Button> {data.video.slug}{data.video.premium ? " · premium" : ""}{data.video.featured ? " · featured" : ""}
<h1 class="text-2xl font-bold">{$_("admin.video_form.edit_title")}</h1> </p>
</div> </div>
<Card class="bg-card/50 border-primary/20 max-w-2xl"> <Card class="bg-card/50 border-primary/20 max-w-2xl">
@@ -231,16 +231,13 @@
</div> </div>
{/if} {/if}
<div class="flex gap-3 pt-2"> <Button
<Button onclick={handleSubmit}
onclick={handleSubmit} disabled={saving}
disabled={saving} class="cursor-pointer w-full bg-gradient-to-r from-primary to-accent hover:from-primary/90 hover:to-accent/90"
class="cursor-pointer bg-gradient-to-r from-primary to-accent hover:from-primary/90 hover:to-accent/90" >
> {saving ? $_("admin.common.saving") : $_("admin.common.save_changes")}
{saving ? $_("admin.common.saving") : $_("admin.common.save_changes")} </Button>
</Button>
<Button variant="outline" href="/admin/videos">{$_("common.cancel")}</Button>
</div>
</CardContent> </CardContent>
</Card> </Card>
</div> </div>

22
packages/frontend/src/routes/admin/videos/new/+page.svelte
View File

@@ -102,10 +102,7 @@
<Meta title={$_("admin.video_form.new_title")} description={null} /> <Meta title={$_("admin.video_form.new_title")} description={null} />
<div class="py-3 sm:py-6 lg:pl-6"> <div class="py-3 sm:py-6 lg:pl-6">
<div class="flex items-center gap-4 mb-6"> <div class="mb-6">
<Button variant="ghost" href="/admin/videos" size="sm" class="shrink-0">
<span class="icon-[ri--arrow-left-line] h-4 w-4 mr-1"></span>{$_("common.back")}
</Button>
<h1 class="text-2xl font-bold">{$_("admin.video_form.new_title")}</h1> <h1 class="text-2xl font-bold">{$_("admin.video_form.new_title")}</h1>
</div> </div>
@@ -209,16 +206,13 @@
</div> </div>
{/if} {/if}
<div class="flex gap-3 pt-2"> <Button
<Button onclick={handleSubmit}
onclick={handleSubmit} disabled={saving}
disabled={saving} class="cursor-pointer w-full bg-gradient-to-r from-primary to-accent hover:from-primary/90 hover:to-accent/90"
class="cursor-pointer bg-gradient-to-r from-primary to-accent hover:from-primary/90 hover:to-accent/90" >
> {saving ? $_("admin.common.creating") : $_("admin.video_form.create")}
{saving ? $_("admin.common.creating") : $_("admin.video_form.create")} </Button>
</Button>
<Button variant="outline" href="/admin/videos">{$_("common.cancel")}</Button>
</div>
</CardContent> </CardContent>
</Card> </Card>
</div> </div>