zephyr/horse
1
0
Fork 0
Code Issues 8 Pull Requests Actions Packages Projects Releases Wiki Activity

zenno/doc/race: fix mobile

Browse Source
This commit is contained in:
Branden J Brown
2026-06-14 18:57:43 -04:00
parent b06e4b537b
commit 8ef3936be5
1 changed files with 10 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files
zenno/src/routes/doc/race/+page.svelte
+10 -20
View File
@@ -155,7 +155,7 @@
pick?: { len?: boolean; style?: boolean; dist?: boolean; surf?: boolean },
)}
{#if !pick?.len && !pick?.style && !pick?.dist && !pick?.surf}
<div class="mb-4 h-60 w-full md:mb-20 md:h-96">
<div class="mb-12 h-60 w-full md:mb-20 md:h-96">
<StatChart
class="mx-auto mb-12 h-full w-full max-w-3xl md:mb-10"
{stat}
@@ -166,7 +166,7 @@
/>
</div>
{:else}
<div class="mb-24 h-60 w-full md:mb-28 md:h-96">
<div class="mb-36 h-60 w-full md:mb-28 md:h-96">
<StatChart
class="mx-auto mb-12 h-full w-full max-w-3xl md:mb-10"
{stat}
@@ -175,10 +175,10 @@
{range}
plotOptions={{ color: { legend: true } }}
/>
<div class="mx-auto flex w-full md:max-w-2xl">
<div class="mx-auto grid w-full grid-cols-3 gap-y-6 md:max-w-2xl md:grid-cols-7">
{#if pick?.len}
<input
class="my-auto max-w-40 flex-1 md:flex-2"
class="col-span-2 my-auto w-full justify-self-center-safe"
type="range"
id="raceLen"
min="1000"
@@ -186,27 +186,26 @@
step="100"
bind:value={raceLen}
/>
<span class="my-auto flex-1 pl-2 text-sm">{raceLen}m</span>
<span class="col-span-1 my-auto pl-2 text-sm">{raceLen}m</span>
{/if}
{#if pick?.style}
<label class="my-auto hidden flex-1 pr-2 text-right text-sm md:inline" for="stylePick">Style</label>
<select class="my-auto flex-1 text-sm" id="stylePick" bind:value={style}>
<select class="col-span-1 my-auto text-sm md:col-span-2" id="stylePick" bind:value={style}>
{#each race.RUNNING_STYLES as [name, style] (style)}
<option value={style}>{name}</option>
{/each}
</select>
{/if}
{#if pick?.dist}
<label class="my-auto hidden flex-1 pr-2 text-right text-sm md:inline" for="distPick">{raceLenType}</label>
<select class="my-auto flex-1 text-sm" id="distPick" bind:value={distanceApt}>
<label class="col-span-1 my-auto pr-2 text-right text-sm md:inline" for="distPick">{raceLenType}</label>
<select class="col-span-1 my-auto text-sm" id="distPick" bind:value={distanceApt}>
{#each race.APTITUDE_LEVELS as l (l)}
<option value={l}>{race.AptitudeLevel[l]}</option>
{/each}
</select>
{/if}
{#if pick?.surf}
<label class="my-auto hidden flex-1 pr-2 text-right text-sm md:inline" for="surfPick">{raceLenType}</label>
<select class="my-auto flex-1 text-sm" id="surfPick" bind:value={surfaceApt}>
<label class="col-span-1 my-auto pr-2 text-right text-sm md:inline" for="surfPick">Surface</label>
<select class="col-span-1 my-auto text-sm" id="surfPick" bind:value={surfaceApt}>
{#each race.APTITUDE_LEVELS as l (l)}
<option value={l}>{l}</option>
{/each}
@@ -276,15 +275,6 @@
<Sec h={3} id="acceleration">Acceleration</Sec>
<p>Acceleration.</p>
{@render statChart(race.Stat.Power, accel, 'Acceleration (m/s²)', [0.1, 0.5])}
<div class="mb-4 h-60 w-full md:h-96">
<StatChart
class="mx-auto mb-12 h-full w-full max-w-3xl md:mb-10"
stat={race.Stat.Power}
y={accel}
yLabel="Acceleration (m/s²)"
range={[0.1, 0.5]}
/>
</div>
<Sec h={3} id="lane-change-target-speed">Lane Change Target Speed</Sec>
<p>Horizontal (rather than forward) target speed of changing lanes.</p>