duckietm/Nitro-V3
1
0
Fork 0
mirror of https://github.com/duckietm/Nitro-V3.git synced 2026-06-20 07:26:19 +00:00
Code Issues Packages Projects Releases Wiki Activity

🆙 Complete rebuild of toolbar / catalog / inventory make it 100% mobile friendly Take #1

Browse Source
This commit is contained in:
duckietm
2026-05-29 11:30:17 +02:00
parent fbcda88cd3
commit d0c11f047a
19 changed files with 680 additions and 488 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/catalog/views/page/layout/CatalogLayoutDefaultView.tsx
+8 -5
View File
@@ -43,9 +43,11 @@ export const CatalogLayoutDefaultView: FC<CatalogLayoutProps> = props =>
</button>
</div> }
{ /* Product detail card */ }
{ /* Product detail card. shrink-0 + visible overflow so the Buy
button never gets squeezed off-screen when the grid below
holds a lot of items. */ }
{ currentOffer &&
<div className="nitro-catalog-classic-offer-panel flex gap-0 overflow-hidden">
<div className="nitro-catalog-classic-offer-panel flex gap-0 shrink-0">
{ /* Preview area */ }
<div className="nitro-catalog-classic-offer-preview relative flex items-center justify-center">
{ (currentOffer.product.productType !== ProductTypeEnum.BADGE) &&
@@ -81,15 +83,16 @@ export const CatalogLayoutDefaultView: FC<CatalogLayoutProps> = props =>
<CatalogTotalPriceWidget />
{ /* Spinner */ }
<CatalogSpinnerWidgetView />
{ /* Actions */ }
<div className="flex gap-1.5 mt-auto">
{ /* Actions - natural flow, no mt-auto so they can't
be pushed past the panel's bottom edge. */ }
<div className="flex gap-1.5">
<CatalogPurchaseWidgetView />
</div>
</div>
</div> }
{ !currentOffer &&
<div className="nitro-catalog-classic-welcome flex items-center gap-3">
<div className="nitro-catalog-classic-welcome flex items-center gap-3 shrink-0">
{ !!page.localization.getImage(1) &&
<img className="w-[70px] h-[70px] object-contain rounded shrink-0" src={ page.localization.getImage(1) } /> }
<Text className="text-[11px]! text-muted" dangerouslySetInnerHTML={ { __html: SanitizeHtml(page.localization.getText(0)) } } />
src/components/catalog/views/page/layout/CatalogLayoutTrophiesView.tsx
+5 -3
View File
@@ -58,9 +58,11 @@ export const CatalogLayoutTrophiesView: FC<CatalogLayoutProps> = props =>
</button>
</div> }
{ /* Selected trophy card */ }
{ /* Selected trophy card. shrink-0 + no overflow-hidden so the
Buy button stays inside the panel even when the grid below
holds many trophies. */ }
{ currentOffer
? <div className="flex gap-0 bg-white rounded border-2 border-warning/40 overflow-hidden" style={ { boxShadow: '0 0 8px rgba(255,193,7,0.15)' } }>
? <div className="flex gap-0 bg-white rounded border-2 border-warning/40 shrink-0" style={ { boxShadow: '0 0 8px rgba(255,193,7,0.15)' } }>
{ /* Preview */ }
<div className="w-[120px] min-w-[120px] relative flex items-center justify-center border-r-2 border-warning/30" style={ { background: 'linear-gradient(180deg, #fff9e6 0%, #fff3cc 100%)' } }>
{ (currentOffer.product.productType !== ProductTypeEnum.BADGE)
@@ -90,7 +92,7 @@ export const CatalogLayoutTrophiesView: FC<CatalogLayoutProps> = props =>
<CatalogTotalPriceWidget />
{ !canPurchase &&
<span className="text-[9px] text-warning italic">{ LocalizeText('catalog.trophies.write.hint') }</span> }
<div className="flex gap-1.5 mt-auto">
<div className="flex gap-1.5">
<CatalogPurchaseWidgetView />
</div>
</div>