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