polylan/polylan-submitter
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

various display fixes

Browse Source
This commit is contained in:
Legrems
2026-10-16 13:25:56 +02:00
parent ad7726d978
commit b5716d6dcd
2 changed files with 38 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files
polylan_submitter/src/Planning.vue
+37 -14
View File
@@ -1,7 +1,7 @@
<script setup lang="ts">
import { computed } from "vue";
import { computed, useTemplateRef } from "vue";
import { useI18n } from "vue-i18n";
import { useTitle } from "@vueuse/core";
import { useElementSize, useTitle } from "@vueuse/core";
import { useQuery } from "@tanstack/vue-query";
import { eventPlanningQuery } from "@/queries";
import type { PlanningSlotOut } from "./api/types.gen";
@@ -20,12 +20,19 @@ useTitle(computed(() => t("planning.title")));
const { data: slots, isPending: loading } = useQuery(eventPlanningQuery(props.eventPath));
const HOUR = 3600e3;
const HOUR_PX = 104; // a 2h slot ends up close to the 2:3 cover ratio
// Hour height per px of column width: a 2h slot ends up close to the 2:3 cover ratio
const HOUR_RATIO = 104 / 150;
const BREAK_PX = 34;
const DAY_PX = 32;
const AXIS_PX = 56;
const COL_PX = 150;
// Columns shrink to fit the page, the planning only scrolls sideways below the min
const MIN_COL_PX = 80;
const MAX_COL_PX = 150;
const GAP_PX = 10;
// The multi-anims column is the big one, its covers 1.75x the size of the others
const WIDE_RATIO = 1.75;
// Room on the left for the day names, they stick out of the time axis
const DAY_LABEL_ROOM_PX = 120;
// Empty runs at least this long (nights) get squashed into a thin break
const MIN_BREAK_HOURS = 3;
@@ -48,6 +55,9 @@ interface Placed {
when: string;
}
const scroller = useTemplateRef<HTMLElement>("scroller");
const { width: available } = useElementSize(scroller);
const layout = computed(() => {
const list = (slots.value ?? []).map((slot) => ({
slot,
@@ -56,6 +66,16 @@ const layout = computed(() => {
}));
if (!list.length) return null;
// Unused columns are dropped, the multi-anims ones are wider
const columnIds = [...new Set(list.map(({ slot }) => slot.column))].sort((a, b) => a - b);
const isWide = (id: number) => list.some(({ slot }) => slot.column === id && slot.is_multi_anims);
const wideCount = columnIds.filter(isWide).length;
const fit =
(available.value - DAY_LABEL_ROOM_PX - AXIS_PX - (columnIds.length - 1) * GAP_PX) /
(columnIds.length + (WIDE_RATIO - 1) * wideCount);
const colPx = available.value ? Math.min(MAX_COL_PX, Math.max(MIN_COL_PX, fit)) : MAX_COL_PX;
const hourPx = colPx * HOUR_RATIO;
// Multi-anims run the whole event, only the other slots decide what's busy
const singles = list.filter(({ slot }) => !slot.is_multi_anims);
const busy = (t: number) => singles.some(({ b, e }) => b < t + HOUR && e > t);
@@ -75,8 +95,8 @@ const layout = computed(() => {
y += DAY_PX;
lastDay = day;
}
segments.push({ from: t, to: t + HOUR, y, h: HOUR_PX, kind: "hour" });
y += HOUR_PX;
segments.push({ from: t, to: t + HOUR, y, h: hourPx, kind: "hour" });
y += hourPx;
t += HOUR;
continue;
}
@@ -84,7 +104,7 @@ const layout = computed(() => {
while (u < end && !busy(u)) u += HOUR;
const hours = (u - t) / HOUR;
const isBreak = hours >= MIN_BREAK_HOURS;
const h = isBreak ? BREAK_PX : HOUR_PX * hours;
const h = isBreak ? BREAK_PX : hourPx * hours;
segments.push({ from: t, to: u, y, h, kind: isBreak ? "break" : "idle" });
y += h;
t = u;
@@ -116,8 +136,6 @@ const layout = computed(() => {
.filter((s) => s.kind === "break")
.map((s) => ({ y: s.y, h: s.h, label: `${fmtTime.format(s.from)} – ${fmtTime.format(s.to)}` }));
// Unused columns are dropped
const columnIds = [...new Set(list.map(({ slot }) => slot.column))].sort((a, b) => a - b);
let left = AXIS_PX;
const columns = columnIds.map((id) => {
const placed = list
@@ -128,8 +146,7 @@ const layout = computed(() => {
height: yOf(e) - yOf(b) - 6,
when: `${fmtTime.format(b)} – ${fmtTime.format(e)}`,
}));
// The multi-anims column is the big one, twice as wide
const width = placed.some(({ slot }) => slot.is_multi_anims) ? 2 * COL_PX + GAP_PX : COL_PX;
const width = isWide(id) ? WIDE_RATIO * colPx : colPx;
const column = { left, width, placed };
left += width + GAP_PX;
return column;
@@ -148,7 +165,8 @@ const layout = computed(() => {
<template>
<div class="flex-1 bg-base-300 flex justify-center px-4 py-12">
<div class="w-full max-w-7xl">
<!-- min-w-0: lets the planning scroll sideways instead of overflowing the page -->
<div class="w-full max-w-7xl min-w-0">
<div class="text-center mb-12">
<h1 class="text-5xl font-bold mb-4">{{ t("planning.title") }}</h1>
</div>
@@ -161,8 +179,13 @@ const layout = computed(() => {
{{ t("planning.empty") }}
</p>
<div v-else class="overflow-x-auto pb-4">
<div class="relative mx-auto" :style="{ width: `${layout.width}px`, height: `${layout.height}px` }">
<!-- pr/pt/pb: room for the Fils rouges glow, the scroll box would clip it -->
<div v-else ref="scroller" class="overflow-x-auto pr-10 pt-4 pb-10">
<div class="relative" :style="{
width: `${layout.width}px`,
height: `${layout.height}px`,
marginLeft: `max(${DAY_LABEL_ROOM_PX}px, (100% - ${layout.width}px) / 2)`,
}">
<!-- Time axis: a header row per day, hour ticks on the side -->
<!-- Above the cards: slots running past midnight go over the header row -->
<div v-for="day in layout.days" :key="`day-${day.y}`"
polylan_submitter/src/components/PlanningMultiSlot.vue
+1 -1
View File
@@ -30,7 +30,7 @@ const offset = computed(() => {
</div>
<div ref="track" class="relative flex-1">
<div ref="stack" class="absolute inset-x-0 grid grid-cols-2 gap-3"
<div ref="stack" class="absolute inset-x-0 flex flex-col gap-3"
:style="{ transform: `translateY(${offset}px)` }">
<component :is="game.store_url ? 'a' : 'div'" v-for="game in entry.games" :key="game.name"
:href="game.store_url || undefined" target="_blank" rel="noopener noreferrer"