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

PPLR Data Maps: on a phone every view tab is on screen, and the legend's collapse button is a real target in the reader's language

Browse source 
rega at 390 px: the tab strip ran past the right edge with no scroll cue, and the flat legend's collapse button measured 19×15 with an English title in every locale. On a phone the tabs wrap (the brand steps aside); the button is 24 px and named by the shared aria keys.
This commit is contained in:
Doxa Maps 2026-09-29 03:36:01 +00:00
parent cc5d592b02
commit 88cd390b27
2 changed files with 9 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
plugin-designs/pplr-data-maps/pplr-data-maps.vue
View file

@ -77,7 +77,11 @@ useShadowStyles(
'font:600 12px/1 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;padding:7px 11px;border-radius:999px}' +
'.pdm-seg button.on{background:#92b195;border-color:#92b195;color:#fff}' +
'.pdm-seg button:hover:not(.on){border-color:#92b195}' +
'.pdm-stage{flex:1 1 0;position:relative;min-height:0}',
'.pdm-stage{flex:1 1 0;position:relative;min-height:0}' +
// PHONE (rega, 390×844): the view tabs ran past the right edge with no scroll cue ("Semantic Trees" at
// x=460). On a phone the brand steps aside and the tabs wrap, so every view is on screen.
'@media (max-width:640px){.pdm-bar{flex-wrap:wrap;overflow-x:visible;padding:6px 8px;gap:6px}' +
'.pdm-brand{display:none}.pdm-seg{flex-wrap:wrap}.pdm-seg button{padding:7px 10px}}',
'pplr-data-maps')
</script>

5
plugin-designs/pplr-data-maps/src/components/FlatLegend.vue
View file

@ -21,6 +21,7 @@
import { ref, computed } from 'vue'
import { useInstance } from '@map/composables/usePplrInstance.js'
import { usePplrT } from '../composables/usePplrT.js'
import { tStatic } from '@map/i18n/index.js'
const props = defineProps({
items: { type: Array, default: () => [] },
@ -72,7 +73,8 @@ function clearSel() {
<template>
<div class="fl-panel" :class="{ collapsed }" :data-theme="theme" v-show="!collapsed">
<div class="fl-titlebar">
<button class="fl-collapse-btn" :title="collapsed ? 'Expand legend' : 'Collapse legend'"
<!-- The shared aria keys (11 locales); a shared key, so tStatic (t() would prefix it with pplr.). -->
<button type="button" class="fl-collapse-btn" :title="tStatic('aria.collapseLegend')" :aria-label="tStatic('aria.collapseLegend')"
@click="collapsed = true">
<svg width="11" height="11" viewBox="0 0 24 24" fill="none">
<polyline points="14,18 8,12 14,6" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"/>
@ -138,6 +140,7 @@ function clearSel() {
background: transparent; border: none; cursor: pointer;
color: #8b949e; padding: 2px 4px; border-radius: 4px;
display: flex; align-items: center; justify-content: center;
min-width: 24px; min-height: 24px; /* a 24 px target (WCAG 2.5.8); it measured 19×15 */
}
.fl-collapse-btn:hover { color: #c9d1d9; background: rgba(115,161,127,0.12); }
.fl-panel[data-theme="light"] .fl-collapse-btn { color: #57606a; }