diff --git a/modules/rcart/components/cart.css b/modules/rcart/components/cart.css index 1a794bd..ed87fbf 100644 --- a/modules/rcart/components/cart.css +++ b/modules/rcart/components/cart.css @@ -4,7 +4,7 @@ main { padding: 0; } -/* Center narrow form pages (payment request, payment page, group buy) */ +/* Center narrow form pages (payment request, payment page, group buy, dashboard) */ main:has(folk-payment-request), main:has(folk-payment-page), main:has(folk-group-buy-page), @@ -12,5 +12,11 @@ main:has(folk-payments-dashboard) { display: flex; flex-direction: column; align-items: center; - justify-content: center; + padding: 0 0.5rem; +} + +@media (max-width: 600px) { + main { + min-height: calc(100vh - 44px); + } } diff --git a/modules/rcart/components/folk-cart-shop.ts b/modules/rcart/components/folk-cart-shop.ts index 8adbcac..624a107 100644 --- a/modules/rcart/components/folk-cart-shop.ts +++ b/modules/rcart/components/folk-cart-shop.ts @@ -67,7 +67,11 @@ class FolkCartShop extends HTMLElement { this.space = parts.length >= 1 ? parts[0] : "default"; } - // Check URL params for initial tab + // Read initial view from attribute (set by server routes) or URL params + const initView = this.getAttribute("initial-view"); + if (initView && ["carts","catalog","orders","payments","group-buys","subscriptions"].includes(initView)) { + this.view = initView as any; + } const params = new URLSearchParams(window.location.search); if (params.get('tab') === 'catalog') this.view = 'catalog'; if (params.get('tab') === 'group-buys') this.view = 'group-buys'; @@ -437,16 +441,8 @@ class FolkCartShop extends HTMLElement { this.shadow.innerHTML = ` -
- Shop -
- - - - - -
- +
+ ${this.orderQueue.length > 0 ? `` : ''}
${this.orderQueueOpen && this.orderQueue.length > 0 ? this.renderOrderQueue() : ''} @@ -1183,14 +1179,11 @@ class FolkCartShop extends HTMLElement { private getStyles(): string { return ` - :host { display: block; padding: 1.5rem; } + :host { display: block; padding: 1.5rem; overflow-wrap: break-word; } * { box-sizing: border-box; } - .rapp-nav { display: flex; gap: 8px; align-items: center; margin-bottom: 1rem; min-height: 36px; flex-wrap: wrap; } - .rapp-nav__title { font-size: 15px; font-weight: 600; flex: 1; color: var(--rs-text-primary); } - .tabs { display: flex; gap: 0.5rem; } - .tab { padding: 0.5rem 1rem; border-radius: 8px; border: 1px solid var(--rs-border); background: var(--rs-bg-surface); color: var(--rs-text-secondary); cursor: pointer; font-size: 0.875rem; } + .toolbar { display: flex; gap: 8px; align-items: center; justify-content: flex-end; margin-bottom: 0.75rem; min-height: 28px; flex-wrap: wrap; } + .tab { padding: 0.375rem 0.75rem; border-radius: 8px; border: 1px solid var(--rs-border); background: var(--rs-bg-surface); color: var(--rs-text-secondary); cursor: pointer; font-size: 0.8125rem; } .tab:hover { border-color: var(--rs-border-strong); color: var(--rs-text-primary); } - .tab.active { background: var(--rs-primary-hover); border-color: var(--rs-primary); color: #fff; } .grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 1rem; } .card { background: var(--rs-bg-surface); border: 1px solid var(--rs-border); border-radius: 12px; padding: 1.25rem; } @@ -1342,12 +1335,29 @@ class FolkCartShop extends HTMLElement { .gb-tier-reached { color: #4ade80; background: rgba(34,197,94,0.08); } .gb-tier-current { border-color: var(--rs-primary); color: var(--rs-primary-hover); background: rgba(99,102,241,0.1); font-weight: 600; } - @media (max-width: 768px) { .catalog-detail-layout { grid-template-columns: 1fr; } } + @media (max-width: 768px) { + .catalog-detail-layout { grid-template-columns: 1fr; } + } @media (max-width: 600px) { + :host { padding: 1rem 0.75rem; } .grid { grid-template-columns: 1fr; } - .catalog-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); } + .gb-grid { grid-template-columns: 1fr; } + .catalog-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); } .url-input-row { flex-direction: column; } .detail-actions { flex-direction: column; } + .section-title { font-size: 1.0625rem; } + .detail-title { font-size: 1.25rem; } + .card { padding: 1rem; } + .order-card { flex-direction: column; align-items: flex-start; gap: 0.5rem; } + .new-cart-form, .contribute-form, .new-payment-form { flex-direction: column; } + .item-row { gap: 0.5rem; } + } + @media (max-width: 400px) { + :host { padding: 0.75rem 0.5rem; } + .catalog-grid { grid-template-columns: 1fr 1fr; } + .card { padding: 0.75rem; border-radius: 8px; } + .card-title { font-size: 0.875rem; } + .section-title { font-size: 1rem; } } `; } diff --git a/modules/rcart/components/folk-group-buy-page.ts b/modules/rcart/components/folk-group-buy-page.ts index f09ea68..724f5bd 100644 --- a/modules/rcart/components/folk-group-buy-page.ts +++ b/modules/rcart/components/folk-group-buy-page.ts @@ -436,7 +436,7 @@ class FolkGroupBuyPage extends HTMLElement { private getStyles(): string { return ` - :host { display: block; padding: 2rem 1.5rem; width: 100%; max-width: 960px; -webkit-tap-highlight-color: transparent; } + :host { display: block; padding: 2rem 1.5rem; width: 100%; max-width: 960px; margin: 0 auto; -webkit-tap-highlight-color: transparent; overflow-wrap: break-word; } * { box-sizing: border-box; } button, a, input, select, textarea, [role="button"] { touch-action: manipulation; } diff --git a/modules/rcart/components/folk-payments-dashboard.ts b/modules/rcart/components/folk-payments-dashboard.ts index 472f20d..d9e33f1 100644 --- a/modules/rcart/components/folk-payments-dashboard.ts +++ b/modules/rcart/components/folk-payments-dashboard.ts @@ -228,7 +228,7 @@ class FolkPaymentsDashboard extends HTMLElement { private getStyles(): string { return ` - :host { display: block; padding: 1.5rem; width: 100%; max-width: 720px; } + :host { display: block; padding: 1.5rem; width: 100%; max-width: 720px; margin: 0 auto; overflow-wrap: break-word; } * { box-sizing: border-box; } .header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.5rem; gap: 1rem; flex-wrap: wrap; } @@ -279,11 +279,18 @@ class FolkPaymentsDashboard extends HTMLElement { .status-cancelled { background: rgba(239,68,68,0.15); color: #dc2626; } .status-filled { background: rgba(59,130,246,0.15); color: #2563eb; } - @media (max-width: 480px) { - :host { padding: 1rem; } + @media (max-width: 600px) { + :host { padding: 1rem 0.75rem; } + .title { font-size: 1.25rem; } .header { flex-direction: column; align-items: stretch; } + .tab { font-size: 0.8125rem; padding: 0.5rem 0.75rem; } + } + @media (max-width: 480px) { + :host { padding: 0.75rem 0.5rem; } .payment-card { flex-direction: column; align-items: stretch; gap: 0.5rem; } .card-right { flex-direction: row; align-items: center; justify-content: space-between; } + .card-amount { font-size: 0.875rem; } + .empty-state { padding: 2rem 1rem; } } `; }