summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--app/components/EventListRow.tsx8
-rw-r--r--app/components/FilterBar.tsx2
-rw-r--r--app/root.tsx2
-rw-r--r--app/routes/events.$id.tsx8
-rw-r--r--app/routes/events._index.tsx6
-rw-r--r--app/routes/events.by-date.tsx12
-rw-r--r--app/routes/venues.tsx6
7 files changed, 22 insertions, 22 deletions
diff --git a/app/components/EventListRow.tsx b/app/components/EventListRow.tsx
index 24f5f59..30800fb 100644
--- a/app/components/EventListRow.tsx
+++ b/app/components/EventListRow.tsx
@@ -15,7 +15,7 @@ export default function EventListRow({ event }: Props) {
className="group flex items-center gap-3 rounded-lg px-4 py-3 bg-gray-800/40 border border-gray-700/30 hover:border-indigo-500/50 hover:bg-gray-800/70 transition-all text-sm"
>
{/* Date */}
- <span className="w-32 shrink-0 text-xs text-gray-400 tabular-nums">
+ <span className="w-24 sm:w-32 shrink-0 text-xs text-gray-400 tabular-nums">
{formattedDate}
{timeLabel && (
<span className="block text-gray-600 text-[11px]">{timeLabel}</span>
@@ -23,7 +23,7 @@ export default function EventListRow({ event }: Props) {
</span>
{/* Venue */}
- <span className="w-28 shrink-0 truncate rounded-full bg-gray-700/60 px-2 py-0.5 text-xs text-gray-300">
+ <span className="hidden sm:inline-flex w-28 shrink-0 truncate rounded-full bg-gray-700/60 px-2 py-0.5 text-xs text-gray-300">
{event.venue_name}
{event.venue_area ? `（${event.venue_area}）` : ""}
</span>
@@ -42,9 +42,9 @@ export default function EventListRow({ event }: Props) {
{/* Price */}
{event.price ? (
- <span className="shrink-0 text-xs text-emerald-400">¥{event.price}</span>
+ <span className="hidden sm:block shrink-0 text-xs text-emerald-400">¥{event.price}</span>
) : (
- <span className="shrink-0 w-16" />
+ <span className="hidden sm:block shrink-0 w-16" />
)}
</Link>
);
diff --git a/app/components/FilterBar.tsx b/app/components/FilterBar.tsx
index 266865d..fd7be72 100644
--- a/app/components/FilterBar.tsx
+++ b/app/components/FilterBar.tsx
@@ -20,7 +20,7 @@ export default function FilterBar({ venues, defaultDateFrom, defaultDateTo }: Pr
type="text"
defaultValue={searchParams.get("keyword") ?? ""}
placeholder="アーティスト名、イベント名..."
- className="rounded-md bg-gray-800 border border-gray-700 px-3 py-1.5 text-sm focus:outline-none focus:ring-1 focus:ring-indigo-500 w-52"
+ className="rounded-md bg-gray-800 border border-gray-700 px-3 py-1.5 text-sm focus:outline-none focus:ring-1 focus:ring-indigo-500 w-full sm:w-52"
/>
</div>
diff --git a/app/root.tsx b/app/root.tsx
index dd55df0..37827e4 100644
--- a/app/root.tsx
+++ b/app/root.tsx
@@ -29,7 +29,7 @@ export function Layout({ children }: { children: React.ReactNode }) {
<head>
<meta charSet="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
- <title>東京ライブハウス</title>
+ <title>ライブに行くしかない</title>
<Meta />
<Links />
</head>
diff --git a/app/routes/events.$id.tsx b/app/routes/events.$id.tsx
index cecb282..4a84308 100644
--- a/app/routes/events.$id.tsx
+++ b/app/routes/events.$id.tsx
@@ -15,11 +15,11 @@ export default function EventDetail() {
return (
<div className="min-h-screen bg-gray-950 text-gray-100">
- <header className="border-b border-gray-800 px-6 py-4 flex items-center justify-between">
+ <header className="border-b border-gray-800 px-4 sm:px-6 py-3 sm:py-4 flex flex-col sm:flex-row sm:items-center sm:justify-between gap-2 sm:gap-0">
<Link to="/" className="text-xl font-bold tracking-tight text-white">
- 🎸 東京ライブハウス
+ 🎸 ライブに行くしかない
</Link>
- <nav className="flex gap-6 text-sm text-gray-400">
+ <nav className="flex gap-4 sm:gap-6 text-sm text-gray-400">
<Link to="/events" className="hover:text-white transition-colors">イベント</Link>
<Link to="/venues" className="hover:text-white transition-colors">会場一覧</Link>
</nav>
@@ -35,7 +35,7 @@ export default function EventDetail() {
<img
src={event.image_url}
alt={event.title}
- className="w-full max-h-72 object-cover rounded-xl mb-6"
+ className="w-full object-contain rounded-xl mb-6"
/>
)}
diff --git a/app/routes/events._index.tsx b/app/routes/events._index.tsx
index 7e6ca5d..f2e1737 100644
--- a/app/routes/events._index.tsx
+++ b/app/routes/events._index.tsx
@@ -47,11 +47,11 @@ export default function EventsIndex() {
return (
<div className="min-h-screen bg-gray-950 text-gray-100">
- <header className="border-b border-gray-800 px-6 py-4 flex items-center justify-between">
+ <header className="border-b border-gray-800 px-4 sm:px-6 py-3 sm:py-4 flex flex-col sm:flex-row sm:items-center sm:justify-between gap-2 sm:gap-0">
<Link to="/" className="text-xl font-bold tracking-tight text-white">
- 🎸 東京ライブハウス
+ 🎸 ライブに行くしかない
</Link>
- <nav className="flex gap-6 text-sm text-gray-400">
+ <nav className="flex gap-4 sm:gap-6 text-sm text-gray-400">
<Link to="/events" className="hover:text-white transition-colors">イベント</Link>
<Link to="/events/by-date" className="hover:text-white transition-colors">日付別</Link>
<Link to="/venues" className="hover:text-white transition-colors">会場一覧</Link>
diff --git a/app/routes/events.by-date.tsx b/app/routes/events.by-date.tsx
index fadb737..9a59073 100644
--- a/app/routes/events.by-date.tsx
+++ b/app/routes/events.by-date.tsx
@@ -64,11 +64,11 @@ export default function EventsByDate() {
return (
<div className="min-h-screen bg-gray-950 text-gray-100">
- <header className="border-b border-gray-800 px-6 py-4 flex items-center justify-between">
+ <header className="border-b border-gray-800 px-4 sm:px-6 py-3 sm:py-4 flex flex-col sm:flex-row sm:items-center sm:justify-between gap-2 sm:gap-0">
<Link to="/" className="text-xl font-bold tracking-tight text-white">
- 🎸 東京ライブハウス
+ 🎸 ライブに行くしかない
</Link>
- <nav className="flex gap-6 text-sm text-gray-400">
+ <nav className="flex gap-4 sm:gap-6 text-sm text-gray-400">
<Link to="/events" className="hover:text-white transition-colors">イベント</Link>
<Link to="/events/by-date" className="text-white">日付別</Link>
<Link to="/venues" className="hover:text-white transition-colors">会場一覧</Link>
@@ -162,7 +162,7 @@ function VenueEventRow({ event }: { event: Event }) {
className="group flex items-start gap-4 rounded-lg px-4 py-3 bg-gray-800/40 border border-gray-700/30 hover:border-indigo-500/50 hover:bg-gray-800/70 transition-all"
>
{/* Time */}
- <span className="w-28 shrink-0 text-xs text-gray-400 tabular-nums pt-0.5">
+ <span className="w-20 sm:w-28 shrink-0 text-xs text-gray-400 tabular-nums pt-0.5">
{timeLabel || <span className="text-gray-600">時間未定</span>}
</span>
@@ -180,11 +180,11 @@ function VenueEventRow({ event }: { event: Event }) {
{/* Price */}
{event.price ? (
- <span className="shrink-0 text-xs text-emerald-400 pt-0.5">
+ <span className="hidden sm:block shrink-0 text-xs text-emerald-400 pt-0.5">
¥{event.price}
</span>
) : (
- <span className="shrink-0 w-16" />
+ <span className="hidden sm:block shrink-0 w-16" />
)}
</Link>
);
diff --git a/app/routes/venues.tsx b/app/routes/venues.tsx
index fca90dd..b027707 100644
--- a/app/routes/venues.tsx
+++ b/app/routes/venues.tsx
@@ -14,11 +14,11 @@ export default function Venues() {
return (
<div className="min-h-screen bg-gray-950 text-gray-100">
- <header className="border-b border-gray-800 px-6 py-4 flex items-center justify-between">
+ <header className="border-b border-gray-800 px-4 sm:px-6 py-3 sm:py-4 flex flex-col sm:flex-row sm:items-center sm:justify-between gap-2 sm:gap-0">
<Link to="/" className="text-xl font-bold tracking-tight text-white">
- 🎸 東京ライブハウス
+ 🎸 ライブに行くしかない
</Link>
- <nav className="flex gap-6 text-sm text-gray-400">
+ <nav className="flex gap-4 sm:gap-6 text-sm text-gray-400">
<Link to="/events" className="hover:text-white transition-colors">イベント</Link>
<Link to="/venues" className="text-white font-medium">会場一覧</Link>
</nav>
generated by cgit v1.2.3 (git 2.25.1) at 2026-05-17 13:31:39 +0000