CTT
/
libmonoformat
13
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat(ts-editor): add mobile support

Browse Source
main
flop 4 days ago
parent e7e60d4de6
commit 2b60c30f7f
3 changed files with 100 additions and 2 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 32
      ts-editor/index.html
  2. 68
      ts-editor/mobile.css
  3. 2
      ts-editor/style.css

32
ts-editor/index.html
Unescape View File

@ -5,8 +5,9 @@
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<meta name="viewport" content="width=device-width,initial-scale=1.0" /> <meta name="viewport" content="width=device-width,initial-scale=1.0" />
<title>MonoDisplay Editor</title> <title>MonoDisplay Editor</title>
<script>!function(){var t=localStorage.getItem('theme');t&&document.documentElement.setAttribute('data-theme',t)}();</script> <script>!function () { var t = localStorage.getItem('theme'); t && document.documentElement.setAttribute('data-theme', t) }();</script>
<link href="style.css" rel="stylesheet"/> <link href="style.css" rel="stylesheet" />
<link href="mobile.css" rel="stylesheet" />
</head> </head>
<body> <body>
@ -91,11 +92,38 @@
<div id="right"> <div id="right">
<div id="right-hdr"> <div id="right-hdr">
<span class="rh-title">sections</span> <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>
<div id="sections-wrap"> <div id="sections-wrap">
<div class="empty-state">No sections yet.<br />Use <b>Add section</b> to get started.</div> <div class="empty-state">No sections yet.<br />Use <b>Add section</b> to get started.</div>
</div> </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> </div>
<!-- confirm dialog --> <!-- confirm dialog -->

68
ts-editor/mobile.css
Unescape View File

@ -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%;
}
}

2
ts-editor/style.css
Unescape View File

@ -680,3 +680,5 @@ select.meta-val {
.cb.primary:hover { .cb.primary:hover {
background: var(--bg-active) background: var(--bg-active)
} }
#mob-add-section { display: none; }
Write Preview
Loading…
Cancel
Save