fix: few design & ux issues

Mokto · Apr 30, 2024 · d466721 · d466721
1 parent b8bdc50
commit d466721
Show file tree

Hide file tree

Showing 5 changed files with 39 additions and 22 deletions.
diff --git a/src/lib/components/tab/tab-head-item.svelte b/src/lib/components/tab/tab-head-item.svelte
@@ -12,7 +12,7 @@
 
 <button
 	class={`px-4 py-2 w-full text-lg font-bold border-b-2 ${
-		isSelected ? 'border-b-accent-200 text-accent-200' : 'border-b-transparent'
+		isSelected ? 'border-b-accent-200 ' : 'border-b-transparent'
 	}`}
 	on:click={() => selectTab(tab)}
 >

diff --git a/src/lib/menu/menu-item.svelte b/src/lib/menu/menu-item.svelte
@@ -16,6 +16,27 @@
 			: 'text-stripe-100'
 	}`}
 	{href}
+	on:click={(event) => {
+		if (
+			(window.location.pathname === '/' || window.location.pathname.indexOf('/topics') === 0) &&
+			(href === '/' || href.indexOf('/topics') === 0)
+		) {
+			if (href === '/') {
+				const element = document.getElementById('main-container');
+				if (element) {
+					element.scrollTo(0, 0);
+				}
+			} else {
+				const element = document.getElementById(href.split('/topics/')[1]);
+				if (element) {
+					element.scrollIntoView();
+				}
+			}
+			urlStore.set(href);
+			window.history.pushState({}, '', window.location.origin + href);
+			event.preventDefault();
+		}
+	}}
 >
 	{label}
 </a>
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
@@ -32,7 +32,7 @@
 
 <div class="flex h-screen pt-16 sm:pt-0">
 	<div
-		class="border-r border-stripe-200 px-4 overflow-auto pb-6 hidden sm:block w-60 min-w-60 md:w-80 md:min-w-80"
+		class="border-r border-stripe-200 px-4 overflow-auto pb-6 hidden sm:block w-60 min-w-60 md:w-72 md:min-w-72"
 	>
 		{#if data.logo}
 			<img src={data.logo} alt="" class="w-full" />

diff --git a/src/routes/[...page]/+page.svelte b/src/routes/[...page]/+page.svelte
@@ -50,7 +50,9 @@
 	});
 </script>
 
-<div class="scrolled-item grid grid-cols-1 lg:grid-cols-2 gap-12 px-12 py-12">
+<div
+	class="scrolled-item max-w-screen-xl mx-auto grid grid-cols-1 lg:grid-cols-2 gap-12 px-12 py-12"
+>
 	<div>
 		<h1 class="text-2xl font-bold mb-4">Introduction</h1>
 		<Markdown markdown={data.description} />
@@ -63,8 +65,11 @@
 <hr />
 
 {#if data.topics}
-	{#each data.topics as topic}
-		<div class="scrolled-item grid grid-cols-1 lg:grid-cols-2 gap-12 px-12 py-12" id={topic.id}>
+	{#each data.topics as topic, index}
+		<div
+			class={`scrolled-item max-w-screen-xl mx-auto grid grid-cols-1 lg:grid-cols-2 gap-12 px-12 py-12 ${index == data.topics.length - 1 ? 'h-screen' : ''}`}
+			id={topic.id}
+		>
 			<div class={`${!topic.example ? 'col-span-2' : ''}`}>
 				<h1 class="text-2xl font-bold mb-4">{topic.title}</h1>
 				<Markdown markdown={topic.content} />
@@ -73,6 +78,8 @@
 				<Markdown markdown={topic.example} />
 			{/if}
 		</div>
-		<hr />
+		{#if index < data.topics.length - 1}
+			<hr />
+		{/if}
 	{/each}
 {/if}
diff --git a/src/routes/operations/[...page]/+page.svelte b/src/routes/operations/[...page]/+page.svelte
@@ -16,7 +16,7 @@
 
 {#key data.operationId}
 	{#if data.operation}
-		<div class="grid grid-cols-1 lg:grid-cols-2 gap-12 px-12 py-12">
+		<div class="grid grid-cols-1 lg:grid-cols-2 gap-12 px-12 py-12 max-w-screen-xl mx-auto">
 			<div>
 				<h1 class="text-2xl font-bold mb-2">{data.operation.summary}</h1>
 				<div class="mb-4">
@@ -29,19 +29,8 @@
 		</div>
 		<hr />
 
-		{#if data.operation.queryParameters?.length}
-			<div class="grid grid-cols-1 gap-12 px-12 py-12">
-				<div>
-					<h2 class="text-lg font-bold mt-4 mb-2">Query Parameters</h2>
-					{#each data.operation.queryParameters as parameter}
-						<DocumentedProperty {parameter} />
-					{/each}
-				</div>
-			</div>
-			<hr />
-		{/if}
-		{#if data.operation.pathParameters?.length || data.operation.pathParameters?.length || data.operation.cookieParameters?.length || data.operation.headerParameters?.length}
-			<div class="grid grid-cols-1 gap-12 px-12 py-12">
+		{#if data.operation.pathParameters?.length || data.operation.queryParameters?.length || data.operation.cookieParameters?.length || data.operation.headerParameters?.length}
+			<div class="grid grid-cols-1 gap-12 px-12 py-12 max-w-screen-xl mx-auto">
 				<div>
 					<h2 class="text-lg font-bold mt-4 mb-2">Parameters</h2>
 					{#each data.operation.pathParameters as parameter}
@@ -62,7 +51,7 @@
 		{/if}
 
 		{#if data.operation.requestBody}
-			<div class="grid grid-cols-1 lg:grid-cols-2 gap-12 px-12 py-12">
+			<div class="grid grid-cols-1 lg:grid-cols-2 gap-12 px-12 py-12 max-w-screen-xl mx-auto">
 				<div>
 					<div class="flex items-center">
 						<h2 class="!my-2 text-lg font-bold mt-4 mb-2">Body</h2>
@@ -88,7 +77,7 @@
 			<hr />
 		{/if}
 		{#if data.operation.responses}
-			<div class="px-12 py-12">
+			<div class="px-12 py-12 max-w-screen-xl mx-auto">
 				<Tabs>
 					<TabHead>
 						{#each Object.keys(data.operation.responses) as statusCode}