RyderTech/nlcc-itinerary
1
0
Fork 0
Code Issues Pull Requests Packages Activity

Improve mobile layouts: fix button wrapping, reorganize admin header, stack form fields properly

Browse Source
This commit is contained in:
Joshua Ryder
2025-10-01 23:35:32 -04:00
parent 84c33320de
commit 18f0b3ca50
2 changed files with 47 additions and 45 deletions
Download Patch File Download Diff File Expand all files Collapse all files

90
pages/admin.vue
View File

@@ -2,11 +2,8 @@
<div class="min-h-screen bg-gray-50"> <div class="min-h-screen bg-gray-50">
<header class="bg-white shadow-sm"> <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="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 justify-between mb-4">
<div class="flex items-center space-x-4"> <img src="/logos/logo.png" alt="New Life Christian Church" class="h-16 w-auto" />
<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>
<button <button
@click="handleLogout" @click="handleLogout"
class="text-sm font-medium text-red-600 hover:text-red-700" class="text-sm font-medium text-red-600 hover:text-red-700"
@@ -14,6 +11,7 @@
Logout Logout
</button> </button>
</div> </div>
<h1 class="text-2xl font-bold text-gray-900">Manage Sermons</h1>
</div> </div>
</header> </header>
@@ -23,8 +21,8 @@
<h2 class="text-2xl font-bold text-gray-900 mb-6">Select Sermon to Manage</h2> <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 v-if="allSermons && allSermons.length > 0" class="space-y-4">
<div class="flex gap-4 items-end"> <div class="space-y-4">
<div class="flex-1"> <div>
<label for="sermon-select" class="block text-sm font-medium text-gray-700 mb-2"> <label for="sermon-select" class="block text-sm font-medium text-gray-700 mb-2">
Choose a Sermon Choose a Sermon
</label> </label>
@@ -39,22 +37,24 @@
</option> </option>
</select> </select>
</div> </div>
<button <div class="flex gap-4">
type="button" <button
@click="handleEdit" type="button"
:disabled="!selectedSermonId" @click="handleEdit"
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" :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> Edit
<button </button>
type="button" <button
@click="handleDelete" type="button"
:disabled="!selectedSermonId || deleting" @click="handleDelete"
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" :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> {{ deleting ? 'Deleting...' : 'Delete' }}
</button>
</div>
</div> </div>
<div v-if="deleteError" class="text-red-600 text-sm"> <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> <h2 class="text-xl font-semibold text-gray-900 mb-4">Section 1: Bible References</h2>
<div class="space-y-6"> <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 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="flex flex-col md:flex-row gap-3">
<div class="w-64"> <div class="w-full md:w-64">
<label :for="`version-${index}`" class="block text-sm font-medium text-gray-700 mb-1"> <label :for="`version-${index}`" class="block text-sm font-medium text-gray-700 mb-1">
Bible Version Bible Version
</label> </label>
@@ -139,26 +139,28 @@
<option value="CSB">Christian Standard Bible (CSB)</option> <option value="CSB">Christian Standard Bible (CSB)</option>
</select> </select>
</div> </div>
<div class="flex-1"> <div class="flex-1 flex gap-3">
<label :for="`reference-${index}`" class="block text-sm font-medium text-gray-700 mb-1"> <div class="flex-1">
Book & Verses <label :for="`reference-${index}`" class="block text-sm font-medium text-gray-700 mb-1">
</label> Book & Verses
<input </label>
:id="`reference-${index}`" <input
v-model="ref.reference" :id="`reference-${index}`"
type="text" v-model="ref.reference"
placeholder="e.g., John 3:16 or Romans 8:28-30" type="text"
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" 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> </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>
<div> <div>
<label :for="`text-${index}`" class="block text-sm font-medium text-gray-700 mb-1"> <label :for="`text-${index}`" class="block text-sm font-medium text-gray-700 mb-1">

2
pages/index.vue
View File

@@ -12,7 +12,7 @@
<template v-if="isAuthenticated"> <template v-if="isAuthenticated">
<NuxtLink <NuxtLink
to="/admin" 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 Manage Sermons
</NuxtLink> </NuxtLink>