thesn/volana
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix grid overflow to 3 columns

Browse Source
This commit is contained in:
thesn10
2026-07-03 13:36:36 +02:00
parent 1b2f1ec0b4
commit 7416e97560
2 changed files with 19 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
app/src/app/(tabs)/browse.tsx
View File

@@ -25,12 +25,13 @@ export default function BrowseTab(): JSX.Element {
const products = useMemo<Product[]>(() => { const products = useMemo<Product[]>(() => {
let result = [...PRODUCTS]; let result = [...PRODUCTS];
if (inStockOnly) result = result.filter((product) => product.qty > 0); if (inStockOnly) result = result.filter((product) => product.qty > 0);
if (currencyFilter !== "all") result = result.filter((product) => product.cur === currencyFilter); if (currencyFilter !== "all")
result = result.filter((product) => product.cur === currencyFilter);
if (search.trim()) { if (search.trim()) {
const query = search.trim().toLowerCase(); const query = search.trim().toLowerCase();
result = result.filter( result = result.filter(
(product) => (product) =>
product.name.toLowerCase().includes(query) || product.desc.toLowerCase().includes(query), product.name.toLowerCase().includes(query) || product.desc.toLowerCase().includes(query)
); );
} }
if (sortMode === "priceLow") result.sort((a, b) => a.priceNum - b.priceNum); if (sortMode === "priceLow") result.sort((a, b) => a.priceNum - b.priceNum);
@@ -118,7 +119,11 @@ export default function BrowseTab(): JSX.Element {
viewMode === "list" ? "bg-accent" : "" viewMode === "list" ? "bg-accent" : ""
}`} }`}
> >
<Ionicons name="list" size={14} color={viewMode === "list" ? accentForeground : mutedColor} /> <Ionicons
name="list"
size={14}
color={viewMode === "list" ? accentForeground : mutedColor}
/>
</Pressable> </Pressable>
<Pressable <Pressable
onPress={() => setViewMode("grid")} onPress={() => setViewMode("grid")}
@@ -126,7 +131,11 @@ export default function BrowseTab(): JSX.Element {
viewMode === "grid" ? "bg-accent" : "" viewMode === "grid" ? "bg-accent" : ""
}`} }`}
> >
<Ionicons name="grid" size={14} color={viewMode === "grid" ? accentForeground : mutedColor} /> <Ionicons
name="grid"
size={14}
color={viewMode === "grid" ? accentForeground : mutedColor}
/>
</Pressable> </Pressable>
</View> </View>
</View> </View>
@@ -142,7 +151,7 @@ export default function BrowseTab(): JSX.Element {
))} ))}
</View> </View>
) : ( ) : (
<View className="flex-row flex-wrap"> <View className="flex-row flex-wrap gap-5 lg:gap-6">
{products.map((product) => ( {products.map((product) => (
<ListingCard key={product.id} product={product} variant="grid" /> <ListingCard key={product.id} product={product} variant="grid" />
))} ))}

7
app/src/components/ListingCard.tsx
View File

@@ -103,13 +103,16 @@ export function ListingCard({ product, variant = "grid" }: ListingCardProps): JS
onPress={openListing} onPress={openListing}
onHoverIn={() => setIsHovered(true)} onHoverIn={() => setIsHovered(true)}
onHoverOut={() => setIsHovered(false)} onHoverOut={() => setIsHovered(false)}
className="w-full p-1.5 md:w-1/2 lg:w-1/4" className="w-full md:w-[calc(50%-10px)] lg:w-[calc(25%-18px)]"
> >
<Surface <Surface
variant="default" variant="default"
className={`gap-0 overflow-hidden rounded-xl border p-0 ${isHovered ? "border-border-secondary" : "border-border"}`} className={`gap-0 overflow-hidden rounded-xl border p-0 ${isHovered ? "border-border-secondary" : "border-border"}`}
> >
<View className="aspect-[4/3] items-center justify-center" style={{ backgroundColor: product.bg }}> <View
className="aspect-[4/3] items-center justify-center"
style={{ backgroundColor: product.bg }}
>
<CardHighlightOverlay gradientId={`card-highlight-${product.id}`} /> <CardHighlightOverlay gradientId={`card-highlight-${product.id}`} />
<Typography className="text-6xl lg:text-7xl">{product.emoji}</Typography> <Typography className="text-6xl lg:text-7xl">{product.emoji}</Typography>
</View> </View>