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

Improve mobile layout: stack Bible reference above verse text for better readability

Browse Source
This commit is contained in:
Joshua Ryder
2025-10-01 23:21:16 -04:00
parent 103e14dbc9
commit 95eb9d1598
1 changed files with 8 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
pages/[slug].vue
View File

@@ -42,11 +42,18 @@
:key="index"
class="bg-blue-50 rounded-lg p-6"
>
<!-- Mobile: Stack reference above text -->
<div class="md:hidden mb-3 text-right text-sm text-gray-600">
<div class="font-semibold">{{ ref.reference }}</div>
<div>({{ ref.version }})</div>
</div>
<!-- Desktop: Side by side -->
<div class="flex items-start justify-between gap-4">
<p :class="['text-gray-800 leading-relaxed flex-1', fontSizeClasses]">
{{ ref.text }}
</p>
<div class="text-right text-sm text-gray-600 whitespace-nowrap">
<div class="hidden md:block text-right text-sm text-gray-600 whitespace-nowrap">
<div class="font-semibold">{{ ref.reference }}</div>
<div>({{ ref.version }})</div>
</div>