Skip to content

Commit 2507142

Browse files
myieyemyieye
committed
Make radio buttons bigger on mobile
1 parent 789e753 commit 2507142

3 files changed

Lines changed: 47 additions & 63 deletions

File tree

‎frontend/viewer/src/lib/components/ui/radio-group/radio-group-item.svelte‎

Lines changed: 38 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -2,31 +2,48 @@
22
import {cn} from '$lib/utils.js';
33
import {RadioGroup as RadioGroupPrimitive, type WithoutChildrenOrChild} from 'bits-ui';
44
import {Icon} from '../icon';
5+
import Label from '../label/label.svelte';
6+
7+
type Props = {
8+
label?: string;
9+
} & WithoutChildrenOrChild<RadioGroupPrimitive.ItemProps>;
510
611
let {
712
ref = $bindable(null),
813
class: className,
14+
label,
915
...restProps
10-
}: WithoutChildrenOrChild<RadioGroupPrimitive.ItemProps> = $props();
16+
}: Props = $props();
1117
</script>
1218

13-
<RadioGroupPrimitive.Item
14-
bind:ref
15-
class={cn(
16-
'border-primary text-primary ring-offset-background focus-visible:ring-ring aspect-square size-4 rounded-full border focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
17-
className,
18-
)}
19-
{...restProps}
20-
>
21-
{#snippet children({ checked })}
22-
<!--
23-
The circle icon is not well centered depending on zoom level.
24-
There are multiple potential fixes worth trying in: https://github.com/shadcn-ui/ui/issues/3621
25-
-->
26-
<div class="flex items-center justify-center">
27-
{#if checked}
28-
<Icon icon="i-mdi-circle" class="size-3 text-current" />
29-
{/if}
30-
</div>
31-
{/snippet}
32-
</RadioGroupPrimitive.Item>
19+
{#snippet control()}
20+
<RadioGroupPrimitive.Item
21+
bind:ref
22+
class={cn(
23+
'border-primary text-primary ring-offset-background focus-visible:ring-ring aspect-square size-4 rounded-full border focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
24+
className,
25+
)}
26+
{...restProps}
27+
>
28+
{#snippet children({ checked })}
29+
<!--
30+
The circle icon is not well centered depending on zoom level.
31+
There are multiple potential fixes worth trying in: https://github.com/shadcn-ui/ui/issues/3621
32+
-->
33+
<div class="flex items-center justify-center">
34+
{#if checked}
35+
<Icon icon="i-mdi-circle" class="size-3 text-current" />
36+
{/if}
37+
</div>
38+
{/snippet}
39+
</RadioGroupPrimitive.Item>
40+
{/snippet}
41+
42+
{#if label}
43+
<Label class="cursor-pointer flex items-center gap-4 md:gap-2 max-md:py-3">
44+
{@render control()}
45+
<span>{label}</span>
46+
</Label>
47+
{:else}
48+
{@render control()}
49+
{/if}

‎frontend/viewer/src/lib/components/ui/radio-group/radio-group.svelte‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,4 +10,4 @@
1010
}: RadioGroupPrimitive.RootProps = $props();
1111
</script>
1212

13-
<RadioGroupPrimitive.Root bind:ref bind:value class={cn('grid gap-2', className)} {...restProps} />
13+
<RadioGroupPrimitive.Root bind:ref bind:value class={cn('grid md:gap-2', className)} {...restProps} />

‎frontend/viewer/src/project/browse/ViewPicker.svelte‎

Lines changed: 8 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,7 @@
22
import * as RadioGroup from '$lib/components/ui/radio-group';
33
import { t } from 'svelte-i18n-lingui';
44
import { views } from '$lib/views/view-data';
5-
import { useCurrentView, useViewSettings } from '$lib/views/view-service';
6-
import Label from '$lib/components/ui/label/label.svelte';
5+
import { useCurrentView } from '$lib/views/view-service';
76
import Switch from '$lib/components/ui/switch/switch.svelte';
87
import ResponsivePopup from '$lib/components/responsive-popup/responsive-popup.svelte';
98
import {Button} from '$lib/components/ui/button';
@@ -17,7 +16,6 @@
1716
readonly?: boolean
1817
} = $props();
1918
const currentView = useCurrentView();
20-
const viewSettings = useViewSettings();
2119
function getCurrentView() {
2220
return $currentView.id;
2321
}
@@ -29,49 +27,18 @@
2927
{#snippet trigger({props})}
3028
<Button {...props} size="icon" variant="ghost" icon="i-mdi-layers" />
3129
{/snippet}
32-
<div class="space-y-4">
30+
<div class="space-y-2 md:space-y-4">
3331
<RadioGroup.Root bind:value={getCurrentView, setCurrentView}>
34-
<h3 class="font-normal">{$t`Field Labels`}</h3>
32+
<h3 class="font-normal max-md:mb-1">{$t`Field Labels`}</h3>
3533
{#each views as view}
36-
<div class="flex items-center space-x-2">
37-
<RadioGroup.Item value={view.id} id={view.id} />
38-
<Label for={view.id}>
39-
{view.label}
40-
</Label>
41-
</div>
34+
<RadioGroup.Item value={view.id} label={view.label} />
4235
{/each}
4336
</RadioGroup.Root>
44-
<div class="space-y-2">
45-
<h3 class="font-normal">{$t`View Settings`}</h3>
46-
<div class="flex items-center space-x-2">
47-
<Switch
48-
id="showEmptyFields"
49-
bind:checked={() => $viewSettings.showEmptyFields,
50-
(value) => ($viewSettings = { ...$viewSettings, showEmptyFields: value })}
51-
/>
52-
<Label for="showEmptyFields">{$t`Show Empty Fields`}</Label>
53-
</div>
54-
</div>
5537
<RadioGroup.Root bind:value={dictionaryPreview}>
56-
<h3 class="font-normal">{$t`Dictionary Preview`}</h3>
57-
<div class="flex items-center space-x-2">
58-
<RadioGroup.Item value="show" id="show"/>
59-
<Label for="show">
60-
{$t`Show`}
61-
</Label>
62-
</div>
63-
<div class="flex items-center space-x-2">
64-
<RadioGroup.Item value="hide" id="hide"/>
65-
<Label for="hide">
66-
{$t`Hide`}
67-
</Label>
68-
</div>
69-
<div class="flex items-center space-x-2">
70-
<RadioGroup.Item value="sticky" id="sticky"/>
71-
<Label for="sticky">
72-
{$t`Pinned`}
73-
</Label>
74-
</div>
38+
<h3 class="font-normal max-md:mb-1">{$t`Dictionary Preview`}</h3>
39+
<RadioGroup.Item value="show" label={$t`Show`} />
40+
<RadioGroup.Item value="hide" label={$t`Hide`}/>
41+
<RadioGroup.Item value="sticky" label={$t`Pinned`}/>
7542
</RadioGroup.Root>
7643
<DevContent>
7744
<div class="space-y-2">

0 commit comments

Comments
 (0)