From cf903f407108f670dddfcfd9fb1021e03694295f Mon Sep 17 00:00:00 2001
From: Christian Beutel <>
Date: Tue, 5 Nov 2024 22:56:29 +0100
Subject: [PATCH] updates dashboard layout

---
 web/src/lib/components/base/calendar.svelte   |   6 +-
 .../lib/components/base/multi_select.svelte   |  11 +-
 .../trail/map_with_elevation_multiple.svelte  |   1 -
 web/src/routes/profile/+page.svelte           | 208 +++++++++---------
 4 files changed, 114 insertions(+), 112 deletions(-)

diff --git a/web/src/lib/components/base/calendar.svelte b/web/src/lib/components/base/calendar.svelte
index e79ac9f6..6cb6aced 100644
--- a/web/src/lib/components/base/calendar.svelte
+++ b/web/src/lib/components/base/calendar.svelte
@@ -122,9 +122,7 @@
 	function handleDateClick(date?: Date) {
 		if (!date) {
 			return;
-		}
-		console.log(date);
-		
+		}		
 		dispatch("click", date);
 	}
 </script>
@@ -151,7 +149,7 @@
 			</div>
 		{/each}
 	</div>
-	<div class="grid grid-cols-7 grid-rows-6" style="aspect-ratio: 1.17/1">
+	<div class="grid grid-cols-7 grid-rows-6 gap-1" style="aspect-ratio: 1.17/1">
 		{#each { length: 42 } as _, i}
 			<button
 				class="calendar-day flex items-center justify-center rounded-xl"
diff --git a/web/src/lib/components/base/multi_select.svelte b/web/src/lib/components/base/multi_select.svelte
index a7ea3720..2adffb93 100644
--- a/web/src/lib/components/base/multi_select.svelte
+++ b/web/src/lib/components/base/multi_select.svelte
@@ -2,6 +2,7 @@
     import { writable } from "svelte/store";
     import type { SelectItem } from "./select.svelte";
     import { createEventDispatcher } from "svelte";
+    import {_} from "svelte-i18n"
 
     export let items: SelectItem[] = [];
     export let value: SelectItem[] = [];
@@ -38,7 +39,7 @@
         </label>
     {/if}
     <button
-        class="min-w-44 flex flex-wrap items-center gap-2 border bg-input-background min-h-[50px] p-3 rounded-md transition-colors focus:border-input-border-focus focus:outline-none focus:ring-0"
+        class="min-w-44 flex flex-wrap items-center gap-2 border border-input-border bg-input-background min-h-[50px] p-3 rounded-md transition-colors focus:border-input-border-focus focus:outline-none focus:ring-0"
         on:click={() => (showDropdown = !showDropdown)}
     >
         {#if value.length === 0}
@@ -48,7 +49,7 @@
             <div
                 class="bg-primary text-white px-2 py-1 rounded-full flex items-center gap-1"
             >
-                <span class="text-sm">{item.text}</span>
+                <span class="text-sm">{$_(item.text)}</span>
                 <button
                     on:click|stopPropagation={() => removeItem(item)}
                     class="text-white hover:bg-primary-hover rounded-full w-4 h-4 flex items-center justify-center"
@@ -63,14 +64,14 @@
     {#if showDropdown}
         <div
             bind:this={dropdownRef}
-            class="absolute z-10 mt-1 w-full bg-white border border-gray-300 rounded shadow-lg max-h-40 overflow-y-auto"
+            class="absolute z-10 mt-1 w-full bg-menu-background border border-input-border rounded-md max-h-40 overflow-y-auto"
         >
             {#each items as item}
                 <button
                     on:click={() => toggleItem(item)}
-                    class="px-3 py-2 hover:bg-blue-100 cursor-pointer flex justify-between items-center w-full"
+                    class="px-3 py-2 hover:bg-menu-item-background-hover cursor-pointer flex justify-between items-center w-full"
                 >
-                    <span>{item.text}</span>
+                    <span>{$_(item.text)}</span>
                     {#if value.includes(item)}
                         <div class="ml-auto">
                             <i class="fa fa-check"></i>
diff --git a/web/src/lib/components/trail/map_with_elevation_multiple.svelte b/web/src/lib/components/trail/map_with_elevation_multiple.svelte
index 17f3cf11..498191b8 100644
--- a/web/src/lib/components/trail/map_with_elevation_multiple.svelte
+++ b/web/src/lib/components/trail/map_with_elevation_multiple.svelte
@@ -15,7 +15,6 @@
     import { createEventDispatcher, onMount } from "svelte";
     import { _ } from "svelte-i18n";
     import Dropdown from "../base/dropdown.svelte";
-    import { trail } from "$lib/stores/trail_store";
 
     export let trails: Trail[];
     export let map: any | null = null;
diff --git a/web/src/routes/profile/+page.svelte b/web/src/routes/profile/+page.svelte
index 2c479202..8e96368c 100644
--- a/web/src/routes/profile/+page.svelte
+++ b/web/src/routes/profile/+page.svelte
@@ -144,7 +144,7 @@
                 (acc[date] || 0) + ((log as any)[barChartSelectedValue] ?? 0);
             if (barChartSelectedValue === "distance") {
                 acc[date] = acc[date] / 1000;
-            }else if(barChartSelectedValue === "duration") {
+            } else if (barChartSelectedValue === "duration") {
                 acc[date] = acc[date] / 60 / 60;
             }
             if ($page.data.settings?.unit !== "metric") {
@@ -228,10 +228,37 @@
 </svelte:head>
 
 <div
-    class="grid grid-cols-1 md:grid-cols-[356px_minmax(0,_1fr)] gap-y-4 items-start max-w-6xl mx-auto"
+    class="grid grid-cols-1 sm:grid-cols-[272px_minmax(0,_1fr)] md:grid-cols-[356px_minmax(0,_1fr)] gap-y-4 max-w-6xl mx-auto"
 >
+    {#if $currentUser}
+        <div class="flex items-center gap-x-6 h-full px-4">
+            <img
+                class="rounded-full w-16 aspect-square overflow-hidden"
+                src={getFileURL($currentUser, $currentUser.avatar) ||
+                    `https://api.dicebear.com/7.x/initials/svg?seed=${$currentUser.username}&backgroundType=gradientLinear`}
+                alt="avatar"
+            />
+            <div>
+                <h4 class="text-2xl font-semibold col-start-2">
+                    {$currentUser.username}
+                </h4>
+                <p class="text-sm">
+                    <span class="text-gray-500">Joined:</span>
+                    {new Date($currentUser.created ?? "").toLocaleDateString(
+                        undefined,
+                        {
+                            month: "2-digit",
+                            day: "2-digit",
+                            year: "numeric",
+                            timeZone: "UTC",
+                        },
+                    )}
+                </p>
+            </div>
+        </div>
+    {/if}
     <div
-        class="flex flex-wrap md:flex-nowrap col-start-1 md:col-start-2 gap-x-4 justify-end"
+        class="flex flex-wrap md:flex-nowrap col-start-1 sm:col-start-2 gap-x-4 justify-end"
     >
         <MultiSelect
             on:change={(e) => updateFilterCategory(e.detail)}
@@ -250,105 +277,16 @@
             label={$_("before")}
         ></Datepicker>
     </div>
-    <div
-        class="border border-input-border rounded-xl p-6 lg:row-span-3 space-y-6 grow-0 md:mr-4"
-    >
-        {#if $currentUser}
-            <div class="flex items-center gap-x-6">
-                <img
-                    class="rounded-full w-24 aspect-square overflow-hidden"
-                    src={getFileURL($currentUser, $currentUser.avatar) ||
-                        `https://api.dicebear.com/7.x/initials/svg?seed=${$currentUser.username}&backgroundType=gradientLinear`}
-                    alt="avatar"
-                />
-                <div>
-                    <h4 class="text-2xl font-semibold col-start-2">
-                        {$currentUser.username}
-                    </h4>
-                    <p class="text-sm">
-                        <span class="text-gray-500">Joined:</span>
-                        {new Date(
-                            $currentUser.created ?? "",
-                        ).toLocaleDateString(undefined, {
-                            month: "2-digit",
-                            day: "2-digit",
-                            year: "numeric",
-                            timeZone: "UTC",
-                        })}
-                    </p>
-                </div>
-            </div>
-        {/if}
-        <Calendar
-            on:click={(e) => handleDateClick(e.detail)}
-            logs={$summitLogs}
-            colorMap={categoryColorMap}
-        ></Calendar>
-    </div>
-    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
-        <div
-            class="flex flex-col items-center gap-6 border border-input-border rounded-xl p-6"
-        >
-            <span class="text-gray-500 font-semibold text-lg self-start"
-                ><i class="fa fa-hashtag mr-3"></i>{$_("activity", {
-                    values: { n: 2 },
-                })}</span
-            >
-            <p class="text-4xl font-bold">{$summitLogs.length}</p>
+    <div class="space-y-4 grow-0 sm:mr-4">
+        <div class="border border-input-border rounded-xl p-6">
+            <Calendar
+                on:click={(e) => handleDateClick(e.detail)}
+                logs={$summitLogs}
+                colorMap={categoryColorMap}
+            ></Calendar>
         </div>
         <div
-            class="flex flex-col items-center gap-6 border border-input-border rounded-xl p-6"
-        >
-            <span class="text-gray-500 font-semibold text-lg self-start"
-                ><i class="fa fa-left-right mr-3"></i>{$_("distance")}</span
-            >
-            <p class="text-4xl font-bold">{formatDistance(totalDistance)}</p>
-        </div>
-
-        <div
-            class="flex flex-col items-center gap-6 border border-input-border rounded-xl p-6"
-        >
-            <span class="text-gray-500 font-semibold text-lg self-start"
-                ><i class="fa fa-clock mr-3"></i>{$_("duration")}</span
-            >
-            <p class="text-4xl font-bold">{formatTimeHHMM(totalDuration / 60)}</p>
-        </div>
-        <div
-            class="flex flex-col items-center gap-6 border border-input-border rounded-xl p-6"
-        >
-            <span class="text-gray-500 font-semibold text-lg self-start"
-                ><i class="fa fa-arrow-trend-up mr-3"></i>{$_(
-                    "elevation-gain",
-                )}</span
-            >
-            <p class="text-4xl font-bold">
-                {formatElevation(totalElevationGain)}
-            </p>
-        </div>
-        <div
-            class="flex flex-col items-center gap-6 border border-input-border rounded-xl p-6"
-        >
-            <span class="text-gray-500 font-semibold text-lg self-start"
-                ><i class="fa fa-arrow-trend-down mr-3"></i>{$_(
-                    "elevation-loss",
-                )}</span
-            >
-            <p class="text-4xl font-bold">
-                {formatElevation(totalElevationLoss)}
-            </p>
-        </div>
-        <div
-            class="flex flex-col items-center gap-6 border border-input-border rounded-xl p-6"
-        >
-            <span class="text-gray-500 font-semibold text-lg self-start"
-                ><i class="fa fa-arrow-trend-down mr-3"></i>{$_(
-                    "average-speed",
-                )}</span
-            >
-            <p class="text-4xl font-bold">{formatSpeed(averageSpeed)}</p>
-        </div>
-        <div
-            class="col-start-1 col-span-1 border border-input-border rounded-xl p-6 space-y-4"
+            class="border border-input-border rounded-xl p-6 space-y-4"
         >
             <span class="text-gray-500 font-semibold text-lg"
                 ><i class="fa fa-person-hiking mr-3"></i>{$_(
@@ -367,8 +305,74 @@
                 }}
             />
         </div>
+    </div>
+
+    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
         <div
-            class="h-full md:col-span-2 space-y-2 border border-input-border rounded-xl p-6"
+            class="flex flex-col items-center gap-4 border border-input-border rounded-xl p-6"
+        >
+            <span class="text-gray-500 font-semibold text-lg self-start"
+                ><i class="fa fa-hashtag mr-3"></i>{$_("activity", {
+                    values: { n: 2 },
+                })}</span
+            >
+            <p class="text-3xl font-bold">{$summitLogs.length}</p>
+        </div>
+        <div
+            class="flex flex-col items-center gap-4 border border-input-border rounded-xl p-6"
+        >
+            <span class="text-gray-500 font-semibold text-lg self-start"
+                ><i class="fa fa-left-right mr-3"></i>{$_("distance")}</span
+            >
+            <p class="text-3xl font-bold">{formatDistance(totalDistance)}</p>
+        </div>
+
+        <div
+            class="flex flex-col items-center gap-4 border border-input-border rounded-xl p-6"
+        >
+            <span class="text-gray-500 font-semibold text-lg self-start"
+                ><i class="fa fa-clock mr-3"></i>{$_("duration")}</span
+            >
+            <p class="text-3xl font-bold">
+                {formatTimeHHMM(totalDuration / 60)}
+            </p>
+        </div>
+        <div
+            class="flex flex-col items-center gap-4 border border-input-border rounded-xl p-6"
+        >
+            <span class="text-gray-500 font-semibold text-lg self-start"
+                ><i class="fa fa-arrow-trend-up mr-3"></i>{$_(
+                    "elevation-gain",
+                )}</span
+            >
+            <p class="text-3xl font-bold">
+                {formatElevation(totalElevationGain)}
+            </p>
+        </div>
+        <div
+            class="flex flex-col items-center gap-4 border border-input-border rounded-xl p-6"
+        >
+            <span class="text-gray-500 font-semibold text-lg self-start"
+                ><i class="fa fa-arrow-trend-down mr-3"></i>{$_(
+                    "elevation-loss",
+                )}</span
+            >
+            <p class="text-3xl font-bold">
+                {formatElevation(totalElevationLoss)}
+            </p>
+        </div>
+        <div
+            class="flex flex-col items-center gap-4 border border-input-border rounded-xl p-6"
+        >
+            <span class="text-gray-500 font-semibold text-lg self-start"
+                ><i class="fa fa-arrow-trend-down mr-3"></i>{$_(
+                    "average-speed",
+                )}</span
+            >
+            <p class="text-3xl font-bold">{formatSpeed(averageSpeed)}</p>
+        </div>
+        <div
+            class="h-full sm:col-span-2 lg:col-span-3 space-y-2 border border-input-border rounded-xl p-6"
         >
             <div class="flex justify-between">
                 <span class="text-gray-500 font-semibold text-lg"
@@ -411,7 +415,7 @@
     </div>
 
     <div
-        class="col-span-1 md:col-span-2 border border-input-border rounded-xl p-6 space-y-6"
+        class="col-span-1 sm:col-span-2 border border-input-border rounded-xl p-6 space-y-6"
     >
         <span class="text-gray-500 font-semibold text-lg"
             ><i class="fa fa-table mr-3"></i>{$_("all-activities")}</span