Osmwithspace/MapComplete
1
0
Fork 0
forked from MapComplete/MapComplete
Code Pull requests Activity

UX: improve weird scrolling behaviour, esp on homepage; preferred languages are on top in themes as well

Browse source
This commit is contained in:
Pieter Vander Vennet 2025-07-09 03:30:39 +02:00
parent bae13fdfdf
commit b63e9c0262
7 changed files with 270 additions and 238 deletions
Download patch file Download diff file Expand all files Collapse all files

21
public/css/index-tailwind-output.css
View file

@ -1530,6 +1530,10 @@ input[type="range"].range-lg::-moz-range-thumb {
margin-left: 1rem;
}
.ml-8 {
margin-left: 2rem;
}
.mr-0\.5 {
margin-right: 0.125rem;
}
@ -8364,6 +8368,10 @@ svg.apply-fill path {
height: 2.75rem;
}
.sm\:h-20 {
height: 5rem;
}
.sm\:h-24 {
height: 6rem;
}
@ -8396,6 +8404,10 @@ svg.apply-fill path {
width: 2.75rem;
}
.sm\:w-20 {
width: 5rem;
}
.sm\:w-24 {
width: 6rem;
}
@ -8458,10 +8470,6 @@ svg.apply-fill path {
padding: 0.5rem;
}
.sm\:p-3 {
padding: 0.75rem;
}
.sm\:p-4 {
padding: 1rem;
}
@ -8478,6 +8486,11 @@ svg.apply-fill path {
padding: 2rem;
}
.sm\:px-3 {
padding-left: 0.75rem;
padding-right: 0.75rem;
}
.sm\:px-4 {
padding-left: 1rem;
padding-right: 1rem;

46
src/UI/AllThemesGui.svelte
View file

@ -152,43 +152,46 @@
</script>
<main>
<div class="absolute left-0 top-0 h-screen w-screen bg-white" style="z-index: -1;" />
<DrawerLeft shown={guistate.pageStates.menu}>
<MenuDrawerIndex onlyLink={true} state={menuDrawerState} />
</DrawerLeft>
<div class="h-full overflow-hidden">
<DrawerLeft shown={guistate.pageStates.menu}>
<div class="h-screen overflow-y-auto">
<MenuDrawerIndex onlyLink={true} state={menuDrawerState} />
</div>
</DrawerLeft>
</div>
<div class="m-4 flex flex-col">
<div class="w-ful flex justify-between">
<div class="p-2 sm:p-4 flex flex-col w-screen">
<div class="w-full flex justify-between overflow-hidden">
<button on:click={() => guistate.pageStates.menu.set(true)} class="m-0 rounded-full p-2">
<MenuIcon class="h-6 w-6 cursor-pointer" />
</button>
<LanguagePicker
clss="self-end max-w-full"
clss="self-end ml-8 shrink max-w-full "
assignTo={state.language}
availableLanguages={t.title.SupportedLanguages()}
preferredLanguages={userLanguages}
/>
</div>
<div class="mt-4 flex">
<div class="m-3 flex-none">
<div class="mt-4 flex break-words overflow-hidden">
<div class="hidden md:block m-3 flex-none">
<Logo alt="MapComplete Logo" class="h-12 w-12 sm:h-24 sm:w-24" />
</div>
<div class="link-underline flex w-full flex-col">
<h1 class="m-0 font-extrabold tracking-tight md:text-6xl">
<Tr t={t.title} />
</h1>
<Tr
cls="mr-4 text-base font-semibold sm:text-lg md:mt-5 md:text-xl lg:mx-0"
t={Translations.t.index.intro}
/>
<div class="flex flex-wrap">
<div class="md:hidden m-1 flex-none">
<Logo alt="MapComplete Logo" class="h-10 w-10 sm:h-20 sm:w-20 mr-4" />
</div>
<div class="flex flex-col">
<h1 class="m-0 font-extrabold tracking-tight md:text-6xl break-words">
<Tr t={t.title} />
</h1>
<Tr
cls="mr-4 text-base font-semibold sm:text-lg md:mt-5 md:text-xl lg:mx-0"
t={Translations.t.index.intro}
/>
</div>
</div>
<AccordionSingle>
<Tr slot="header" t={Translations.t.index.about} />
@ -217,6 +220,7 @@
isFocused={searchIsFocussed}
/>
<ThemesList {search} {state} themes={$officialSearched} />
<LoginToggle {state}>
@ -260,11 +264,11 @@
</ThemesList>
{/if}
</LoginToggle>
</div>
<div class="subtle mb-16 self-end">
v{Constants.vNumber}
</div>
</div>
<div class="absolute top-0 h-0 w-0" style="margin-left: -10em">
<MenuDrawer onlyLink={false} state={menuDrawerState} />

2
src/UI/Base/DrawerLeft.svelte
View file

@ -23,7 +23,7 @@
transitionType="fly"
{transitionParams}
bgColor="frozen-glass"
divClass="overflow-y-auto z-50 "
divClass="overflow-hidden z-50 "
bind:hidden
>
<slot>CONTENTS</slot>

84
src/UI/Base/SidebarUnit.svelte
View file

@ -3,50 +3,54 @@
</div>
<style>
:global(.sidebar-unit) {
display: flex;
flex-direction: column;
row-gap: 0.25rem;
background: var(--background-color);
padding: 0.5rem;
border-radius: 0.5rem;
}
:global(.sidebar-unit) {
display: flex;
flex-direction: column;
background: var(--background-color);
padding: 0.5rem;
border-radius: 0.5rem;
}
:global(.sidebar-unit > h3) {
margin-top: 0;
margin-bottom: 0.5rem;
padding: 0.25rem;
}
:global(.sidebar-unit > h3) {
margin-top: 0;
margin-bottom: 0.5rem;
padding: 0.25rem;
top: 0;
position: sticky;
z-index: 1;
padding-top: 0.5rem;
background: var(--background-color);
}
:global(
:global(
.sidebar-button svg,
.sidebar-button img,
.sidebar-unit > button img,
.sidebar-unit > button svg
) {
width: 1.5rem;
height: 1.5rem;
margin-right: 0.5rem;
flex-shrink: 0;
}
width: 1.5rem;
height: 1.5rem;
margin-right: 0.5rem;
flex-shrink: 0;
}
:global(.sidebar-button .weblate-link > svg) {
width: 0.75rem;
height: 0.75rem;
flex-shrink: 0;
}
:global(.sidebar-button .weblate-link > svg) {
width: 0.75rem;
height: 0.75rem;
flex-shrink: 0;
}
:global(.sidebar-button, .sidebar-unit > a, .sidebar-unit > button) {
display: flex;
align-items: center;
border-radius: 0.25rem !important;
padding: 0.4rem 0.75rem !important;
text-decoration: none !important;
width: 100%;
text-align: start;
}
:global(.sidebar-button, .sidebar-unit > a, .sidebar-unit > button) {
display: flex;
align-items: center;
border-radius: 0.25rem !important;
padding: 0.4rem 0.75rem !important;
text-decoration: none !important;
width: 100%;
text-align: start;
}
:global(
:global(
.sidebar-button > svg,
.sidebar-button > img,
.sidebar-unit > a img,
@ -54,11 +58,11 @@
.sidebar-unit > button svg,
.sidebar-unit > button img
) {
margin-right: 0.5rem;
flex-shrink: 0;
}
margin-right: 0.5rem;
flex-shrink: 0;
}
:global(.sidebar-button:hover, .sidebar-unit > a:hover, .sidebar-unit > button:hover) {
background: var(--low-interaction-background) !important;
}
:global(.sidebar-button:hover, .sidebar-unit > a:hover, .sidebar-unit > button:hover) {
background: var(--low-interaction-background) !important;
}
</style>

3
src/UI/BigComponents/MenuDrawer.svelte
View file

@ -60,6 +60,8 @@
})
</script>
<div class:h-0={!onlyLink} class:h-full={onlyLink} class="overflow-hidden">
<MenuDrawerIndex {state} {onlyLink}>
<!-- Theme related: documentation links, download, ... -->
<svelte:fragment slot="theme-tools">
@ -169,3 +171,4 @@
{/if}
</svelte:fragment>
</MenuDrawerIndex>
</div>

349
src/UI/BigComponents/MenuDrawerIndex.svelte
View file

@ -100,10 +100,10 @@
</script>
<div
class="low-interaction flex h-screen flex-col gap-y-2 overflow-y-auto p-2 sm:gap-y-3 sm:p-3"
class="low-interaction h-full flex flex-col overflow-hidden"
class:hidden={!$shown}
>
<div class="flex justify-between">
<div class="flex justify-between p-2 border-b border-black">
<h2>
<Tr t={t.title} />
</h2>
@ -113,203 +113,208 @@
}}
/>
</div>
{#if $showHome}
<a class="button primary flex" href={Utils.HomepageLink()}>
<Squares2x2 class="h-10 w-10" />
{#if Utils.isIframe}
<Tr t={Translations.t.general.seeIndex} />
{:else}
<Tr t={Translations.t.general.backToIndex} />
{/if}
</a>
{/if}
<!-- User related: avatar, settings, favourits, logout -->
<SidebarUnit>
<LoginToggle {state}>
<LoginButton osmConnection={state.osmConnection} slot="not-logged-in" />
<div class="flex items-center gap-x-4">
{#if $userdetails.img}
<img alt="avatar" src={$userdetails.img} class="h-14 w-14 rounded-full" />
<div class="overflow-y-auto flex flex-col gap-y-2 sm:gap-y-3 px-2 sm:px-3">
{#if $showHome}
<a class="button primary flex" href={Utils.HomepageLink()}>
<Squares2x2 class="h-10 w-10" />
{#if Utils.isIframe}
<Tr t={Translations.t.general.seeIndex} />
{:else}
<Tr t={Translations.t.general.backToIndex} />
{/if}
<b>{$userdetails.name}</b>
</div>
</LoginToggle>
</a>
{/if}
<Page {onlyLink} shown={pg.usersettings} bodyPadding="p-0 pb-4">
<svelte:fragment slot="header">
<CogIcon />
<Tr t={UserRelatedState.usersettingsConfig.title.GetRenderValue({})} />
</svelte:fragment>
<!-- User related: avatar, settings, favourits, logout -->
<SidebarUnit>
<LoginToggle {state}>
<LoginButton osmConnection={state.osmConnection} slot="not-logged-in" />
<div class="flex items-center gap-x-4">
{#if $userdetails.img}
<img alt="avatar" src={$userdetails.img} class="h-14 w-14 rounded-full" />
{/if}
<b>{$userdetails.name}</b>
</div>
</LoginToggle>
<!-- All shown components are set by 'usersettings.json', which happily uses some special visualisations created specifically for it -->
<SelectedElementView
highlightedRendering={state.guistate.highlightedUserSetting}
layer={usersettingslayer}
selectedElement={{
<Page {onlyLink} shown={pg.usersettings} bodyPadding="p-0 pb-4">
<svelte:fragment slot="header">
<CogIcon />
<Tr t={UserRelatedState.usersettingsConfig.title.GetRenderValue({})} />
</svelte:fragment>
<!-- All shown components are set by 'usersettings.json', which happily uses some special visualisations created specifically for it -->
<SelectedElementView
highlightedRendering={state.guistate.highlightedUserSetting}
layer={usersettingslayer}
selectedElement={{
type: "Feature",
properties: { id: "settings" },
geometry: { type: "Point", coordinates: [0, 0] },
}}
{state}
tags={state.userRelatedState.preferencesAsTags}
/>
</Page>
{#if $nrOfFailedImages.length > 0 || $failedImagesOpen}
<Page {onlyLink} shown={pg.failedImages} bodyPadding="p-0 pb-4">
<svelte:fragment slot="header">
<PhotoIcon />
<Tr t={Translations.t.imageQueue.menu.Subs({ count: $nrOfFailedImages.length })} />
</svelte:fragment>
<QueuedImagesView {state} />
{state}
tags={state.userRelatedState.preferencesAsTags}
/>
</Page>
{/if}
<LoginToggle {state} silentFail>
{#if state.favourites}
<Page {onlyLink} shown={pg.favourites}>
{#if $nrOfFailedImages.length > 0 || $failedImagesOpen}
<Page {onlyLink} shown={pg.failedImages} bodyPadding="p-0 pb-4">
<svelte:fragment slot="header">
<HeartIcon />
<Tr t={Translations.t.favouritePoi.tab} />
<PhotoIcon />
<Tr t={Translations.t.imageQueue.menu.Subs({ count: $nrOfFailedImages.length })} />
</svelte:fragment>
<h3>
<Tr t={Translations.t.favouritePoi.title} />
</h3>
<div>
<Favourites {state} />
<h3>
<Tr t={Translations.t.reviews.your_reviews} />
</h3>
<ReviewsOverview {state} />
</div>
<QueuedImagesView {state} />
</Page>
{/if}
{#if $hotkeys.length > 0}
<div class="hidden-on-mobile w-full">
<Page {onlyLink} shown={pg.hotkeys}>
<LoginToggle {state} silentFail>
{#if state.favourites}
<Page {onlyLink} shown={pg.favourites}>
<svelte:fragment slot="header">
<BoltIcon />
<Tr t={Translations.t.hotkeyDocumentation.title} />
<HeartIcon />
<Tr t={Translations.t.favouritePoi.tab} />
</svelte:fragment>
<HotkeyTable />
<h3>
<Tr t={Translations.t.favouritePoi.title} />
</h3>
<div>
<Favourites {state} />
<h3>
<Tr t={Translations.t.reviews.your_reviews} />
</h3>
<ReviewsOverview {state} />
</div>
</Page>
{/if}
{#if $hotkeys.length > 0}
<div class="hidden-on-mobile w-full">
<Page {onlyLink} shown={pg.hotkeys}>
<svelte:fragment slot="header">
<BoltIcon />
<Tr t={Translations.t.hotkeyDocumentation.title} />
</svelte:fragment>
<HotkeyTable />
</Page>
</div>
{/if}
<div class="self-end">
<LogoutButton osmConnection={state.osmConnection} />
</div>
</LoginToggle>
<LanguagePicker preferredLanguages={state.userRelatedState.osmConnection.userDetails.mapD(ud => ud.languages)}/>
</SidebarUnit>
<slot name="theme-tools" />
<slot name="location-tools" />
<!-- About MC: various outward links, legal info, ... -->
<SidebarUnit>
<h3>
<Tr t={Translations.t.general.menu.aboutMapComplete} />
</h3>
<a class="flex"
href={$isAndroid ? "https://mapcomplete.org/studio" : window.location.protocol + "//" + window.location.host + "/studio.html"}>
<Pencil class="mr-2 h-6 w-6" />
<Tr t={Translations.t.general.morescreen.createYourOwnTheme} />
</a>
<a class="flex" href="mailto:info@mapcomplete.org">
<EnvelopeOpen class="h-6 w-6" />
<Tr t={Translations.t.general.attribution.emailCreators} />
</a>
<a class="flex" href="https://en.osm.town/@MapComplete" target="_blank">
<Mastodon class="h-6 w-6" />
<Tr t={Translations.t.general.attribution.followOnMastodon} />
</a>
<a class="flex" href="https://liberapay.com/pietervdvn/" target="_blank">
<Liberapay class="h-6 w-6" />
<Tr t={Translations.t.general.attribution.donate} />
</a>
<a
class="flex"
href="https://source.mapcomplete.org/MapComplete/MapComplete/issues"
target="_blank"
>
<Bug class="h-6 w-6" />
<Tr t={Translations.t.general.attribution.openIssueTracker} />
</a>
<a class="flex" href="https://source.mapcomplete.org/MapComplete/MapComplete/" target="_blank">
<Forgejo class="h-6 w-6" />
<Tr t={Translations.t.general.attribution.gotoSourceCode} />
</a>
<a class="flex" href={`${Constants.weblate}projects/mapcomplete/`} target="_blank">
<TranslateIcon class="h-6 w-6" />
<Tr t={Translations.t.translations.activateButton} />
</a>
<a
class="flex"
href={window.location.protocol + "//" + window.location.host + "/inspector.html"}
>
<MagnifyingGlassCircle class="mr-2 h-6 w-6" />
<Tr t={Translations.t.inspector.menu} />
</a>
{#if !state.theme}
<a class="flex" href={`./statistics.html`} target="_blank">
<ChartBar class="h-6 w-6" />
<Tr t={Translations.t.general.attribution.openStatistics.Subs({ theme: "MapComplete" })} />
</a>
{/if}
<div class="self-end">
<LogoutButton osmConnection={state.osmConnection} />
</div>
</LoginToggle>
<LanguagePicker />
</SidebarUnit>
<slot name="theme-tools" />
<slot name="location-tools" />
<!-- About MC: various outward links, legal info, ... -->
<SidebarUnit>
<h3>
<Tr t={Translations.t.general.menu.aboutMapComplete} />
</h3>
<a class="flex" href={$isAndroid ? "https://mapcomplete.org/studio" : window.location.protocol + "//" + window.location.host + "/studio.html"}>
<Pencil class="mr-2 h-6 w-6" />
<Tr t={Translations.t.general.morescreen.createYourOwnTheme} />
</a>
<a class="flex" href="mailto:info@mapcomplete.org">
<EnvelopeOpen class="h-6 w-6" />
<Tr t={Translations.t.general.attribution.emailCreators} />
</a>
<a class="flex" href="https://en.osm.town/@MapComplete" target="_blank">
<Mastodon class="h-6 w-6" />
<Tr t={Translations.t.general.attribution.followOnMastodon} />
</a>
<a class="flex" href="https://liberapay.com/pietervdvn/" target="_blank">
<Liberapay class="h-6 w-6" />
<Tr t={Translations.t.general.attribution.donate} />
</a>
<a
class="flex"
href="https://source.mapcomplete.org/MapComplete/MapComplete/issues"
target="_blank"
>
<Bug class="h-6 w-6" />
<Tr t={Translations.t.general.attribution.openIssueTracker} />
</a>
<a class="flex" href="https://source.mapcomplete.org/MapComplete/MapComplete/" target="_blank">
<Forgejo class="h-6 w-6" />
<Tr t={Translations.t.general.attribution.gotoSourceCode} />
</a>
<a class="flex" href={`${Constants.weblate}projects/mapcomplete/`} target="_blank">
<TranslateIcon class="h-6 w-6" />
<Tr t={Translations.t.translations.activateButton} />
</a>
<a
class="flex"
href={window.location.protocol + "//" + window.location.host + "/inspector.html"}
>
<MagnifyingGlassCircle class="mr-2 h-6 w-6" />
<Tr t={Translations.t.inspector.menu} />
</a>
{#if !state.theme}
<a class="flex" href={`./statistics.html`} target="_blank">
<ChartBar class="h-6 w-6" />
<Tr t={Translations.t.general.attribution.openStatistics.Subs({ theme: "MapComplete" })} />
<a class="flex" href={Utils.OsmChaLinkFor(7)} target="_blank">
<ArrowTrendingUp class="mr-2 h-6 w-6" />
<Tr t={Translations.t.general.attribution.openOsmchaLastWeek} />
</a>
{/if}
</SidebarUnit>
<a class="flex" href={Utils.OsmChaLinkFor(7)} target="_blank">
<ArrowTrendingUp class="mr-2 h-6 w-6" />
<Tr t={Translations.t.general.attribution.openOsmchaLastWeek} />
</a>
</SidebarUnit>
<SidebarUnit>
<h3>
<Tr t={Translations.t.general.menu.legal} />
</h3>
<Page {onlyLink} shown={pg.copyright}>
<svelte:fragment slot="header">
<Copyright />
<Tr t={Translations.t.general.attribution.attributionTitle} />
</svelte:fragment>
<CopyrightPanel {state} />
</Page>
{#if state?.theme}
<Page {onlyLink} shown={pg.copyright_icons}>
<SidebarUnit>
<h3>
<Tr t={Translations.t.general.menu.legal} />
</h3>
<Page {onlyLink} shown={pg.copyright}>
<svelte:fragment slot="header">
<Copyright />
<Tr t={Translations.t.general.attribution.iconAttribution.title} />
<Tr t={Translations.t.general.attribution.attributionTitle} />
</svelte:fragment>
<CopyrightAllIcons {state} />
<CopyrightPanel {state} />
</Page>
{/if}
{#if state?.theme}
<Page {onlyLink} shown={pg.copyright_icons}>
<svelte:fragment slot="header">
<Copyright />
<Tr t={Translations.t.general.attribution.iconAttribution.title} />
</svelte:fragment>
<CopyrightAllIcons {state} />
</Page>
{/if}
<Page {onlyLink} shown={pg.privacy}>
<svelte:fragment slot="header">
<EyeIcon />
<Tr t={Translations.t.privacy.title} />
</svelte:fragment>
<PrivacyPolicy {state} />
<a href="./privacy.html" class="button float-right w-fit" target="_blank">
<ArrowTopRightOnSquare class="h-8 w-8" />
</a>
</Page>
</SidebarUnit>
<Page {onlyLink} shown={pg.privacy}>
<svelte:fragment slot="header">
<EyeIcon />
<Tr t={Translations.t.privacy.title} />
</svelte:fragment>
<PrivacyPolicy {state} />
<a href="./privacy.html" class="button float-right w-fit" target="_blank">
<ArrowTopRightOnSquare class="h-8 w-8" />
</a>
</Page>
</SidebarUnit>
<div class="subtle self-end">
{Constants.vNumber}
{#if $isAndroid}
Android
{/if}
<div class="subtle self-end">
{Constants.vNumber}
{#if $isAndroid}
Android
{/if}
</div>
</div>
</div>

3
src/UI/InputElement/LanguagePicker.svelte
View file

@ -60,6 +60,9 @@
{#if language !== $current}
({language_translations[language]?.[$current] ?? language})
{/if}
{#if $preferredLanguages.indexOf(language)>=0}
⭐
{/if}
</option>
{/each}
<option disabled />