Mobile UX polish: stacking buttons, visible nickname button, responsive headers
This commit is contained in:
parent
0bfe25268c
commit
873b45d81d
2 changed files with 10 additions and 10 deletions
|
|
@ -93,15 +93,15 @@ export default async function Home() {
|
||||||
<br />
|
<br />
|
||||||
Discover shows, share ratings, and explore the music together.
|
Discover shows, share ratings, and explore the music together.
|
||||||
</p>
|
</p>
|
||||||
<div className="flex gap-4">
|
<div className="flex flex-col sm:flex-row gap-3 sm:gap-4">
|
||||||
<Link href="/performances">
|
<Link href="/performances">
|
||||||
<Button size="lg" className="gap-2">
|
<Button size="lg" className="gap-2 w-full sm:w-auto">
|
||||||
<Trophy className="h-4 w-4" />
|
<Trophy className="h-4 w-4" />
|
||||||
Top Performances
|
Top Performances
|
||||||
</Button>
|
</Button>
|
||||||
</Link>
|
</Link>
|
||||||
<Link href="/shows">
|
<Link href="/shows">
|
||||||
<Button variant="outline" size="lg">
|
<Button variant="outline" size="lg" className="w-full sm:w-auto">
|
||||||
Browse Shows
|
Browse Shows
|
||||||
</Button>
|
</Button>
|
||||||
</Link>
|
</Link>
|
||||||
|
|
|
||||||
|
|
@ -72,14 +72,14 @@ export default async function ShowDetailPage({ params }: { params: Promise<{ slu
|
||||||
</Button>
|
</Button>
|
||||||
</Link>
|
</Link>
|
||||||
<div>
|
<div>
|
||||||
<h1 className="text-3xl font-bold tracking-tight">
|
<h1 className="text-2xl sm:text-3xl font-bold tracking-tight">
|
||||||
{new Date(show.date).toLocaleDateString()}
|
{new Date(show.date).toLocaleDateString()}
|
||||||
{show.venue && (
|
|
||||||
<span className="font-normal text-muted-foreground ml-2">
|
|
||||||
- {show.venue.name}, {show.venue.city}, {show.venue.state}
|
|
||||||
</span>
|
|
||||||
)}
|
|
||||||
</h1>
|
</h1>
|
||||||
|
{show.venue && (
|
||||||
|
<p className="text-base sm:text-lg text-muted-foreground mt-1">
|
||||||
|
{show.venue.name}, {show.venue.city}, {show.venue.state}
|
||||||
|
</p>
|
||||||
|
)}
|
||||||
{show.tags && show.tags.length > 0 && (
|
{show.tags && show.tags.length > 0 && (
|
||||||
<div className="flex flex-wrap gap-2 mt-1">
|
<div className="flex flex-wrap gap-2 mt-1">
|
||||||
{show.tags.map((tag: any) => (
|
{show.tags.map((tag: any) => (
|
||||||
|
|
@ -207,7 +207,7 @@ export default async function ShowDetailPage({ params }: { params: Promise<{ slu
|
||||||
)}
|
)}
|
||||||
|
|
||||||
{/* Suggest Nickname Button */}
|
{/* Suggest Nickname Button */}
|
||||||
<div className="opacity-0 group-hover:opacity-100 transition-opacity">
|
<div className="opacity-50 md:opacity-30 md:group-hover:opacity-100 transition-opacity">
|
||||||
<SuggestNicknameDialog
|
<SuggestNicknameDialog
|
||||||
performanceId={perf.id}
|
performanceId={perf.id}
|
||||||
songTitle={perf.song?.title || "Song"}
|
songTitle={perf.song?.title || "Song"}
|
||||||
|
|
|
||||||
Loading…
Add table
Reference in a new issue