Standardize save button position to top-right across all CMS editors

This commit is contained in:
Torsten Schulz (local)
2025-10-22 12:23:22 +02:00
parent df2ed13f52
commit 0d4bcc9f73

View File

@@ -1,10 +1,24 @@
<template> <template>
<div class="min-h-full py-16 bg-gray-50"> <div class="min-h-full py-16 bg-gray-50">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<h1 class="text-4xl sm:text-5xl font-display font-bold text-gray-900 mb-6"> <div class="flex items-center justify-between mb-6">
<div>
<h1 class="text-4xl sm:text-5xl font-display font-bold text-gray-900">
Einstellungen Einstellungen
</h1> </h1>
<div class="w-24 h-1 bg-primary-600 mb-8" /> <div class="w-24 h-1 bg-primary-600 mt-2" />
</div>
<div class="space-x-3">
<button
@click="saveConfig"
class="inline-flex items-center px-4 py-2 rounded-lg bg-primary-600 text-white hover:bg-primary-700 disabled:opacity-50 disabled:cursor-not-allowed"
:disabled="isSaving"
>
<Loader2 v-if="isSaving" :size="16" class="animate-spin mr-2" />
{{ isSaving ? 'Speichern...' : 'Speichern' }}
</button>
</div>
</div>
<!-- Loading State --> <!-- Loading State -->
<div v-if="isLoading" class="flex items-center justify-center py-12"> <div v-if="isLoading" class="flex items-center justify-center py-12">
@@ -455,18 +469,6 @@
{{ successMessage }} {{ successMessage }}
</div> </div>
<!-- Save Button -->
<div class="flex justify-end">
<button
@click="saveConfig"
class="flex items-center px-8 py-3 bg-primary-600 hover:bg-primary-700 text-white font-semibold rounded-lg transition-colors shadow-lg"
:disabled="isSaving"
>
<Loader2 v-if="isSaving" :size="20" class="animate-spin mr-2" />
<Save v-else :size="20" class="mr-2" />
<span>{{ isSaving ? 'Speichert...' : 'Änderungen speichern' }}</span>
</button>
</div>
</div> </div>
</div> </div>
</div> </div>
@@ -474,7 +476,7 @@
<script setup> <script setup>
import { ref, onMounted } from 'vue' import { ref, onMounted } from 'vue'
import { Settings, Calendar, Users as UsersIcon, CreditCard, Plus, Trash2, X, Loader2, AlertCircle, Check, Save } from 'lucide-vue-next' import { Settings, Calendar, Users as UsersIcon, CreditCard, Plus, Trash2, X, Loader2, AlertCircle, Check } from 'lucide-vue-next'
const authStore = useAuthStore() const authStore = useAuthStore()