forked from MapComplete/MapComplete
UX: improve weird scrolling behaviour, esp on homepage; preferred languages are on top in themes as well
This commit is contained in:
parent
bae13fdfdf
commit
b63e9c0262
7 changed files with 270 additions and 238 deletions
|
|
@ -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>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue