doxa-life/doxa-maps
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Plugin Studio on a phone: a button to collapse the header

Browse source 
The layout hides the header's meta slot at phone width (its 56px bar has no
room for it), and the "Hide header" button lived there, so on a phone the
header could not be collapsed at all. A phone-only copy of the button now sits
in the header's end corner (44px, the tabs' corner radius, the same localised
label). The floating "Show header" button brings the header back, as on a
desktop. Wider screens are unchanged.
This commit is contained in:
Doxa Maps 2026-09-30 06:32:30 +00:00
parent 083138362a
commit 52cab2408e
1 changed files with 10 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
plugin-designs/plugin-studio/plugin-studio.vue
View file

@ -76,6 +76,12 @@
<path d="M12 16v5" />
</svg>
</span>
<!-- ON A PHONE the layout hides the header's #meta slot (its 56px bar has no room for it), and the
"Hide header" button in #meta went with it, so a phone could not collapse the header at all. This
copy shows only at phone width, pinned to the header's end corner; the one in #meta serves wider
screens. The floating "Show header" button below brings the header back, as on a desktop. -->
<button type="button" class="ps-hide-header-phone" :title="tr('hideHeader')" :aria-label="tr('hideHeader')"
@click="setHeaderHidden(true)"><span aria-hidden="true">⌃</span></button>
</template>
<!-- #meta: the bundle/element count + an i18n locale toggle. The studio previews LOCALISED
@ -248,6 +254,8 @@ const PS_SHADOW_CSS = `
.ps-token { position:relative; display:inline-flex; }
.ps-show-header { position:fixed; top:8px; inset-inline-end:8px; z-index:2147483000; display:inline-flex; align-items:center; gap:6px; padding:6px 12px; border:1px solid #d1d4cd; border-radius:999px; background:rgba(255,255,255,.94); color:#3b463d; font:600 12px system-ui, sans-serif; cursor:pointer; box-shadow:0 4px 14px rgba(0,0,0,.18); }
.ps-show-header:hover, .ps-show-header:focus-visible { background:#ffffff; outline:2px solid #92b195; }
.ps-hide-header-phone { display:none; }
@media (max-width:760px) { .ps-hide-header-phone { display:inline-flex; position:fixed; top:6px; inset-inline-end:8px; z-index:4; align-items:center; justify-content:center; width:44px; height:44px; padding:0; border:1px solid #d1d4cd; border-radius:var(--vtl-radius,8px); background:#d1d4cd; color:#3b463d; font:18px/1 system-ui, sans-serif; cursor:pointer; } }
.ps-token-dot { width:8px; height:8px; border-radius:50%; background:#b8bdb4; }
.ps-token-dot.is-yours, .ps-token-dot.is-url { background:#92b195; }
.ps-token-dot.is-built { background:#c9b36a; }
@ -1274,6 +1282,8 @@ export default defineComponent({
.ps-token { position:relative; display:inline-flex; }
.ps-show-header { position:fixed; top:8px; inset-inline-end:8px; z-index:2147483000; display:inline-flex; align-items:center; gap:6px; padding:6px 12px; border:1px solid #d1d4cd; border-radius:999px; background:rgba(255,255,255,.94); color:#3b463d; font:600 12px system-ui, sans-serif; cursor:pointer; box-shadow:0 4px 14px rgba(0,0,0,.18); }
.ps-show-header:hover, .ps-show-header:focus-visible { background:#ffffff; outline:2px solid #92b195; }
.ps-hide-header-phone { display:none; }
@media (max-width:760px) { .ps-hide-header-phone { display:inline-flex; position:fixed; top:6px; inset-inline-end:8px; z-index:4; align-items:center; justify-content:center; width:44px; height:44px; padding:0; border:1px solid #d1d4cd; border-radius:var(--vtl-radius,8px); background:#d1d4cd; color:#3b463d; font:18px/1 system-ui, sans-serif; cursor:pointer; } }
.ps-token-dot { width:8px; height:8px; border-radius:50%; background:#b8bdb4; }
.ps-token-dot.is-yours, .ps-token-dot.is-url { background:#92b195; }
.ps-token-dot.is-built { background:#c9b36a; }