Skip to content

Commit 90cbb23

Browse files
committed
fix style on edit
1 parent f69ba56 commit 90cbb23

1 file changed

Lines changed: 78 additions & 73 deletions

File tree

src/routes/(authenticated)/shares/user/outgoing/edit-share.svelte

Lines changed: 78 additions & 73 deletions
Original file line numberDiff line numberDiff line change
@@ -167,8 +167,8 @@
167167

168168
<Drawer.Root bind:open={editDrawer} {onOpenChange} direction="right">
169169
<Drawer.Content>
170-
<div class="mx-auto w-full">
171-
<Drawer.Header>
170+
<div class="mx-auto w-full max-h-[100vh] flex flex-col">
171+
<Drawer.Header class="shrink-0">
172172
<Drawer.Description>Edit shares for</Drawer.Description>
173173
<Drawer.Title class="flex items-center gap-2 mt-1">
174174
<Avatar.Root class="size-10">
@@ -180,94 +180,99 @@
180180
<b>{$userShare.name}</b></Drawer.Title
181181
>
182182
</Drawer.Header>
183-
<div class="p-4 pb-0 mb-5">
183+
<div class="p-4 pb-0 mb-5 min-h-0">
184184
<Tabs.Root
185185
value={isUniformRestrictions ? 'uniform' : 'individual'}
186186
onValueChange={onTabChanged}
187+
class="flex flex-col h-full"
187188
>
188-
<div class="flex items-center justify-between">
189-
<p class="text-lg font-bold grow self-end border-b border-b-neutral-800 mr-[-15px]">
190-
Limits and Permissions
191-
</p>
192-
193-
<Tabs.List>
194-
<Tabs.Trigger value="uniform">User</Tabs.Trigger>
195-
<Tabs.Trigger value="individual">Shockers</Tabs.Trigger>
196-
</Tabs.List>
197-
</div>
198-
199-
<Tabs.Content value="uniform">
200-
<p class="mb-6 text-neutral-400 text-[10pt] mt-[-10px] text-right">
201-
Apply same restrictions to all shockers
202-
</p>
203-
<!-- Intensity Slider -->
204-
<div class="flex flex-col gap-2 border-1 border-neutral-800 p-4 rounded-md h-75">
205-
<span class="flex">
206-
<span class="ml-auto">
207-
<MultiPauseToggle
208-
shockers={shares.map((share) => ({
209-
shockerId: share.id,
210-
paused: share.paused,
211-
userShareUserId: $userShare.id,
212-
}))}
213-
onPausedChange={(paused) => {
214-
shares.forEach((share) => (share.paused = paused)); // Update the local copy of the shares
215-
216-
// Update the actual store shares
217-
UserShares.update((current) => {
218-
current.outgoing[storeIndex].shares.forEach((share) => (share.paused = paused));
219-
return current;
220-
});
221-
}}
222-
/>
223-
</span>
224-
</span>
189+
<div>
190+
<div class="flex items-center justify-between shrink-0">
191+
<p class="text-lg font-bold grow self-end border-b border-b-neutral-800 mr-[-15px]">
192+
Limits and Permissions
193+
</p>
225194

226-
<RestrictionsSelector
227-
bind:permissions={uniformPermissions}
228-
bind:limits={uniformLimits}
229-
/>
195+
<Tabs.List>
196+
<Tabs.Trigger value="uniform">User</Tabs.Trigger>
197+
<Tabs.Trigger value="individual">Shockers</Tabs.Trigger>
198+
</Tabs.List>
230199
</div>
231-
</Tabs.Content>
232-
<Tabs.Content value="individual">
233-
<p class="mb-6 text-neutral-400 text-[10pt] mt-[-10px] text-right">
234-
Change restrictions for individual shockers
200+
<p class="mb-6 text-neutral-400 text-[10pt] text-right">
201+
{isUniformRestrictions
202+
? 'Apply same restrictions to all shockers'
203+
: 'Change restrictions for individual shockers'}
235204
</p>
236-
<div class="flex flex-col gap-8 overflow-x-auto max-h-[30rem]">
237-
{#each shares as share, i (share.id)}
238-
<div class="flex flex-col gap-2 border-1 border-neutral-800 p-4 rounded-md">
239-
<div class="flex justify-between">
240-
<span>
241-
<Badge>{shares[i].name}</Badge>
242-
</span>
243-
<PauseToggle
244-
shockerId={shares[i].id}
245-
bind:paused={shares[i].paused}
246-
userShareUserId={$userShare.id}
205+
</div>
206+
207+
<div class="overflow-y-auto">
208+
<Tabs.Content value="uniform">
209+
<div class="flex flex-col gap-2 border-1 border-neutral-800 p-4 rounded-md h-75">
210+
<span class="flex">
211+
<span class="ml-auto">
212+
<MultiPauseToggle
213+
shockers={shares.map((share) => ({
214+
shockerId: share.id,
215+
paused: share.paused,
216+
userShareUserId: $userShare.id,
217+
}))}
247218
onPausedChange={(paused) => {
219+
shares.forEach((share) => (share.paused = paused)); // Update the local copy of the shares
220+
221+
// Update the actual store shares
248222
UserShares.update((current) => {
249-
current.outgoing[storeIndex].shares.forEach((s) => {
250-
if (s.id === share.id) {
251-
s.paused = paused; // Update the store shares list
252-
}
253-
});
223+
current.outgoing[storeIndex].shares.forEach(
224+
(share) => (share.paused = paused)
225+
);
254226
return current;
255227
});
256228
}}
257229
/>
230+
</span>
231+
</span>
232+
233+
<RestrictionsSelector
234+
bind:permissions={uniformPermissions}
235+
bind:limits={uniformLimits}
236+
/>
237+
</div>
238+
</Tabs.Content>
239+
<Tabs.Content value="individual">
240+
<div class="flex flex-col gap-8">
241+
{#each shares as share, i (share.id)}
242+
<div class="flex flex-col gap-2 border-1 border-neutral-800 p-4 rounded-md">
243+
<div class="flex justify-between">
244+
<span>
245+
<Badge>{shares[i].name}</Badge>
246+
</span>
247+
<PauseToggle
248+
shockerId={shares[i].id}
249+
bind:paused={shares[i].paused}
250+
userShareUserId={$userShare.id}
251+
onPausedChange={(paused) => {
252+
UserShares.update((current) => {
253+
current.outgoing[storeIndex].shares.forEach((s) => {
254+
if (s.id === share.id) {
255+
s.paused = paused; // Update the store shares list
256+
}
257+
});
258+
return current;
259+
});
260+
}}
261+
/>
262+
</div>
263+
<RestrictionsSelector
264+
bind:permissions={shares[i].permissions}
265+
bind:limits={shares[i].limits}
266+
/>
258267
</div>
259-
<RestrictionsSelector
260-
bind:permissions={shares[i].permissions}
261-
bind:limits={shares[i].limits}
262-
/>
263-
</div>
264-
{/each}
265-
</div>
266-
</Tabs.Content>
268+
{/each}
269+
</div>
270+
</Tabs.Content>
271+
</div>
267272
</Tabs.Root>
268273
</div>
269274

270-
<Drawer.Footer class="flex flex-row justify-between mx-20">
275+
<Drawer.Footer class="flex flex-row justify-between mx-20 shrink-0">
271276
<Drawer.Close>Cancel</Drawer.Close>
272277
<Button onclick={handleSave}
273278
>Save {#if saving}<LoadingCircle />{/if}</Button

0 commit comments

Comments
 (0)