More design tweaking

This commit is contained in:
Pieter Vander Vennet 2024-08-29 16:19:08 +02:00
parent c097c73bec
commit 0b2ce63284
2 changed files with 211 additions and 197 deletions

View file

@ -11,7 +11,7 @@
import CommunityIndexView from "./CommunityIndexView.svelte" import CommunityIndexView from "./CommunityIndexView.svelte"
import Community from "../../assets/svg/Community.svelte" import Community from "../../assets/svg/Community.svelte"
import LoginToggle from "../Base/LoginToggle.svelte" import LoginToggle from "../Base/LoginToggle.svelte"
import { Sidebar, SidebarWrapper } from "flowbite-svelte" import { Sidebar, SidebarWrapper } from "flowbite-svelte"
import HotkeyTable from "./HotkeyTable.svelte" import HotkeyTable from "./HotkeyTable.svelte"
import { Utils } from "../../Utils" import { Utils } from "../../Utils"
import Constants from "../../Models/Constants" import Constants from "../../Models/Constants"
@ -46,6 +46,8 @@
import Marker from "../Map/Marker.svelte" import Marker from "../Map/Marker.svelte"
import LogoutButton from "../Base/LogoutButton.svelte" import LogoutButton from "../Base/LogoutButton.svelte"
import { LanguageIcon } from "@babeard/svelte-heroicons/solid" import { LanguageIcon } from "@babeard/svelte-heroicons/solid"
import { BoltIcon } from "@babeard/svelte-heroicons/mini"
import Copyright from "../../assets/svg/Copyright.svelte"
export let state: ThemeViewState export let state: ThemeViewState
let userdetails = state.osmConnection.userDetails let userdetails = state.osmConnection.userDetails
@ -60,249 +62,259 @@
</script> </script>
<Sidebar asideClass="max-w-screen p-0 low-interaction p-6 link-underline"> <Sidebar asideClass="max-w-screen p-0 low-interaction p-6 link-underline">
<h2>Menu</h2> <div class="flex flex-col">
<div class="flex flex-col">
<!-- User related: avatar, settings, favourits, logout --> <!-- User related: avatar, settings, favourits, logout -->
<div class="sidebar-unit"> <div class="sidebar-unit">
<LoginToggle {state}>
<LoginButton osmConnection={state.osmConnection} slot="not-logged-in"></LoginButton>
<div class="flex gap-x-2">
{#if $userdetails.img}
<img src={$userdetails.img} class="rounded-full w-14 h-14" />
{/if}
<div class="flex flex-col justify-between">
<b>{$userdetails.name}</b>
</div>
</div>
</LoginToggle>
<Page {onlyLink} shown={pg.usersettings}>
<div class="flex" slot="header">
<CogIcon class="h-6 w-6" />
<Tr t={UserRelatedState.usersettingsConfig.title.GetRenderValue({})} />
</div>
<!-- All shown components are set by 'usersettings.json', which happily uses some special visualisations created specifically for it -->
<LoginToggle {state}> <LoginToggle {state}>
<LoginButton osmConnection={state.osmConnection} slot="not-logged-in"></LoginButton> <div class="flex flex-col" slot="not-logged-in">
<div class="flex gap-x-2"> <LanguagePicker availableLanguages={layout.language} />
{#if $userdetails.img} <Tr cls="alert" t={Translations.t.userinfo.notLoggedIn} />
<img src={$userdetails.img} class="rounded-full w-14 h-14" /> <LoginButton clss="primary" osmConnection={state.osmConnection} />
{/if}
<div class="flex flex-col justify-between">
<b>{$userdetails.name}</b>
</div>
</div> </div>
</LoginToggle> <SelectedElementView
highlightedRendering={state.guistate.highlightedUserSetting}
layer={usersettingslayer}
<Page {onlyLink} shown={pg.usersettings}> selectedElement={{
<div class="flex" slot="header">
<CogIcon class="h-6 w-6" />
<Tr t={UserRelatedState.usersettingsConfig.title.GetRenderValue({})} />
</div>
<!-- All shown components are set by 'usersettings.json', which happily uses some special visualisations created specifically for it -->
<LoginToggle {state}>
<div class="flex flex-col" slot="not-logged-in">
<LanguagePicker availableLanguages={layout.language} />
<Tr cls="alert" t={Translations.t.userinfo.notLoggedIn} />
<LoginButton clss="primary" osmConnection={state.osmConnection} />
</div>
<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}
/> />
</LoginToggle>
</Page>
<LoginToggle {state}>
<Page {onlyLink} shown={pg.favourites}>
<div class="flex" slot="header">
<HeartIcon class="h-6 w-6" />
<Tr t={Translations.t.favouritePoi.tab} />
</div>
<h3>
<Tr t={Translations.t.favouritePoi.title} />
</h3>
<div>
<Favourites {state} />
<h3>
<Tr t={Translations.t.reviews.your_reviews} />
</h3>
<ReviewsOverview {state} />
</div>
</Page>
<div class="self-end">
<LogoutButton osmConnection={state.osmConnection} />
</div>
</LoginToggle> </LoginToggle>
<LanguagePicker/> </Page>
<LoginToggle {state}>
<Page {onlyLink} shown={pg.favourites}>
<div class="flex" slot="header">
<HeartIcon class="h-6 w-6" />
<Tr t={Translations.t.favouritePoi.tab} />
</div>
<h3>
<Tr t={Translations.t.favouritePoi.title} />
</h3>
<div>
<Favourites {state} />
<h3>
<Tr t={Translations.t.reviews.your_reviews} />
</h3>
<ReviewsOverview {state} />
</div>
</Page>
<div class="self-end">
<LogoutButton osmConnection={state.osmConnection} />
</div>
</LoginToggle>
<div style="width: 90%">
<LanguagePicker />
</div> </div>
</div>
<!-- Theme related: documentation links, download, ... -->
<div class="sidebar-unit">
<h3>
About this map
</h3>
<Page {onlyLink} shown={pg.about_theme}> <!-- Theme related: documentation links, download, ... -->
<dic slot="link"> <div class="sidebar-unit">
Show introduction <h3>
</dic> About this map
<div class="flex" slot="header"> </h3>
<Marker icons={layout.icon} size="h-4 w-4" />
<Tr t={layout.title} /> <Page {onlyLink} shown={pg.about_theme}>
<dic slot="link">
Show introduction
</dic>
<div class="flex" slot="header">
<Marker icons={layout.icon} size="h-4 w-4" />
<Tr t={layout.title} />
</div>
<ThemeIntroPanel {state} />
</Page>
<FilterPage {onlyLink} {state} />
<RasterLayerOverview {onlyLink} {state} />
<Page {onlyLink} shown={pg.share}>
<div class="flex" slot="header">
<Share class="h-4 w-4" />
<Tr t={Translations.t.general.sharescreen.title} />
</div>
<ShareScreen {state} />
</Page>
{#if state.featureSwitches.featureSwitchEnableExport}
<Page {onlyLink} shown={pg.download}>
<div slot="header" class="flex">
<ArrowDownTray class="h-4 w-4" />
<Tr t={Translations.t.general.download.title} />
</div> </div>
<ThemeIntroPanel {state} /> <DownloadPanel {state} />
</Page> </Page>
{/if}
<FilterPage {onlyLink} {state} /> {#if layout.official}
<a
<RasterLayerOverview {onlyLink} {state} /> class="flex"
href={"https://github.com/pietervdvn/MapComplete/blob/develop/Docs/Themes/" +
<Page {onlyLink} shown={pg.share}>
<div class="flex" slot="header">
<Share class="h-4 w-4" />
<Tr t={Translations.t.general.sharescreen.title} />
</div>
<ShareScreen {state} />
</Page>
{#if state.featureSwitches.featureSwitchEnableExport}
<Page {onlyLink} shown={pg.download}>
<div slot="header" class="flex">
<ArrowDownTray class="h-4 w-4" />
<Tr t={Translations.t.general.download.title} />
</div>
<DownloadPanel {state} />
</Page>
{/if}
{#if layout.official}
<a
class="flex"
href={"https://github.com/pietervdvn/MapComplete/blob/develop/Docs/Themes/" +
layout.id + layout.id +
".md"} ".md"}
target="_blank" target="_blank"
> >
<DocumentMagnifyingGlass class="h-6 w-6" /> <DocumentMagnifyingGlass class="h-6 w-6" />
<Tr <Tr
t={Translations.t.general.attribution.openThemeDocumentation.Subs({ t={Translations.t.general.attribution.openThemeDocumentation.Subs({
name: layout.title, name: layout.title,
})} })}
/> />
</a> </a>
<a class="flex" href={Utils.OsmChaLinkFor(31, layout.id)} target="_blank"> <a class="flex" href={Utils.OsmChaLinkFor(31, layout.id)} target="_blank">
<DocumentChartBar class="h-6 w-6" /> <DocumentChartBar class="h-6 w-6" />
<Tr t={Translations.t.general.attribution.openOsmcha.Subs({ theme: layout.title })} /> <Tr t={Translations.t.general.attribution.openOsmcha.Subs({ theme: layout.title })} />
</a> </a>
{/if} {/if}
</div> </div>
<!-- Other links and tools for the given location: open iD/JOSM; community index, ... --> <!-- Other links and tools for the given location: open iD/JOSM; community index, ... -->
<div class="sidebar-unit"> <div class="sidebar-unit">
<h3> <h3>
Discover more Discover more
</h3> </h3>
<Page {onlyLink} shown={pg.community_index}> <Page {onlyLink} shown={pg.community_index}>
<div class="flex gap-x-2" slot="header"> <div class="flex gap-x-2" slot="header">
<Community class="h-6 w-6" /> <Community class="h-6 w-6" />
<Tr t={Translations.t.communityIndex.title} /> <Tr t={Translations.t.communityIndex.title} />
</div> </div>
<CommunityIndexView location={state.mapProperties.location} /> <CommunityIndexView location={state.mapProperties.location} />
</Page> </Page>
<If condition={featureSwitches.featureSwitchEnableLogin}> <If condition={featureSwitches.featureSwitchEnableLogin}>
<OpenIdEditor mapProperties={state.mapProperties} /> <OpenIdEditor mapProperties={state.mapProperties} />
<OpenJosm {state} /> <OpenJosm {state} />
<MapillaryLink large={false} mapProperties={state.mapProperties} /> <MapillaryLink large={false} mapProperties={state.mapProperties} />
</If> </If>
</div> </div>
<!-- About MC: various outward links, legal info, ... --> <!-- About MC: various outward links, legal info, ... -->
<div class="sidebar-unit"> <div class="sidebar-unit">
<h3> <h3>
<Tr t={Translations.t.general.menu.aboutMapComplete} /> <Tr t={Translations.t.general.menu.aboutMapComplete} />
</h3> </h3>
{#if $showHome} {#if $showHome}
<a class="flex" href={Utils.HomepageLink()}> <a class="flex" href={Utils.HomepageLink()}>
<Add class="h-6 w-6" /> <Add class="h-6 w-6" />
{#if Utils.isIframe} {#if Utils.isIframe}
<Tr t={Translations.t.general.seeIndex} /> <Tr t={Translations.t.general.seeIndex} />
{:else} {:else}
<Tr t={Translations.t.general.backToIndex} /> <Tr t={Translations.t.general.backToIndex} />
{/if} {/if}
</a> </a>
{/if} {/if}
<div class="hidden-on-mobile">
<Page {onlyLink} shown={pg.hotkeys}> <Page {onlyLink} shown={pg.hotkeys}>
<Tr t={ Translations.t.hotkeyDocumentation.title} slot="header" /> <div class="flex" slot="header">
<BoltIcon class="w-6 h-6" />
<Tr t={ Translations.t.hotkeyDocumentation.title} />
</div>
<HotkeyTable /> <HotkeyTable />
</Page> </Page>
</div>
<a class="flex" href="https://github.com/pietervdvn/MapComplete/" target="_blank"> <a class="flex" href="https://github.com/pietervdvn/MapComplete/" target="_blank">
<Github class="h-6 w-6" /> <Github class="h-6 w-6" />
<Tr t={Translations.t.general.attribution.gotoSourceCode} /> <Tr t={Translations.t.general.attribution.gotoSourceCode} />
</a> </a>
<a class="flex" href="https://github.com/pietervdvn/MapComplete/issues" target="_blank"> <a class="flex" href="https://github.com/pietervdvn/MapComplete/issues" target="_blank">
<Bug class="h-6 w-6" /> <Bug class="h-6 w-6" />
<Tr t={Translations.t.general.attribution.openIssueTracker} /> <Tr t={Translations.t.general.attribution.openIssueTracker} />
</a> </a>
<a class="flex" href="https://en.osm.town/@MapComplete" target="_blank"> <a class="flex" href="https://en.osm.town/@MapComplete" target="_blank">
<Mastodon class="h-6 w-6" /> <Mastodon class="h-6 w-6" />
<Tr t={Translations.t.general.attribution.followOnMastodon} /> <Tr t={Translations.t.general.attribution.followOnMastodon} />
</a> </a>
<a class="flex" href="https://liberapay.com/pietervdvn/" target="_blank"> <a class="flex" href="https://liberapay.com/pietervdvn/" target="_blank">
<Liberapay class="h-6 w-6" /> <Liberapay class="h-6 w-6" />
<Tr t={Translations.t.general.attribution.donate} /> <Tr t={Translations.t.general.attribution.donate} />
</a> </a>
<Page {onlyLink} shown={pg.copyright}> <Page {onlyLink} shown={pg.copyright}>
<Tr slot="header" t={Translations.t.general.attribution.attributionTitle} /> <div slot="header" class="flex">
<CopyrightPanel {state} /> <Copyright class="w-8 h-8" />
</Page> <Tr t={Translations.t.general.attribution.attributionTitle} />
<Page {onlyLink} shown={pg.copyright_icons}>
<div slot="header">
<Tr t={ Translations.t.general.attribution.iconAttribution.title} />
</div>
<CopyrightAllIcons {state} />
</Page>
<Page {onlyLink} shown={pg.privacy}>
<div class="flex gap-x-2" slot="header">
<EyeIcon class="w-6 pr-2" />
<Tr t={Translations.t.privacy.title} />
</div>
<PrivacyPolicy {state} />
</Page>
<div class="subtle self-end">
{Constants.vNumber}
</div> </div>
<CopyrightPanel {state} />
</Page>
<Page {onlyLink} shown={pg.copyright_icons}>
<div slot="header" class="flex">
<Copyright class="w-8 h-8" />
<Tr t={ Translations.t.general.attribution.iconAttribution.title} />
</div>
<CopyrightAllIcons {state} />
</Page>
<Page {onlyLink} shown={pg.privacy}>
<div class="flex gap-x-2" slot="header">
<EyeIcon class="w-6 pr-2" />
<Tr t={Translations.t.privacy.title} />
</div>
<PrivacyPolicy {state} />
</Page>
<div class="subtle self-end">
{Constants.vNumber}
</div> </div>
</div> </div>
</div>
</Sidebar> </Sidebar>
@ -319,10 +331,12 @@
padding: 1rem; padding: 1rem;
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
} }
:global(.sidebar-unit svg) { :global(.sidebar-unit svg) {
width: 1.5rem; width: 1.5rem;
height: 1.5rem; height: 1.5rem;

View file

@ -190,7 +190,7 @@
<!-- Top components --> <!-- Top components -->
<div <div
class="flex bg-black-light-transparent pointer-events-auto items-center justify-between px-4 py-2 flex-wrap-reverse"> class="flex bg-black-light-transparent pointer-events-auto items-center justify-between px-4 py-1 flex-wrap-reverse">
<!-- Top bar with tools --> <!-- Top bar with tools -->
<div class="flex items-center"> <div class="flex items-center">
@ -200,7 +200,7 @@
on:click={() => {console.log("Opening...."); state.guistate.menuIsOpened.setData(true)}} on:click={() => {console.log("Opening...."); state.guistate.menuIsOpened.setData(true)}}
on:keydown={forwardEventToMap} on:keydown={forwardEventToMap}
> >
<MenuIcon class="h-8 w-8 cursor-pointer" /> <MenuIcon class="h-6 w-6 cursor-pointer" />
</MapControlButton> </MapControlButton>
<MapControlButton <MapControlButton
@ -210,7 +210,7 @@
<div <div
class="m-0.5 mx-1 flex cursor-pointer items-center max-[480px]:w-full sm:mx-1 mr-2" class="m-0.5 mx-1 flex cursor-pointer items-center max-[480px]:w-full sm:mx-1 mr-2"
> >
<Marker icons={layout.icon} size="h-6 w-6 shrink-0 md:h-8 md:w-8 mr-0.5 sm:mr-1 md:mr-2" /> <Marker icons={layout.icon} size="h-6 w-6 shrink-0 mr-0.5 sm:mr-1 md:mr-2" />
<b class="mr-1"> <b class="mr-1">
<Tr t={layout.title} /> <Tr t={layout.title} />
</b> </b>