brian/wanderer
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

mobile repsonsiveness improvements

Browse Source
This commit is contained in:
Christian Beutel
2025-01-09 20:36:10 +01:00
parent f9a69903d3
commit 9acd935d7d
8 changed files with 44 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
web/src/lib/components/trail/trail_card.svelte
View File

@@ -26,9 +26,9 @@
</script>
<div
class="trail-card relative rounded-2xl border border-input-border {fullWidth
? 'min-w-72'
: 'w-72'} cursor-pointer"
class="trail-card relative rounded-2xl border border-input-border min-w-72 {fullWidth
? ''
: 'lg:w-72'} cursor-pointer"
on:mouseenter
on:mouseleave
role="listitem"

2
web/src/lib/components/trail/trail_list.svelte
View File

@@ -101,7 +101,7 @@
</script>
<div class="min-w-0">
<div class="flex items-end flex-wrap md:flex-nowrap gap-x-6 gap-y-2 mx-4">
<div class="flex items-end flex-wrap lg:flex-nowrap gap-x-6 gap-y-2 mx-4">
<div class="basis-full order-1 md:order-none">
<Pagination
page={pagination.page}

4
web/src/routes/lists/edit/[id]/+page.svelte
View File

@@ -458,6 +458,10 @@
></ConfirmModal>
<style>
#trail-map {
height: calc(50vh);
}
@media only screen and (min-width: 768px) {
#trail-map,
#list-form {

13
web/src/routes/map/trail/[id]/+page.svelte
View File

@@ -13,13 +13,22 @@
<title>{$trail.name} | {$_("map")} | wanderer</title>
</svelte:head>
<main class="grid grid-cols-1 md:grid-cols-[458px_1fr] gap-x-1 gap-y-4">
<TrailInfoPanel trail={$trail} {markers}></TrailInfoPanel>
<div class="hidden md:block">
<TrailInfoPanel trail={$trail} {markers}></TrailInfoPanel>
</div>
<div id="trail-details" class="sticky top-[62px]">
<MapWithElevationMaplibre trails={[$trail]} bind:markers showTerrain={true}></MapWithElevationMaplibre>
<MapWithElevationMaplibre
trails={[$trail]}
bind:markers
showTerrain={true}
></MapWithElevationMaplibre>
</div>
</main>
<style>
#trail-details {
height: calc(100vh);
}
@media only screen and (min-width: 768px) {
#trail-details {
height: calc(100vh - 124px);

8
web/src/routes/profile/[id]/+layout.svelte
View File

@@ -48,9 +48,9 @@
</script>
<div
class="grid grid-cols-1 lg:grid-cols-[356px_minmax(0,_1fr)] gap-4 max-w-6xl mx-auto items-start"
class="grid grid-cols-1 md:grid-cols-[356px_minmax(0,_1fr)] gap-6 max-w-6xl mx-auto items-start"
>
<div class="border border-input-border rounded-xl sticky top-8">
<div class="border border-input-border rounded-xl md:sticky top-8 md:ml-6">
{#if data.user}
<div class="flex items-center gap-x-6 px-6 my-6">
<img
@@ -133,5 +133,7 @@
></ProfileShareModal>
{/if}
</div>
<slot></slot>
<div class="md:mr-6">
<slot></slot>
</div>
</div>

2
web/src/routes/profile/[id]/+page.svelte
View File

@@ -41,7 +41,7 @@
<title>{$_("profile")} | wanderer</title>
</svelte:head>
<div class="mx-8 space-y-6">
<div class="space-y-6">
<div class="space-y-4">
<h4 class="text-xl font-semibold">
{$_("about")}

12
web/src/routes/profile/[id]/stats/+page.svelte
View File

@@ -225,9 +225,9 @@
<title>{$_("profile")} | wanderer</title>
</svelte:head>
<div class="grid grid-cols-1 sm:grid-cols-[272px_minmax(0,_1fr)] lg:grid-cols-[320px_minmax(0,_1fr)] gap-y-4 max-w-6xl mx-auto">
<div class="grid grid-cols-1 lg:grid-cols-[320px_minmax(0,_1fr)] gap-y-4 max-w-6xl mx-auto">
<div
class="flex flex-wrap md:flex-nowrap col-start-1 sm:col-start-2 gap-x-4 justify-end"
class="flex flex-wrap lg:flex-nowrap col-start-1 lg:col-start-2 gap-x-4 justify-end"
>
<MultiSelect
on:change={(e) => updateFilterCategory(e.detail)}
@@ -246,7 +246,7 @@
label={$_("before")}
></Datepicker>
</div>
<div class="space-y-4 grow-0 sm:mr-4">
<div class="space-y-4 grow-0 lg:mr-4">
<div class="border border-input-border rounded-xl p-6">
<Calendar
on:click={(e) => handleDateClick(e.detail)}
@@ -274,7 +274,7 @@
</div>
</div>
<div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
<div class="grid grid-cols-1 lg:grid-cols-2 gap-4">
<div
class="flex flex-col items-center gap-4 border border-input-border rounded-xl p-6"
>
@@ -340,7 +340,7 @@
</div>
<div
class="h-full sm:col-span-2 space-y-2 border border-input-border rounded-xl p-6"
class="h-full lg:col-span-2 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"
@@ -383,7 +383,7 @@
</div>
<div
class="col-span-1 sm:col-span-2 border border-input-border rounded-xl p-6 space-y-6"
class="col-span-1 lg: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

24
web/src/routes/trail/edit/[id]/+page.svelte
View File

@@ -899,14 +899,16 @@
></Select>
</div>
{/if}
<MapWithElevationMaplibre
trails={mapTrail}
drawing={drawingActive}
showTerrain={true}
onMarkerDragEnd={moveMarker}
bind:map
on:click={(e) => handleMapClick(e.detail)}
></MapWithElevationMaplibre>
<div id="trail-map">
<MapWithElevationMaplibre
trails={mapTrail}
drawing={drawingActive}
showTerrain={true}
onMarkerDragEnd={moveMarker}
bind:map
on:click={(e) => handleMapClick(e.detail)}
></MapWithElevationMaplibre>
</div>
</div>
</main>
<WaypointModal
@@ -922,11 +924,11 @@
></ListSelectModal>
<style>
#map {
height: calc(400px);
#trail-map {
height: calc(50vh);
}
@media only screen and (min-width: 768px) {
#map,
#trail-map,
form {
height: calc(100vh - 124px);
}