Merge pull request #20 from TIPPECC/18-UI-improvements

Carets on water_budget categories #18
TIPPECC · Aug 8, 2024 · ffe5762 · ffe5762
2 parents 6fc72d3 + 3955b61
commit ffe5762
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 4 deletions.
diff --git a/src/lib/icons/caret_down.svelte b/src/lib/icons/caret_down.svelte
@@ -1,7 +1,14 @@
 <script>
+	export let h = '32px';
+	export let w = '18px';
 </script>
 
-<svg class="pb-1 fill-white" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512" width="18"
+<svg
+	class="pb-1 fill-white"
+	xmlns="http://www.w3.org/2000/svg"
+	viewBox="0 0 320 512"
+	width={w}
+	height={h}
 	><!--!Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path
 		d="M137.4 374.6c12.5 12.5 32.8 12.5 45.3 0l128-128c9.2-9.2 11.9-22.9 6.9-34.9s-16.6-19.8-29.6-19.8L32 192c-12.9 0-24.6 7.8-29.6 19.8s-2.2 25.7 6.9 34.9l128 128z"
 	/></svg

diff --git a/src/lib/icons/caret_right.svelte b/src/lib/icons/caret_right.svelte
@@ -1,7 +1,14 @@
 <script>
+	export let w = '14px';
+	export let h = '28px';
 </script>
 
-<svg class="fill-white" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 512" width="14"
+<svg
+	class="fill-white"
+	xmlns="http://www.w3.org/2000/svg"
+	viewBox="0 0 256 512"
+	width={w}
+	height={h}
 	><!--!Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path
 		d="M246.6 278.6c12.5-12.5 12.5-32.8 0-45.3l-128-128c-9.2-9.2-22.9-11.9-34.9-6.9s-19.8 16.6-19.8 29.6l0 256c0 12.9 7.8 24.6 19.8 29.6s25.7 2.2 34.9-6.9l128-128z"
 	/></svg

diff --git a/src/routes/water_budget/+page.svelte b/src/routes/water_budget/+page.svelte
@@ -315,15 +315,22 @@
 								.toLowerCase()
 								.includes(search_term.toLowerCase())).length > 0}
 						<div
-							class="w-full flex items-center rounded-md h-8 pl-3 {cat_counter % 2 == 0
+							class="w-full h-[36px] flex items-center rounded-md pl-3 {cat_counter % 2 == 0
 								? 'bg-emerald-700'
 								: 'bg-emerald-900'} mb-1"
 						>
 							<button
 								class="w-full flex items-left"
 								on:click={() => toggle_folder_category(folder_cat)}
 							>
-								<h2 class="text-xl">
+								<div class="flex-center w-[18px] h-[28px]">
+									{#if cat_obj.toggled}
+										<CaretDown h="28px" w="26px" />
+									{:else}
+										<CaretRight h="24px" />
+									{/if}
+								</div>
+								<h2 class="text-xl ml-2">
 									{folder_cat} ({cat_obj.files.filter((a) =>
 										a.filename.toLowerCase().includes(search_term.toLowerCase())
 									).length})