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

View file

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

View file

@ -44,7 +44,7 @@
display: flex;
align-items: center;
border-radius: 0.25rem !important;
padding: 0.4rem 0.75rem !important;
padding: 0.5rem 0.75rem !important;
text-decoration: none !important;
width: 100%;
text-align: start;
@ -58,7 +58,7 @@
.sidebar-unit > button svg,
.sidebar-unit > button img
) {
margin-right: 0.5rem;
margin-right: 0.2rem;
flex-shrink: 0;
}

View file

@ -60,6 +60,7 @@
import ImageUploadQueue from "../../Logic/ImageProviders/ImageUploadQueue"
import QueuedImagesView from "../Image/QueuedImagesView.svelte"
import InsetSpacer from "../Base/InsetSpacer.svelte"
import UserCircle from "@rgossiaux/svelte-heroicons/solid/UserCircle"
export let state: {
favourites: FavouritesFeatureSource
@ -133,14 +134,23 @@
<SidebarUnit>
<LoginToggle {state}>
<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}
<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}
<b>{$userdetails.name}</b>
</div>
</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">
<svelte:fragment slot="header">
<CogIcon />

View file

@ -97,7 +97,7 @@ class LinkedDataFromWebsite extends SpecialVisualization {
funcName = "linked_data_from_website"
group = "data_import"
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 = [
{
name: "key",
@ -146,12 +146,16 @@ class LinkedDataFromWebsite extends SpecialVisualization {
argument: string[],
feature: Feature,
layer: LayerConfig
): BaseUIElement {
): SvelteUIElement {
if(state.theme.enableMorePrivacy){
return undefined
}
const key = argument[0] ?? "website"
const useProxy = argument[1] !== "no"
const readonly = argument[3] === "readonly"
const isClosed = (argument[4] ?? "yes") === "yes"
const downloadInformation = new UIEventSource(false)
const countryStore: Store<string | undefined> = tags.mapD((tags) => tags._country)
const sourceUrl: Store<string | undefined> = tags.mapD((tags) => {
if (!tags[key] || tags[key] === "undefined") {
@ -161,6 +165,9 @@ class LinkedDataFromWebsite extends SpecialVisualization {
})
const externalData: Store<{ success: GeoJsonProperties } | { error }> = sourceUrl.bindD(
(url) => {
if(!downloadInformation.data){
return undefined
}
const country = countryStore.data
if (url.startsWith("https://data.velopark.be/")) {
return Stores.FromPromiseWithErr(
@ -208,13 +215,15 @@ class LinkedDataFromWebsite extends SpecialVisualization {
})()
)
},
[countryStore]
[countryStore, downloadInformation]
)
externalData.addCallbackAndRunD((lod) =>
console.log("linked_data_from_website received the following data:", lod)
)
return new SvelteUIElement(ComparisonTool, {
feature,
state,
@ -223,6 +232,7 @@ class LinkedDataFromWebsite extends SpecialVisualization {
externalData,
sourceUrl,
readonly,
downloadInformation,
collapsed: isClosed,
})
}