chris/balloonDesign
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Adjust classic manual selection behavior

Browse Source
This commit is contained in:
chris 2025-12-17 16:59:01 -05:00
parent 5adff65791
commit 540acedcab
2 changed files with 1095 additions and 57 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1025
classic.js
View File

File diff suppressed because it is too large Load Diff

109
style.css
View File

@ -31,6 +31,13 @@ body[data-active-tab="#tab-wall"] #clear-canvas-btn-top {
#balloon-canvas { touch-action: none; }
.classic-expanded-canvas {
height: 130vh !important;
min-height: 130vh;
overflow: auto;
}
.balloon-canvas {
background: #fff;
border-radius: 1rem;
@ -429,7 +436,7 @@ body[data-active-tab="#tab-wall"] #clear-canvas-btn-top {
#classic-display,
#wall-display,
#balloon-canvas {
margin-bottom: 5rem;
margin-bottom: 6.5rem;
}
/* Stack switching: show only the active mobile tab stack across panels */
@ -464,6 +471,8 @@ body[data-active-tab="#tab-wall"] #clear-canvas-btn-top {
.swatch.tiny { width: 1.8rem; height: 1.8rem; }
.select { min-height: 44px; }
.panel-card { padding: 0.85rem; }
.manual-hub { position: sticky; top: 0; z-index: 6; }
.manual-detail-stage { min-height: 260px; }
}
.mobile-action-bar {
@ -607,6 +616,57 @@ body[data-active-tab="#tab-wall"] #clear-canvas-btn-top {
box-shadow: 0 0 0 2px rgba(37,99,235,0.18), 0 6px 16px rgba(37,99,235,0.2);
}
.manual-hub {
background: linear-gradient(135deg, rgba(255,255,255,0.9), rgba(240,249,255,0.92));
border: 1px solid rgba(226,232,240,0.9);
border-radius: 1rem;
padding: 0.9rem 1rem;
box-shadow: 0 12px 28px rgba(15,23,42,0.08);
display: flex;
flex-direction: column;
gap: 0.6rem;
}
.manual-hub-header {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 0.75rem;
}
.manual-hub-title { font-weight: 800; color: #0f172a; letter-spacing: -0.015em; }
.manual-hub-subtitle { font-size: 0.85rem; color: #475569; line-height: 1.3; }
.manual-hub-actions { display: flex; gap: 0.35rem; }
.manual-hub-track {
display: grid;
grid-template-columns: auto 1fr auto;
align-items: center;
gap: 0.55rem;
}
.manual-hub-count { grid-column: 1 / -1; text-align: right; }
.manual-range {
width: 100%;
accent-color: #2563eb;
}
.manual-detail {
display: none;
}
.manual-detail-stage { display: none; }
.manual-detail-empty { display: none; }
.manual-hub-hint { line-height: 1.4; }
.chip-btn {
background: rgba(255,255,255,0.85);
border: 1px solid rgba(148,163,184,0.4);
border-radius: 999px;
padding: 0.45rem 0.75rem;
font-weight: 700;
font-size: 0.85rem;
color: #0f172a;
box-shadow: 0 6px 16px rgba(15,23,42,0.08);
transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.chip-btn:active { transform: translateY(1px); }
.chip-btn:focus-visible { outline: 2px solid #2563eb; outline-offset: 2px; }
.mobile-tabbar {
position: fixed;
inset-inline: 0;
@ -631,7 +691,17 @@ body[data-active-tab="#tab-wall"] #clear-canvas-btn-top {
#classic-display,
#wall-display,
#balloon-canvas {
margin-bottom: 5.5rem;
margin-bottom: 0;
height: calc(100vh - 190px) !important; /* tie to viewport minus header/controls */
max-height: calc(100vh - 190px) !important;
}
/* Keep the main canvas panels above the tabbar/action bar */
#canvas-panel,
#classic-canvas-panel {
padding-bottom: 12vh;
}
#classic-canvas-panel {
padding-bottom: 14vh; /* leave space for action bar */
}
}
.mobile-tabbar .mobile-tab-btn {
@ -666,6 +736,39 @@ body[data-active-tab="#tab-wall"] #clear-canvas-btn-top {
transform: translateY(-2px);
}
.canvas-toolbar {
display: flex;
align-items: center;
justify-content: space-between;
gap: .75rem;
padding: .6rem .85rem;
border-bottom: 1px solid #e5e7eb;
background: linear-gradient(90deg, #f8fafc, #fff);
position: sticky;
top: 0;
z-index: 5;
}
.canvas-toolbar .toolbar-left,
.canvas-toolbar .toolbar-right {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: .5rem;
}
.canvas-toolbar button { white-space: nowrap; }
.quad-modal{position:fixed;inset:0;z-index:999;display:flex;align-items:center;justify-content:center;pointer-events:none;}
.quad-modal.hidden{display:none;}
.quad-modal:not(.hidden){pointer-events:auto;}
.quad-modal-backdrop{position:absolute;inset:0;background:rgba(15,23,42,0.45);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);}
.quad-modal-panel{position:relative;z-index:1;pointer-events:auto;background:#fff;border-radius:1rem;padding:1rem;box-shadow:0 22px 50px rgba(15,23,42,0.25);width:min(560px,90vw);}
.quad-modal-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:.5rem;}
.quad-modal-title{font-weight:700;font-size:1rem;color:#0f172a;}
.quad-modal-body{border:1px solid #e5e7eb;border-radius:.75rem;overflow:hidden;background:#f8fafc;}
.quad-modal-display{width:100%;height:360px;max-height:70vh;position:relative;background:#fff;perspective:1200px;}
.quad-modal-display svg{transform-style:preserve-3d;transition:transform 240ms ease, opacity 200ms ease;}
.quad-modal-display svg{width:100%;height:100%;}
@media (min-width: 1024px) {
.control-sheet {
@ -673,7 +776,7 @@ body[data-active-tab="#tab-wall"] #clear-canvas-btn-top {
top: 7rem;
bottom: auto;
width: 340px;
max-height: calc(100vh - 8rem);
max-height: calc(93vh - 8rem);
border-radius: 1.5rem;
position: sticky;
overflow-y: auto;