mirror of
https://github.com/logicog/RTLPlayground.git
synced 2026-10-29 17:54:14 +08:00
web: keep the port strip on one row
The strip no longer wraps. Ports shrink to fit the row and scroll when they cannot, so the header on a phone stays at two rows. The strip moves under the title only below 720 px, where it no longer fits beside it. Drop the unused d_ports strings and the strip title.
This commit is contained in:
1 parent
2415015a87
commit
6fad2836ae
2 files changed
+15
-10
No files matched your search
+9
-4
@@ -112,7 +112,9 @@ label.row span.lb{width:110px;flex:none;color:var(--fg2);font-size:13px}
|
||||
}
|
||||
.switch input:checked+i{background:var(--ok)}
|
||||
.switch input:checked+i:before{transform:translateX(15px)}
|
||||
#strip{display:flex;gap:6px;flex-wrap:wrap;flex:1;justify-content:center;min-width:0}
|
||||
#strip{display:flex;gap:6px;flex:1;min-width:0;overflow-x:auto;scrollbar-width:thin}
|
||||
.port:first-child{margin-left:auto}
|
||||
.port:last-child{margin-right:auto}
|
||||
.port{
|
||||
width:40px;border:2px solid var(--bd);border-radius:7px;padding:3px 0 2px;
|
||||
text-align:center;cursor:pointer;background:var(--panel2);position:relative;
|
||||
@@ -180,10 +182,13 @@ button.danger{background:var(--bad);color:#fff;border-color:transparent}
|
||||
#burger{display:block}
|
||||
main{padding:14px 12px 40px}
|
||||
#top{padding:8px 10px;gap:7px}
|
||||
#ttitle{font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1}
|
||||
#strip{order:3;flex-basis:100%;justify-content:flex-start}
|
||||
#ttitle{font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
|
||||
#dirty{padding:2px 7px}
|
||||
}
|
||||
@media (max-width:720px){
|
||||
#ttitle{flex:1}
|
||||
#strip{order:3;flex-basis:100%}
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
(function(){
|
||||
@@ -216,7 +221,7 @@ button.danger{background:var(--bad);color:#fff;border-color:transparent}
|
||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="var(--fg)" stroke-width="2"><path d="M4 6h16M4 12h16M4 18h16"/></svg>
|
||||
</button>
|
||||
<span id="ttitle"></span>
|
||||
<div id="strip" data-i18n-t="d_ports_h"></div>
|
||||
<div id="strip"></div>
|
||||
<span id="dirty" data-i18n="hdr_dirty" data-i18n-t="hdr_dirty_t">unsaved changes</span>
|
||||
<button class="ctl pri" id="saveBtn" data-i18n="hdr_save" data-i18n-t="hdr_save_t">Save to flash</button>
|
||||
</header>
|
||||
|
||||
Reference in new issue
Block a user