forked from MapComplete/MapComplete
UI: improve placement of logo on small screens
This commit is contained in:
parent
d662bc2707
commit
d16dd7c4e1
5 changed files with 32 additions and 12 deletions
|
@ -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">
|
||||||
|
|
|
@ -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}
|
||||||
|
|
|
@ -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;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -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 />
|
||||||
|
|
|
@ -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,
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue