diff --git a/src/mapper/src/app.html b/src/mapper/src/app.html index d80a432854..1cb37028c3 100644 --- a/src/mapper/src/app.html +++ b/src/mapper/src/app.html @@ -16,6 +16,12 @@ + + + %sveltekit.head% diff --git a/src/mapper/src/lib/components/bottom-sheet.svelte b/src/mapper/src/lib/components/bottom-sheet.svelte index 54c16907a4..556f0f94d0 100644 --- a/src/mapper/src/lib/components/bottom-sheet.svelte +++ b/src/mapper/src/lib/components/bottom-sheet.svelte @@ -113,6 +113,9 @@ ontouchend={dragStop} onmouseup={dragStop} onmouseout={dragStop} + role="button" + tabindex="0" + onblur={() => {}} > diff --git a/src/mapper/src/lib/components/dialog-entities-actions.svelte b/src/mapper/src/lib/components/dialog-entities-actions.svelte index 6f160f031b..991af37211 100644 --- a/src/mapper/src/lib/components/dialog-entities-actions.svelte +++ b/src/mapper/src/lib/components/dialog-entities-actions.svelte @@ -63,10 +63,8 @@ {#if isTaskActionModalOpen && selectedTab === 'map' && selectedEntity} -
-
+
+
-

Feature {selectedEntity?.osmid}

+

Feature {selectedEntity?.osmid}

{ await entitiesStore.syncEntityStatus(projectData?.id); @@ -102,7 +100,7 @@ name="arrow-repeat" class={`!text-[1rem] cursor-pointer duration-200 ${entitiesStore.syncEntityStatusLoading && 'animate-spin'}`} > - SYNC STATUS + SYNC STATUS
@@ -132,7 +130,7 @@ tabindex="0" > - NAVIGATE HERE + NAVIGATE HERE - MAP FEATURE IN ODK + MAP FEATURE IN ODK
{/if} diff --git a/src/mapper/src/lib/components/dialog-task-actions.svelte b/src/mapper/src/lib/components/dialog-task-actions.svelte index 1f152a7623..4a766b5bf4 100644 --- a/src/mapper/src/lib/components/dialog-task-actions.svelte +++ b/src/mapper/src/lib/components/dialog-task-actions.svelte @@ -16,10 +16,8 @@ {#if taskStore.selectedTaskId && selectedTab === 'map' && isTaskActionModalOpen && (taskStore.selectedTaskState === 'UNLOCKED_TO_MAP' || taskStore.selectedTaskState === 'LOCKED_FOR_MAPPING')} -
-
+
+
-

Task #{taskStore.selectedTaskIndex}

+

Task #{taskStore.selectedTaskIndex}

{ clickMapNewFeature(); @@ -74,7 +72,7 @@ role="button" tabindex="0" > - CANCEL + CANCEL - START MAPPING + START MAPPING
{:else if taskStore.selectedTaskState === 'LOCKED_FOR_MAPPING'} @@ -120,7 +118,7 @@ name="close" class="!text-[1rem] text-[#d73f37] cursor-pointer duration-200 hover:text-[#b91c1c]" > - CANCEL MAPPING + CANCEL MAPPING { @@ -138,10 +136,10 @@ tabindex="0" > - COMPLETE MAPPING + COMPLETE MAPPING - GO TO ODK + GO TO ODK
{/if} diff --git a/src/mapper/src/lib/components/header.svelte b/src/mapper/src/lib/components/header.svelte index 3aa939b5d9..c9b598f891 100644 --- a/src/mapper/src/lib/components/header.svelte +++ b/src/mapper/src/lib/components/header.svelte @@ -32,7 +32,7 @@ }; -
+
hot-logo hot-logo @@ -58,7 +58,7 @@ /> {/if}

{loginStore?.getAuthDetails?.username}

@@ -79,7 +79,7 @@ role="button" tabindex="0" > - SIGN IN + SIGN IN {/if} @@ -127,7 +127,7 @@ target="_blank" rel="noopener noreferrer" href={menu.path} - class="hover:text-red-600 cursor-pointer duration-200 decoration-none text-black">{menu.name}{menu.name} {/each} {#if loginStore?.getAuthDetails?.username} @@ -144,7 +144,7 @@ role="button" tabindex="0" > - SIGN OUT + SIGN OUT {/if}
diff --git a/src/mapper/src/lib/components/login.svelte b/src/mapper/src/lib/components/login.svelte index 7ec79c795b..6ee574ce21 100644 --- a/src/mapper/src/lib/components/login.svelte +++ b/src/mapper/src/lib/components/login.svelte @@ -34,7 +34,7 @@ { loginStore.toggleLoginModal(false); @@ -68,7 +68,7 @@ } }} tabindex="0" - class="option-card bg-[#F5F5F5] text-gray-700 p-3 rounded-md duration-300 hover:border-primaryRed hover:text-red-600 cursor-pointer text-sm flex items-start gap-3 group" + class="option-card bg-[#F5F5F5] text-gray-700 p-3 border-1 border-solid border-white hover:border-[#d73f3f] rounded-md duration-300 hover:text-red-600 cursor-pointer text-sm flex items-start gap-3 group" >
{#if option?.image} @@ -86,13 +86,3 @@
- - diff --git a/src/mapper/src/lib/components/map/geolocation.svelte b/src/mapper/src/lib/components/map/geolocation.svelte index c7c66d185c..bf81aed138 100644 --- a/src/mapper/src/lib/components/map/geolocation.svelte +++ b/src/mapper/src/lib/components/map/geolocation.svelte @@ -240,6 +240,7 @@ >
{ entitiesStore.setToggleGeolocation(!entitiesStore.toggleGeolocation); if (!entitiesStore.toggleGeolocation) { @@ -278,9 +279,9 @@ {/if} {#if entitiesStore.toggleGeolocation && entityToNavigate} -
+
-

Distance: {entityDistance}m

+

Distance: {entityDistance}m

{ diff --git a/src/mapper/src/lib/components/map/layer-switcher.svelte b/src/mapper/src/lib/components/map/layer-switcher.svelte index 0367937861..94f7134ee5 100644 --- a/src/mapper/src/lib/components/map/layer-switcher.svelte +++ b/src/mapper/src/lib/components/map/layer-switcher.svelte @@ -135,9 +135,7 @@ map = new Map({ } // Deduplicate styles by `name` - allStyles = processedStyles.filter( - (style, index, self) => self.findIndex((s) => s.name === style.name) === index, - ); + allStyles = processedStyles.filter((style, index, self) => self.findIndex((s) => s.name === style.name) === index); } function selectStyle(style: MapLibreStylePlusMetadata) { @@ -179,7 +177,7 @@ map = new Map({ }); -
(isOpen = false)}> +
(isOpen = false)}>
(isOpen = !isOpen)} role="button" @@ -200,7 +198,7 @@ map = new Map({
-

Base Maps

+

Base Maps

{#each allStyles as style, _}
-
(isOpen = false)} class="relative"> +
(isOpen = false)} class="relative font-barlow">
(isOpen = !isOpen)} role="button" @@ -39,12 +40,12 @@
-

Legend

+

Legend

{#each taskStatuses as taskStatus}
{#if !taskStatus.color}
- + Lock Icon
{:else}
{/if} -

{taskStatus?.status}

+

{taskStatus?.status}

{/each}
diff --git a/src/mapper/src/lib/components/map/main.svelte b/src/mapper/src/lib/components/map/main.svelte index f1d1bf82d2..5b6dc756a8 100644 --- a/src/mapper/src/lib/components/map/main.svelte +++ b/src/mapper/src/lib/components/map/main.svelte @@ -331,7 +331,7 @@ - @@ -465,14 +465,14 @@ {#if projectSetupStep === projectSetupStepEnum['task_selection']}
-

click on a task to select a feature for mapping

+

click on a task to select a feature for mapping

{/if} {#if displayDrawHelpText}
-

Click on the map to create a new point

+

Click on the map to create a new point

{/if} diff --git a/src/mapper/src/lib/components/more/activities.svelte b/src/mapper/src/lib/components/more/activities.svelte index d5589f91a7..5a4a848745 100644 --- a/src/mapper/src/lib/components/more/activities.svelte +++ b/src/mapper/src/lib/components/more/activities.svelte @@ -1,5 +1,4 @@
- {#if false} - {#each Array.from({ length: 5 }) as _, index} - - {/each} - {:else if taskEvents?.length === 0} + {#if taskEvents?.length === 0}

{taskStore?.selectedTaskIndex @@ -28,7 +23,7 @@

{:else} - {#each taskEvents as event} + {#each taskEvents as event (event?.event_id)}
import Editor from '$lib/components/editor/editor.svelte'; - import CommentSkeleton from '$lib/components/more/skeleton/comment.svelte'; import { commentTask } from '$lib/db/events'; import type { TaskEventType } from '$lib/types'; import { getTaskStore } from '$store/tasks.svelte.ts'; @@ -10,7 +9,7 @@ projectId: any; } - let { comments, projectId }: Props = $props(); + const { comments, projectId }: Props = $props(); let currentComment: string = $state(''); let editorRef: any = $state(undefined); @@ -22,24 +21,19 @@
- {#if false} - {#each Array.from({ length: 5 }) as _, index} - - {/each} - {:else if comments?.length === 0} + {#if comments?.length === 0}

{taskStore?.selectedTaskIndex ? `No comments yet on task ${taskStore?.selectedTaskIndex}` : 'No comments yet'}

{:else} - {#each comments as comment} + {#each comments as comment (comment?.event_id)}

{comment?.username}

@@ -87,7 +81,7 @@ tabindex="0" variant="default" size="small" - class="secondary col-span-2 sm:col-span-1">CLEARCLEAR {}} role="button" - tabindex="0">COMMENTCOMMENT
diff --git a/src/mapper/src/lib/components/more/index.svelte b/src/mapper/src/lib/components/more/index.svelte index bb826caefc..71fd9bb691 100644 --- a/src/mapper/src/lib/components/more/index.svelte +++ b/src/mapper/src/lib/components/more/index.svelte @@ -57,7 +57,7 @@ }); -
+
{#if activeStack === ''} {#each stackGroup as stack}
-

{activeStack}

+

{activeStack}

{/if} diff --git a/src/mapper/src/lib/components/more/project-info.svelte b/src/mapper/src/lib/components/more/project-info.svelte index e6b4d62b8f..850215938d 100644 --- a/src/mapper/src/lib/components/more/project-info.svelte +++ b/src/mapper/src/lib/components/more/project-info.svelte @@ -13,15 +13,15 @@ ]; -
{projectData?.name}
+
{projectData?.name}
-
Description
-

{projectData?.description}

+
Description
+

{projectData?.description}

{#each descriptionList as description}
-

{description.key}

-

+

{description.key}

+

: {description?.value || '-'}

diff --git a/src/mapper/src/lib/components/more/skeleton/activities.svelte b/src/mapper/src/lib/components/more/skeleton/activities.svelte deleted file mode 100644 index 1a04c786b9..0000000000 --- a/src/mapper/src/lib/components/more/skeleton/activities.svelte +++ /dev/null @@ -1,20 +0,0 @@ -
-
- -
- -
- - -
-
-
-
- - -
-
diff --git a/src/mapper/src/lib/components/more/skeleton/comment.svelte b/src/mapper/src/lib/components/more/skeleton/comment.svelte deleted file mode 100644 index 5ecc3f415d..0000000000 --- a/src/mapper/src/lib/components/more/skeleton/comment.svelte +++ /dev/null @@ -1,17 +0,0 @@ -
-
- -
- -
- - -
-
-
- - -
diff --git a/src/mapper/src/lib/components/offline/basemaps.svelte b/src/mapper/src/lib/components/offline/basemaps.svelte index f8af87e6aa..6d2d9dee96 100644 --- a/src/mapper/src/lib/components/offline/basemaps.svelte +++ b/src/mapper/src/lib/components/offline/basemaps.svelte @@ -30,10 +30,10 @@ }); -
+
-
+
Manage Basemaps
@@ -61,8 +61,8 @@ {:else}
-
There are no basemaps available for this project.
-
Please ask the project manager to create basemaps.
+
There are no basemaps available for this project.
+
Please ask the project manager to create basemaps.
{/if}
@@ -81,7 +81,7 @@ > - Show On Map + Show On Map - Store Offline + Store Offline @@ -113,7 +113,7 @@ > - Download MBTiles + Download MBTiles {/if} diff --git a/src/mapper/src/lib/components/qrcode.svelte b/src/mapper/src/lib/components/qrcode.svelte index e10566a745..ce9a46ad0c 100644 --- a/src/mapper/src/lib/components/qrcode.svelte +++ b/src/mapper/src/lib/components/qrcode.svelte @@ -7,8 +7,8 @@ interface Props { infoDialogRef: SlDialog | null; - projectName: string; - projectOdkToken: string; + projectName: string; + projectOdkToken: string; children?: Snippet; } @@ -16,56 +16,56 @@ const loginStore = getLoginStore(); - let qrCodeData = $derived(generateQrCode(projectName, projectOdkToken, loginStore.getAuthDetails?.username || 'fmtm user')); + let qrCodeData = $derived( + generateQrCode(projectName, projectOdkToken, loginStore.getAuthDetails?.username || 'fmtm user'), + ); -
- -
-
- Scan this QR code in ODK Collect from another users phone, or download and import it manually - - { - if (infoDialogRef) infoDialogRef?.show(); - }} - onkeydown={(e: KeyboardEvent) => { - if (e.key === 'Enter') { - if (infoDialogRef) infoDialogRef?.show(); - } - }} - role="button" - tabindex="0" - name="info-circle-fill" - class="!text-[14px] text-[#b91c1c] cursor-pointer duration-200 scale-[1.5]" - > - -
-
+
+ +
+
+ Scan this QR code in ODK Collect from another users phone, or download and import it manually + + { + if (infoDialogRef) infoDialogRef?.show(); + }} + onkeydown={(e: KeyboardEvent) => { + if (e.key === 'Enter') { + if (infoDialogRef) infoDialogRef?.show(); + } + }} + role="button" + tabindex="0" + name="info-circle-fill" + class="!text-[14px] text-[#b91c1c] cursor-pointer duration-200 scale-[1.5]" + > + +
+
- -
- -
+ +
+ +
- - downloadQrCode(projectName)} - onkeydown={(e: KeyboardEvent) => { - e.key === 'Enter' && downloadQrCode(projectName); - }} - role="button" - tabindex="0" - size="small" - class="secondary w-full max-w-[200px]" - > - - Download QR - + + downloadQrCode(projectName)} + onkeydown={(e: KeyboardEvent) => { + e.key === 'Enter' && downloadQrCode(projectName); + }} + role="button" + tabindex="0" + size="small" + class="secondary w-full max-w-[200px]" + > + + Download QR + - {@render children?.()} + {@render children?.()}
diff --git a/src/mapper/src/routes/+layout.svelte b/src/mapper/src/routes/+layout.svelte index 07fd712614..8b0c4e4ac9 100644 --- a/src/mapper/src/routes/+layout.svelte +++ b/src/mapper/src/routes/+layout.svelte @@ -4,13 +4,12 @@ import { setBasePath } from '@hotosm/ui/dist/hotosm-ui'; import Toast from '$lib/components/toast.svelte'; import Header from '$lib/components/header.svelte'; - setBasePath('/mapnow'); let { data, children } = $props(); -
+
{@render children?.({ data })} diff --git a/src/mapper/src/routes/[projectId]/+page.svelte b/src/mapper/src/routes/[projectId]/+page.svelte index e12781a13c..2d2bea046e 100644 --- a/src/mapper/src/routes/[projectId]/+page.svelte +++ b/src/mapper/src/routes/[projectId]/+page.svelte @@ -200,7 +200,7 @@ ? `?task_filter=${taskStore.selectedTaskId}` : ''}" > - Open ODKOpen ODK {/if} @@ -229,7 +229,7 @@ size="small" class="primary w-fit ml-auto" > - CLOSE + CLOSE
diff --git a/src/mapper/src/styles/page.css b/src/mapper/src/styles/page.css index c738fcc7c9..0ff1adfeef 100644 --- a/src/mapper/src/styles/page.css +++ b/src/mapper/src/styles/page.css @@ -1,25 +1,6 @@ -@import url('https://fonts.googleapis.com/css2?family=Barlow:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap'); - /* font barlow */ -.font-barlow-regular { - font-family: 'Barlow', system-ui; - font-weight: 400; - font-style: normal; -} -.font-barlow-medium { +.font-barlow { font-family: 'Barlow', system-ui; - font-weight: 500; - font-style: normal; -} -.font-barlow-semibold { - font-family: 'Barlow', system-ui; - font-weight: 600; - font-style: normal; -} -.font-barlow-bold { - font-family: 'Barlow', system-ui; - font-weight: 700; - font-style: normal; } /* override default scrollbar */ @@ -37,10 +18,7 @@ background: #c9c8c8; } -p { - margin: 0px; -} - +p, h5 { - margin: 0; + margin: 0px; }