Improve mobile layouts: fix button wrapping, reorganize admin header, stack form fields properly
This commit is contained in:
@@ -2,11 +2,8 @@
|
||||
<div class="min-h-screen bg-gray-50">
|
||||
<header class="bg-white shadow-sm">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
|
||||
<div class="flex items-center justify-between">
|
||||
<div class="flex items-center space-x-4">
|
||||
<img src="/logos/logo.png" alt="New Life Christian Church" class="h-16 w-auto" />
|
||||
<h1 class="text-2xl font-bold text-gray-900">Create New Sermon</h1>
|
||||
</div>
|
||||
<div class="flex items-center justify-between mb-4">
|
||||
<img src="/logos/logo.png" alt="New Life Christian Church" class="h-16 w-auto" />
|
||||
<button
|
||||
@click="handleLogout"
|
||||
class="text-sm font-medium text-red-600 hover:text-red-700"
|
||||
@@ -14,6 +11,7 @@
|
||||
Logout
|
||||
</button>
|
||||
</div>
|
||||
<h1 class="text-2xl font-bold text-gray-900">Manage Sermons</h1>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
@@ -23,8 +21,8 @@
|
||||
<h2 class="text-2xl font-bold text-gray-900 mb-6">Select Sermon to Manage</h2>
|
||||
|
||||
<div v-if="allSermons && allSermons.length > 0" class="space-y-4">
|
||||
<div class="flex gap-4 items-end">
|
||||
<div class="flex-1">
|
||||
<div class="space-y-4">
|
||||
<div>
|
||||
<label for="sermon-select" class="block text-sm font-medium text-gray-700 mb-2">
|
||||
Choose a Sermon
|
||||
</label>
|
||||
@@ -39,22 +37,24 @@
|
||||
</option>
|
||||
</select>
|
||||
</div>
|
||||
<button
|
||||
type="button"
|
||||
@click="handleEdit"
|
||||
:disabled="!selectedSermonId"
|
||||
class="px-6 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 disabled:opacity-50 disabled:cursor-not-allowed font-medium"
|
||||
>
|
||||
Edit
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
@click="handleDelete"
|
||||
:disabled="!selectedSermonId || deleting"
|
||||
class="px-6 py-2 bg-red-600 text-white rounded-md hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 disabled:opacity-50 disabled:cursor-not-allowed font-medium"
|
||||
>
|
||||
{{ deleting ? 'Deleting...' : 'Delete' }}
|
||||
</button>
|
||||
<div class="flex gap-4">
|
||||
<button
|
||||
type="button"
|
||||
@click="handleEdit"
|
||||
:disabled="!selectedSermonId"
|
||||
class="flex-1 px-6 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 disabled:opacity-50 disabled:cursor-not-allowed font-medium"
|
||||
>
|
||||
Edit
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
@click="handleDelete"
|
||||
:disabled="!selectedSermonId || deleting"
|
||||
class="flex-1 px-6 py-2 bg-red-600 text-white rounded-md hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 disabled:opacity-50 disabled:cursor-not-allowed font-medium"
|
||||
>
|
||||
{{ deleting ? 'Deleting...' : 'Delete' }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="deleteError" class="text-red-600 text-sm">
|
||||
@@ -120,8 +120,8 @@
|
||||
<h2 class="text-xl font-semibold text-gray-900 mb-4">Section 1: Bible References</h2>
|
||||
<div class="space-y-6">
|
||||
<div v-for="(ref, index) in bibleReferences" :key="index" class="border border-gray-200 rounded-lg p-4 space-y-3">
|
||||
<div class="flex gap-3">
|
||||
<div class="w-64">
|
||||
<div class="flex flex-col md:flex-row gap-3">
|
||||
<div class="w-full md:w-64">
|
||||
<label :for="`version-${index}`" class="block text-sm font-medium text-gray-700 mb-1">
|
||||
Bible Version
|
||||
</label>
|
||||
@@ -139,26 +139,28 @@
|
||||
<option value="CSB">Christian Standard Bible (CSB)</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="flex-1">
|
||||
<label :for="`reference-${index}`" class="block text-sm font-medium text-gray-700 mb-1">
|
||||
Book & Verses
|
||||
</label>
|
||||
<input
|
||||
:id="`reference-${index}`"
|
||||
v-model="ref.reference"
|
||||
type="text"
|
||||
placeholder="e.g., John 3:16 or Romans 8:28-30"
|
||||
class="block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500"
|
||||
/>
|
||||
<div class="flex-1 flex gap-3">
|
||||
<div class="flex-1">
|
||||
<label :for="`reference-${index}`" class="block text-sm font-medium text-gray-700 mb-1">
|
||||
Book & Verses
|
||||
</label>
|
||||
<input
|
||||
:id="`reference-${index}`"
|
||||
v-model="ref.reference"
|
||||
type="text"
|
||||
placeholder="e.g., John 3:16 or Romans 8:28-30"
|
||||
class="block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500"
|
||||
/>
|
||||
</div>
|
||||
<button
|
||||
v-if="bibleReferences.length > 1"
|
||||
type="button"
|
||||
@click="removeReference(index)"
|
||||
class="self-end px-3 py-2 bg-red-100 text-red-700 rounded-md hover:bg-red-200 md:block"
|
||||
>
|
||||
−
|
||||
</button>
|
||||
</div>
|
||||
<button
|
||||
v-if="bibleReferences.length > 1"
|
||||
type="button"
|
||||
@click="removeReference(index)"
|
||||
class="self-end px-3 py-2 bg-red-100 text-red-700 rounded-md hover:bg-red-200"
|
||||
>
|
||||
−
|
||||
</button>
|
||||
</div>
|
||||
<div>
|
||||
<label :for="`text-${index}`" class="block text-sm font-medium text-gray-700 mb-1">
|
||||
|
||||
@@ -12,7 +12,7 @@
|
||||
<template v-if="isAuthenticated">
|
||||
<NuxtLink
|
||||
to="/admin"
|
||||
class="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 font-medium text-sm"
|
||||
class="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 font-medium text-sm whitespace-nowrap"
|
||||
>
|
||||
Manage Sermons
|
||||
</NuxtLink>
|
||||
|
||||
Reference in New Issue
Block a user