ilja_space/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; margin-left: 1rem;
} }
.ml-8 {
margin-left: 2rem;
}
.mr-0\.5 { .mr-0\.5 {
margin-right: 0.125rem; margin-right: 0.125rem;
} }
@ -8364,6 +8368,10 @@ svg.apply-fill path {
height: 2.75rem; height: 2.75rem;
} }
.sm\:h-20 {
height: 5rem;
}
.sm\:h-24 { .sm\:h-24 {
height: 6rem; height: 6rem;
} }
@ -8396,6 +8404,10 @@ svg.apply-fill path {
width: 2.75rem; width: 2.75rem;
} }
.sm\:w-20 {
width: 5rem;
}
.sm\:w-24 { .sm\:w-24 {
width: 6rem; width: 6rem;
} }
@ -8458,10 +8470,6 @@ svg.apply-fill path {
padding: 0.5rem; padding: 0.5rem;
} }
.sm\:p-3 {
padding: 0.75rem;
}
.sm\:p-4 { .sm\:p-4 {
padding: 1rem; padding: 1rem;
} }
@ -8478,6 +8486,11 @@ svg.apply-fill path {
padding: 2rem; padding: 2rem;
} }
.sm\:px-3 {
padding-left: 0.75rem;
padding-right: 0.75rem;
}
.sm\:px-4 { .sm\:px-4 {
padding-left: 1rem; padding-left: 1rem;
padding-right: 1rem; padding-right: 1rem;

46
src/UI/AllThemesGui.svelte
View file

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

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

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

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

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

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

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

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

@ -100,10 +100,10 @@
</script> </script>
<div <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} class:hidden={!$shown}
> >
<div class="flex justify-between"> <div class="flex justify-between p-2 border-b border-black">
<h2> <h2>
<Tr t={t.title} /> <Tr t={t.title} />
</h2> </h2>
@ -113,203 +113,208 @@
}} }}
/> />
</div> </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 --> <div class="overflow-y-auto flex flex-col gap-y-2 sm:gap-y-3 px-2 sm:px-3">
<SidebarUnit> {#if $showHome}
<LoginToggle {state}> <a class="button primary flex" href={Utils.HomepageLink()}>
<LoginButton osmConnection={state.osmConnection} slot="not-logged-in" /> <Squares2x2 class="h-10 w-10" />
<div class="flex items-center gap-x-4"> {#if Utils.isIframe}
{#if $userdetails.img} <Tr t={Translations.t.general.seeIndex} />
<img alt="avatar" src={$userdetails.img} class="h-14 w-14 rounded-full" /> {:else}
<Tr t={Translations.t.general.backToIndex} />
{/if} {/if}
<b>{$userdetails.name}</b> </a>
</div> {/if}
</LoginToggle>
<Page {onlyLink} shown={pg.usersettings} bodyPadding="p-0 pb-4"> <!-- User related: avatar, settings, favourits, logout -->
<svelte:fragment slot="header"> <SidebarUnit>
<CogIcon /> <LoginToggle {state}>
<Tr t={UserRelatedState.usersettingsConfig.title.GetRenderValue({})} /> <LoginButton osmConnection={state.osmConnection} slot="not-logged-in" />
</svelte:fragment> <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 --> <Page {onlyLink} shown={pg.usersettings} bodyPadding="p-0 pb-4">
<SelectedElementView <svelte:fragment slot="header">
highlightedRendering={state.guistate.highlightedUserSetting} <CogIcon />
layer={usersettingslayer} <Tr t={UserRelatedState.usersettingsConfig.title.GetRenderValue({})} />
selectedElement={{ </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", type: "Feature",
properties: { id: "settings" }, properties: { id: "settings" },
geometry: { type: "Point", coordinates: [0, 0] }, geometry: { type: "Point", coordinates: [0, 0] },
}} }}
{state} {state}
tags={state.userRelatedState.preferencesAsTags} 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} />
</Page> </Page>
{/if}
<LoginToggle {state} silentFail> {#if $nrOfFailedImages.length > 0 || $failedImagesOpen}
{#if state.favourites} <Page {onlyLink} shown={pg.failedImages} bodyPadding="p-0 pb-4">
<Page {onlyLink} shown={pg.favourites}>
<svelte:fragment slot="header"> <svelte:fragment slot="header">
<HeartIcon /> <PhotoIcon />
<Tr t={Translations.t.favouritePoi.tab} /> <Tr t={Translations.t.imageQueue.menu.Subs({ count: $nrOfFailedImages.length })} />
</svelte:fragment> </svelte:fragment>
<QueuedImagesView {state} />
<h3>
<Tr t={Translations.t.favouritePoi.title} />
</h3>
<div>
<Favourites {state} />
<h3>
<Tr t={Translations.t.reviews.your_reviews} />
</h3>
<ReviewsOverview {state} />
</div>
</Page> </Page>
{/if} {/if}
{#if $hotkeys.length > 0}
<div class="hidden-on-mobile w-full"> <LoginToggle {state} silentFail>
<Page {onlyLink} shown={pg.hotkeys}> {#if state.favourites}
<Page {onlyLink} shown={pg.favourites}>
<svelte:fragment slot="header"> <svelte:fragment slot="header">
<BoltIcon /> <HeartIcon />
<Tr t={Translations.t.hotkeyDocumentation.title} /> <Tr t={Translations.t.favouritePoi.tab} />
</svelte:fragment> </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> </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> </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} {/if}
<div class="self-end"> <a class="flex" href={Utils.OsmChaLinkFor(7)} target="_blank">
<LogoutButton osmConnection={state.osmConnection} /> <ArrowTrendingUp class="mr-2 h-6 w-6" />
</div> <Tr t={Translations.t.general.attribution.openOsmchaLastWeek} />
</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> </a>
{/if} </SidebarUnit>
<a class="flex" href={Utils.OsmChaLinkFor(7)} target="_blank"> <SidebarUnit>
<ArrowTrendingUp class="mr-2 h-6 w-6" /> <h3>
<Tr t={Translations.t.general.attribution.openOsmchaLastWeek} /> <Tr t={Translations.t.general.menu.legal} />
</a> </h3>
</SidebarUnit> <Page {onlyLink} shown={pg.copyright}>
<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}>
<svelte:fragment slot="header"> <svelte:fragment slot="header">
<Copyright /> <Copyright />
<Tr t={Translations.t.general.attribution.iconAttribution.title} /> <Tr t={Translations.t.general.attribution.attributionTitle} />
</svelte:fragment> </svelte:fragment>
<CopyrightAllIcons {state} /> <CopyrightPanel {state} />
</Page> </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}> <Page {onlyLink} shown={pg.privacy}>
<svelte:fragment slot="header"> <svelte:fragment slot="header">
<EyeIcon /> <EyeIcon />
<Tr t={Translations.t.privacy.title} /> <Tr t={Translations.t.privacy.title} />
</svelte:fragment> </svelte:fragment>
<PrivacyPolicy {state} /> <PrivacyPolicy {state} />
<a href="./privacy.html" class="button float-right w-fit" target="_blank"> <a href="./privacy.html" class="button float-right w-fit" target="_blank">
<ArrowTopRightOnSquare class="h-8 w-8" /> <ArrowTopRightOnSquare class="h-8 w-8" />
</a> </a>
</Page> </Page>
</SidebarUnit> </SidebarUnit>
<div class="subtle self-end"> <div class="subtle self-end">
{Constants.vNumber} {Constants.vNumber}
{#if $isAndroid} {#if $isAndroid}
Android Android
{/if} {/if}
</div>
</div> </div>
</div> </div>

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

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