138 lines
3.5 KiB
Vue
138 lines
3.5 KiB
Vue
<script setup lang="ts">
|
|
import { ref } from "vue";
|
|
import { board } from "~/board/definition";
|
|
|
|
defineEmits<{ select: [sectionId: string] }>();
|
|
|
|
// JS-tracked hover (rather than CSS :hover) so the highlight is observable in
|
|
// tests and can later coordinate with the dashboard dot layer.
|
|
const hoveredId = ref<string | null>(null);
|
|
</script>
|
|
|
|
<template>
|
|
<div class="board">
|
|
<section
|
|
v-for="block in board"
|
|
:key="block.id"
|
|
class="block"
|
|
:data-block-id="block.id"
|
|
>
|
|
<h2 class="block__title">{{ block.title }}</h2>
|
|
<div class="block__columns">
|
|
<div
|
|
v-for="(column, columnIndex) in block.columns"
|
|
:key="columnIndex"
|
|
class="block__column"
|
|
>
|
|
<button
|
|
v-for="section in column"
|
|
:key="section.id"
|
|
type="button"
|
|
class="section"
|
|
:class="[
|
|
`section--${section.size.toLowerCase()}`,
|
|
{ 'is-hovered': hoveredId === section.id },
|
|
]"
|
|
:data-section-id="section.id"
|
|
@click="$emit('select', section.id)"
|
|
@mouseenter="hoveredId = section.id"
|
|
@mouseleave="hoveredId = null"
|
|
>
|
|
<span class="section__label">{{ section.label }}</span>
|
|
<span class="section__size">{{ section.size }}</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.board {
|
|
display: grid;
|
|
/* Each column hugs its widest block, blocks stretch to fill their cell, and
|
|
the grid is centered. So the two left blocks (Value for Customer, Tech-
|
|
Enabled) share one width and the two right blocks (Right First Time,
|
|
Building a Learning Organisation) share another, the bottoms line up, and
|
|
the outer silhouette stays a clean rectangle. The left column lands a touch
|
|
under half the right — wide enough to hold its A3 sheet without forcing a
|
|
rigid ratio. */
|
|
grid-template-columns: max-content max-content;
|
|
justify-content: center;
|
|
gap: 0.75rem;
|
|
font-family:
|
|
"Cutive Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
|
|
/* Base = A4 long side; A3/A2 derive from it by √2 so ratios stay exact.
|
|
Tune this single value to resize the whole board. */
|
|
--sheet-base: 220px;
|
|
}
|
|
|
|
.block {
|
|
border: 1px solid currentColor;
|
|
padding: 0.5rem;
|
|
}
|
|
|
|
.block__title {
|
|
margin: 0 0 0.5rem;
|
|
font-size: 0.875rem;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.05em;
|
|
text-align: center;
|
|
}
|
|
|
|
.block__columns {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
justify-content: center;
|
|
gap: 0.5rem;
|
|
}
|
|
|
|
.block__column {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.5rem;
|
|
}
|
|
|
|
.section {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
border: 1px dashed currentColor;
|
|
background: transparent;
|
|
font: inherit;
|
|
text-align: left;
|
|
cursor: pointer;
|
|
padding: 0.5rem;
|
|
box-sizing: border-box;
|
|
/* ISO 216: every A-series sheet is landscape √2 : 1 (width : height). */
|
|
aspect-ratio: 1.41421356 / 1;
|
|
}
|
|
|
|
/* Each step up the A-series scales linear dimensions by √2 (A3 = A4·√2,
|
|
A2 = A4·2), so the boxes keep the true relative paper sizes. */
|
|
.section--a4 {
|
|
width: var(--sheet-base);
|
|
}
|
|
.section--a3 {
|
|
width: calc(var(--sheet-base) * 1.41421356);
|
|
}
|
|
.section--a2 {
|
|
width: calc(var(--sheet-base) * 2);
|
|
}
|
|
|
|
.section.is-hovered {
|
|
outline: 2px solid currentColor;
|
|
}
|
|
|
|
.section__label {
|
|
overflow-wrap: anywhere;
|
|
line-height: 1.2;
|
|
}
|
|
|
|
.section__size {
|
|
align-self: flex-end;
|
|
font-size: 0.75rem;
|
|
opacity: 0.7;
|
|
}
|
|
</style>
|