torsten/harheimertc
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix mobile design for CMS pages - correct positioning and responsive layout

Browse Source
This commit is contained in:
Torsten Schulz (local)
2025-10-22 12:56:30 +02:00
parent 02ecae528e
commit 7b010b7658
5 changed files with 61 additions and 61 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
pages/cms/einstellungen.vue
View File

@@ -1,19 +1,19 @@
<template>
<div class="min-h-full bg-gray-50">
<!-- Fixed Header below navigation -->
<div class="fixed top-16 left-0 right-0 z-40 bg-white border-b border-gray-200 shadow-sm">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-4">
<div class="fixed top-20 left-0 right-0 z-40 bg-white border-b border-gray-200 shadow-sm">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-3 sm:py-4">
<div class="flex items-center justify-between">
<div>
<h1 class="text-4xl sm:text-5xl font-display font-bold text-gray-900">
<h1 class="text-xl sm:text-4xl font-display font-bold text-gray-900">
Einstellungen
</h1>
<div class="w-24 h-1 bg-primary-600 mt-2" />
<div class="w-16 sm:w-24 h-1 bg-primary-600 mt-1 sm: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"
class="inline-flex items-center px-3 py-1.5 sm:px-4 sm:py-2 rounded-lg bg-primary-600 text-white hover:bg-primary-700 disabled:opacity-50 disabled:cursor-not-allowed text-sm sm:text-base"
:disabled="isSaving"
>
<Loader2 v-if="isSaving" :size="16" class="animate-spin mr-2" />
@@ -25,7 +25,7 @@
</div>
<!-- Content with top padding -->
<div class="pt-32 pb-16">
<div class="pt-28 sm:pt-32 pb-16">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<!-- Loading State -->

36
pages/cms/geschichte.vue
View File

@@ -1,42 +1,42 @@
<template>
<div class="min-h-full bg-gray-50">
<!-- Fixed Header below navigation -->
<div class="fixed top-16 left-0 right-0 z-40 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="fixed top-20 left-0 right-0 z-40 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-3 sm:py-4">
<div class="flex items-center justify-between">
<h1 class="text-3xl sm:text-4xl font-display font-bold text-gray-900">Geschichte bearbeiten</h1>
<h1 class="text-xl sm:text-3xl font-display font-bold text-gray-900">Geschichte 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>
<button @click="save" class="inline-flex items-center px-3 py-1.5 sm:px-4 sm:py-2 rounded-lg bg-primary-600 text-white hover:bg-primary-700 text-sm sm:text-base">Speichern</button>
</div>
</div>
</div>
</div>
<!-- Fixed Toolbar below header -->
<div class="fixed top-32 left-0 right-0 z-30 bg-white border-b border-gray-200 shadow-sm">
<div class="fixed top-28 sm:top-32 left-0 right-0 z-30 bg-white border-b border-gray-200 shadow-sm">
<div class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex flex-wrap items-center gap-2 py-2">
<button class="px-3 py-1 rounded border hover:bg-gray-50" @click="format('bold')"><strong>B</strong></button>
<button class="px-3 py-1 rounded border hover:bg-gray-50" @click="format('italic')"><em>I</em></button>
<button class="px-3 py-1 rounded border hover:bg-gray-50" @click="formatHeader(1)">H1</button>
<button class="px-3 py-1 rounded border hover:bg-gray-50" @click="formatHeader(2)">H2</button>
<button class="px-3 py-1 rounded border hover:bg-gray-50" @click="formatHeader(3)">H3</button>
<button class="px-3 py-1 rounded border hover:bg-gray-50" @click="format('insertUnorderedList')">• Liste</button>
<button class="px-3 py-1 rounded border hover:bg-gray-50" @click="format('insertOrderedList')">1. Liste</button>
<button class="px-3 py-1 rounded border hover:bg-gray-50" @click="createLink()">Link</button>
<button class="px-3 py-1 rounded border hover:bg-gray-50" @click="removeFormat()">Format entfernen</button>
<div class="flex flex-wrap items-center gap-1 sm:gap-2 py-1.5 sm:py-2">
<button class="px-2 py-1 sm:px-3 sm:py-1 rounded border hover:bg-gray-50 text-xs sm:text-sm" @click="format('bold')"><strong>B</strong></button>
<button class="px-2 py-1 sm:px-3 sm:py-1 rounded border hover:bg-gray-50 text-xs sm:text-sm" @click="format('italic')"><em>I</em></button>
<button class="px-2 py-1 sm:px-3 sm:py-1 rounded border hover:bg-gray-50 text-xs sm:text-sm" @click="formatHeader(1)">H1</button>
<button class="px-2 py-1 sm:px-3 sm:py-1 rounded border hover:bg-gray-50 text-xs sm:text-sm" @click="formatHeader(2)">H2</button>
<button class="px-2 py-1 sm:px-3 sm:py-1 rounded border hover:bg-gray-50 text-xs sm:text-sm" @click="formatHeader(3)">H3</button>
<button class="px-2 py-1 sm:px-3 sm:py-1 rounded border hover:bg-gray-50 text-xs sm:text-sm" @click="format('insertUnorderedList')">•</button>
<button class="px-2 py-1 sm:px-3 sm:py-1 rounded border hover:bg-gray-50 text-xs sm:text-sm" @click="format('insertOrderedList')">1.</button>
<button class="px-2 py-1 sm:px-3 sm:py-1 rounded border hover:bg-gray-50 text-xs sm:text-sm" @click="createLink()">Link</button>
<button class="px-2 py-1 sm:px-3 sm:py-1 rounded border hover:bg-gray-50 text-xs sm:text-sm" @click="removeFormat()">Clear</button>
</div>
</div>
</div>
<!-- Content with top padding -->
<div class="pt-44 pb-16">
<div class="pt-36 sm:pt-44 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="bg-white rounded-xl shadow-sm border border-gray-200 p-3 sm:p-4">
<div
ref="editor"
class="min-h-[320px] p-4 outline-none prose max-w-none"
class="min-h-[320px] p-3 sm:p-4 outline-none prose max-w-none text-sm sm:text-base"
contenteditable
/>
</div>

36
pages/cms/tt-regeln.vue
View File

@@ -1,42 +1,42 @@
<template>
<div class="min-h-full bg-gray-50">
<!-- Fixed Header below navigation -->
<div class="fixed top-16 left-0 right-0 z-40 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="fixed top-20 left-0 right-0 z-40 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-3 sm: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>
<h1 class="text-xl sm:text-3xl 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>
<button @click="save" class="inline-flex items-center px-3 py-1.5 sm:px-4 sm:py-2 rounded-lg bg-primary-600 text-white hover:bg-primary-700 text-sm sm:text-base">Speichern</button>
</div>
</div>
</div>
</div>
<!-- Fixed Toolbar below header -->
<div class="fixed top-32 left-0 right-0 z-30 bg-white border-b border-gray-200 shadow-sm">
<div class="fixed top-28 sm:top-32 left-0 right-0 z-30 bg-white border-b border-gray-200 shadow-sm">
<div class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex flex-wrap items-center gap-2 py-2">
<button class="px-3 py-1 rounded border hover:bg-gray-50" @click="format('bold')"><strong>B</strong></button>
<button class="px-3 py-1 rounded border hover:bg-gray-50" @click="format('italic')"><em>I</em></button>
<button class="px-3 py-1 rounded border hover:bg-gray-50" @click="formatHeader(1)">H1</button>
<button class="px-3 py-1 rounded border hover:bg-gray-50" @click="formatHeader(2)">H2</button>
<button class="px-3 py-1 rounded border hover:bg-gray-50" @click="formatHeader(3)">H3</button>
<button class="px-3 py-1 rounded border hover:bg-gray-50" @click="format('insertUnorderedList')">• Liste</button>
<button class="px-3 py-1 rounded border hover:bg-gray-50" @click="format('insertOrderedList')">1. Liste</button>
<button class="px-3 py-1 rounded border hover:bg-gray-50" @click="createLink()">Link</button>
<button class="px-3 py-1 rounded border hover:bg-gray-50" @click="removeFormat()">Format entfernen</button>
<div class="flex flex-wrap items-center gap-1 sm:gap-2 py-1.5 sm:py-2">
<button class="px-2 py-1 sm:px-3 sm:py-1 rounded border hover:bg-gray-50 text-xs sm:text-sm" @click="format('bold')"><strong>B</strong></button>
<button class="px-2 py-1 sm:px-3 sm:py-1 rounded border hover:bg-gray-50 text-xs sm:text-sm" @click="format('italic')"><em>I</em></button>
<button class="px-2 py-1 sm:px-3 sm:py-1 rounded border hover:bg-gray-50 text-xs sm:text-sm" @click="formatHeader(1)">H1</button>
<button class="px-2 py-1 sm:px-3 sm:py-1 rounded border hover:bg-gray-50 text-xs sm:text-sm" @click="formatHeader(2)">H2</button>
<button class="px-2 py-1 sm:px-3 sm:py-1 rounded border hover:bg-gray-50 text-xs sm:text-sm" @click="formatHeader(3)">H3</button>
<button class="px-2 py-1 sm:px-3 sm:py-1 rounded border hover:bg-gray-50 text-xs sm:text-sm" @click="format('insertUnorderedList')">•</button>
<button class="px-2 py-1 sm:px-3 sm:py-1 rounded border hover:bg-gray-50 text-xs sm:text-sm" @click="format('insertOrderedList')">1.</button>
<button class="px-2 py-1 sm:px-3 sm:py-1 rounded border hover:bg-gray-50 text-xs sm:text-sm" @click="createLink()">Link</button>
<button class="px-2 py-1 sm:px-3 sm:py-1 rounded border hover:bg-gray-50 text-xs sm:text-sm" @click="removeFormat()">Clear</button>
</div>
</div>
</div>
<!-- Content with top padding -->
<div class="pt-44 pb-16">
<div class="pt-36 sm:pt-44 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="bg-white rounded-xl shadow-sm border border-gray-200 p-3 sm:p-4">
<div
ref="editor"
class="min-h-[320px] p-4 outline-none prose max-w-none"
class="min-h-[320px] p-3 sm:p-4 outline-none prose max-w-none text-sm sm:text-base"
contenteditable
/>
</div>

36
pages/cms/ueber-uns.vue
View File

@@ -1,42 +1,42 @@
<template>
<div class="min-h-full bg-gray-50">
<!-- Fixed Header below navigation -->
<div class="fixed top-16 left-0 right-0 z-40 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="fixed top-20 left-0 right-0 z-40 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-3 sm:py-4">
<div class="flex items-center justify-between">
<h1 class="text-3xl sm:text-4xl font-display font-bold text-gray-900">Über uns bearbeiten</h1>
<h1 class="text-xl sm:text-3xl font-display font-bold text-gray-900">Über uns 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>
<button @click="save" class="inline-flex items-center px-3 py-1.5 sm:px-4 sm:py-2 rounded-lg bg-primary-600 text-white hover:bg-primary-700 text-sm sm:text-base">Speichern</button>
</div>
</div>
</div>
</div>
<!-- Fixed Toolbar below header -->
<div class="fixed top-32 left-0 right-0 z-30 bg-white border-b border-gray-200 shadow-sm">
<div class="fixed top-28 sm:top-32 left-0 right-0 z-30 bg-white border-b border-gray-200 shadow-sm">
<div class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex flex-wrap items-center gap-2 py-2">
<button class="px-3 py-1 rounded border hover:bg-gray-50" @click="format('bold')"><strong>B</strong></button>
<button class="px-3 py-1 rounded border hover:bg-gray-50" @click="format('italic')"><em>I</em></button>
<button class="px-3 py-1 rounded border hover:bg-gray-50" @click="formatHeader(1)">H1</button>
<button class="px-3 py-1 rounded border hover:bg-gray-50" @click="formatHeader(2)">H2</button>
<button class="px-3 py-1 rounded border hover:bg-gray-50" @click="formatHeader(3)">H3</button>
<button class="px-3 py-1 rounded border hover:bg-gray-50" @click="format('insertUnorderedList')">• Liste</button>
<button class="px-3 py-1 rounded border hover:bg-gray-50" @click="format('insertOrderedList')">1. Liste</button>
<button class="px-3 py-1 rounded border hover:bg-gray-50" @click="createLink()">Link</button>
<button class="px-3 py-1 rounded border hover:bg-gray-50" @click="removeFormat()">Format entfernen</button>
<div class="flex flex-wrap items-center gap-1 sm:gap-2 py-1.5 sm:py-2">
<button class="px-2 py-1 sm:px-3 sm:py-1 rounded border hover:bg-gray-50 text-xs sm:text-sm" @click="format('bold')"><strong>B</strong></button>
<button class="px-2 py-1 sm:px-3 sm:py-1 rounded border hover:bg-gray-50 text-xs sm:text-sm" @click="format('italic')"><em>I</em></button>
<button class="px-2 py-1 sm:px-3 sm:py-1 rounded border hover:bg-gray-50 text-xs sm:text-sm" @click="formatHeader(1)">H1</button>
<button class="px-2 py-1 sm:px-3 sm:py-1 rounded border hover:bg-gray-50 text-xs sm:text-sm" @click="formatHeader(2)">H2</button>
<button class="px-2 py-1 sm:px-3 sm:py-1 rounded border hover:bg-gray-50 text-xs sm:text-sm" @click="formatHeader(3)">H3</button>
<button class="px-2 py-1 sm:px-3 sm:py-1 rounded border hover:bg-gray-50 text-xs sm:text-sm" @click="format('insertUnorderedList')">•</button>
<button class="px-2 py-1 sm:px-3 sm:py-1 rounded border hover:bg-gray-50 text-xs sm:text-sm" @click="format('insertOrderedList')">1.</button>
<button class="px-2 py-1 sm:px-3 sm:py-1 rounded border hover:bg-gray-50 text-xs sm:text-sm" @click="createLink()">Link</button>
<button class="px-2 py-1 sm:px-3 sm:py-1 rounded border hover:bg-gray-50 text-xs sm:text-sm" @click="removeFormat()">Clear</button>
</div>
</div>
</div>
<!-- Content with top padding -->
<div class="pt-44 pb-16">
<div class="pt-36 sm:pt-44 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="bg-white rounded-xl shadow-sm border border-gray-200 p-3 sm:p-4">
<div
ref="editor"
class="min-h-[320px] p-4 outline-none prose max-w-none"
class="min-h-[320px] p-3 sm:p-4 outline-none prose max-w-none text-sm sm:text-base"
contenteditable
/>
</div>