UI: Css tweaks

assets/layers/questions/questions.json

@@ -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",

public/css/index-tailwind-output.css

@@ -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 ********************************/
 
 /**

src/UI/Base/FileSelector.svelte

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

src/UI/BigComponents/SelectedElementView.svelte

@@ -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}

src/UI/Image/NearbyImagesCollapsed.svelte

@@ -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>

src/UI/Image/UploadImage.svelte

@@ -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>

src/UI/Popup/SendEmail.svelte

@@ -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>

src/UI/Popup/TagRendering/Questionbox.svelte

@@ -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}

src/UI/Popup/TagRendering/TagRenderingEditable.svelte

@@ -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}

src/index.css

@@ -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 ********************************/
 
 /**