UI: improve placement of logo on small screens

This commit is contained in:
Pieter Vander Vennet 2025-07-25 16:14:20 +02:00
parent d662bc2707
commit d16dd7c4e1
5 changed files with 32 additions and 12 deletions

View file

@ -161,6 +161,7 @@
</DrawerLeft> </DrawerLeft>
<div class="flex w-screen flex-col p-2 sm:p-4"> <div class="flex w-screen flex-col p-2 sm:p-4">
<InsetSpacer height={AndroidPolyfill.getInsetSizes().top}/> <InsetSpacer height={AndroidPolyfill.getInsetSizes().top}/>
<!-- Top menu bar -->
<div class="flex w-full justify-between overflow-hidden"> <div class="flex w-full 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" />
@ -174,15 +175,16 @@
/> />
</div> </div>
<!-- Introduction pane -->
<div class="mt-4 flex overflow-hidden break-words"> <div class="mt-4 flex overflow-hidden break-words">
<div class="m-3 hidden flex-none md:block"> <div class="m-3 hidden flex-none md:block">
<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">
<div class="flex flex-wrap"> <div class="flex items-center">
<div class="m-1 flex-none md:hidden"> <div class="m-1 flex-none md:hidden">
<Logo alt="MapComplete Logo" class="mr-4 h-10 w-10 sm:h-20 sm:w-20" /> <Logo alt="MapComplete Logo" class="mr-1 sm:mr-2 md:mr-4 h-10 w-10 sm:h-20 sm:w-20" />
</div> </div>
<div class="flex flex-col"> <div class="flex flex-col">
<h1 class="m-0 break-words font-extrabold tracking-tight md:text-6xl"> <h1 class="m-0 break-words font-extrabold tracking-tight md:text-6xl">

View file

@ -34,7 +34,6 @@
</script> </script>
{#if $showButton} {#if $showButton}
<div class="flex flex-col">
<button class="as-link sidebar-button" on:click={openJosm}> <button class="as-link sidebar-button" on:click={openJosm}>
<Josm_logo class="h-6 w-6" /> <Josm_logo class="h-6 w-6" />
<Tr t={t.editJosm} /> <Tr t={t.editJosm} />
@ -47,5 +46,4 @@
{:else} {:else}
<Tr cls="alert shrink-0 w-fit" t={t.josmNotOpened} /> <Tr cls="alert shrink-0 w-fit" t={t.josmNotOpened} />
{/if} {/if}
</div>
{/if} {/if}

View file

@ -44,7 +44,7 @@
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.5rem 0.75rem !important;
text-decoration: none !important; text-decoration: none !important;
width: 100%; width: 100%;
text-align: start; text-align: start;
@ -58,7 +58,7 @@
.sidebar-unit > button svg, .sidebar-unit > button svg,
.sidebar-unit > button img .sidebar-unit > button img
) { ) {
margin-right: 0.5rem; margin-right: 0.2rem;
flex-shrink: 0; flex-shrink: 0;
} }

View file

@ -60,6 +60,7 @@
import ImageUploadQueue from "../../Logic/ImageProviders/ImageUploadQueue" import ImageUploadQueue from "../../Logic/ImageProviders/ImageUploadQueue"
import QueuedImagesView from "../Image/QueuedImagesView.svelte" import QueuedImagesView from "../Image/QueuedImagesView.svelte"
import InsetSpacer from "../Base/InsetSpacer.svelte" import InsetSpacer from "../Base/InsetSpacer.svelte"
import UserCircle from "@rgossiaux/svelte-heroicons/solid/UserCircle"
export let state: { export let state: {
favourites: FavouritesFeatureSource favourites: FavouritesFeatureSource
@ -133,14 +134,23 @@
<SidebarUnit> <SidebarUnit>
<LoginToggle {state}> <LoginToggle {state}>
<LoginButton osmConnection={state.osmConnection} slot="not-logged-in" /> <LoginButton osmConnection={state.osmConnection} slot="not-logged-in" />
<div class="flex items-center gap-x-4"> <div class="flex items-center gap-x-4 w-fit m-2">
{#if $userdetails.img} {#if $userdetails.img}
<img alt="avatar" src={$userdetails.img} class="h-14 w-14 rounded-full" /> <img alt="avatar" src={$userdetails.img} class="h-12 w-12 rounded-full" />
{:else}
<UserCircle class="h-14 w-14" color="gray"/>
{/if} {/if}
<b>{$userdetails.name}</b> <b>{$userdetails.name}</b>
</div> </div>
</LoginToggle> </LoginToggle>
<Page {onlyLink} shown={pg.profile} bodyPadding="p-0 pb-4">
<svelte:fragment slot="header">
<CogIcon />
<Tr t={UserRelatedState.usersettingsConfig.title.GetRenderValue({})} />
</svelte:fragment>
</Page>
<Page {onlyLink} shown={pg.usersettings} bodyPadding="p-0 pb-4"> <Page {onlyLink} shown={pg.usersettings} bodyPadding="p-0 pb-4">
<svelte:fragment slot="header"> <svelte:fragment slot="header">
<CogIcon /> <CogIcon />

View file

@ -97,7 +97,7 @@ class LinkedDataFromWebsite extends SpecialVisualization {
funcName = "linked_data_from_website" funcName = "linked_data_from_website"
group = "data_import" group = "data_import"
docs = docs =
"Attempts to load (via a proxy) the specified website and parsed ld+json from there. Suitable data will be offered to import into OSM. Note: this element is added by default" "Attempts to load (via a proxy) the specified website and parsed ld+json from there. Suitable data will be offered to import into OSM. Note: this element is added by default; but is disabled if the theme has the 'more privacy' flag set"
args = [ args = [
{ {
name: "key", name: "key",
@ -146,12 +146,16 @@ class LinkedDataFromWebsite extends SpecialVisualization {
argument: string[], argument: string[],
feature: Feature, feature: Feature,
layer: LayerConfig layer: LayerConfig
): BaseUIElement { ): SvelteUIElement {
if(state.theme.enableMorePrivacy){
return undefined
}
const key = argument[0] ?? "website" const key = argument[0] ?? "website"
const useProxy = argument[1] !== "no" const useProxy = argument[1] !== "no"
const readonly = argument[3] === "readonly" const readonly = argument[3] === "readonly"
const isClosed = (argument[4] ?? "yes") === "yes" const isClosed = (argument[4] ?? "yes") === "yes"
const downloadInformation = new UIEventSource(false)
const countryStore: Store<string | undefined> = tags.mapD((tags) => tags._country) const countryStore: Store<string | undefined> = tags.mapD((tags) => tags._country)
const sourceUrl: Store<string | undefined> = tags.mapD((tags) => { const sourceUrl: Store<string | undefined> = tags.mapD((tags) => {
if (!tags[key] || tags[key] === "undefined") { if (!tags[key] || tags[key] === "undefined") {
@ -161,6 +165,9 @@ class LinkedDataFromWebsite extends SpecialVisualization {
}) })
const externalData: Store<{ success: GeoJsonProperties } | { error }> = sourceUrl.bindD( const externalData: Store<{ success: GeoJsonProperties } | { error }> = sourceUrl.bindD(
(url) => { (url) => {
if(!downloadInformation.data){
return undefined
}
const country = countryStore.data const country = countryStore.data
if (url.startsWith("https://data.velopark.be/")) { if (url.startsWith("https://data.velopark.be/")) {
return Stores.FromPromiseWithErr( return Stores.FromPromiseWithErr(
@ -208,13 +215,15 @@ class LinkedDataFromWebsite extends SpecialVisualization {
})() })()
) )
}, },
[countryStore] [countryStore, downloadInformation]
) )
externalData.addCallbackAndRunD((lod) => externalData.addCallbackAndRunD((lod) =>
console.log("linked_data_from_website received the following data:", lod) console.log("linked_data_from_website received the following data:", lod)
) )
return new SvelteUIElement(ComparisonTool, { return new SvelteUIElement(ComparisonTool, {
feature, feature,
state, state,
@ -223,6 +232,7 @@ class LinkedDataFromWebsite extends SpecialVisualization {
externalData, externalData,
sourceUrl, sourceUrl,
readonly, readonly,
downloadInformation,
collapsed: isClosed, collapsed: isClosed,
}) })
} }