🔧 Fixed styling to use grid instead of aside

flip-ui · Jun 27, 2024 · 8deb5e0 · 8deb5e0
1 parent 264c9c5
commit 8deb5e0
Show file tree

Hide file tree

Showing 4 changed files with 57 additions and 57 deletions.
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
@@ -14,7 +14,7 @@
 <header
 	class="sticky top-0 z-50 w-full border-b border-border/40 bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60"
 >
-	<div class="container pl-4 pr-4">
+	<div class="container max-w-full pl-4 pr-4">
 		<div class="flex h-[70px] items-center justify-between gap-3">
 			<div class="flex items-center gap-1.5">
 				<nav class="flex items-center gap-6 text-sm">
@@ -34,7 +34,7 @@
 							<Sheet.Header class="h-full">
 								<!-- <Sheet.Title>Are you sure absolutely sure?</Sheet.Title> -->
 								<Sheet.Description class="flex h-full">
-									<SideBar />
+									<SideBar mobile />
 								</Sheet.Description>
 							</Sheet.Header>
 						</Sheet.Content>

diff --git a/src/routes/builder/+page.svelte b/src/routes/builder/+page.svelte
@@ -8,15 +8,9 @@
 	<meta name="description" content="Website's specific UI-Builder" />
 </svelte:head>
 
-<div class="asd grid w-full md:pl-[336px]">
-	<aside
-		class="inset-y fixed left-0 z-20 hidden h-full flex-col border-b border-border/40 bg-background/75 backdrop-blur supports-[backdrop-filter]:bg-background/40 md:flex"
-	>
-		<SideBar backdrop />
-	</aside>
-	<div class="h-full p-2">
-		<Editor />
-	</div>
+<div class="asd grid w-full md:grid-cols-[23rem_auto]">
+	<SideBar />
+	<Editor />
 </div>
 
 <style>

diff --git a/src/routes/builder/Editor.svelte b/src/routes/builder/Editor.svelte
@@ -12,8 +12,8 @@
 	import LabelItem from './LabelItem.svelte';
 </script>
 
-<div class="flex h-full flex-col">
-	<div class="pb-2 pt-2">
+<div class="flex h-full flex-col overflow-scroll">
+	<div class="p-2">
 		{#if $data.views.length > 0}
 			<div class="flex items-center justify-between">
 				<h2 class="h2">{$data.current + 1}. {$data.views[$data.current].type.toString()}</h2>
@@ -23,10 +23,10 @@
 							bind:text={$data.views[$data.current].data.back_function}
 							label="Back Button Event"
 							description={`Define here your custom/generic event: <code class="code">none</code>,
-								<code class="code">next</code>, <code class="code">back</code>
-								or
-								<code class="code">close</code>. The Back Button Event will be triggered when
-								the back button is pressed.`}
+									<code class="code">next</code>, <code class="code">back</code>
+									or
+									<code class="code">close</code>. The Back Button Event will be triggered when
+									the back button is pressed.`}
 							let:dialog
 						>
 							<Button builders={[tooltip, dialog]} variant="outline" size="icon"
@@ -42,11 +42,11 @@
 		{/if}
 	</div>
 
-	<div class="flex h-full flex-col justify-between gap-2">
+	<div class="flex h-full flex-col justify-between gap-2 px-2">
 		{#if $data.views[$data.current]?.type == GuiType.Message}
 			<LabelItem bind:label={$data.views[$data.current].data.header} type="Header" />
 			<LabelItem bind:label={$data.views[$data.current].data.text} type="Text" />
-			<div class="grid w-full grid-cols-3 gap-2">
+			<div class="grid w-full grid-cols-3 gap-2 pb-2">
 				{#each $data.views[$data.current]?.data.buttons as event}
 					<Card.Root class="w-full {!event ? 'opacity-50' : ''}">
 						<Card.Header>
@@ -123,35 +123,37 @@
 					</div>
 				</Card.Content>
 			</Card.Root>
-			<Card.Root class="w-full pt-1">
-				<Card.Header>
-					<Card.Title>
-						<div class="flex items-center justify-between">
-							<span class="items-center truncate pb-1">
-								Button
-								{#if $data.views[$data.current].data && $data.views[$data.current].data.function}
-									<Badge>{$data.views[$data.current].data.function}</Badge>
-								{/if}
-							</span>
-							<TextDialog
-								bind:text={$data.views[$data.current].data.function}
-								label="Button Event"
-								description={`Define here your button text and custom/generic event: <code class="code">none</code>,
-								<code class="code">next</code>, <code class="code">back</code>
-								or
-								<code class="code">close</code>. The Button Event will be triggered when the Ok/Middle button is
-								pressed.`}
-								let:dialog
-							>
-								<Button size="icon" variant="ghost" builders={[dialog]}>
-									<Pencil class="h-4 w-4" />
-								</Button>
-							</TextDialog>
-						</div>
-					</Card.Title>
-				</Card.Header>
-				<Card.Content>Ok</Card.Content>
-			</Card.Root>
+			<div class="pb-2">
+				<Card.Root class="w-full pt-1">
+					<Card.Header>
+						<Card.Title>
+							<div class="flex items-center justify-between">
+								<span class="items-center truncate pb-1">
+									Button
+									{#if $data.views[$data.current].data && $data.views[$data.current].data.function}
+										<Badge>{$data.views[$data.current].data.function}</Badge>
+									{/if}
+								</span>
+								<TextDialog
+									bind:text={$data.views[$data.current].data.function}
+									label="Button Event"
+									description={`Define here your button text and custom/generic event: <code class="code">none</code>,
+										<code class="code">next</code>, <code class="code">back</code>
+										or
+										<code class="code">close</code>. The Button Event will be triggered when the Ok/Middle button is
+										pressed.`}
+									let:dialog
+								>
+									<Button size="icon" variant="ghost" builders={[dialog]}>
+										<Pencil class="h-4 w-4" />
+									</Button>
+								</TextDialog>
+							</div>
+						</Card.Title>
+					</Card.Header>
+					<Card.Content>Ok</Card.Content>
+				</Card.Root>
+			</div>
 		{:else if $data.views.length > 0}
 			<Alert.Root variant="destructive">
 				<CircleAlert class="h-4 w-4" />

diff --git a/src/routes/builder/SideBar.svelte b/src/routes/builder/SideBar.svelte
@@ -8,7 +8,7 @@
 	import Badge from '$lib/components/ui/badge/badge.svelte';
 	import { onMount } from 'svelte';
 
-	export let backdrop = false;
+	export let mobile = false;
 
 	function convertDataToMenu(data: Data) {
 		return data.views.map((view, index) => ({
@@ -135,11 +135,15 @@
 	});
 </script>
 
-<div class="grid h-full grid-cols-[auto_1fr] text-black dark:text-white">
+<div
+	class="{mobile
+		? 'grid'
+		: 'hidden md:grid'} h-full w-full grid-cols-[auto_1fr] overflow-scroll text-black dark:text-white"
+>
 	<nav
-		class="flex flex-col gap-1 border-r p-2 {backdrop
-			? 'bg-background/85 backdrop-blur supports-[backdrop-filter]:bg-background/45'
-			: ''} "
+		class="flex flex-col gap-1 border-r p-2 {mobile
+			? ''
+			: 'bg-background/85 backdrop-blur supports-[backdrop-filter]:bg-background/45'} "
 	>
 		<Tooltip.Root>
 			<Tooltip.Trigger asChild let:builder>
@@ -177,11 +181,11 @@
 		</Tooltip.Root>
 	</nav>
 	<nav
-		class="grid w-[280px] gap-1 overflow-y-auto {backdrop
-			? 'border-r bg-background/50 backdrop-blur supports-[backdrop-filter]:bg-background/20'
-			: ''}"
+		class="grid h-full w-full gap-1 overflow-scroll {mobile
+			? ''
+			: 'border-r bg-background/50 backdrop-blur supports-[backdrop-filter]:bg-background/20'}"
 	>
-		<div class="space-y-4 overflow-y-auto p-4 pb-20">
+		<div class="space-y-4 overflow-y-scroll p-4">
 			{#each submenu as segment, i (i)}
 				{#if segment.tile == currentTile}
 					<!-- Title -->