colgora/Mangarr
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style: simplify settings page — replace cards with border-top sections
All checks were successful
Deploy / deploy (push) Successful in 2m46s
Details

Browse Source
This commit is contained in:
ext.jeremy.guillot@maxicoffee.domains
2026-03-13 17:47:47 +01:00
parent b60a68cbd7
commit 5eb650df6f
1 changed files with 22 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

44
assets/vue/app/domain/setting/presentation/pages/UserPreferencesPage.vue
View File

@@ -13,13 +13,13 @@
</div>
<!-- Apparence -->
<section class="bg-white dark:bg-gray-800 rounded-xl shadow-sm border border-gray-200 dark:border-gray-700 mb-4">
<h2 class="text-sm font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wider px-6 pt-5 pb-3">
<section class="border-t border-gray-200 dark:border-gray-700 pt-6 mb-6">
<h2 class="text-xs font-semibold text-gray-400 dark:text-gray-500 uppercase tracking-wider mb-4">
{{ t('preferences.sections.appearance') }}
</h2>
<div class="divide-y divide-gray-100 dark:divide-gray-700">
<div class="space-y-1">
<!-- Thème -->
<div class="flex items-center justify-between px-6 py-4">
<div class="flex items-center justify-between py-3">
<label class="text-sm font-medium text-gray-700 dark:text-gray-300">{{ t('preferences.theme.label') }}</label>
<select
:value="store.theme"
@@ -31,7 +31,7 @@
</select>
</div>
<!-- Langue -->
<div class="flex items-center justify-between px-6 py-4">
<div class="flex items-center justify-between py-3">
<label class="text-sm font-medium text-gray-700 dark:text-gray-300">{{ t('preferences.language.label') }}</label>
<select
:value="store.language"
@@ -45,13 +45,13 @@
</section>
<!-- Affichage collection -->
<section class="bg-white dark:bg-gray-800 rounded-xl shadow-sm border border-gray-200 dark:border-gray-700 mb-4">
<h2 class="text-sm font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wider px-6 pt-5 pb-3">
<section class="border-t border-gray-200 dark:border-gray-700 pt-6 mb-6">
<h2 class="text-xs font-semibold text-gray-400 dark:text-gray-500 uppercase tracking-wider mb-4">
{{ t('preferences.sections.collection') }}
</h2>
<div class="divide-y divide-gray-100 dark:divide-gray-700">
<div class="space-y-1">
<!-- Vue par défaut -->
<div class="flex items-center justify-between px-6 py-4">
<div class="flex items-center justify-between py-3">
<label class="text-sm font-medium text-gray-700 dark:text-gray-300">{{ t('preferences.defaultView.label') }}</label>
<div class="flex gap-2">
<button
@@ -67,7 +67,7 @@
</div>
</div>
<!-- Mangas par page -->
<div class="flex items-center justify-between px-6 py-4">
<div class="flex items-center justify-between py-3">
<label class="text-sm font-medium text-gray-700 dark:text-gray-300">{{ t('preferences.itemsPerPage.label') }}</label>
<div class="flex gap-2">
<button
@@ -80,7 +80,7 @@
</div>
</div>
<!-- Tri par défaut -->
<div class="flex items-center justify-between px-6 py-4">
<div class="flex items-center justify-between py-3">
<label class="text-sm font-medium text-gray-700 dark:text-gray-300">{{ t('preferences.sortBy.label') }}</label>
<select
:value="store.sortBy"
@@ -95,13 +95,13 @@
</section>
<!-- Lecture -->
<section class="bg-white dark:bg-gray-800 rounded-xl shadow-sm border border-gray-200 dark:border-gray-700 mb-4">
<h2 class="text-sm font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wider px-6 pt-5 pb-3">
<section class="border-t border-gray-200 dark:border-gray-700 pt-6 mb-6">
<h2 class="text-xs font-semibold text-gray-400 dark:text-gray-500 uppercase tracking-wider mb-4">
{{ t('preferences.sections.reading') }}
</h2>
<div class="divide-y divide-gray-100 dark:divide-gray-700">
<div class="space-y-1">
<!-- Direction de lecture -->
<div class="flex items-center justify-between px-6 py-4">
<div class="flex items-center justify-between py-3">
<label class="text-sm font-medium text-gray-700 dark:text-gray-300">{{ t('preferences.readingDirection.label') }}</label>
<select
:value="store.readingDirection"
@@ -112,7 +112,7 @@
</select>
</div>
<!-- Mode d'affichage -->
<div class="flex items-center justify-between px-6 py-4">
<div class="flex items-center justify-between py-3">
<label class="text-sm font-medium text-gray-700 dark:text-gray-300">{{ t('preferences.readingMode.label') }}</label>
<select
:value="store.readingMode"
@@ -124,7 +124,7 @@
</select>
</div>
<!-- Auto plein écran -->
<div class="flex items-center justify-between px-6 py-4">
<div class="flex items-center justify-between py-3">
<div>
<p class="text-sm font-medium text-gray-700 dark:text-gray-300">{{ t('preferences.autoFullscreen.label') }}</p>
<p class="text-xs text-gray-500 dark:text-gray-400 mt-0.5">{{ t('preferences.autoFullscreen.description') }}</p>
@@ -138,7 +138,7 @@
</button>
</div>
<!-- Auto-hide header -->
<div class="flex items-center justify-between px-6 py-4">
<div class="flex items-center justify-between py-3">
<div>
<p class="text-sm font-medium text-gray-700 dark:text-gray-300">{{ t('preferences.autoHideHeaderReader.label') }}</p>
<p class="text-xs text-gray-500 dark:text-gray-400 mt-0.5">{{ t('preferences.autoHideHeaderReader.description') }}</p>
@@ -155,13 +155,13 @@
</section>
<!-- Notifications -->
<section class="bg-white dark:bg-gray-800 rounded-xl shadow-sm border border-gray-200 dark:border-gray-700 mb-4">
<h2 class="text-sm font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wider px-6 pt-5 pb-3">
<section class="border-t border-gray-200 dark:border-gray-700 pt-6 mb-6">
<h2 class="text-xs font-semibold text-gray-400 dark:text-gray-500 uppercase tracking-wider mb-4">
{{ t('preferences.sections.notifications') }}
</h2>
<div class="divide-y divide-gray-100 dark:divide-gray-700">
<div class="space-y-1">
<!-- Durée des toasts -->
<div class="flex items-center justify-between px-6 py-4">
<div class="flex items-center justify-between py-3">
<label class="text-sm font-medium text-gray-700 dark:text-gray-300">{{ t('preferences.toastDuration.label') }}</label>
<div class="flex gap-2">
<button