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>
|
||||
<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">
|
||||
|
|
|
@ -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}
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
|
||||
|
|
|
@ -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 />
|
||||
|
|
|
@ -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,
|
||||
})
|
||||
}
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue