UX: Add link to github, improve home page (nlnet feedback)

assets/svg/github.svg

@@ -0,0 +1,40 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   width="100"
+   height="100"
+   version="1.1"
+   id="svg1"
+   sodipodi:docname="github.svg"
+   viewBox="0 0 100 100"
+   inkscape:version="1.3.2 (1:1.3.2+202311252150+091e20ef0f)"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <sodipodi:namedview
+     id="namedview1"
+     pagecolor="#ffffff"
+     bordercolor="#999999"
+     borderopacity="1"
+     inkscape:showpageshadow="2"
+     inkscape:pageopacity="0"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#d1d1d1"
+     inkscape:zoom="8.0714286"
+     inkscape:cx="49"
+     inkscape:cy="48.00885"
+     inkscape:window-width="1920"
+     inkscape:window-height="995"
+     inkscape:window-x="0"
+     inkscape:window-y="0"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="svg1" />
+  <defs
+     id="defs1" />
+  <path
+     fill-rule="evenodd"
+     clip-rule="evenodd"
+     d="M 48.854,0 C 21.839,0 0,22 0,49.217 c 0,21.756 13.993,40.172 33.405,46.69 2.427,0.49 3.316,-1.059 3.316,-2.362 0,-1.141 -0.08,-5.052 -0.08,-9.127 -13.59,2.934 -16.42,-5.867 -16.42,-5.867 -2.184,-5.704 -5.42,-7.17 -5.42,-7.17 -4.448,-3.015 0.324,-3.015 0.324,-3.015 4.934,0.326 7.523,5.052 7.523,5.052 4.367,7.496 11.404,5.378 14.235,4.074 0.404,-3.178 1.699,-5.378 3.074,-6.6 -10.839,-1.141 -22.243,-5.378 -22.243,-24.283 0,-5.378 1.94,-9.778 5.014,-13.2 -0.485,-1.222 -2.184,-6.275 0.486,-13.038 0,0 4.125,-1.304 13.426,5.052 a 46.97,46.97 0 0 1 12.214,-1.63 c 4.125,0 8.33,0.571 12.213,1.63 9.302,-6.356 13.427,-5.052 13.427,-5.052 2.67,6.763 0.97,11.816 0.485,13.038 3.155,3.422 5.015,7.822 5.015,13.2 0,18.905 -11.404,23.06 -22.324,24.283 1.78,1.548 3.316,4.481 3.316,9.126 0,6.6 -0.08,11.897 -0.08,13.526 0,1.304 0.89,2.853 3.316,2.364 C 83.634,89.388 97.627,70.973 97.627,49.217 97.707,22 75.788,0 48.854,0 Z"
+     fill="#24292f"
+     id="path1" />
+</svg>

assets/svg/github.svg.license

@@ -0,0 +1,2 @@
+SPDX-FileCopyrightText: Github
+SPDX-License-Identifier: LicenseRef-LOGO

langs/en.json

@@ -185,6 +185,7 @@
             "editId": "Open the OpenStreetMap online editor here",
             "editJosm": "Edit here with JOSM",
             "followOnMastodon": "Follow MapComplete on Mastodon",
+            "gotoSourceCode": "View the source code",
             "iconAttribution": {
                 "title": "Used icons"
             },
@@ -592,8 +593,10 @@
     },
     "index": {
         "#": "These texts are shown above the theme buttons when no theme is loaded",
+        "about": "About MapComplete",
         "featuredThemeTitle": "Featured this week",
         "intro": "MapComplete is an OpenStreetMap-viewer and editor, which shows you information about features of a specific theme and allows to update it.",
+        "learnMore": "Learn more",
         "logIn": "Log in to see other themes you previously visited",
         "pickTheme": "Pick a theme below to get started.",
         "title": "Welcome to MapComplete"

src/UI/AllThemesGui.svelte

@@ -10,7 +10,6 @@
   import MoreScreen from "./BigComponents/MoreScreen"
   import LoginToggle from "./Base/LoginToggle.svelte"
   import Pencil from "../assets/svg/Pencil.svelte"
-  import Login from "../assets/svg/Login.svelte"
   import Constants from "../Models/Constants"
   import { Store, UIEventSource } from "../Logic/UIEventSource"
   import { placeholder } from "../Utils/placeholder"
@@ -20,6 +19,12 @@
   import * as themeOverview from "../assets/generated/theme_overview.json"
   import UnofficialThemeList from "./BigComponents/UnofficialThemeList.svelte"
   import Eye from "../assets/svg/Eye.svelte"
+  import LoginButton from "./Base/LoginButton.svelte"
+  import ChevronDoubleRight from "@babeard/svelte-heroicons/mini/ChevronDoubleRight"
+  import Mastodon from "../assets/svg/Mastodon.svelte"
+  import Liberapay from "../assets/svg/Liberapay.svelte"
+  import Bug from "../assets/svg/Bug.svelte"
+  import Github from "../assets/svg/Github.svelte"
 
   const featureSwitches = new OsmConnectionFeatureSwitches()
   const osmConnection = new OsmConnection({
@@ -28,7 +33,7 @@
       "oauth_token",
       undefined,
       "Used to complete the login"
-    ),
+    )
   })
   const state = new UserRelatedState(osmConnection)
   const t = Translations.t.index
@@ -37,7 +42,7 @@
   let userLanguages = osmConnection.userDetails.map((ud) => ud.languages)
   let themeSearchText: UIEventSource<string | undefined> = new UIEventSource<string>(undefined)
 
-  document.addEventListener("keydown", function (event) {
+  document.addEventListener("keydown", function(event) {
     if (event.ctrlKey && event.code === "KeyF") {
       document.getElementById("theme-search")?.focus()
       event.preventDefault()
@@ -66,84 +71,116 @@
 </script>
 
 <main>
-<div class="m-4 flex flex-col">
+  <div class="m-4 flex flex-col">
-  <LanguagePicker
+    <LanguagePicker
-    clss="self-end max-w-full"
+      clss="self-end max-w-full"
-    assignTo={state.language}
+      assignTo={state.language}
-    availableLanguages={t.title.SupportedLanguages()}
+      availableLanguages={t.title.SupportedLanguages()}
-    preferredLanguages={userLanguages}
+      preferredLanguages={userLanguages}
-  />
+    />
 
-  <div class="mt-4 flex">
+    <div class="mt-4 flex">
-    <div class="m-3 flex-none">
+      <div class="m-3 flex-none">
-      <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="flex flex-col">
+      <div class="flex flex-col">
-      <h1 class="m-0 font-extrabold tracking-tight md:text-6xl">
+        <h1 class="m-0 font-extrabold tracking-tight md:text-6xl">
-        <Tr t={t.title} />
+          <Tr t={t.title} />
-      </h1>
+        </h1>
-      <Tr
-        cls="my-4 mr-4 text-base font-semibold sm:text-lg md:mt-5 md:text-xl lg:mx-0"
-        t={Translations.t.index.intro}
-      />
-    </div>
-  </div>
-
-  <form
-    class="flex justify-center"
-    on:submit|preventDefault={(_) => MoreScreen.applySearch(themeSearchText.data)}
-  >
-    <label
-      class="neutral-label my-2 flex w-full items-center rounded-full border-2 border-black sm:w-1/2"
-    >
-      <SearchIcon aria-hidden="true" class="h-8 w-8" />
-      <input
-        autofocus
-        bind:value={$themeSearchText}
-        class="mr-4 w-full outline-none"
-        id="theme-search"
-        type="search"
-        use:placeholder={tr.searchForATheme}
-      />
-    </label>
-  </form>
-
-  <ThemesList search={themeSearchText} {state} themes={MoreScreen.officialThemes} />
-
-  <LoginToggle {state}>
-    <ThemesList
-      hideThemes={false}
-      isCustom={false}
-      search={themeSearchText}
-      {state}
-      themes={$visitedHiddenThemes}
-    >
-      <svelte:fragment slot="title">
-        <h3>
-          <Tr t={tr.previouslyHiddenTitle} />
-        </h3>
         <p>
+
           <Tr
-            t={tr.hiddenExplanation.Subs({
+            cls="my-4 mr-4 text-base font-semibold sm:text-lg md:mt-5 md:text-xl lg:mx-0"
+            t={Translations.t.index.intro}
+          />
+          <span class="link-underline">
+          <a href="#about"><Tr t={Translations.t.index.learnMore} />
+          <ChevronDoubleRight class="w-4 h-4 inline" />
+          </a>
+        </span>
+        </p>
+      </div>
+    </div>
+
+    <form
+      class="flex justify-center"
+      on:submit|preventDefault={(_) => MoreScreen.applySearch(themeSearchText.data)}
+    >
+      <label
+        class="neutral-label my-2 flex w-full items-center rounded-full border-2 border-black sm:w-1/2"
+      >
+        <SearchIcon aria-hidden="true" class="h-8 w-8" />
+        <input
+          autofocus
+          bind:value={$themeSearchText}
+          class="mr-4 w-full outline-none"
+          id="theme-search"
+          type="search"
+          use:placeholder={tr.searchForATheme}
+        />
+      </label>
+    </form>
+
+    <ThemesList search={themeSearchText} {state} themes={MoreScreen.officialThemes} />
+
+    <LoginToggle {state}>
+      <ThemesList
+        hideThemes={false}
+        isCustom={false}
+        search={themeSearchText}
+        {state}
+        themes={$visitedHiddenThemes}
+      >
+        <svelte:fragment slot="title">
+          <h3>
+            <Tr t={tr.previouslyHiddenTitle} />
+          </h3>
+          <p>
+            <Tr
+              t={tr.hiddenExplanation.Subs({
               hidden_discovered: $visitedHiddenThemes.length.toString(),
               total_hidden: hiddenThemes.length.toString(),
             })}
-          />
+            />
-        </p>
+          </p>
-      </svelte:fragment>
+        </svelte:fragment>
-    </ThemesList>
+      </ThemesList>
+
+      <UnofficialThemeList search={themeSearchText} {state} />
+
+      <LoginButton osmConnection={state.osmConnection} />
+
+
+      <h3 id="about">
+        <Tr t={Translations.t.index.about} />
+      </h3>
+      <Tr cls="link-underline" t={Translations.t.general.aboutMapComplete.intro} />
+
+      <span class="links-as-button flex flex-col gap-y-1">
+
+                <a class="flex" href="https://github.com/pietervdvn/MapComplete/" target="_blank">
+          <Github class="mr-2 h-6 w-6" />
+          <Tr t={Translations.t.general.attribution.gotoSourceCode} />
+        </a>
+    <a class="flex" href="https://github.com/pietervdvn/MapComplete/issues" target="_blank">
+      <Bug class="mr-2 h-6 w-6" />
+      <Tr t={Translations.t.general.attribution.openIssueTracker} />
+    </a>
+
+    <a class="flex" href="https://en.osm.town/@MapComplete" target="_blank">
+      <Mastodon class="mr-2 h-6 w-6" />
+      <Tr t={Translations.t.general.attribution.followOnMastodon} />
+    </a>
+
+    <a class="flex" href="https://liberapay.com/pietervdvn/" target="_blank">
+      <Liberapay class="mr-2 h-6 w-6" />
+      <Tr t={Translations.t.general.attribution.donate} />
+    </a>
 
-    <UnofficialThemeList search={themeSearchText} {state} />
 
-    <div slot="not-logged-in">
-      <button class="m-0 my-2 w-full" on:click={() => osmConnection.AttemptLogin()}>
-        <Login class="mr-2 h-6 w-6 " />
-        <Tr t={Translations.t.index.logIn} />
-      </button>
-    </div>
     <a
-      class="button h-fit w-full"
+      class="flex"
       href={window.location.protocol + "//" + window.location.host + "/studio.html"}
     >
       <Pencil class="mr-2 h-6 w-6" />
@@ -151,19 +188,21 @@
     </a>
 
     <a
-      class="button h-fit w-full"
+      class="flex"
       href={window.location.protocol + "//" + window.location.host + "/privacy.html"}
     >
       <Eye class="mr-2 h-6 w-6" />
       <Tr t={Translations.t.privacy.title} />
     </a>
-  </LoginToggle>
+</span>
 
-  <Tr cls="link-underline" t={Translations.t.general.aboutMapComplete.intro} />
-  <Tr t={tr.streetcomplete} />
 
-  <div class="subtle mb-16 self-end">
+    </LoginToggle>
-    v{Constants.vNumber}
+
+    <Tr t={tr.streetcomplete} />
+
+    <div class="subtle mb-16 self-end">
+      v{Constants.vNumber}
+    </div>
   </div>
-</div>
 </main>

src/UI/ThemeViewGUI.svelte

@@ -75,6 +75,7 @@
   import ExtraLinkButton from "./BigComponents/ExtraLinkButton.svelte"
   import CloseAnimation from "./Base/CloseAnimation.svelte"
   import { LastClickFeatureSource } from "../Logic/FeatureSource/Sources/LastClickFeatureSource"
+  import Github from "../assets/svg/Github.svelte"
 
   export let state: ThemeViewState
   let layout = state.layout
@@ -567,6 +568,12 @@
           <Tr t={Translations.t.general.backToIndex} />
         </a>
 
+        <a class="flex" href="https://github.com/pietervdvn/MapComplete/" target="_blank">
+          <Github class="h-6 w-6" />
+          <Tr t={Translations.t.general.attribution.gotoSourceCode} />
+        </a>
+
+
         <a class="flex" href="https://github.com/pietervdvn/MapComplete/issues" target="_blank">
           <Bug class="h-6 w-6" />
           <Tr t={Translations.t.general.attribution.openIssueTracker} />

src/assets/svg/Github.svelte

@@ -0,0 +1,4 @@
+<script>
+export let color = "#000000"
+</script>
+ <svg {...$$restProps} on:click on:mouseover on:mouseenter on:mouseleave on:keydown    width="100"    height="100"    version="1.1"    id="svg1"    sodipodi:docname="github.svg"    viewBox="0 0 100 100"    inkscape:version="1.3.2 (1:1.3.2+202311252150+091e20ef0f)"    xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"    xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"    xmlns="http://www.w3.org/2000/svg"    xmlns:svg="http://www.w3.org/2000/svg">   <sodipodi:namedview      id="namedview1"      pagecolor="#ffffff"      bordercolor="#999999"      borderopacity="1"      inkscape:showpageshadow="2"      inkscape:pageopacity="0"      inkscape:pagecheckerboard="0"      inkscape:deskcolor="#d1d1d1"      inkscape:zoom="8.0714286"      inkscape:cx="49"      inkscape:cy="48.00885"      inkscape:window-width="1920"      inkscape:window-height="995"      inkscape:window-x="0"      inkscape:window-y="0"      inkscape:window-maximized="1"      inkscape:current-layer="svg1" />   <defs      id="defs1" />   <path      fill-rule="evenodd"      clip-rule="evenodd"      d="M 48.854,0 C 21.839,0 0,22 0,49.217 c 0,21.756 13.993,40.172 33.405,46.69 2.427,0.49 3.316,-1.059 3.316,-2.362 0,-1.141 -0.08,-5.052 -0.08,-9.127 -13.59,2.934 -16.42,-5.867 -16.42,-5.867 -2.184,-5.704 -5.42,-7.17 -5.42,-7.17 -4.448,-3.015 0.324,-3.015 0.324,-3.015 4.934,0.326 7.523,5.052 7.523,5.052 4.367,7.496 11.404,5.378 14.235,4.074 0.404,-3.178 1.699,-5.378 3.074,-6.6 -10.839,-1.141 -22.243,-5.378 -22.243,-24.283 0,-5.378 1.94,-9.778 5.014,-13.2 -0.485,-1.222 -2.184,-6.275 0.486,-13.038 0,0 4.125,-1.304 13.426,5.052 a 46.97,46.97 0 0 1 12.214,-1.63 c 4.125,0 8.33,0.571 12.213,1.63 9.302,-6.356 13.427,-5.052 13.427,-5.052 2.67,6.763 0.97,11.816 0.485,13.038 3.155,3.422 5.015,7.822 5.015,13.2 0,18.905 -11.404,23.06 -22.324,24.283 1.78,1.548 3.316,4.481 3.316,9.126 0,6.6 -0.08,11.897 -0.08,13.526 0,1.304 0.89,2.853 3.316,2.364 C 83.634,89.388 97.627,70.973 97.627,49.217 97.707,22 75.788,0 48.854,0 Z"      fill="#24292f"      id="path1" /> </svg>