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

24
pages/admin.vue
View File

@@ -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">
<div class="flex items-center justify-between mb-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>
<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,11 +37,12 @@
</option>
</select>
</div>
<div class="flex gap-4">
<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"
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>
@@ -51,11 +50,12 @@
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"
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">
{{ deleteError }}
@@ -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,6 +139,7 @@
<option value="CSB">Christian Standard Bible (CSB)</option>
</select>
</div>
<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
@@ -155,11 +156,12 @@
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"
class="self-end px-3 py-2 bg-red-100 text-red-700 rounded-md hover:bg-red-200 md:block"
>
−
</button>
</div>
</div>
<div>
<label :for="`text-${index}`" class="block text-sm font-medium text-gray-700 mb-1">
Verse Text

2
pages/index.vue
View File

@@ -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>