Fix mobile layout across all rcart pages and remove duplicate nav
- Remove duplicate internal nav (.rapp-nav tabs) from folk-cart-shop —
the shell subnav pills already provide this navigation
- Read initial-view attribute so shell subnav routing works correctly
- Add margin: 0 auto centering to all narrow page components
(payment-page, payment-request, payments-dashboard, group-buy-page)
- Add overflow-wrap: break-word to prevent text/address overflow
- Comprehensive mobile breakpoints across all components:
- folk-cart-shop: 600px + 400px (grid stacking, card sizing, forms)
- folk-payments-dashboard: 600px + 480px (header, cards, tabs)
- folk-group-buy-page: already had good breakpoints, added centering
- cart.css: remove justify-content:center (bad for long pages),
add horizontal padding for mobile
- Fix share-input overflow with min-width:0 + text-overflow
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Jeff Emmett
parent
73431d7a88
commit
661aca972e
|
|
@ -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);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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 = `
|
||||
<style>${styles}</style>
|
||||
<div class="rapp-nav">
|
||||
<span class="rapp-nav__title">Shop</span>
|
||||
<div class="tabs">
|
||||
<button class="tab ${this.view === 'carts' || this.view === 'cart-detail' ? 'active' : ''}" data-view="carts">🛒 Carts (${this.carts.length})</button>
|
||||
<button class="tab ${this.view === 'catalog' ? 'active' : ''}" data-view="catalog">📦 Catalog (${this.catalog.length})</button>
|
||||
<button class="tab ${this.view === 'group-buys' ? 'active' : ''}" data-view="group-buys">🤝 Group Buys${this.groupBuys.length > 0 ? ` (${this.groupBuys.filter((g: any) => g.status === 'OPEN').length})` : ''}</button>
|
||||
<button class="tab ${this.view === 'orders' ? 'active' : ''}" data-view="orders">📋 Orders (${this.orders.length})</button>
|
||||
<button class="tab ${this.view === 'payments' ? 'active' : ''}" data-view="payments">💳 Payments (${this.payments.length})</button>
|
||||
</div>
|
||||
<button class="tab" id="btn-tour" style="margin-left:auto;font-size:0.8rem">Tour</button>
|
||||
<div class="toolbar">
|
||||
<button class="tab" id="btn-tour" style="font-size:0.8rem">Tour</button>
|
||||
${this.orderQueue.length > 0 ? `<button class="queue-badge" data-action="toggle-queue">Queue (${this.orderQueue.reduce((s: number, i: any) => s + i.quantity, 0)})</button>` : ''}
|
||||
</div>
|
||||
${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; }
|
||||
}
|
||||
`;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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; }
|
||||
|
||||
|
|
|
|||
|
|
@ -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; }
|
||||
}
|
||||
`;
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue