feat(ts-editor): add mobile support

4 days ago · 2b60c30f7f
parent e7e60d4de6
commit 2b60c30f7f
3 changed files with 100 additions and 2 deletions
--- a/ts-editor/index.html
+++ b/ts-editor/index.html
@ -5,8 +5,9 @@
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width,initial-scale=1.0" />
  <title>MonoDisplay Editor</title>
-  <script>!function(){var t=localStorage.getItem('theme');t&&document.documentElement.setAttribute('data-theme',t)}();</script>
-  <link href="style.css" rel="stylesheet"/>
+  <script>!function () { var t = localStorage.getItem('theme'); t && document.documentElement.setAttribute('data-theme', t) }();</script>
+  <link href="style.css" rel="stylesheet" />
+  <link href="mobile.css" rel="stylesheet" />
 </head>

 <body>
@ -91,11 +92,38 @@
    <div id="right">
      <div id="right-hdr">
        <span class="rh-title">sections</span>
+        <button class="tb-btn" id="mob-add-section" onclick="addSection()">
+          <svg viewBox="0 0 24 24">
+            <line x1="12" y1="5" x2="12" y2="19" />
+            <line x1="5" y1="12" x2="19" y2="12" />
+          </svg>
+        </button>
      </div>
      <div id="sections-wrap">
        <div class="empty-state">No sections yet.<br />Use <b>Add section</b> to get started.</div>
      </div>
    </div>
+    <nav id="mob-tabs">
+      <a class="mob-tab" href="#left">
+        <svg viewBox="0 0 24 24">
+          <rect x="3" y="3" width="18" height="12" rx="1" />
+          <line x1="3" y1="19" x2="8" y2="19" />
+          <line x1="12" y1="19" x2="21" y2="19" />
+        </svg>
+        Preview
+      </a>
+      <a class="mob-tab" href="#right">
+        <svg viewBox="0 0 24 24">
+          <line x1="8" y1="6" x2="21" y2="6" />
+          <line x1="8" y1="12" x2="21" y2="12" />
+          <line x1="8" y1="18" x2="21" y2="18" />
+          <line x1="3" y1="6" x2="3.01" y2="6" />
+          <line x1="3" y1="12" x2="3.01" y2="12" />
+          <line x1="3" y1="18" x2="3.01" y2="18" />
+        </svg>
+        Sections
+      </a>
+    </nav>
  </div>

  <!-- confirm dialog -->
--- a/ts-editor/mobile.css
+++ 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%;
+  }
+}
--- 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; }