Fix: real-hardware bring-up issues found at 1920x1080 on the Pi
After testing the V09 redesign live on the Pi at onefinity.local
(1920x1080, Chrome fullscreen) several real bugs surfaced. This
commit fixes all of them.
Layout fits at 1920x1080
- Cap .app-shell at 100vh height with overflow:hidden so child
flex containers actually constrain to one screen.
- Make .control-page / .program-page / .console-page use
flex 1 1 auto + min-height 0 + overflow hidden so the page total
no longer grows to ~36 000 px when the gcode-viewer is mounted.
- Override clusterize.css default max-height: 200px on the
.clusterize-scroll element with max-height: none + flex 1 1 0 +
height 100% so the gcode listing fills the available column.
E-Stop in the header
- The legacy estop.pug SVG had width=130 height=130 but no
viewBox, so CSS-only sizing did nothing and the SVG content
spilled ~26 px off the right edge of the screen and ~70 px
below the header. Add viewBox="0 0 130 130" plus
preserveAspectRatio so CSS sizing actually shrinks the inner
geometry. Drop the octagonal clip-path (the SVG already
carries its own yellow safety ring + EMERGENCY/STOP text).
3D toolpath preview (path-viewer)
- The legacy .path-viewer.small CSS clamped the canvas to
340 x 150 floated into the corner. In the new program-body
grid we want it to fill the 600 px right column. Override
with width 100%, height auto, float none, !important.
- Make orbit.js wheel/touchstart/touchmove listeners
{passive: false} so OrbitControls.preventDefault() actually
works and the page no longer scrolls while panning the 3D
view on a touch screen.
Vue 1 template + reactivity bugs exposed by the live data
- Replace v-else-if (Vue 1 has no v-else-if) in
control-view.pug with three sibling v-if templates that
mutually exclude on w.enabled and state['2an'] == 3.
- axis-vars._get_motor_id: guard motor.axis.toLowerCase()
against undefined motors (initial config is [{}, {}, ...]).
- axis-vars._check_is_enabled: prefer config.motors[i].axis
when present, fall back to state[N + 'an'] only for
recognised axes (x/y/z/a) so undefined == undefined
doesn't mistakenly enable b/c rows.
- program-mixin: tolerate state.files / state.gcode_list
being undefined right after connect.
App-shell race conditions
- Skip the early parse_hash() in app.js ready() when the
initial hash is in the settings family. Those Svelte
components read settings.units / settings.probing-prompts /
motion.* etc. and crash on first paint with the empty
placeholder config. Stay on loading-view until update()
completes and routes us in itself.
Misc
- src/static/js/ui.js: null-guard the legacy burger menu code
(#menuLink no longer exists). Was throwing 'Cannot set
properties of null (setting onclick)'.
- src/static/css/Audiowide.css: switch the gstatic font URL
from http:// to https:// so it isn't blocked as mixed
content under the home.muehe.org HTTPS proxy.
- Macro buttons: drop the default 6 px yellow border-left.
The stripe now only appears via .has-color when
state.macros[i].color is actually configured. Removes the
asymmetric/lopsided look from the screenshot.
Tested live on http://10.1.10.55/ and via the HTTPS proxy at
https://onefinity.home.muehe.org/.
This commit is contained in:
@@ -74,7 +74,9 @@ tt
|
||||
.app-shell
|
||||
display flex
|
||||
flex-direction column
|
||||
min-height 100vh
|
||||
height 100vh // cap at viewport so children that ask for 1fr/flex:1
|
||||
width 100%
|
||||
overflow hidden
|
||||
background $body-bg
|
||||
|
||||
.app-body
|
||||
@@ -83,9 +85,10 @@ tt
|
||||
display flex
|
||||
flex-direction column
|
||||
padding 18px
|
||||
overflow auto // settings/motor pages can scroll inside the body
|
||||
|
||||
> *
|
||||
flex 1
|
||||
flex 1 1 auto
|
||||
min-height 0
|
||||
|
||||
.app-head
|
||||
@@ -496,28 +499,34 @@ span.unit
|
||||
50%
|
||||
fill #ff9d00
|
||||
|
||||
// Octagonal STOP wrapper around the existing <estop> SVG. The SVG
|
||||
// rules below (`.button`, `.ring`, etc.) keep working unchanged.
|
||||
// E-Stop in the header — wraps the legacy <estop> SVG component.
|
||||
// Sized to fit the 96px header with breathing room. The SVG carries
|
||||
// its own yellow safety ring and EMERGENCY/STOP text; we only frame
|
||||
// it with a soft drop shadow and a hover/active hit target.
|
||||
.app-head .estop
|
||||
width 88px
|
||||
height 88px
|
||||
background #dc2626
|
||||
clip-path polygon(30% 0, 70% 0, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0 70%, 0 30%)
|
||||
display flex
|
||||
width 80px
|
||||
height 80px
|
||||
display inline-flex
|
||||
align-items center
|
||||
justify-content center
|
||||
border 3px solid #fff
|
||||
box-shadow 0 0 0 3px #b91c1c, 0 8px 20px rgba(220, 38, 38, 0.35)
|
||||
border-radius 9999px
|
||||
cursor pointer
|
||||
transition transform 0.06s
|
||||
transition transform 0.06s, filter 0.15s
|
||||
flex 0 0 auto
|
||||
// Make sure the SVG's internal coordinate space scales correctly
|
||||
overflow visible
|
||||
|
||||
&:hover
|
||||
filter brightness(1.05)
|
||||
|
||||
&:active
|
||||
transform scale(0.96)
|
||||
|
||||
svg
|
||||
width 56px
|
||||
height 56px
|
||||
width 80px
|
||||
height 80px
|
||||
cursor pointer
|
||||
display block
|
||||
|
||||
.button:hover
|
||||
filter brightness(120%)
|
||||
@@ -1009,11 +1018,12 @@ tt.save
|
||||
// CONTROL page (V09)
|
||||
// =====================================================================
|
||||
.control-page
|
||||
flex 1
|
||||
flex 1 1 auto
|
||||
min-height 0
|
||||
display flex
|
||||
flex-direction column
|
||||
gap 14px
|
||||
overflow hidden
|
||||
|
||||
.control-page .control-grid
|
||||
display grid
|
||||
@@ -1362,7 +1372,6 @@ tt.save
|
||||
height 84px
|
||||
border-radius 14px
|
||||
border 1px solid transparent
|
||||
border-left 6px solid $accent
|
||||
color #fff
|
||||
background $jog-bg
|
||||
font-weight 800
|
||||
@@ -1386,6 +1395,12 @@ tt.save
|
||||
opacity 0.45
|
||||
cursor not-allowed
|
||||
|
||||
// Per-macro color stripe is opt-in via :class="has-color" set by
|
||||
// the template only when state.macros[i].color is configured.
|
||||
&.has-color
|
||||
border-left-width 6px
|
||||
border-left-style solid
|
||||
|
||||
.mnum
|
||||
display inline-flex
|
||||
align-items center
|
||||
@@ -1398,16 +1413,12 @@ tt.save
|
||||
font-size 0.85rem
|
||||
font-weight 900
|
||||
text-shadow none
|
||||
|
||||
.micon
|
||||
font-size 1.1rem
|
||||
opacity 0.75
|
||||
flex 0 0 auto
|
||||
|
||||
.mname
|
||||
white-space nowrap
|
||||
overflow hidden
|
||||
text-overflow ellipsis
|
||||
max-width 9em
|
||||
|
||||
// Override drawer
|
||||
.override-drawer
|
||||
@@ -1487,10 +1498,11 @@ tt.save
|
||||
// PROGRAM page (V09)
|
||||
// =====================================================================
|
||||
.program-page
|
||||
flex 1
|
||||
flex 1 1 auto
|
||||
min-height 0
|
||||
display flex
|
||||
flex-direction column
|
||||
overflow hidden
|
||||
|
||||
.program-card
|
||||
flex 1
|
||||
@@ -1609,7 +1621,7 @@ tt.save
|
||||
min-width 300px
|
||||
|
||||
.program-body
|
||||
flex 1
|
||||
flex 1 1 auto
|
||||
display grid
|
||||
grid-template-columns 1fr 600px
|
||||
min-height 0
|
||||
@@ -1617,13 +1629,36 @@ tt.save
|
||||
|
||||
> .gcode
|
||||
border-right 1px solid $line-soft
|
||||
overflow auto
|
||||
background #fafafa
|
||||
padding 0
|
||||
margin 0
|
||||
overflow hidden
|
||||
min-height 0
|
||||
display flex
|
||||
flex-direction column
|
||||
|
||||
// 3D toolpath preview — fill the entire 600px column. Override the
|
||||
// legacy `.path-viewer.small` rule which would clamp the canvas to
|
||||
// 340x150 and float it into the corner.
|
||||
> .path-viewer
|
||||
overflow hidden
|
||||
min-height 0
|
||||
display flex
|
||||
flex-direction column
|
||||
|
||||
.path-viewer-content
|
||||
flex 1 1 auto
|
||||
width 100% !important
|
||||
height auto !important
|
||||
min-height 0
|
||||
float none !important
|
||||
margin 0 !important
|
||||
|
||||
&.small .path-viewer-content
|
||||
width 100% !important
|
||||
height auto !important
|
||||
float none !important
|
||||
margin 0 !important
|
||||
|
||||
.progress-bar
|
||||
height 28px
|
||||
@@ -1645,8 +1680,20 @@ tt.save
|
||||
font-size 13px
|
||||
line-height 1.55
|
||||
|
||||
.clusterize
|
||||
flex 1 1 0
|
||||
min-height 0
|
||||
overflow hidden
|
||||
display flex
|
||||
flex-direction column
|
||||
height 100%
|
||||
|
||||
.clusterize-scroll
|
||||
max-height 100%
|
||||
flex 1 1 0
|
||||
min-height 0
|
||||
height 100%
|
||||
max-height none // override clusterize.css default of 200px
|
||||
width 100%
|
||||
overflow auto
|
||||
|
||||
ul
|
||||
@@ -1675,9 +1722,10 @@ tt.save
|
||||
// CONSOLE page (V09)
|
||||
// =====================================================================
|
||||
.console-page
|
||||
flex 1
|
||||
flex 1 1 auto
|
||||
display flex
|
||||
min-height 0
|
||||
overflow hidden
|
||||
|
||||
.console-card
|
||||
flex 1
|
||||
|
||||
Reference in New Issue
Block a user