style : align design with SIRH/Lesstime visual patterns
- Remove max-width constraint, use responsive padding (px-4 sm:px-8 lg:px-16) - Replace heavy border cards with bg-tertiary-500 backgrounds - Use primary-500 colored titles like SIRH - Use neutral color palette instead of m-* custom colors - Auto-fill grid for responsive card layout - Consistent button styles with SIRH/Lesstime patterns Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -46,23 +46,23 @@ onMounted(loadApplications)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="p-6 max-w-6xl mx-auto">
|
||||
<div class="flex items-center justify-between mb-6">
|
||||
<div>
|
||||
<h1 class="text-2xl font-bold text-m-text">{{ t('applications.title') }}</h1>
|
||||
<p class="text-m-muted mt-1">{{ t('applications.description') }}</p>
|
||||
</div>
|
||||
<MalioButton @click="showCreateForm = !showCreateForm">
|
||||
{{ t('applications.addButton') }}
|
||||
</MalioButton>
|
||||
<div class="px-4 py-8 sm:px-8 lg:px-16">
|
||||
<div class="flex items-center justify-between pb-6">
|
||||
<h1 class="text-2xl font-bold text-primary-500 sm:text-4xl">{{ t('applications.title') }}</h1>
|
||||
<button
|
||||
class="rounded-lg bg-primary-500 px-4 py-2 text-sm font-semibold text-white hover:bg-secondary-500"
|
||||
@click="showCreateForm = !showCreateForm"
|
||||
>
|
||||
+ {{ t('applications.addButton') }}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Create form -->
|
||||
<div v-if="showCreateForm" class="bg-m-surface border border-m-border rounded-lg p-6 mb-6">
|
||||
<div v-if="showCreateForm" class="rounded-lg border border-neutral-200 bg-white p-6 mb-8">
|
||||
<form @submit.prevent="handleCreate" class="space-y-4">
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-m-text mb-1">{{ t('applications.form.name') }}</label>
|
||||
<label class="block text-sm font-semibold text-neutral-700 mb-1">{{ t('applications.form.name') }}</label>
|
||||
<MalioInputText
|
||||
v-model="createForm.name"
|
||||
@update:model-value="generateSlug"
|
||||
@@ -70,30 +70,34 @@ onMounted(loadApplications)
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-m-text mb-1">{{ t('applications.form.slug') }}</label>
|
||||
<label class="block text-sm font-semibold text-neutral-700 mb-1">{{ t('applications.form.slug') }}</label>
|
||||
<MalioInputText v-model="createForm.slug" required />
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-m-text mb-1">{{ t('applications.form.registryImage') }}</label>
|
||||
<label class="block text-sm font-semibold text-neutral-700 mb-1">{{ t('applications.form.registryImage') }}</label>
|
||||
<MalioInputText v-model="createForm.registryImage" required />
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-m-text mb-1">{{ t('applications.form.giteaUrl') }}</label>
|
||||
<label class="block text-sm font-semibold text-neutral-700 mb-1">{{ t('applications.form.giteaUrl') }}</label>
|
||||
<MalioInputText v-model="createForm.giteaUrl" />
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-m-text mb-1">{{ t('applications.form.description') }}</label>
|
||||
<label class="block text-sm font-semibold text-neutral-700 mb-1">{{ t('applications.form.description') }}</label>
|
||||
<textarea
|
||||
v-model="createForm.description"
|
||||
class="w-full rounded border border-m-border bg-m-bg text-m-text p-2"
|
||||
class="w-full rounded-md border border-neutral-300 px-3 py-2 text-base text-neutral-900 focus:border-primary-500 focus:ring-2 focus:ring-secondary-500/20"
|
||||
rows="2"
|
||||
/>
|
||||
</div>
|
||||
<div class="flex justify-end gap-2">
|
||||
<MalioButton variant="secondary" @click="showCreateForm = false">
|
||||
<div class="flex justify-end gap-3">
|
||||
<button
|
||||
type="button"
|
||||
class="rounded-lg border border-neutral-300 px-4 py-2 text-sm font-semibold text-neutral-700 hover:bg-neutral-50"
|
||||
@click="showCreateForm = false"
|
||||
>
|
||||
{{ t('applications.form.cancel') }}
|
||||
</MalioButton>
|
||||
</button>
|
||||
<MalioButton type="submit" :loading="isSubmitting">
|
||||
{{ t('applications.form.save') }}
|
||||
</MalioButton>
|
||||
@@ -102,43 +106,43 @@ onMounted(loadApplications)
|
||||
</div>
|
||||
|
||||
<!-- Loading -->
|
||||
<div v-if="loading" class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-4">
|
||||
<div v-for="i in 3" :key="i" class="bg-m-surface border border-m-border rounded-lg p-6 animate-pulse">
|
||||
<div class="h-5 bg-m-disabled rounded w-1/2 mb-3" />
|
||||
<div class="h-4 bg-m-disabled rounded w-3/4 mb-2" />
|
||||
<div class="h-4 bg-m-disabled rounded w-1/3" />
|
||||
<div v-if="loading" class="grid gap-6 [grid-template-columns:repeat(auto-fill,minmax(280px,1fr))]">
|
||||
<div v-for="i in 3" :key="i" class="rounded-lg bg-tertiary-500 p-5 animate-pulse">
|
||||
<div class="h-5 bg-neutral-300 rounded w-1/2 mb-3" />
|
||||
<div class="h-4 bg-neutral-300 rounded w-3/4 mb-2" />
|
||||
<div class="h-4 bg-neutral-300 rounded w-1/3" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Empty state -->
|
||||
<div v-else-if="applications.length === 0" class="text-center py-12">
|
||||
<h3 class="text-lg font-medium text-m-text">{{ t('applications.emptyTitle') }}</h3>
|
||||
<p class="text-m-muted mt-1">{{ t('applications.emptyDescription') }}</p>
|
||||
<div v-else-if="applications.length === 0" class="rounded-lg border border-neutral-200 bg-white p-6 text-center">
|
||||
<h3 class="text-lg font-medium text-neutral-800">{{ t('applications.emptyTitle') }}</h3>
|
||||
<p class="text-neutral-500 mt-1">{{ t('applications.emptyDescription') }}</p>
|
||||
</div>
|
||||
|
||||
<!-- Application cards -->
|
||||
<div v-else class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-4">
|
||||
<div v-else class="grid gap-6 [grid-template-columns:repeat(auto-fill,minmax(280px,1fr))]">
|
||||
<NuxtLink
|
||||
v-for="app in applications"
|
||||
:key="app.slug"
|
||||
:to="`/applications/${app.slug}`"
|
||||
class="bg-m-surface border border-m-border rounded-lg p-6 hover:border-primary-500 transition-colors"
|
||||
class="rounded-lg bg-tertiary-500 p-5 transition hover:shadow-md"
|
||||
>
|
||||
<div class="flex items-start justify-between">
|
||||
<h3 class="text-lg font-semibold text-m-text">{{ app.name }}</h3>
|
||||
<h3 class="text-lg font-semibold text-neutral-900">{{ app.name }}</h3>
|
||||
<a
|
||||
v-if="app.giteaUrl"
|
||||
:href="app.giteaUrl"
|
||||
target="_blank"
|
||||
class="text-m-muted hover:text-primary-500"
|
||||
class="text-neutral-400 hover:text-primary-500"
|
||||
@click.stop
|
||||
>
|
||||
<Icon name="mdi:open-in-new" size="18" />
|
||||
</a>
|
||||
</div>
|
||||
<p v-if="app.description" class="text-m-muted text-sm mt-2 line-clamp-2">{{ app.description }}</p>
|
||||
<p class="text-m-muted text-xs mt-3">
|
||||
<Icon name="mdi:server" size="14" class="mr-1" />
|
||||
<p v-if="app.description" class="text-neutral-500 text-sm mt-2 line-clamp-2">{{ app.description }}</p>
|
||||
<p class="text-neutral-400 text-xs mt-4 flex items-center gap-1">
|
||||
<Icon name="mdi:server" size="14" />
|
||||
{{ app.environments?.length ?? 0 }} {{ t('applications.card.environments', app.environments?.length ?? 0) }}
|
||||
</p>
|
||||
</NuxtLink>
|
||||
|
||||
Reference in New Issue
Block a user