Fix TrainingViewer render

This commit is contained in:
Clément Pons
2025-06-27 22:04:10 +02:00
parent e78a60f771
commit d5851499cd
9 changed files with 21 additions and 20 deletions

View File

@@ -8,7 +8,7 @@ const { config, progress = false } = defineProps<{
}>();
const dragger = useTemplateRef<HTMLElement | null>('dragger');
const position = ref(0), id = ref<number>(0);
const position = ref(0);
const dragging = ref(false), offset = ref(0);
const dragend = () => {
@@ -49,12 +49,12 @@ onUnmounted(() => {
<slot name="addin" :stat="MAIN_STATS[position]"></slot>
</div>
</div>
<div ref="dragger" class="flex flex-1 px-8 overflow-hidden max-w-full">
<div class="relative cursor-grab active:cursor-grabbing select-none transition-[left] flex flex-1 flex-row max-w-full" >
<div class="flex flex-shrink-0 flex-col gap-4 relative w-full" v-for="(stat, name) in config.training" ><!-- v-for="(stat, name) in config.training" -->
<div class="flex flex-1 px-8 overflow-hidden max-w-full">
<div class="relative cursor-grab active:cursor-grabbing select-none transition-[left] flex flex-1 flex-row max-w-full gap-16" :style="{ 'left': `calc(-${position} * calc(100% + 4rem))` }">
<div class="flex flex-shrink-0 flex-col gap-4 relative w-full" v-for="(stat, name) in config.training" >
<div class="flex flex-row gap-2 justify-center relative" v-for="(options, level) in stat">
<template v-if="progress">
<div class="absolute -left-8 -right-8 -top-2 h-px border-t border-light-30 dark:border-dark-30 border-dashed">
<div class="absolute left-0 right-0 -top-2 h-px border-t border-light-30 dark:border-dark-30 border-dashed">
<span class="absolute right-0 p-1 text-end">{{ level }}</span>
</div>
</template>