fix(view:page): Finalise border rounding (thanks SlRvb <3)

SkepticMystic · May 7, 2024 · b594a32 · b594a32
1 parent c889f43
commit b594a32
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 17 deletions.
diff --git a/src/components/page_views/TrailView.svelte b/src/components/page_views/TrailView.svelte
@@ -128,25 +128,15 @@
 				</div>
 			</div>
 
-			<div class="BC-trail-view">
-				{#if plugin.settings.views.page.trail.format === "grid"}
-					<TrailViewGrid {plugin} all_paths={sorted_paths} />
-				{:else if plugin.settings.views.page.trail.format === "path"}
-					<TrailViewPath {plugin} all_paths={sorted_paths} />
-				{/if}
-			</div>
+			{#if plugin.settings.views.page.trail.format === "grid"}
+				<TrailViewGrid {plugin} all_paths={sorted_paths} />
+			{:else if plugin.settings.views.page.trail.format === "path"}
+				<TrailViewPath {plugin} all_paths={sorted_paths} />
+			{/if}
 		{:else if plugin.settings.views.page.trail.no_path_message}
 			<p class="BC-trail-view-no-path search-empty-state">
 				{plugin.settings.views.page.trail.no_path_message}
 			</p>
 		{/if}
 	{/key}
 </div>
-
-<style>
-	.BC-trail-view {
-		overflow: hidden;
-		border-radius: var(--radius-m);
-		border: 1px solid var(--background-modifier-border);
-	}
-</style>
diff --git a/src/components/page_views/TrailViewGrid.svelte b/src/components/page_views/TrailViewGrid.svelte
@@ -51,7 +51,19 @@ grid-template-columns: {'1fr '.repeat(square.at(0)?.length ?? 0)};"
 </div>
 
 <style>
-	.BC-trail-view-item {
+	/* Handles the outer border, with some rounding */
+	.BC-trail-view {
+		/* Don't let the inner cell borders overlow */
+		overflow: hidden;
+		border-radius: var(--radius-m);
 		border: 1px solid var(--background-modifier-border);
 	}
+
+	.BC-trail-view-item {
+		/* Undo the effect of the double border on the top and right side */
+		margin: -1px -1px 0 0;
+		/* Only add borders on the top and right sides, to avoid inner duplications, and some outer duplicates */
+		border-right: 1px solid var(--background-modifier-border);
+		border-top: 1px solid var(--background-modifier-border);
+	}
 </style>
diff --git a/src/components/page_views/TrailViewPath.svelte b/src/components/page_views/TrailViewPath.svelte
@@ -11,7 +11,7 @@
 	const reversed = all_paths.map((path) => [...path].reverse());
 </script>
 
-<div class="BC-trail-view flex flex-col gap-1 p-1">
+<div class="BC-trail-view flex flex-col gap-1 px-3 py-2">
 	{#each reversed as path}
 		<div class="BC-trail-view-path flex gap-1.5">
 			{#each path as edge, j}
@@ -42,6 +42,12 @@
 </div>
 
 <style>
+	.BC-trail-view {
+		overflow: hidden;
+		border-radius: var(--radius-m);
+		border: 1px solid var(--background-modifier-border);
+	}
+
 	.BC-trail-view-item-separator::before {
 		content: ">";
 	}