jeffemmett
/
rspace-online
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat(responsive): add mobile breakpoints (768px/480px) across all rApps 

Payment pages (folk-payment-page, folk-payment-request, folk-group-buy-page)
had zero or minimal media queries — now stack headers, reduce padding, and
resize iframes for 375px viewports. Other rApp dashboards (rchoices, rwallet,
rnotes, rfiles, rinbox, rforum, rtasks, rvote) gain consistent 768px/480px
breakpoints: collapsing grids to 1-column, shrinking fonts and padding, and
stacking flex rows on mobile. Also adds folk-payments-dashboard to the flex
centering rule in cart.css.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Jeff Emmett 2026-03-12 12:32:47 -07:00
parent ba5ce34620
commit e614df1b54
12 changed files with 174 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
modules/rcart/components/cart.css
View File

@ -7,7 +7,8 @@ main {
/* Center narrow form pages (payment request, payment page, group buy) */
main:has(folk-payment-request),
main:has(folk-payment-page),
main:has(folk-group-buy-page) {
main:has(folk-group-buy-page),
main:has(folk-payments-dashboard) {
display: flex;
flex-direction: column;
align-items: center;

16
modules/rcart/components/folk-group-buy-page.ts
View File

@ -639,6 +639,22 @@ class FolkGroupBuyPage extends HTMLElement {
.fill-visual { flex-direction: column; align-items: center; }
.fill-visual__marker-label { display: none; }
}
@media (max-width: 480px) {
:host { padding: 1rem 0.75rem; }
.hero { padding: 1rem; gap: 1rem; }
.hero-title { font-size: 1.375rem; }
.hero-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; }
.hero-stat-value { font-size: 1.125rem; }
.tier-commons { display: none; }
.tier-row { padding: 0.625rem 0.75rem; gap: 0.5rem; }
.tier-qty { font-size: 0.8125rem; min-width: 2.5rem; }
.tier-price { font-size: 0.8125rem; }
.sim-controls { flex-direction: column; align-items: stretch; gap: 0.5rem; }
.sim-label { white-space: normal; }
.commons-controls { flex-direction: column; align-items: stretch; gap: 0.5rem; }
.pledge-panel { padding: 1rem; }
h3 { font-size: 0.9375rem; }
}
`;
}

18
modules/rcart/components/folk-payment-page.ts
View File

@ -721,6 +721,24 @@ class FolkPaymentPage extends HTMLElement {
.loading { text-align: center; padding: 3rem; color: var(--rs-text-secondary); }
.error { text-align: center; padding: 3rem; color: #f87171; }
@media (max-width: 480px) {
:host { padding: 1rem; }
.header { flex-direction: column; align-items: flex-start; gap: 0.5rem; }
.title { font-size: 1.125rem; }
.amount { font-size: 1.5rem; }
.amount-input { font-size: 1.25rem; width: 120px; }
.amount-token { font-size: 1rem; }
.tab { padding: 0.625rem 0.5rem; font-size: 0.8125rem; }
.transak-iframe { height: min(500px, 70vh); }
.description { font-size: 0.875rem; padding: 0.625rem; }
.confirmation { padding: 1.5rem 0.5rem; }
.confirm-details { font-size: 0.8125rem; }
.share-url { flex-direction: column; }
.share-input { font-size: 0.6875rem; }
.toggle-btn { padding: 0.375rem 0.625rem; font-size: 0.75rem; }
.footer { margin-top: 1.5rem; padding-top: 1rem; }
}
`;
}

11
modules/rcart/components/folk-payment-request.ts
View File

@ -643,8 +643,19 @@ class FolkPaymentRequest extends HTMLElement {
.action-row { display: flex; gap: 0.5rem; justify-content: center; flex-wrap: wrap; }
@media (max-width: 480px) {
:host { padding: 1rem; }
.page-title { font-size: 1.25rem; }
.page-subtitle { font-size: 0.8125rem; margin-bottom: 1.5rem; }
.field-row { flex-direction: column; }
.action-row { flex-direction: column; }
.toggle-btn { padding: 0.4375rem 0.5rem; font-size: 0.75rem; }
.method-toggle { padding: 0.5rem 0.625rem; gap: 0.5rem; }
.method-desc { display: none; }
.share-row { flex-direction: column; }
.share-input { font-size: 0.6875rem; }
.step-card { flex-direction: column; gap: 0.75rem; padding: 1rem; }
.result-amount { font-size: 1.5rem; }
.qr-img { max-width: 220px; }
}
`;
}

15
modules/rchoices/components/folk-choices-dashboard.ts
View File

@ -261,6 +261,21 @@ class FolkChoicesDashboard extends HTMLElement {
.vote-reset { padding: 0.5rem 1.25rem; 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; font-family: inherit; transition: all 0.15s; }
.vote-reset:hover { border-color: var(--rs-error); color: #fca5a5; }
.vote-status { text-align: center; margin-bottom: 1rem; font-size: 0.8rem; color: var(--rs-text-muted); }
@media (max-width: 768px) {
.grid { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
:host { padding: 1rem; }
.rapp-nav { gap: 4px; }
.create-btn { padding: 0.375rem 0.75rem; font-size: 0.8125rem; }
.demo-tabs { gap: 2px; padding: 3px; }
.demo-tab { padding: 0.5rem; font-size: 0.8125rem; }
.rank-item { padding: 0.625rem 0.75rem; gap: 8px; }
.rank-name { font-size: 0.875rem; }
.vote-option { padding: 0.625rem 0.75rem; }
.spider-svg { max-width: 300px; }
}
</style>
<div class="rapp-nav">

15
modules/rfiles/components/folk-file-browser.ts
View File

@ -445,6 +445,21 @@ class FolkFileBrowser extends HTMLElement {
.loading { text-align: center; color: #888; padding: 40px; }
.card-form { margin-bottom: 20px; display: flex; flex-direction: column; gap: 8px; }
.card-form-row { display: flex; gap: 8px; }
@media (max-width: 768px) {
.file-grid { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
.card-grid { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
}
@media (max-width: 480px) {
.file-grid { grid-template-columns: 1fr; }
.card-grid { grid-template-columns: 1fr; }
.tabs { gap: 2px; }
.tab-btn { padding: 6px 12px; font-size: 13px; }
.upload-section { padding: 12px; }
.upload-row { flex-direction: column; align-items: stretch; }
.file-card { padding: 10px; }
.card-form-row { flex-direction: column; }
}
</style>
<div class="tabs">

12
modules/rforum/components/folk-forum-dashboard.ts
View File

@ -329,6 +329,18 @@ class FolkForumDashboard extends HTMLElement {
@media (max-width: 768px) {
.pricing { grid-template-columns: 1fr; }
.form-row { grid-template-columns: 1fr; }
.detail-grid { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
.rapp-nav { gap: 4px; }
.rapp-nav__title { font-size: 14px; }
.rapp-nav__btn { padding: 4px 10px; font-size: 12px; }
.instance-card { padding: 12px; }
.instance-name { font-size: 14px; }
.instance-meta { font-size: 11px; }
.detail-panel { padding: 14px; }
.detail-title { font-size: 16px; }
.log-step { font-size: 12px; }
}
</style>

21
modules/rinbox/components/folk-inbox-client.ts
View File

@ -508,11 +508,26 @@ class FolkInboxClient extends HTMLElement {
.sample-banner { padding: 8px 16px; background: rgba(99,102,241,0.12); border: 1px solid rgba(99,102,241,0.25); border-radius: 8px; color: #a5b4fc; font-size: 13px; text-align: center; margin-bottom: 12px; }
@media (max-width: 600px) {
@media (max-width: 768px) {
.mailbox-grid { grid-template-columns: 1fr; }
.thread-from { max-width: 100px; }
.thread-row { flex-wrap: wrap; gap: 4px; }
.help-grid { grid-template-columns: 1fr; }
.thread-row { flex-wrap: wrap; gap: 4px; }
.thread-from { max-width: 100px; }
}
@media (max-width: 480px) {
.rapp-nav { gap: 0.25rem; }
.nav-btn { padding: 4px 8px; font-size: 12px; }
.inbox-header { padding: 0.625rem 0.75rem; gap: 0.5rem; }
.inbox-header-name { font-size: 0.85rem; }
.thread-row { padding: 0.625rem 0.75rem; }
.thread-subject { font-size: 0.8125rem; }
.thread-preview { font-size: 0.75rem; }
.filter-bar { padding: 0.5rem 0.75rem; gap: 0.125rem; }
.filter-btn { padding: 4px 8px; font-size: 11px; }
.help-panel { padding: 1.25rem; }
.help-title { font-size: 1.25rem; }
.compose-panel { padding: 12px; }
.inbox-card { flex-direction: column; align-items: stretch; gap: 0.5rem; padding: 0.75rem; }
}
</style>
<div class="container">

21
modules/rnotes/components/folk-notes-app.ts
View File

@ -2652,6 +2652,27 @@ Gear: EUR 400 (10%)</code></pre><p><em>Maya is tracking expenses in rF
.tiptap-container .tiptap s { color: var(--rs-text-muted); }
.tiptap-container .tiptap u { text-underline-offset: 3px; }
@media (max-width: 768px) {
.grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px; }
.notebook-card { min-height: 100px; padding: 12px 12px 12px 16px; }
.editor-wrapper .editable-title { padding: 12px 14px 0; }
.tiptap-container .tiptap { padding: 14px 16px; }
.note-item { padding: 10px 12px; gap: 8px; }
}
@media (max-width: 480px) {
.grid { grid-template-columns: 1fr; }
.rapp-nav { gap: 4px; }
.rapp-nav__btn { padding: 5px 10px; font-size: 12px; }
.search-bar { font-size: 13px; padding: 8px 10px; }
.notebook-card__title { font-size: 14px; }
.editable-title { font-size: 18px; }
.tiptap-container .tiptap { font-size: 14px; padding: 12px 14px; min-height: 200px; }
.editor-toolbar { padding: 3px 4px; gap: 1px; }
.toolbar-btn { width: 26px; height: 24px; }
.note-actions-bar { flex-wrap: wrap; gap: 6px; }
.note-action-btn { padding: 5px 10px; font-size: 11px; }
}
/* Placeholder */
.tiptap-container .tiptap p.is-editor-empty:first-child::before {
content: attr(data-placeholder);

10
modules/rtasks/components/folk-tasks-board.ts
View File

@ -329,6 +329,16 @@ class FolkTasksBoard extends HTMLElement {
@media (max-width: 768px) {
.board { flex-direction: column; overflow-x: visible; }
.column { min-width: 100%; max-width: 100%; }
.workspace-grid { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
.rapp-nav { gap: 4px; }
.rapp-nav__title { font-size: 14px; }
.rapp-nav__btn { padding: 4px 10px; font-size: 12px; }
.column-header { padding: 8px; font-size: 12px; }
.card { padding: 10px; }
.card-title { font-size: 13px; }
.card-meta { font-size: 10px; }
}
</style>

29
modules/rvote/components/folk-vote-dashboard.ts
View File

@ -608,6 +608,35 @@ class FolkVoteDashboard extends HTMLElement {
.trend-legend-dot {
width: 8px; height: 8px; border-radius: 2px; flex-shrink: 0;
}
@media (max-width: 768px) {
.tally { gap: 12px; }
.detail { padding: 16px; }
.detail-title { font-size: 17px; }
.trend-section { padding: 12px 14px; }
}
@media (max-width: 480px) {
.header-title { font-size: 15px; }
.space-card { padding: 14px; }
.space-name { font-size: 16px; }
.space-meta { gap: 10px; }
.proposal-body { padding: 10px 12px; }
.proposal-title { font-size: 14px; }
.proposal-desc { font-size: 12px; }
.vote-col { width: 44px; padding: 8px 4px; }
.vote-chevron { width: 28px; height: 24px; }
.vote-score { font-size: 14px; }
.score-row { gap: 8px; flex-wrap: wrap; }
.vote-row { gap: 4px; }
.vote-btn { padding: 5px 10px; font-size: 12px; }
.tally-value { font-size: 18px; }
.meta { gap: 8px; font-size: 11px; }
.create-form { padding: 14px; }
.form-actions { flex-direction: column; }
.qv-weights { gap: 3px; }
.qv-weight { font-size: 10px; padding: 2px 6px; }
.trend-legend { gap: 8px; }
}
</style>
${this.error ? `<div class="error">${this.esc(this.error)}</div>` : ""}

7
modules/rwallet/components/folk-wallet-viewer.ts
View File

@ -1279,6 +1279,13 @@ class FolkWalletViewer extends HTMLElement {
}
@media (max-width: 480px) {
.features { grid-template-columns: 1fr; }
.hero-title { font-size: 18px; }
.hero-subtitle { font-size: 13px; }
.top-tabs { gap: 2px; }
.view-tabs { gap: 2px; }
.aggregate-stats { grid-template-columns: 1fr 1fr; gap: 8px; }
.wallet-item { padding: 8px; }
.my-wallets { padding: 12px; }
}
</style>`;
}