contrapunctus/MapComplete
1
0
Fork 0
forked from MapComplete/MapComplete
Code Pull requests Activity

UI: Css tweaks

Browse source
This commit is contained in:
Pieter Vander Vennet 2023-12-29 22:46:02 +01:00
parent 27afaf7ad8
commit 5b6434a5d2
10 changed files with 113 additions and 95 deletions
Download patch file Download diff file Expand all files Collapse all files

5
assets/layers/questions/questions.json
View file

@ -16,8 +16,9 @@
"id": "images",
"description": "This block shows the known images which are linked with the `image`-keys, but also via `mapillary` and `wikidata` and shows the button to upload new images",
"render": {
"*": "{image_carousel()}{image_upload()}{nearby_images()}"
}
"*": "{image_carousel()}{image_upload()}{nearby_images():my-4}"
},
"classes": "my-4"
},
{
"id": "mapillary",

94
public/css/index-tailwind-output.css
View file

@ -2499,51 +2499,6 @@ button.link:hover {
fill: var(--foreground-color) !important;
}
.neutral-label{
/** This label styles as normal text. It's power comes from the many :not(.neutral-label) entries.
* Placed here for autocompletion
*/
}
label:not(.neutral-label) {
/**
* Label should _contain_ the input element
*/
border: 2px solid var(--interactive-background);
padding: 0.25rem;
padding-right: 0.5rem;
padding-left: 0.5rem;
border-radius: 0.5rem;
background-color: var(--low-interaction-background);
width: 100%;
box-sizing: border-box;
transition: all 250ms;
}
label:hover:not(.neutral-label) {
background-color: var(--catch-detail-color);
color: var(--catch-detail-foregroundcolor);
border: 2px solid var(--interactive-contrast)
}
label:not(.no-image-background):not(.neutral-label) img {
padding: 0.25rem;
border-radius: 0.25rem;
background: var(--low-interaction-background);
}
label:not(.neutral-label) svg path {
transition: all 250ms;
}
label:hover:not(.no-image-background):not(.neutral-label) svg path {
fill: var(--catch-detail-foregroundcolor) !important;
}
label.checked:not(.neutral-label) {
border: 2px solid var(--foreground-color);
}
.links-w-full a:not(.weblate-link) {
display: flex;
-webkit-column-gap: 0.25rem;
@ -2594,6 +2549,55 @@ select:hover {
border-color: var(--catch-detail-color-contrast);
}
.neutral-label{
/** This label styles as normal text. It's power comes from the many :not(.neutral-label) entries.
* Placed here for autocompletion
*/
}
label:not(.neutral-label):not(.button) {
/**
* Label should _contain_ the input element
*/
border: 2px solid var(--interactive-background);
padding: 0.25rem;
padding-right: 0.5rem;
padding-left: 0.5rem;
border-radius: 0.5rem;
background-color: var(--low-interaction-background);
width: 100%;
box-sizing: border-box;
transition: all 250ms;
}
label.button {
width: 100%;
}
label:hover:not(.neutral-label) {
background-color: var(--catch-detail-color);
color: var(--catch-detail-foregroundcolor);
border: 2px solid var(--interactive-contrast)
}
label:not(.no-image-background):not(.neutral-label) img {
padding: 0.25rem;
border-radius: 0.25rem;
background: var(--low-interaction-background);
}
label:not(.neutral-label) svg path {
transition: all 250ms;
}
label:hover:not(.no-image-background):not(.neutral-label) svg path {
fill: var(--catch-detail-foregroundcolor) !important;
}
label.checked:not(.neutral-label) {
border: 2px solid var(--foreground-color);
}
/************************* OTHER CATEGORIES ********************************/
/**

1
src/UI/Base/FileSelector.svelte
View file

@ -38,6 +38,7 @@
>
<label
class={twMerge(cls, drawAttention ? "glowing-shadow" : "")}
style="margin-left:0"
tabindex="0"
for={"fileinput" + id}
on:click={() => {

2
src/UI/BigComponents/SelectedElementView.svelte
View file

@ -43,7 +43,7 @@
<Tr t={Translations.t.general.returnToTheMap} />
</button>
{:else}
<div class="flex h-full w-full flex-col gap-y-2 overflow-y-auto p-1 px-2" tabindex="-1">
<div class="flex h-full w-full flex-col gap-y-2 overflow-y-auto p-1 px-4" tabindex="-1">
{#each $knownTagRenderings as config (config.id)}
<TagRenderingEditable
{tags}

3
src/UI/Image/NearbyImagesCollapsed.svelte
View file

@ -26,6 +26,7 @@
</script>
<LoginToggle {state}>
<div class="my-4">
{#if expanded}
<NearbyImages {tags} {state} {lon} {lat} {feature} {linkable} {layer}>
<button
@ -42,6 +43,7 @@
{:else}
<button
class="flex w-full items-center"
style="margin-left: 0; margin-right: 0"
on:click={() => {
expanded = true
}}
@ -51,4 +53,5 @@
<Tr t={t.seeNearby} />
</button>
{/if}
</div>
</LoginToggle>

2
src/UI/Image/UploadImage.svelte
View file

@ -72,12 +72,14 @@
<div class="text-sm">
<button
class="link small"
style="margin: 0; padding: 0"
on:click={() => {
state.guistate.openUsersettings("picture-license")
}}
>
<Tr t={t.currentLicense.Subs({ license: $licenseStore })} />
</button>
<br/>
<Tr t={t.respectPrivacy} />
</div>
</div>

3
src/UI/Popup/SendEmail.svelte
View file

@ -3,6 +3,7 @@
import Svg from "../../Svg"
import ToSvelte from "../Base/ToSvelte.svelte"
import { Utils } from "../../Utils"
import { Store } from "../../Logic/UIEventSource"
export let tags: Store<OsmTags>
export let args: string[]
@ -12,7 +13,7 @@
"mailto:" + to + "?subject=" + encodeURIComponent(subject) + "&body=" + encodeURIComponent(body)
</script>
<a class="button flex w-full items-center" href={url}>
<a class="button flex w-full items-center" href={url} style="margin-left: 0">
<ToSvelte construct={Svg.envelope_svg().SetClass("w-8 h-8 mr-4 shrink-0")} />
{button_text}
</a>

2
src/UI/Popup/TagRendering/Questionbox.svelte
View file

@ -138,7 +138,7 @@
{:else}
<div>
{#if $showAllQuestionsAtOnce}
<div>
<div class="flex flex-col gap-y-1">
{#each $questionsToAsk as question (question.id)}
<TagRenderingQuestion config={question} {tags} {selectedElement} {state} {layer} />
{/each}

2
src/UI/Popup/TagRendering/TagRenderingEditable.svelte
View file

@ -125,7 +125,7 @@
</div>
{/if}
{:else}
<div class="h-full w-full overflow-hidden p-2">
<div class="h-full w-full overflow-hidden">
<TagRenderingAnswer {config} {tags} {selectedElement} {state} {layer} />
</div>
{/if}

94
src/index.css
View file

@ -312,50 +312,6 @@ button.link:hover {
fill: var(--foreground-color) !important;
}
.neutral-label{
/** This label styles as normal text. It's power comes from the many :not(.neutral-label) entries.
* Placed here for autocompletion
*/
}
label:not(.neutral-label) {
/**
* Label should _contain_ the input element
*/
border: 2px solid var(--interactive-background);
padding: 0.25rem;
padding-right: 0.5rem;
padding-left: 0.5rem;
border-radius: 0.5rem;
background-color: var(--low-interaction-background);
width: 100%;
box-sizing: border-box;
transition: all 250ms;
}
label:hover:not(.neutral-label) {
background-color: var(--catch-detail-color);
color: var(--catch-detail-foregroundcolor);
border: 2px solid var(--interactive-contrast)
}
label:not(.no-image-background):not(.neutral-label) img {
padding: 0.25rem;
border-radius: 0.25rem;
background: var(--low-interaction-background);
}
label:not(.neutral-label) svg path {
transition: all 250ms;
}
label:hover:not(.no-image-background):not(.neutral-label) svg path {
fill: var(--catch-detail-foregroundcolor) !important;
}
label.checked:not(.neutral-label) {
border: 2px solid var(--foreground-color);
}
.links-w-full a:not(.weblate-link) {
display: flex;
@ -406,6 +362,56 @@ select:hover {
border-color: var(--catch-detail-color-contrast);
}
.neutral-label{
/** This label styles as normal text. It's power comes from the many :not(.neutral-label) entries.
* Placed here for autocompletion
*/
}
label:not(.neutral-label):not(.button) {
/**
* Label should _contain_ the input element
*/
border: 2px solid var(--interactive-background);
padding: 0.25rem;
padding-right: 0.5rem;
padding-left: 0.5rem;
border-radius: 0.5rem;
background-color: var(--low-interaction-background);
width: 100%;
box-sizing: border-box;
transition: all 250ms;
}
label.button {
width: 100%;
}
label:hover:not(.neutral-label) {
background-color: var(--catch-detail-color);
color: var(--catch-detail-foregroundcolor);
border: 2px solid var(--interactive-contrast)
}
label:not(.no-image-background):not(.neutral-label) img {
padding: 0.25rem;
border-radius: 0.25rem;
background: var(--low-interaction-background);
}
label:not(.neutral-label) svg path {
transition: all 250ms;
}
label:hover:not(.no-image-background):not(.neutral-label) svg path {
fill: var(--catch-detail-foregroundcolor) !important;
}
label.checked:not(.neutral-label) {
border: 2px solid var(--foreground-color);
}
/************************* OTHER CATEGORIES ********************************/
/**