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
@ -7,6 +7,7 @@
  <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" />
  <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; }