merge doc into app

ToastHawaii · Jun 14, 2024 · f5a3106 · f5a3106
1 parent f108392
commit f5a3106
Show file tree

Hide file tree

Showing 15 changed files with 109 additions and 159 deletions.
diff --git a/build/asset-manifest.json b/build/asset-manifest.json
@@ -1,13 +1,13 @@
 {
   "files": {
-    "main.css": "/static/css/main.cddcd497.css",
-    "main.js": "/static/js/main.f02b9498.js",
+    "main.css": "/static/css/main.16b7ff76.css",
+    "main.js": "/static/js/main.7e95cfd4.js",
     "index.html": "/index.html",
-    "main.cddcd497.css.map": "/static/css/main.cddcd497.css.map",
-    "main.f02b9498.js.map": "/static/js/main.f02b9498.js.map"
+    "main.16b7ff76.css.map": "/static/css/main.16b7ff76.css.map",
+    "main.7e95cfd4.js.map": "/static/js/main.7e95cfd4.js.map"
   },
   "entrypoints": [
-    "static/css/main.cddcd497.css",
-    "static/js/main.f02b9498.js"
+    "static/css/main.16b7ff76.css",
+    "static/js/main.7e95cfd4.js"
   ]
 }
diff --git a/build/docs/README.md b/build/docs/README.md
@@ -103,7 +103,3 @@ Support me with coffee ☕ and cake 🍰:
 <input type="hidden" name="hosted_button_id" value="JFWXTYPKBD2YA" />
 <input type="image" src="https://www.paypalobjects.com/en_US/CH/i/btn/btn_donateCC_LG.gif" border="0" name="submit" title="PayPal - The safer, easier way to pay online!" alt="Donate with PayPal button" />
 </form>
-
----
-
-[Deutsch](/de/docs/)
diff --git a/build/index.html b/build/index.html
@@ -1 +1 @@
-<!doctype html><html class="help" lang="en"><head><title></title><meta charset="utf-8"/><link rel="manifest" href="/manifest.json"/><meta name="viewport" content="width=device-width,initial-scale=1"/><meta name="mobile-web-app-capable" content="yes"/><meta name="apple-mobile-web-app-capable" content="yes"/><meta name="theme-color" content="#da532c"/><meta name="msapplication-navbutton-color" content="#da532c"/><meta name="msapplication-starturl" content="/"/><link rel="apple-touch-icon" sizes="180x180" href="/icons/apple-touch-icon.png"/><link rel="icon" type="image/png" sizes="32x32" href="/icons/favicon-32x32.png"/><link rel="icon" type="image/png" sizes="16x16" href="/icons/favicon-16x16.png"/><link rel="mask-icon" href="/icons/safari-pinned-tab.svg" color="#da532c"/><link rel="shortcut icon" href="/icons/favicon.ico"/><meta name="msapplication-TileColor" content="#da532c"/><meta name="msapplication-config" content="/icons/browserconfig.xml"/><link rel="stylesheet" href="/lib/leaflet.css"/><link rel="stylesheet" href="/lib/OverPassLayer.css"/><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css"/><meta name="monetization" content="$ilp.uphold.com/BwpBDr48YqPi"/><script src="/serviceWorkerRegister.js"></script><script defer="defer" src="/static/js/main.f02b9498.js"></script><link href="/static/css/main.cddcd497.css" rel="stylesheet"></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div><script async src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" crossorigin="anonymous"></script><script async type="text/javascript" src="https://taginfo.openstreetmap.org/js/taglists.js"></script></body></html>
+<!doctype html><html class="help" lang="en"><head><title></title><meta charset="utf-8"/><link rel="manifest" href="/manifest.json"/><meta name="viewport" content="width=device-width,initial-scale=1"/><meta name="mobile-web-app-capable" content="yes"/><meta name="apple-mobile-web-app-capable" content="yes"/><meta name="theme-color" content="#da532c"/><meta name="msapplication-navbutton-color" content="#da532c"/><meta name="msapplication-starturl" content="/"/><link rel="apple-touch-icon" sizes="180x180" href="/icons/apple-touch-icon.png"/><link rel="icon" type="image/png" sizes="32x32" href="/icons/favicon-32x32.png"/><link rel="icon" type="image/png" sizes="16x16" href="/icons/favicon-16x16.png"/><link rel="mask-icon" href="/icons/safari-pinned-tab.svg" color="#da532c"/><link rel="shortcut icon" href="/icons/favicon.ico"/><meta name="msapplication-TileColor" content="#da532c"/><meta name="msapplication-config" content="/icons/browserconfig.xml"/><link rel="stylesheet" href="/lib/leaflet.css"/><link rel="stylesheet" href="/lib/OverPassLayer.css"/><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css"/><meta name="monetization" content="$ilp.uphold.com/BwpBDr48YqPi"/><script src="/serviceWorkerRegister.js"></script><script defer="defer" src="/static/js/main.7e95cfd4.js"></script><link href="/static/css/main.16b7ff76.css" rel="stylesheet"></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div><script async src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" crossorigin="anonymous"></script><script async type="text/javascript" src="https://taginfo.openstreetmap.org/js/taglists.js"></script></body></html>
diff --git a/build/static/css/main.cddcd497.css → build/static/css/main.16b7ff76.css b/build/static/css/main.cddcd497.css → build/static/css/main.16b7ff76.css
diff --git a/build/static/css/main.16b7ff76.css.map b/build/static/css/main.16b7ff76.css.map
diff --git a/build/static/css/main.cddcd497.css.map b/build/static/css/main.cddcd497.css.map
diff --git a/build/static/js/main.f02b9498.js → build/static/js/main.7e95cfd4.js b/build/static/js/main.f02b9498.js → build/static/js/main.7e95cfd4.js
diff --git a/build/static/js/main.f02b9498.js.LICENSE.txt → build/static/js/main.7e95cfd4.js.LICENSE.txt b/build/static/js/main.f02b9498.js.LICENSE.txt → build/static/js/main.7e95cfd4.js.LICENSE.txt
diff --git a/build/static/js/main.7e95cfd4.js.map b/build/static/js/main.7e95cfd4.js.map
diff --git a/build/static/js/main.f02b9498.js.map b/build/static/js/main.f02b9498.js.map
diff --git a/src/client/App.tsx b/src/client/App.tsx
@@ -53,7 +53,7 @@ export function App() {
           {t("meta.titleShort")}
         </a>
       </h1>
-      <div id="filters">
+      <div id="filters" className="right-collapsed">
         <div className="right-collapse">
           <i className="fas fa-list"></i>
         </div>
@@ -174,91 +174,12 @@ function Intro() {
         <p>{t("intro.tagline")}</p>
         <p>{t("intro.description")}</p>
 
-        <p>{t("intro.legend")}</p>
-
-        <ul>
-          <li>
-            <i className="fas fa-universal-access"></i>{" "}
-            <a href="https://wiki.openstreetmap.org/wiki/Key:access">
-              {t("intro.accessible")}
-            </a>
-          </li>
-          <li>
-            <i className="fas fa-heart"></i>{" "}
-            <a href="https://wiki.openstreetmap.org/wiki/Key:fee">
-              {t("intro.freeOfCharge")}
-            </a>
-            ,{" "}
-            <a href="https://wiki.openstreetmap.org/wiki/Key:social_facility">
-              {t("intro.social")}
-            </a>
-          </li>
-          <li>
-            {t("intro.production")}, <i className="fas fa-seedling"></i>{" "}
-            <a href="https://wiki.openstreetmap.org/wiki/Key:organic">
-              {t("intro.organic")}
-            </a>
-            , {t("intro.seasonal")}, <i className="fas fa-cheese"></i>{" "}
-            <i className="fas fa-carrot"></i>{" "}
-            <a href="https://wiki.openstreetmap.org/wiki/Key:diet">
-              {t("intro.vegetarian")}
-            </a>
-          </li>
-          <li>
-            <i className="fas fa-hands"></i> {t("intro.packed")},{" "}
-            <a href="https://wiki.openstreetmap.org/wiki/Key:bulk_purchase">
-              {t("intro.unpacked")}
-            </a>
-            ,{" "}
-            <a href="https://wiki.openstreetmap.org/wiki/Key:zero_waste">
-              {t("intro.zeroWaste")}
-            </a>
-          </li>
-          <li>
-            <i className="fas fa-handshake"></i>{" "}
-            <a href="https://wiki.openstreetmap.org/wiki/Key:fair_trade">
-              {t("intro.fairTrade")}
-            </a>
-          </li>
-          <li>
-            <i className="fas fa-map-marker-alt"></i> {t("intro.transport")},
-            {t("intro.regional")}
-          </li>
-          <li>
-            <i className="fas fa-redo-alt"></i> {t("intro.sharing")},{" "}
-            {t("intro.lending")}
-          </li>
-          <li>
-            <i className="fas fa-tools"></i>{" "}
-            <a href="https://wiki.openstreetmap.org/wiki/Key:repair">
-              {t("intro.repair")}
-            </a>
-          </li>
-          <li>
-            <i className="fas fa-exchange-alt"></i> {t("intro.reuse")}
-          </li>
-          <li>
-            <i className="fas fa-recycle"></i>{" "}
-            <a href="https://wiki.openstreetmap.org/wiki/Tag:amenity%3Drecycling">
-              {t("intro.recycling")}
-            </a>
-          </li>
-          <li>
-            <a href="https://wiki.openstreetmap.org/wiki/Tag:amenity%3Dcommunity_centre">
-              {t("intro.community")}
-            </a>
-            ,{" "}
-            <a href="https://wiki.openstreetmap.org/wiki/Key:operator:type">
-              {t("intro.participation")}
-            </a>
-          </li>
-        </ul>
-
         <p>
           <Trans
             i18nKey="intro.osm"
             components={{
-              a: <a href="https://www.openstreetmap.org" />,
+              o: <a href="https://www.openstreetmap.org" />,
+              e: <a href="#" className="edit" />,
             }}
           ></Trans>
         </p>
@@ -267,52 +188,51 @@ function Intro() {
           <Trans
             i18nKey="intro.license"
             components={{
-              a: (
+              l: (
                 <a href="https://github.com/ToastHawaii/priceless-map/blob/master/LICENSE" />
               ),
+              c: <a href="https://github.com/ToastHawaii/priceless-map" />,
             }}
           ></Trans>
-          <br />
-          <a href="https://github.com/ToastHawaii/priceless-map">
-            {t("intro.viewSourceCode")}
-          </a>
         </p>
 
-        <table>
-          <tbody>
-            <tr>
-              <td>
-                <a href="/?lang=en">English</a>
-              </td>
-              <td>
-                <a href="/?lang=de">Deutsch</a>
-              </td>
-              <td>
-                <a href="/?lang=es">Español</a>
-              </td>
-              <td>
-                <a href="/?lang=fr">Français</a>
-              </td>
-              <td>
-                <a href="/?lang=pl">Polski</a>
-              </td>
-              <td>
-                <a href="https://hosted.weblate.org/engage/priceless-map/">
-                  {t("intro.translate")}
-                </a>
-              </td>
-            </tr>
-          </tbody>
-        </table>
-
+        <div className="responsive-table">
+          <table>
+            <tbody>
+              <tr>
+                <td>
+                  <a href="/?lang=en">English</a>
+                </td>
+                <td>
+                  <a href="/?lang=de">Deutsch</a>
+                </td>
+                {/* <td>
+                  <a href="/?lang=es">Español</a>
+                </td>
+                <td>
+                  <a href="/?lang=fr">Français</a>
+                </td>
+                <td>
+                  <a href="/?lang=pl">Polski</a>
+                </td>
+                <td>
+                  <a href="https://hosted.weblate.org/engage/priceless-map/">
+                    {t("intro.translate")}
+                  </a>
+                </td> */}
+              </tr>
+            </tbody>
+          </table>
+        </div>
+        {/*
         <p>
           <a href="https://hosted.weblate.org/engage/priceless-map/">
             <img
               src="https://hosted.weblate.org/widgets/priceless-map/-/svg-badge.svg"
               alt={t("intro.translationStatus")}
             />
           </a>
-        </p>
+        </p> */}
 
         <hr />
 

diff --git a/src/client/locales/de.json b/src/client/locales/de.json
@@ -9,6 +9,18 @@
   "search": {
     "placeholder": "Einen Ort suchen"
   },
+  "intro": {
+    "title": "Unbezahlbar",
+    "tagline": "Erlebe die Welt. Gratis.",
+    "description": "Dies ist eine einfache Karte, welche öffentliche und kostenlose Einrichtungen und Angebote in deiner Nähe anzeigt.",
+    "osm": "Die Informationen werden von <o>OpenStreetMap</o> geladen. <e>Füge dir bekannte Orte hinzu.</e>",
+    "license": "Die Anwendung ist unter der <l>GNU Affero General Public License v3.0</l> lizenziert. Der <c>Code</c> steht frei zur Verwendung, Kopierung und Modifizierung, wenn er unter der gleichen Lizenz veröffentlichet wird.",
+    "translate": "Hilf übersetzen",
+    "translationStatus": "Stand der Übersetzung",
+    "contribute": "Wie du zu OpenStreetMap beitragen kannst",
+    "moreApps": "Mehr Apps basierend auf OpenStreetMap",
+    "aboutMe": "Über mich"
+  },
   "info": {
     "osmTags": "Dokumentation",
     "query": "Abfrage",

diff --git a/src/client/locales/en.json b/src/client/locales/en.json
@@ -9,6 +9,18 @@
   "search": {
     "placeholder": "Search a location"
   },
+  "intro": {
+    "title": "Priceless",
+    "tagline": "Experience the world. Free of charge.",
+    "description": "This is a simple map showing public and free facilities and offers near you.",
+    "osm": "The information is loaded from <o>OpenStreetMap</o>. <e>Add places you know.</e>",
+    "license": "The app is licensed under the <l>GNU Affero General Public License v3.0</l>. The <c>code</c> is free for use, copying and modification if you publish under the same license.",
+    "translate": "Help translate",
+    "translationStatus": "Translation status",
+    "contribute": "How to contribute to OpenStreetMap",
+    "moreApps": "More apps based on OpenStreetMap",
+    "aboutMe": "About me"
+  },
   "info": {
     "osmTags": "Documentation",
     "query": "Query",

diff --git a/src/osm-app-component/index.ts b/src/osm-app-component/index.ts
@@ -144,11 +144,8 @@ export async function initMap<M>(
   document
     .querySelector("#filters .right-collapse")
     ?.addEventListener("click", () => {
-      if (document.getElementById("filters")?.className) {
-        document.getElementById("filters")?.classList.remove("right-collapsed");
-      } else {
-        document.getElementById("filters")?.classList.add("right-collapsed");
-      }
+      document.getElementById("filters")?.classList.toggle("right-collapsed");
+      getHtmlElement(".info-container").style.display = "none";
     });
 
   document
@@ -164,6 +161,8 @@ export async function initMap<M>(
 
   document.querySelector(".about")?.addEventListener("click", () => {
     getHtmlElement(".intro-container").style.display = "block";
+    getHtmlElement(".info-container").style.display = "none";
+    getHtmlElement(".menu-group").classList.remove("collapsed");
   });
 
   (getHtmlElement(".donate") as HTMLLinkElement).href =
@@ -256,27 +255,29 @@ export async function initMap<M>(
     window.location.href = `https://www.openstreetmap.org/note/new#map=${zoom}/${latlng.lat}/${latlng.lng}`;
   });
 
-  getHtmlElement(".edit").addEventListener("click", () => {
-    const latlng = map.getCenter();
-    const zoom = map.getZoom();
-
-    let presets = "";
-    for (const o of offers) {
-      const p = filterOptions
-        .filter((f) => `${f.group}/${f.value}` === o)
-        .map((o) => o.edit.map((t) => t.replace(/=/gi, "/")).join(","))
-        .filter((o) => o)
-        .join(",");
-      presets += (presets && p ? "," : "") + p;
-    }
+  getHtmlElements(".edit").forEach((e) =>
+    e.addEventListener("click", function () {
+      const latlng = map.getCenter();
+      const zoom = map.getZoom();
+
+      let presets = "";
+      for (const o of offers) {
+        const p = filterOptions
+          .filter((f) => `${f.group}/${f.value}` === o)
+          .map((o) => o.edit.map((t) => t.replace(/=/gi, "/")).join(","))
+          .filter((o) => o)
+          .join(",");
+        presets += (presets && p ? "," : "") + p;
+      }
 
-    if (isIOS())
-      window.location.href = `https://gomaposm.com/edit?center=${latlng.lat},${latlng.lng}&zoom=${zoom}`;
-    else
-      window.location.href = `https://www.openstreetmap.org/edit#editor=id&map=${zoom}/${
-        latlng.lat
-      }/${latlng.lng}${presets ? `&presets=${presets}` : ``}`;
-  });
+      if (isIOS())
+        window.location.href = `https://gomaposm.com/edit?center=${latlng.lat},${latlng.lng}&zoom=${zoom}`;
+      else
+        window.location.href = `https://www.openstreetmap.org/edit#editor=id&map=${zoom}/${
+          latlng.lat
+        }/${latlng.lng}${presets ? `&presets=${presets}` : ``}`;
+    })
+  );
 
   const attribution = [
     'Map data &copy; <a href="https://openstreetmap.org/">OpenStreetMap</a>',
@@ -782,6 +783,9 @@ data-taginfo-taglist-options='{"with_count": true, "lang": "${t("code")}"}'>
             "click",
             () => {
               getHtmlElement(".info-container").style.display = "none";
+              document
+                .getElementById("filters")
+                ?.classList.remove("right-collapsed");
 
               document.title = t("title");
               document

diff --git a/src/osm-app-component/style.scss b/src/osm-app-component/style.scss
@@ -541,6 +541,12 @@ a.menu {
   }
 }
 
+.responsive-table {
+  max-width: 100%;
+  overflow: auto;
+  white-space: nowrap;
+}
+
 .close-button {
   position: absolute;
   top: 10px;
@@ -578,7 +584,7 @@ details[open] summary ~ * {
   animation: sweep 0.4s ease-in-out;
 }
 
-table {
+.intro-container table {
   border-spacing: 0;
   border-collapse: collapse;
   td {