From 2b60c30f7f204f3ce0b101d648c087c887e4a52a Mon Sep 17 00:00:00 2001 From: flop Date: Sat, 6 Jun 2026 12:01:09 +0200 Subject: [PATCH] feat(ts-editor): add mobile support --- ts-editor/index.html | 32 +++++++++++++++++++-- ts-editor/mobile.css | 68 ++++++++++++++++++++++++++++++++++++++++++++ ts-editor/style.css | 2 ++ 3 files changed, 100 insertions(+), 2 deletions(-) create mode 100644 ts-editor/mobile.css diff --git a/ts-editor/index.html b/ts-editor/index.html index c91f6e3..8a2373c 100644 --- a/ts-editor/index.html +++ b/ts-editor/index.html @@ -5,8 +5,9 @@ MonoDisplay Editor - - + + + @@ -91,11 +92,38 @@ + diff --git a/ts-editor/mobile.css b/ts-editor/mobile.css new file mode 100644 index 0000000..b378fb2 --- /dev/null +++ b/ts-editor/mobile.css @@ -0,0 +1,68 @@ +@media (max-width: 640px) { + #topbar { + overflow-x: auto; + overflow-y: hidden; + scrollbar-width: none; + -webkit-overflow-scrolling: touch; + gap: 6px; + padding: 0 8px; + } + + #topbar::-webkit-scrollbar { + display: none; + } + + #topbar>* { + flex-shrink: 0; + } + + #topbar .tb-btn { + font-size: 0; + gap: 0; + padding: 3px 8px; + } + + #topbar .tb-btn svg { + width: 15px; + height: 15px; + } + + #topbar #theme-toggle { + font-size: 11px; + } + + #topbar button[onclick="addSection()"] { + display: none; + } + + #mob-add-section { + display: flex; + } + + #topbar [style*="flex:1"] { + display: none; + } + + #main { + flex-direction: column; + overflow-y: auto; + } + + #left, + #right { + width: 100%; + border-right: none; + flex-shrink: 0; + } + + #left { + border-bottom: 1px solid var(--bd-inner); + padding: 10px; + gap: 8px; + } + + #display-box { + aspect-ratio: 2/1; + width: 100%; + } +} diff --git a/ts-editor/style.css b/ts-editor/style.css index 49a023e..8a2c032 100644 --- a/ts-editor/style.css +++ b/ts-editor/style.css @@ -680,3 +680,5 @@ select.meta-val { .cb.primary:hover { background: var(--bg-active) } + +#mob-add-section { display: none; } \ No newline at end of file