UX: use more parts of Tailwind (see #2106), more tweaking of the menu bar

langs/en.json

@@ -300,8 +300,11 @@
         "logout": "Log out",
         "mappingsAreHidden": "Some options are hidden. Use search to show more options.",
         "menu": {
+            "aboutCurrentThemeTitle": "About this map",
             "aboutMapComplete": "About MapComplete",
-            "filter": "Filter data"
+            "filter": "Filter data",
+            "moreUtilsTitle": "Discover more",
+            "showIntroduction": "Show introduction"
         },
         "morescreen": {
             "createYourOwnTheme": "Create your own MapComplete theme from scratch",

src/UI/Base/OpenJosm.svelte

@@ -35,8 +35,8 @@
 
 {#if $showButton}
   <div class="flex flex-col">
-    <button class="as-link" on:click={openJosm}>
+    <button class="as-link sidebar-button" on:click={openJosm}>
-      <Josm_logo class="h-6 w-6 pr-2" />
+      <Josm_logo class="h-6 w-6" />
       <Tr t={t.editJosm} />
     </button>
 

src/UI/Base/Page.svelte

@@ -11,7 +11,7 @@
   })
   export let fullscreen: boolean = false
 
-  const shared = "defaultClass normal-background dark:bg-gray-800 rounded-lg border-gray-200 dark:border-gray-700 border-gray-200 dark:border-gray-700 divide-gray-200 dark:divide-gray-700 shadow-md"
+  const shared = "in-page normal-background dark:bg-gray-800 rounded-lg border-gray-200 dark:border-gray-700 border-gray-200 dark:border-gray-700 divide-gray-200 dark:divide-gray-700 shadow-md"
   let defaultClass = "relative flex flex-col mx-auto w-full divide-y " + shared
   if (fullscreen) {
     defaultClass = shared
@@ -25,7 +25,9 @@
 </script>
 
 {#if !onlyLink}
-  <Modal open={_shown} on:close={() => shown.set(false)} size="xl" {defaultClass} {bodyClass} {dialogClass} {headerClass}
+  <Modal open={_shown} on:close={() => shown.set(false)} outsideclose
+         size="xl"
+         {defaultClass} {bodyClass} {dialogClass} {headerClass}
          color="none">
     <h1 slot="header" class="w-full">
       <slot name="header" />
@@ -36,7 +38,7 @@
     {/if}
   </Modal>
 {:else}
-  <button class="as-link" on:click={() => shown.setData(true)}>
+  <button class="as-link sidebar-button" on:click={() => shown.setData(true)}>
     <slot name="link">
     <slot name="header" />
     </slot>

src/UI/BigComponents/FilterPage.svelte

@@ -51,7 +51,7 @@
 
 <Page {onlyLink} shown={state.guistate.pageStates.filter}>
   <div class="flex" slot="link">
-    <Filter class="h-6 w-6 pr-2" />
+    <Filter class="h-6 w-6" />
     <Tr t={Translations.t.general.menu.filter} />
   </div>
   <div class="mr-16 flex w-full flex-wrap items-center justify-between" slot="header">

src/UI/BigComponents/MenuDrawer.svelte

@@ -11,7 +11,7 @@
   import CommunityIndexView from "./CommunityIndexView.svelte"
   import Community from "../../assets/svg/Community.svelte"
   import LoginToggle from "../Base/LoginToggle.svelte"
-  import { Sidebar, SidebarWrapper } from "flowbite-svelte"
+  import { Sidebar } from "flowbite-svelte"
   import HotkeyTable from "./HotkeyTable.svelte"
   import { Utils } from "../../Utils"
   import Constants from "../../Models/Constants"
@@ -45,7 +45,6 @@
   import ThemeIntroPanel from "./ThemeIntroPanel.svelte"
   import Marker from "../Map/Marker.svelte"
   import LogoutButton from "../Base/LogoutButton.svelte"
-  import { LanguageIcon } from "@babeard/svelte-heroicons/solid"
   import { BoltIcon } from "@babeard/svelte-heroicons/mini"
   import Copyright from "../../assets/svg/Copyright.svelte"
 
@@ -59,23 +58,20 @@
   let showHome = featureSwitches.featureSwitchBackToThemeOverview
   let pg = state.guistate.pageStates
   export let onlyLink: boolean
+  const t = Translations.t.general.menu
 </script>
 
-<Sidebar asideClass="max-w-screen p-0 low-interaction p-6 link-underline">
+<div class="flex flex-col p-2 sm:p-3 low-interaction gap-y-2 sm:gap-y-3 h-screen overflow-y-auto">
-  <div class="flex flex-col">
 
   <!-- User related: avatar, settings, favourits, logout -->
   <div class="sidebar-unit">
     <LoginToggle {state}>
       <LoginButton osmConnection={state.osmConnection} slot="not-logged-in"></LoginButton>
-        <div class="flex gap-x-2">
+      <div class="flex gap-x-4 items-center">
         {#if $userdetails.img}
           <img src={$userdetails.img} class="rounded-full w-14 h-14" />
         {/if}
-          <div class="flex flex-col justify-between">
         <b>{$userdetails.name}</b>
-
-          </div>
       </div>
     </LoginToggle>
 
@@ -134,9 +130,7 @@
       </div>
     </LoginToggle>
 
-      <div style="width: 90%">
     <LanguagePicker />
-      </div>
 
   </div>
 
@@ -144,15 +138,16 @@
   <!-- Theme related: documentation links, download, ... -->
   <div class="sidebar-unit">
     <h3>
-        About this map
+      <Tr t={t.aboutCurrentThemeTitle} />
     </h3>
 
     <Page {onlyLink} shown={pg.about_theme}>
-        <dic slot="link">
+      <div slot="link" class="flex">
-          Show introduction
+        <Marker icons={layout.icon} size="h-6 w-6 mr-2" />
-        </dic>
+        <Tr t={t.showIntroduction} />
+      </div>
       <div class="flex" slot="header">
-          <Marker icons={layout.icon} size="h-4 w-4" />
+        <Marker icons={layout.icon} size="h-8 w-8 mr-4" />
         <Tr t={layout.title} />
       </div>
       <ThemeIntroPanel {state} />
@@ -209,11 +204,21 @@
   <div class="sidebar-unit">
 
     <h3>
-        Discover more
+      <Tr t={t.moreUtilsTitle} />
     </h3>
+    {#if $showHome}
+      <a class="flex" href={Utils.HomepageLink()}>
+        <Add class="h-6 w-6" />
+        {#if Utils.isIframe}
+          <Tr t={Translations.t.general.seeIndex} />
+        {:else}
+          <Tr t={Translations.t.general.backToIndex} />
+        {/if}
+      </a>
+    {/if}
 
     <Page {onlyLink} shown={pg.community_index}>
-        <div class="flex gap-x-2" slot="header">
+      <div class="flex" slot="header">
         <Community class="h-6 w-6" />
         <Tr t={Translations.t.communityIndex.title} />
       </div>
@@ -237,18 +242,6 @@
       <Tr t={Translations.t.general.menu.aboutMapComplete} />
     </h3>
 
-      {#if $showHome}
-        <a class="flex" href={Utils.HomepageLink()}>
-          <Add class="h-6 w-6" />
-          {#if Utils.isIframe}
-            <Tr t={Translations.t.general.seeIndex} />
-          {:else}
-            <Tr t={Translations.t.general.backToIndex} />
-          {/if}
-        </a>
-      {/if}
-
-
     <div class="hidden-on-mobile">
 
       <Page {onlyLink} shown={pg.hotkeys}>
@@ -302,8 +295,8 @@
 
 
     <Page {onlyLink} shown={pg.privacy}>
-        <div class="flex gap-x-2" slot="header">
+      <div class="flex" slot="header">
-          <EyeIcon class="w-6 pr-2" />
+        <EyeIcon class="w-8 h-8" />
         <Tr t={Translations.t.privacy.title} />
       </div>
       <PrivacyPolicy {state} />
@@ -314,56 +307,55 @@
       {Constants.vNumber}
     </div>
   </div>
-  </div>
+</div>
-
-</Sidebar>
 
 
 <style>
     :global(.sidebar-unit) {
-        width: calc(100% + 1rem);
-        margin-top: 0.75rem;
-        margin-left: -0.5rem;
         display: flex;
         flex-direction: column;
         row-gap: 0.25rem;
         background: var(--background-color);
-        padding: 1rem;
+        padding: 0.5rem;
         border-radius: 0.5rem;
     }
 
     :global(.sidebar-unit > h3) {
         margin-top: 0;
-        margin-bottom: 0.5rem
+        margin-bottom: 0.5rem;
+        padding: 0.25rem;
     }
 
-    :global(.sidebar-unit svg) {
+    :global(.sidebar-button svg, .sidebar-button img) {
-        width: 1.5rem;
-        height: 1.5rem;
-        margin-right: 0.5rem;
-        margin-left: 0.5rem;
-        flex-shrink: 0;
-    }
-
-    :global(.sidebar-unit img) {
         width: 1.5rem;
         height: 1.5rem;
         margin-right: 0.5rem;
         flex-shrink: 0;
+    }
 
+    :global(.sidebar-button .weblate-link > svg) {
+        width: 0.75rem;
+        height: 0.75rem;
+        flex-shrink: 0;
     }
 
 
-    :global(.sidebar-unit  a) {
+    :global(.sidebar-button, .sidebar-button, .sidebar-unit > a) {
         display: flex;
         align-items: center;
-        margin-left: 1rem;
+        border-radius: 0.25rem !important;
+        padding: 0.4rem 0.75rem !important;
+        text-decoration: none !important;
     }
 
-    :global(.sidebar-unit button) {
+    :global(.sidebar-button > svg , .sidebar-button > img, .sidebar-unit a > img, .sidebar-unit > a svg) {
-        display: flex;
+        margin-right: 0.5rem;
-        align-items: center;
+        flex-shrink: 0;
-        margin-left: 0.5rem;
     }
 
+    :global(.sidebar-button:hover, .sidebar-unit > a:hover) {
+        background: var(--low-interaction-background) !important;
+    }
+
+
 </style>

src/UI/Popup/TagRendering/TagRenderingQuestion.svelte

@@ -401,6 +401,7 @@
               >
                 <input
                   type="radio"
+                  class="self-center mr-1"
                   bind:group={selectedMapping}
                   name={"mappings-radio-" + config.id}
                   value={i}
@@ -412,6 +413,7 @@
               <label class="flex gap-x-1">
                 <input
                   type="radio"
+                  class="self-center mr-1"
                   bind:group={selectedMapping}
                   name={"mappings-radio-" + config.id}
                   value={config.mappings?.length}
@@ -448,6 +450,7 @@
               >
                 <input
                   type="checkbox"
+                  class="self-center mr-1"
                   name={"mappings-checkbox-" + config.id + "-" + i}
                   bind:checked={checkedMappings[i]}
                   on:keypress={(e) => onInputKeypress(e)}
@@ -458,6 +461,7 @@
               <label class="flex gap-x-1">
                 <input
                   type="checkbox"
+                  class="self-center mr-1"
                   name={"mappings-checkbox-" + config.id + "-" + config.mappings?.length}
                   bind:checked={checkedMappings[config.mappings.length]}
                   on:keypress={(e) => onInputKeypress(e)}

src/UI/ThemeViewGUI.svelte

@@ -46,7 +46,6 @@
   import SelectedElementPanel from "./Base/SelectedElementPanel.svelte"
   import MenuDrawer from "./BigComponents/MenuDrawer.svelte"
   import DrawerLeft from "./Base/DrawerLeft.svelte"
-  import { ariaLabel, ariaLabelStore } from "../Utils/ariaLabel"
 
   export let state: ThemeViewState
   let layout = state.layout
@@ -406,7 +405,9 @@
   </LoginToggle>
 
   <DrawerLeft shown={state.guistate.menuIsOpened}>
+    <div class="h-screen overflow-y-auto">
       <MenuDrawer onlyLink={true} {state} />
+    </div>
   </DrawerLeft>
   <MenuDrawer onlyLink={false} {state} />
 

tailwind.config.cjs

@@ -1,8 +1,10 @@
 /** @type {import('tailwindcss').Config} */
 const plugin = require("tailwindcss/plugin")
+const flowbitePlugin = require("flowbite/plugin")
 
 module.exports = {
-  content: ["./**/*.{html,ts,svelte}"],
+  content: ["./**/*.{html,ts,svelte}", './node_modules/flowbite-svelte/**/*.{html,js,svelte,ts}'],
+
   theme: {
     extend: {
       maxHeight: {
@@ -12,10 +14,24 @@ module.exports = {
       colors: {
         subtle: "#dbeafe",
         unsubtle: "#bfdbfe",
+          // flowbite-svelte
+          primary: {
+            50: '#FFF5F2',
+            100: '#FFF1EE',
+            200: '#FFE4DE',
+            300: '#FFD5CC',
+            400: '#FFBCAD',
+            500: '#FE795D',
+            600: '#EF562F',
+            700: '#EB4F27',
+            800: '#CC4522',
+            900: '#A5371B'
+        }
       },
     },
   },
   plugins: [
+    flowbitePlugin,
     plugin(function ({ addVariant, e }) {
       addVariant("landscape", ({ modifySelectors, separator }) => {
         modifySelectors(({ className }) => {