fix: MI bar z-index, SW force-update, rtime mobile layout
- MI bar z-index lowered to 1 so dropdowns render above it; panel gets z-index 10001 only when open - SW registration URL bumped to v=8 to match cache version - rtime: pool and weaving are now two separate scrollable sections on mobile (50vh/60vh min-heights) with a "Commitment Weaving" section header visible on constrained screens Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Jeff Emmett
parent
44cc47ecf1
commit
5c88922b13
|
|
@ -1,9 +1,10 @@
|
|||
services:
|
||||
rspace:
|
||||
build:
|
||||
context: .
|
||||
additional_contexts:
|
||||
encryptid-sdk: ../encryptid-sdk
|
||||
image: rspace-online-rspace:latest
|
||||
# build:
|
||||
# context: .
|
||||
# additional_contexts:
|
||||
# encryptid-sdk: ../encryptid-sdk
|
||||
container_name: rspace-online
|
||||
restart: unless-stopped
|
||||
volumes:
|
||||
|
|
|
|||
|
|
@ -545,6 +545,10 @@ class FolkTimebankApp extends HTMLElement {
|
|||
<div class="panel-divider" id="panelDivider"><div class="divider-pip"></div></div>
|
||||
<!-- SVG infinite canvas -->
|
||||
<div class="canvas-wrap" id="canvasWrap">
|
||||
<div class="canvas-wrap-header">
|
||||
<span>Commitment Weaving</span>
|
||||
<span class="canvas-wrap-hint">connect commitments to projects</span>
|
||||
</div>
|
||||
<svg id="weave-svg" xmlns="http://www.w3.org/2000/svg">
|
||||
<defs>
|
||||
<pattern id="grid" width="20" height="20" patternUnits="userSpaceOnUse">
|
||||
|
|
@ -3642,8 +3646,21 @@ const CSS_TEXT = `
|
|||
}
|
||||
|
||||
/* SVG canvas area */
|
||||
.canvas-wrap { flex: 1; position: relative; overflow: hidden; background: #0f172a; touch-action: none; }
|
||||
#weave-svg { width: 100%; height: 100%; display: block; touch-action: none; }
|
||||
.canvas-wrap { flex: 1; position: relative; overflow: hidden; background: #0f172a; touch-action: none; display: flex; flex-direction: column; }
|
||||
.canvas-wrap-header {
|
||||
display: none;
|
||||
justify-content: space-between; align-items: center;
|
||||
padding: 0.5rem 0.75rem;
|
||||
font-size: 0.82rem; font-weight: 600; color: #94a3b8;
|
||||
text-transform: uppercase; letter-spacing: 0.04em;
|
||||
border-bottom: 1px solid #334155; flex-shrink: 0;
|
||||
background: #1e293b;
|
||||
}
|
||||
.canvas-wrap-hint {
|
||||
font-size: 0.68rem; font-weight: 400; color: #64748b; font-style: italic;
|
||||
text-transform: none; letter-spacing: normal;
|
||||
}
|
||||
#weave-svg { width: 100%; flex: 1; min-height: 0; display: block; touch-action: none; }
|
||||
|
||||
/* Zoom controls */
|
||||
.zoom-controls {
|
||||
|
|
@ -4164,6 +4181,8 @@ const CSS_TEXT = `
|
|||
:host([data-theme="light"]) .pool-panel { background: #fff; border-right-color: #e2e8f0; }
|
||||
:host([data-theme="light"]) .pool-panel-header { color: #64748b; border-bottom-color: #e2e8f0; }
|
||||
:host([data-theme="light"]) .pool-panel-header button { border-color: #e2e8f0; color: #64748b; }
|
||||
:host([data-theme="light"]) .canvas-wrap-header { background: #fff; color: #64748b; border-bottom-color: #e2e8f0; }
|
||||
:host([data-theme="light"]) .canvas-wrap-hint { color: #94a3b8; }
|
||||
:host([data-theme="light"]) .sidebar-task:hover { background: #f1f5f9; }
|
||||
:host([data-theme="light"]) .sidebar-item-name { color: #1e293b; }
|
||||
:host([data-theme="light"]) .canvas-wrap { background: #f8fafc; }
|
||||
|
|
@ -4239,16 +4258,28 @@ const CSS_TEXT = `
|
|||
.exec-step-checklist input[type="checkbox"] { accent-color: #8b5cf6; }
|
||||
|
||||
@media (max-width: 768px) {
|
||||
#canvas-view { flex-direction: column; }
|
||||
.pool-panel { width: 100% !important; max-height: 220px; min-width: unset; border-right: none; border-bottom: 1px solid #334155; }
|
||||
.main { overflow: visible; }
|
||||
#canvas-view { flex-direction: column; overflow-y: auto; position: relative; height: auto; min-height: 100%; }
|
||||
.pool-panel {
|
||||
width: 100% !important; min-width: unset;
|
||||
border-right: none; border-bottom: 1px solid #334155;
|
||||
min-height: 50vh; max-height: none; flex-shrink: 0;
|
||||
}
|
||||
.pool-panel.collapsed { min-height: 36px; max-height: 36px; }
|
||||
.canvas-wrap {
|
||||
min-height: 60vh; flex-shrink: 0;
|
||||
border-top: 1px solid #334155;
|
||||
}
|
||||
.canvas-wrap-header { display: flex; }
|
||||
.panel-divider { display: none !important; }
|
||||
.pool-hint { display: none; }
|
||||
.exec-panel { width: 95vw; }
|
||||
.task-edit-panel { width: 95vw; }
|
||||
}
|
||||
@media (max-width: 640px) {
|
||||
.pool-panel { max-height: 180px; }
|
||||
.pool-panel.collapsed { width: 100% !important; max-height: 36px; }
|
||||
.pool-panel { min-height: 45vh; }
|
||||
.pool-panel.collapsed { width: 100% !important; min-height: 36px; max-height: 36px; }
|
||||
.canvas-wrap { min-height: 55vh; }
|
||||
}
|
||||
`;
|
||||
|
||||
|
|
|
|||
|
|
@ -361,7 +361,7 @@ export function renderShell(opts: ShellOptions): string {
|
|||
|
||||
// Service worker registration + update detection
|
||||
if ("serviceWorker" in navigator && location.hostname !== "localhost") {
|
||||
navigator.serviceWorker.register("/sw.js?v=5").then((reg) => {
|
||||
navigator.serviceWorker.register("/sw.js?v=8").then((reg) => {
|
||||
function showUpdateBanner() {
|
||||
if (!isStandalone) return; // Only show update prompt in installed PWA
|
||||
if (sessionStorage.getItem('rspace_update_dismissed')) return; // dismissed this session
|
||||
|
|
@ -2521,7 +2521,7 @@ export function renderModuleLanding(opts: ModuleLandingOptions): string {
|
|||
<script type="module">
|
||||
import '/shell.js';
|
||||
if ("serviceWorker" in navigator && location.hostname !== "localhost") {
|
||||
navigator.serviceWorker.register("/sw.js?v=5").catch(() => {});
|
||||
navigator.serviceWorker.register("/sw.js?v=8").catch(() => {});
|
||||
}
|
||||
document.querySelector('rstack-app-switcher')?.setModules(${moduleListJSON});
|
||||
try {
|
||||
|
|
@ -2861,7 +2861,7 @@ export function renderSubPageInfo(opts: SubPageInfoOptions): string {
|
|||
<script type="module">
|
||||
import '/shell.js';
|
||||
if ("serviceWorker" in navigator && location.hostname !== "localhost") {
|
||||
navigator.serviceWorker.register("/sw.js?v=5").catch(() => {});
|
||||
navigator.serviceWorker.register("/sw.js?v=8").catch(() => {});
|
||||
}
|
||||
document.querySelector('rstack-app-switcher')?.setModules(${moduleListJSON});
|
||||
try {
|
||||
|
|
|
|||
|
|
@ -1039,7 +1039,7 @@ export class RStackMi extends HTMLElement {
|
|||
const STYLES = `
|
||||
:host { display: contents; }
|
||||
|
||||
.mi { position: relative; flex: 1; max-width: 480px; min-width: 0; z-index: 10001; }
|
||||
.mi { position: relative; flex: 1; max-width: 480px; min-width: 0; z-index: 1; }
|
||||
|
||||
/* ── Search bar in header ── */
|
||||
.mi-bar {
|
||||
|
|
@ -1091,7 +1091,7 @@ const STYLES = `
|
|||
background: var(--rs-bg-surface); border: 1px solid var(--rs-border);
|
||||
resize: vertical;
|
||||
}
|
||||
.mi-panel.open { display: flex; flex-direction: column; }
|
||||
.mi-panel.open { display: flex; flex-direction: column; z-index: 10001; }
|
||||
.mi-panel.hidden { display: none; }
|
||||
|
||||
/* ── Panel header ── */
|
||||
|
|
|
|||
Loading…
Reference in New Issue