mobile optimizations
This commit is contained in:
@@ -243,7 +243,7 @@ export default async function StocksPage({ searchParams }: PageProps) {
|
|||||||
{tab === 'stocks' && (<>
|
{tab === 'stocks' && (<>
|
||||||
<div className="bg-surface-card border border-surface-border rounded-xl overflow-hidden">
|
<div className="bg-surface-card border border-surface-border rounded-xl overflow-hidden">
|
||||||
{/* Column headers */}
|
{/* Column headers */}
|
||||||
<div className="grid grid-cols-[2fr_1fr_1fr_1fr_1fr] gap-4 px-4 py-2.5 border-b border-surface-border text-xs font-medium">
|
<div className="grid grid-cols-[2fr_1fr_1fr] sm:grid-cols-[2fr_1fr_1fr_1fr_1fr] gap-4 px-4 py-2.5 border-b border-surface-border text-xs font-medium">
|
||||||
<SortLink field="tag" label="Hashtag" currentSort={sort} currentDir={dir} page={page} fund={fund} />
|
<SortLink field="tag" label="Hashtag" currentSort={sort} currentDir={dir} page={page} fund={fund} />
|
||||||
<div className="text-right">
|
<div className="text-right">
|
||||||
<SortLink field="price" label="Price" currentSort={sort} currentDir={dir} page={page} fund={fund} />
|
<SortLink field="price" label="Price" currentSort={sort} currentDir={dir} page={page} fund={fund} />
|
||||||
@@ -252,7 +252,7 @@ export default async function StocksPage({ searchParams }: PageProps) {
|
|||||||
<SortLink field="change" label="Change" currentSort={sort} currentDir={dir} page={page} fund={fund} />
|
<SortLink field="change" label="Change" currentSort={sort} currentDir={dir} page={page} fund={fund} />
|
||||||
</div>
|
</div>
|
||||||
<div className="text-right hidden sm:block text-slate-400">Posts/hr</div>
|
<div className="text-right hidden sm:block text-slate-400">Posts/hr</div>
|
||||||
<div className="text-right">
|
<div className="text-right hidden sm:block">
|
||||||
<SortLink field="updated" label="Updated" currentSort={sort} currentDir={dir} page={page} fund={fund} />
|
<SortLink field="updated" label="Updated" currentSort={sort} currentDir={dir} page={page} fund={fund} />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -270,7 +270,7 @@ export default async function StocksPage({ searchParams }: PageProps) {
|
|||||||
return (
|
return (
|
||||||
<div
|
<div
|
||||||
key={stock.id}
|
key={stock.id}
|
||||||
className="grid grid-cols-[2fr_1fr_1fr_1fr_1fr] gap-4 items-center px-4 py-3 hover:bg-surface-border/30 transition-colors"
|
className="grid grid-cols-[2fr_1fr_1fr] sm:grid-cols-[2fr_1fr_1fr_1fr_1fr] gap-4 items-center px-4 py-3 hover:bg-surface-border/30 transition-colors"
|
||||||
>
|
>
|
||||||
{/* Rank + hashtag name */}
|
{/* Rank + hashtag name */}
|
||||||
<div className="flex items-center gap-3 min-w-0">
|
<div className="flex items-center gap-3 min-w-0">
|
||||||
@@ -312,7 +312,7 @@ export default async function StocksPage({ searchParams }: PageProps) {
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Last updated */}
|
{/* Last updated */}
|
||||||
<div className="text-right text-xs text-slate-500">
|
<div className="text-right text-xs text-slate-500 hidden sm:block">
|
||||||
{formatDistanceToNow(stock.lastUpdated, { addSuffix: true })}
|
{formatDistanceToNow(stock.lastUpdated, { addSuffix: true })}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -24,15 +24,15 @@ export function HashtagCard({ tag, displayTag, currentPrice, previousPrice, post
|
|||||||
className="block bg-surface-card border border-surface-border hover:border-indigo-500/50 rounded-xl p-4 transition-all hover:shadow-lg hover:shadow-indigo-500/5"
|
className="block bg-surface-card border border-surface-border hover:border-indigo-500/50 rounded-xl p-4 transition-all hover:shadow-lg hover:shadow-indigo-500/5"
|
||||||
>
|
>
|
||||||
<div className="flex items-start justify-between gap-2">
|
<div className="flex items-start justify-between gap-2">
|
||||||
<div>
|
<div className="min-w-0">
|
||||||
<p className="font-semibold text-sm">#{displayTag}</p>
|
<p className="font-semibold text-sm truncate">#{displayTag}</p>
|
||||||
{postsPerHour !== undefined && (
|
{postsPerHour !== undefined && (
|
||||||
<p className="text-xs text-slate-500 mt-0.5">
|
<p className="text-xs text-slate-500 mt-0.5">
|
||||||
{postsPerHour.toFixed(1)} posts/hr
|
{postsPerHour.toFixed(1)} posts/hr
|
||||||
</p>
|
</p>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
<div className="text-right">
|
<div className="text-right shrink-0">
|
||||||
<p className="font-bold text-sm">{formatCurrency(currentPrice)}</p>
|
<p className="font-bold text-sm">{formatCurrency(currentPrice)}</p>
|
||||||
{pctChange !== null && (
|
{pctChange !== null && (
|
||||||
<div
|
<div
|
||||||
|
|||||||
Reference in New Issue
Block a user