fix: adjust desigin of layer header and tabs (#2245)

UNDP-Data · Nov 10, 2023 · 8308f62 · 8308f62
1 parent ce51272
commit 8308f62
Show file tree

Hide file tree

Showing 13 changed files with 69 additions and 66 deletions.
diff --git a/.changeset/lovely-flies-vanish.md b/.changeset/lovely-flies-vanish.md
@@ -0,0 +1,5 @@
+---
+"@undp-data/undp-bulma": patch
+---
+
+fix: fixed customised tab design for bulma. Removed border-radius from boxed/toggled tab.
diff --git a/.changeset/ninety-llamas-design.md b/.changeset/ninety-llamas-design.md
@@ -0,0 +1,5 @@
+---
+"geohub": patch
+---
+
+fix: adjust desigin of layer header and tabs
diff --git a/packages/undp-bulma/bulma.scss b/packages/undp-bulma/bulma.scss
@@ -27,11 +27,13 @@ $family-primary: $family-serif;
 // customised tab color for UNDP
 $tabs-link-active-color: $primary;
 $tabs-link-active-border-bottom-color: $primary;
-$tabs-boxed-link-active-border-color: $primary;
-$tabs-boxed-link-active-border-bottom-color: $primary;
 $tabs-toggle-link-active-background-color: $primary;
 $tabs-toggle-link-active-border-color: $primary;
 $tabs-toggle-link-active-color: white;
+// roundness for tab
+$tabs-boxed-link-radius: 0;
+$tabs-toggle-link-radius: 0;
+$tabs-boxed-link-radius: 0;
 
 // 4. Setup your Custom Colors
 $linkedin: #0077b5;

diff --git a/sites/geohub/src/components/maplibre/LegendTypeSwitcher.svelte b/sites/geohub/src/components/maplibre/LegendTypeSwitcher.svelte
@@ -1,46 +1,40 @@
 <script lang="ts">
-	export let legendType: 'default' | 'classify' = 'default';
-	const handleLegendTypeChange = () => {
-		legendType = legendType === 'default' ? 'classify' : 'default';
-	};
+	import { handleEnterKey } from '$lib/helper';
+
+	let tabs: { label: 'default' | 'classify'; icon: string }[] = [
+		{
+			label: 'default',
+			icon: 'fa-solid fa-minus'
+		},
+		{
+			label: 'classify',
+			icon: 'fa-solid fa-list'
+		}
+	];
+
+	export let legendType: 'default' | 'classify' = tabs[0].label;
 </script>
 
-<div class="centered pb-2" data-testid="legend-type-switcher-container">
-	<div class="field has-addons">
-		<p class="control">
-			<button
-				data-testid="legend-type-switcher-default"
-				class="button is-normal {`${
-					legendType === 'default' ? 'is-primary is-active' : 'is-primary is-light'
-				}`}"
-				on:click={handleLegendTypeChange}
-			>
-				<span>
-					<i class="fa-solid fa-minus" />
-					Default
-				</span>
-			</button>
-		</p>
-		<p class="control">
-			<button
-				data-testid="legend-type-switcher-classify"
-				class="button is-normal {`${
-					legendType === 'classify' ? 'is-primary is-active' : 'is-primary is-light'
-				}`}"
-				on:click={handleLegendTypeChange}
-			>
-				<span>
-					<i class="fa-solid fa-list" />
-					Classify
-				</span>
-			</button>
-		</p>
-	</div>
+<div class="tabs is-centered is-toggle">
+	<ul>
+		{#each tabs as tab}
+			<li class={legendType === tab.label ? 'is-active' : ''}>
+				<!-- svelte-ignore a11y-missing-attribute -->
+				<a
+					class="has-text-weight-bold"
+					role="tab"
+					tabindex="0"
+					data-sveltekit-preload-code="off"
+					data-sveltekit-preload-data="off"
+					on:click={() => {
+						legendType = tab.label;
+					}}
+					on:keydown={handleEnterKey}
+				>
+					<span class="icon is-small"><i class={tab.icon} aria-hidden="true"></i></span>
+					<span class="is-capitalized">{tab.label}</span>
+				</a>
+			</li>
+		{/each}
+	</ul>
 </div>
-
-<style lang="scss">
-	:global(.centered) {
-		width: max-content;
-		margin: auto !important;
-	}
-</style>
diff --git a/sites/geohub/src/components/maplibre/line/VectorLine.svelte b/sites/geohub/src/components/maplibre/line/VectorLine.svelte
@@ -21,13 +21,13 @@
 	let activeTab: string = tabs[0].label;
 </script>
 
-<div class="tabs is-centered">
+<div class="tabs is-centered is-toggle">
 	<ul>
 		{#each tabs as tab}
 			<li class={activeTab === tab.label ? 'is-active' : ''}>
 				<!-- svelte-ignore a11y-missing-attribute -->
 				<a
-					class="has-text-weight-bold"
+					class="has-text-weight-bold tab"
 					role="tab"
 					tabindex="0"
 					data-sveltekit-preload-code="off"

diff --git a/sites/geohub/src/components/maplibre/symbol/VectorSymbol.svelte b/sites/geohub/src/components/maplibre/symbol/VectorSymbol.svelte
@@ -41,7 +41,7 @@
 	};
 </script>
 
-<div class="tabs is-centered">
+<div class="tabs is-centered is-toggle">
 	<ul>
 		{#each tabs as tab}
 			<li class={activeTab === tab.label ? 'is-active' : ''}>

diff --git a/sites/geohub/src/components/maplibre/vector/VectorLegend.svelte b/sites/geohub/src/components/maplibre/vector/VectorLegend.svelte
@@ -66,7 +66,7 @@
 
 		.editor-button {
 			position: absolute;
-			top: -0.8em;
+			top: 0em;
 			right: 0em;
 			z-index: 10;
 		}

diff --git a/sites/geohub/src/components/pages/map/layers/LayerList.svelte b/sites/geohub/src/components/pages/map/layers/LayerList.svelte
@@ -82,7 +82,7 @@
 			>
 				<span class="delete-all-icon icon fa-stack fa-lg" role="button" tabindex="0">
 					<i class="fa-solid fa-layer-group fa-lg" />
-					<i class="fa-solid fa-circle-xmark fa-sm fa-stack-1x" />
+					<i class="fa-solid fa-circle-xmark fa-xs fa-stack-1x" />
 				</span>
 			</button>
 
@@ -145,6 +145,7 @@
 
 				.fa-circle-xmark {
 					margin-left: 8px;
+					margin-top: 15px;
 				}
 			}
 		}

diff --git a/sites/geohub/src/components/pages/map/layers/LayerTemplate.svelte b/sites/geohub/src/components/pages/map/layers/LayerTemplate.svelte
@@ -67,10 +67,8 @@
 	};
 </script>
 
-<article class="border is-small mb-2">
-	<div
-		class="message-header has-background-white has-text-dark {isContentVisible ? 'underline' : ''}"
-	>
+<article class="border is-small">
+	<div class="message-header has-background-white has-text-dark pr-0">
 		<LayerHeader {layer} bind:isVisible={isContentVisible} />
 
 		<div class="is-flex is-align-items-center">
@@ -89,7 +87,7 @@
 		</div>
 	</div>
 	<div
-		class="message-body has-background-white has-text-dark pt-2 px-0 pb-4"
+		class="message-body has-background-white has-text-dark px-0 pb-2 pt-0"
 		hidden={!isContentVisible}
 	>
 		<slot />
@@ -145,13 +143,13 @@
 
 <style lang="scss">
 	.border {
-		border: 1px #7a7a7a solid;
-	}
-
-	.underline {
 		border-bottom: 1px #7a7a7a solid;
 	}
 
+	// .underline {
+	// 	border-bottom: 1px #7a7a7a solid;
+	// }
+
 	.toggle-button,
 	.menu-button {
 		border: none;

diff --git a/sites/geohub/src/components/pages/map/layers/header/LayerHeader.svelte b/sites/geohub/src/components/pages/map/layers/header/LayerHeader.svelte
@@ -21,15 +21,15 @@
 		isVisible = !isVisible;
 	}}
 >
-	<div class="toggle-button icon has-text-primary mr-2">
-		<i class="fa-solid fa-chevron-{isVisible ? 'up' : 'down'} fa-2xl"></i>
+	<div class="toggle-button icon has-text-primary mr-3">
+		<i class="fa-solid fa-chevron-{isVisible ? 'up' : 'down'} fa-xl"></i>
 	</div>
 
 	{#if accessIcon}
 		<i class="{accessIcon} fa-2xl px-2" />
 	{/if}
 
-	<span class="layer-name is-size-6 mr-1">
+	<span class="layer-name is-size-6 mr-2">
 		{clean(layer.name)}
 	</span>
 </div>

diff --git a/sites/geohub/src/components/pages/map/layers/header/VisibilityButton.svelte b/sites/geohub/src/components/pages/map/layers/header/VisibilityButton.svelte
@@ -56,7 +56,7 @@
 		on:click={() => toggleVisibility()}
 		on:keydown={handleKeyDown}
 	>
-		<i class="fa-solid {visibility === 'visible' ? 'fa-eye' : 'fa-eye-slash'} fa-xl" />
+		<i class="fa-solid {visibility === 'visible' ? 'fa-eye' : 'fa-eye-slash'} fa-lg" />
 	</div>
 </div>
 

diff --git a/sites/geohub/src/components/pages/map/layers/raster/RasterLayer.svelte b/sites/geohub/src/components/pages/map/layers/raster/RasterLayer.svelte
@@ -73,15 +73,14 @@
 </script>
 
 <LayerTemplate {layer}>
-	<div class="tabs is-fullwidth">
+	<div class="tabs is-centered is-boxed px-3 mb-4">
 		<ul>
 			{#each tabs as tab}
 				<li class={activeTab === tab.label ? 'is-active' : ''}>
 					<!-- svelte-ignore a11y-missing-attribute -->
 					<a
 						role="tab"
 						tabindex="0"
-						class="px-1 py-1"
 						on:click={() => (activeTab = tab.label)}
 						on:keydown={handleEnterKey}
 					>

diff --git a/sites/geohub/src/components/pages/map/layers/vector/VectorLayer.svelte b/sites/geohub/src/components/pages/map/layers/vector/VectorLayer.svelte
@@ -95,15 +95,14 @@
 			<Loader size="small" />
 		</div>
 	{:then}
-		<div class="tabs is-fullwidth">
+		<div class="tabs is-centered is-boxed px-3 mb-4">
 			<ul>
 				{#each tabs as tab}
 					<li class={activeTab === tab.label ? 'is-active' : ''}>
 						<!-- svelte-ignore a11y-missing-attribute -->
 						<a
 							role="tab"
 							tabindex="0"
-							class="px-1 py-1"
 							on:click={() => (activeTab = tab.label)}
 							on:keydown={handleEnterKey}
 						>