legop3/MultiRoombaRover
1
0
Fork 0
mirror of https://github.com/legop3/MultiRoombaRover.git synced 2026-09-16 09:31:20 -04:00
Code Issues Actions Packages Projects Releases Wiki Activity

moving a LOT of stuff around in web ui

Browse Source
This commit is contained in:
legop3
2026-08-02 23:06:30 -04:00
parent 3ebd1c7f9c
commit 15a60a58e6
45 changed files with 814 additions and 870 deletions
Download Patch File Download Diff File Expand all files Collapse all files
webui/src/index.css
-205
View File
@@ -25,15 +25,6 @@ body {
scrollbar-color: rgba(148, 163, 184, 0.55) transparent;
}
@keyframes spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
*::-webkit-scrollbar {
width: 2px;
height: 2px;
@@ -59,40 +50,6 @@ body {
}
@layer components {
.inter-instance-overlay-frame {
/* The unscaled frame always stays inside the viewport on phones and on
desktop browsers that do not apply the larger presentation below. */
max-width: calc(100vw - 0.5rem);
}
.inter-instance-overlay-body {
max-height: 82vh;
}
@media (min-width: 1024px) {
.inter-instance-overlay-scale {
/*
`zoom` enlarges the complete interface—including typography, controls,
spacing, and hit targets—while participating in layout. A transform
would only enlarge the paint result and could overlap or clip sibling
content because the browser would still reserve the original size.
*/
zoom: 1.5;
}
.inter-instance-overlay-frame {
/* Reserve the inverse width before the 1.5x zoom so the final rendered
frame still fits inside the physical desktop viewport. */
max-width: calc((100vw - 0.5rem) / 1.5);
}
.inter-instance-overlay-body {
/* 54.6667vh becomes approximately 82vh after the 1.5x desktop zoom. */
max-height: 54.6667vh;
}
}
.panel {
@apply bg-black text-white p-0 rounded-md;
}
@@ -125,166 +82,4 @@ body {
@apply px-0.5 py-0.5 text-sm font-medium text-white transition-colors bg-rose-600 hover:bg-rose-500 rounded-md;
}
.chat-composer {
/* The chat bar lives in several panel widths, so container queries are more
accurate than viewport media queries. The default narrow layout preserves
a usable chat row first, then moves all TTS controls to a second row. */
container-type: inline-size;
display: flex;
flex-wrap: wrap;
align-items: stretch;
gap: 0.125rem;
min-width: 0;
overflow: hidden;
}
.chat-composer-nickname {
/* Keep nickname deliberately compact so the message input and Send button
remain usable on mobile while still allowing longer typed nicknames. */
flex: 0 0 5rem;
min-width: 0;
order: 1;
}
.chat-composer-input {
/* This input is the pressure valve for the first row. It can shrink to the
remaining space, but the TTS controls no longer steal that row on mobile. */
flex: 1 1 0%;
min-width: 0;
order: 2;
}
.chat-composer-send {
/* Send must stay with the message input in the narrow two-row layout. */
flex: 0 0 auto;
align-self: stretch;
order: 3;
}
.chat-composer-tts {
/* The full-width basis is what creates the second row when the composer is
narrow; the controls themselves still remain one compact TTS strip. */
display: flex;
flex: 1 1 100%;
align-items: center;
gap: 0.125rem;
min-width: 0;
overflow: hidden;
order: 4;
}
@container (min-width: 44rem) {
.chat-composer {
/* Once there is enough room for a meaningful message field, all controls
return to the single-row desktop layout. */
flex-wrap: nowrap;
}
.chat-composer-nickname {
flex-basis: 7rem;
order: 1;
}
.chat-composer-input {
order: 2;
}
.chat-composer-tts {
flex: 0 1 auto;
order: 3;
}
.chat-composer-send {
order: 4;
}
}
}
@layer utilities {
@keyframes batteryTickWarn {
0%,
49% {
background-color: rgba(255, 255, 255, 0.95);
}
50%,
100% {
background-color: rgba(239, 68, 68, 0.95);
}
}
.battery-tick-warn {
animation: batteryTickWarn 0.4s steps(2, end) infinite;
}
@keyframes batteryUrgentFlash {
0%,
49% {
opacity: 1;
}
50%,
100% {
opacity: 0.25;
}
}
.battery-urgent-flash {
animation: batteryUrgentFlash 0.4s steps(2, end) infinite;
}
.no-touch-select {
user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
-webkit-touch-callout: none;
}
.mobile-touch-control {
/*
Mobile rover controls are press surfaces, not document text. These flags
deliberately stack the browser-specific knobs because iOS Safari can still
show callouts, selection handles, tap highlights, or delayed gesture behavior
when only the standard property is present.
*/
user-select: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-webkit-touch-callout: none;
-webkit-tap-highlight-color: transparent;
touch-action: manipulation;
overscroll-behavior: contain;
}
.mobile-drag-control {
/*
Drag controls need the stricter touch-action value so the browser does not
reinterpret a held thumb as page pan, pinch zoom, double-tap zoom, or text
selection while the control is actively tracking pointer movement.
*/
touch-action: none;
}
.mobile-text-entry {
/*
iOS Safari zooms focused form fields whose computed text size is below
16px. Keep HUD chat inputs at that threshold instead of fighting focus with
JavaScript, because the input still needs normal editing and caret behavior.
*/
font-size: 16px;
-webkit-text-size-adjust: 100%;
touch-action: manipulation;
}
.ios-safe-screen {
/*
viewport-fit=cover stops iOS from reserving automatic bars on both ends of
a homescreen app. We then add back only the unsafe notch edges so controls
do not sit under camera hardware, while the opposite edge stays flush.
*/
/* padding-top: env(safe-area-inset-top); */
/* padding-left: env(safe-area-inset-left); */
/* padding-right: env(safe-area-inset-right); */
/* padding-bottom: 0; */
}
}