steven/gpx.studio
1
0
Fork 0
mirror of https://github.com/gpxstudio/gpx.studio.git synced 2025-08-31 23:53:25 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix dataset toggles alyout

Browse Source
This commit is contained in:
vcoppe
2024-06-25 16:42:25 +02:00
parent 852f77cf7c
commit 42fe819a72
1 changed files with 24 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

41
website/src/lib/components/ElevationProfile.svelte
View File

@@ -524,59 +524,66 @@
<canvas bind:this={overlay} class="absolute pointer-events-none"></canvas> <canvas bind:this={overlay} class="absolute pointer-events-none"></canvas>
<canvas bind:this={canvas} class="w-full h-full"></canvas> <canvas bind:this={canvas} class="w-full h-full"></canvas>
</div> </div>
<div class="h-full flex flex-col justify-center"> <div
class="h-full flex flex-col justify-center"
style="width: {$bottomPanelSize > 158 ? 22 : 42}px"
>
<ToggleGroup.Root <ToggleGroup.Root
class="flex-col flex-wrap gap-0 min-h-0 content-center border rounded-t" class="{$bottomPanelSize > 158
? 'flex-col'
: 'flex-row'} flex-wrap gap-0 min-h-0 content-center border rounded-t-md"
type="single" type="single"
bind:value={elevationFill} bind:value={elevationFill}
> >
<ToggleGroup.Item class="p-0 w-6 h-6" value="slope"> <ToggleGroup.Item class="p-0 w-5 h-5" value="slope">
<Tooltip side="left"> <Tooltip side="left">
<TriangleRight slot="data" size="16" /> <TriangleRight slot="data" size="15" />
<span slot="tooltip">{$_('chart.show_slope')}</span> <span slot="tooltip">{$_('chart.show_slope')}</span>
</Tooltip> </Tooltip>
</ToggleGroup.Item> </ToggleGroup.Item>
<ToggleGroup.Item class="p-0 w-6 h-6" value="surface"> <ToggleGroup.Item class="p-0 w-5 h-5" value="surface">
<Tooltip side="left"> <Tooltip side="left">
<BrickWall slot="data" size="16" /> <BrickWall slot="data" size="15" />
<span slot="tooltip">{$_('chart.show_surface')}</span> <span slot="tooltip">{$_('chart.show_surface')}</span>
</Tooltip> </Tooltip>
</ToggleGroup.Item> </ToggleGroup.Item>
</ToggleGroup.Root> </ToggleGroup.Root>
<ToggleGroup.Root <ToggleGroup.Root
class="flex-col flex-wrap gap-0 min-h-0 content-center border rounded-b -mt-[1px]" class="{$bottomPanelSize > 158
? 'flex-col'
: 'flex-row'} flex-wrap gap-0 min-h-0 content-center border rounded-b-md -mt-[1px]"
type="multiple" type="multiple"
bind:value={additionalDatasets} bind:value={additionalDatasets}
> >
<ToggleGroup.Item class="p-0 w-6 h-6" value="speed"> <ToggleGroup.Item class="p-0 w-5 h-5" value="speed">
<Tooltip side="left"> <Tooltip side="left">
<Zap slot="data" size="16" /> <Zap slot="data" size="15" />
<span slot="tooltip" <span slot="tooltip"
>{$velocityUnits === 'speed' ? $_('chart.show_speed') : $_('chart.show_pace')}</span >{$velocityUnits === 'speed' ? $_('chart.show_speed') : $_('chart.show_pace')}</span
> >
</Tooltip> </Tooltip>
</ToggleGroup.Item> </ToggleGroup.Item>
<ToggleGroup.Item class="p-0 w-6 h-6" value="hr"> <ToggleGroup.Item class="p-0 w-5 h-5" value="hr">
<Tooltip side="left"> <Tooltip side="left">
<HeartPulse slot="data" size="16" /> <HeartPulse slot="data" size="15" />
<span slot="tooltip">{$_('chart.show_heartrate')}</span> <span slot="tooltip">{$_('chart.show_heartrate')}</span>
</Tooltip> </Tooltip>
</ToggleGroup.Item> </ToggleGroup.Item>
<ToggleGroup.Item class="p-0 w-6 h-6" value="cad"> <ToggleGroup.Item class="p-0 w-5 h-5" value="cad">
<Tooltip side="left"> <Tooltip side="left">
<Orbit slot="data" size="16" /> <Orbit slot="data" size="15" />
<span slot="tooltip">{$_('chart.show_cadence')}</span> <span slot="tooltip">{$_('chart.show_cadence')}</span>
</Tooltip> </Tooltip>
</ToggleGroup.Item> </ToggleGroup.Item>
<ToggleGroup.Item class="p-0 w-6 h-6" value="atemp"> <ToggleGroup.Item class="p-0 w-5 h-5" value="atemp">
<Tooltip side="left"> <Tooltip side="left">
<Thermometer slot="data" size="16" /> <Thermometer slot="data" size="15" />
<span slot="tooltip">{$_('chart.show_temperature')}</span> <span slot="tooltip">{$_('chart.show_temperature')}</span>
</Tooltip> </Tooltip>
</ToggleGroup.Item> </ToggleGroup.Item>
<ToggleGroup.Item class="p-0 w-6 h-6" value="power"> <ToggleGroup.Item class="p-0 w-5 h-5" value="power">
<Tooltip side="left"> <Tooltip side="left">
<SquareActivity slot="data" size="16" /> <SquareActivity slot="data" size="15" />
<span slot="tooltip">{$_('chart.show_power')}</span> <span slot="tooltip">{$_('chart.show_power')}</span>
</Tooltip> </Tooltip>
</ToggleGroup.Item> </ToggleGroup.Item>