Add fixed headers to all CMS editors for better UX

This commit is contained in:
Torsten Schulz (local)
2025-10-22 12:27:10 +02:00
parent 0d4bcc9f73
commit bc3b5b53f5
11 changed files with 652 additions and 620 deletions

View File

@@ -1,12 +1,20 @@
<template>
<div class="min-h-full py-16 bg-gray-50">
<div class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex items-center justify-between mb-6">
<h1 class="text-3xl sm:text-4xl font-display font-bold text-gray-900">TT-Regeln bearbeiten</h1>
<div class="space-x-3">
<button @click="save" class="inline-flex items-center px-4 py-2 rounded-lg bg-primary-600 text-white hover:bg-primary-700">Speichern</button>
<div class="min-h-full bg-gray-50">
<!-- Fixed Header -->
<div class="fixed top-0 left-0 right-0 z-50 bg-white border-b border-gray-200 shadow-sm">
<div class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8 py-4">
<div class="flex items-center justify-between">
<h1 class="text-3xl sm:text-4xl font-display font-bold text-gray-900">TT-Regeln bearbeiten</h1>
<div class="space-x-3">
<button @click="save" class="inline-flex items-center px-4 py-2 rounded-lg bg-primary-600 text-white hover:bg-primary-700">Speichern</button>
</div>
</div>
</div>
</div>
<!-- Content with top padding -->
<div class="pt-24 pb-16">
<div class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="bg-white rounded-xl shadow-sm border border-gray-200 p-4">
<div class="flex flex-wrap items-center gap-2 mb-3">