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
@@ -83,10 +88,18 @@
         <h1 class="m-0 font-extrabold tracking-tight md:text-6xl">
           <Tr t={t.title} />
         </h1>
+        <p>
+
           <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}
           />
+          <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>
 
@@ -136,14 +149,38 @@
 
       <UnofficialThemeList search={themeSearchText} {state} />
 
-    <div slot="not-logged-in">
+      <LoginButton osmConnection={state.osmConnection} />
-      <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} />
+      <h3 id="about">
-      </button>
+        <Tr t={Translations.t.index.about} />
-    </div>
+      </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>
+
+
     <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,15 +188,17 @@
     </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>
+</span>
+
+
     </LoginToggle>
 
-  <Tr cls="link-underline" t={Translations.t.general.aboutMapComplete.intro} />
     <Tr t={tr.streetcomplete} />
 
     <div class="subtle mb-16 self-end">

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>