elevation toggles back to col

This commit is contained in:
vcoppe
2024-04-26 19:45:16 +02:00
parent f0b963692c
commit eae83faa3d
3 changed files with 22 additions and 22 deletions

View File

@@ -18,7 +18,7 @@
<GPXLayers /> <GPXLayers />
<FileList /> <FileList />
</div> </div>
<div class="h-60 flex flex-row gap-2 overflow-hidden"> <div class="h-48 flex flex-row gap-2 overflow-hidden">
<GPXData /> <GPXData />
<ElevationProfile /> <ElevationProfile />
</div> </div>

View File

@@ -407,29 +407,29 @@
}); });
</script> </script>
<div class="h-full grow min-w-0 flex flex-col items-center py-2 pr-4"> <div class="h-full grow min-w-0 flex flex-row gap-4 items-center py-2 pr-4">
<div class="w-full grow min-h-0"> <div class="h-full grow min-w-0">
<canvas bind:this={canvas} class="w-full h-full"> </canvas> <canvas bind:this={canvas} class="w-full h-full"> </canvas>
</div> </div>
<div class="w-fit flex flex-row border rounded -mt-3.5"> <div class="w-fit flex flex-col border rounded">
<ToggleGroup.Root class="gap-0" type="single" bind:value={elevationFill}> <ToggleGroup.Root class="flex-col gap-0" type="single" bind:value={elevationFill}>
<ToggleGroup.Item class="p-0 w-8 h-8" value="slope"> <ToggleGroup.Item class="p-0 w-6 h-6" value="slope">
<Tooltip> <Tooltip side="left">
<TriangleRight slot="data" size="16" /> <TriangleRight slot="data" size="16" />
<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-8 h-8" value="surface"> <ToggleGroup.Item class="p-0 w-6 h-6" value="surface">
<Tooltip> <Tooltip side="left">
<BrickWall slot="data" size="16" /> <BrickWall slot="data" size="16" />
<span slot="tooltip">{$_('chart.show_surface')}</span> <span slot="tooltip">{$_('chart.show_surface')}</span>
</Tooltip> </Tooltip>
</ToggleGroup.Item> </ToggleGroup.Item>
</ToggleGroup.Root> </ToggleGroup.Root>
<Separator orientation="vertical" /> <Separator />
<ToggleGroup.Root class="gap-0" type="multiple" bind:value={additionalDatasets}> <ToggleGroup.Root class="flex-col gap-0" type="multiple" bind:value={additionalDatasets}>
<ToggleGroup.Item class="p-0 w-8 h-8" value="speed"> <ToggleGroup.Item class="p-0 w-6 h-6" value="speed">
<Tooltip> <Tooltip side="left">
<Zap slot="data" size="16" /> <Zap slot="data" size="16" />
<span slot="tooltip" <span slot="tooltip"
>{$settings.velocityUnits === 'speed' >{$settings.velocityUnits === 'speed'
@@ -438,26 +438,26 @@
> >
</Tooltip> </Tooltip>
</ToggleGroup.Item> </ToggleGroup.Item>
<ToggleGroup.Item class="p-0 w-8 h-8" value="hr"> <ToggleGroup.Item class="p-0 w-6 h-6" value="hr">
<Tooltip> <Tooltip side="left">
<HeartPulse slot="data" size="16" /> <HeartPulse slot="data" size="16" />
<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-8 h-8" value="cad"> <ToggleGroup.Item class="p-0 w-6 h-6" value="cad">
<Tooltip> <Tooltip side="left">
<Orbit slot="data" size="16" /> <Orbit slot="data" size="16" />
<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-8 h-8" value="atemp"> <ToggleGroup.Item class="p-0 w-6 h-6" value="atemp">
<Tooltip> <Tooltip side="left">
<Thermometer slot="data" size="16" /> <Thermometer slot="data" size="16" />
<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-8 h-8" value="power"> <ToggleGroup.Item class="p-0 w-6 h-6" value="power">
<Tooltip> <Tooltip side="left">
<SquareActivity slot="data" size="16" /> <SquareActivity slot="data" size="16" />
<span slot="tooltip">{$_('chart.show_power')}</span> <span slot="tooltip">{$_('chart.show_power')}</span>
</Tooltip> </Tooltip>

View File

@@ -23,7 +23,7 @@
} }
</script> </script>
<Card.Root class="h-full overflow-hidden border-none min-w-48 pl-4"> <Card.Root class="h-full overflow-hidden border-none shadow-none min-w-48 pl-4">
<Card.Content class="h-full flex flex-col flex-wrap gap-4 justify-center p-0"> <Card.Content class="h-full flex flex-col flex-wrap gap-4 justify-center p-0">
<Tooltip> <Tooltip>
<span slot="data" class="flex flex-row items-center"> <span slot="data" class="flex flex-row items-center">