Skip to content

Commit fe98b86

Browse files
ToastHawaiiToastHawaii
committed
improve intro
1 parent 7a738ea commit fe98b86

File tree

4 files changed

+72
-65
lines changed

4 files changed

+72
-65
lines changed

‎src/client/App.tsx

Lines changed: 33 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -52,7 +52,7 @@ export function App() {
5252
{t("meta.titleShort")}
5353
</a>
5454
</h1>
55-
<div id="filters">
55+
<div id="filters" className="right-collapsed">
5656
<div className="right-collapse">
5757
<i className="fas fa-list"></i>
5858
</div>
@@ -257,7 +257,8 @@ function Intro() {
257257
<Trans
258258
i18nKey="intro.osm"
259259
components={{
260-
a: <a href="https://www.openstreetmap.org" />,
260+
o: <a href="https://www.openstreetmap.org" />,
261+
e: <a href="#" className="edit" />,
261262
}}
262263
></Trans>
263264
</p>
@@ -266,43 +267,42 @@ function Intro() {
266267
<Trans
267268
i18nKey="intro.license"
268269
components={{
269-
a: (
270+
l: (
270271
<a href="https://github.com/ToastHawaii/sustainable-map/blob/master/LICENSE" />
271272
),
273+
c: <a href="https://github.com/ToastHawaii/sustainable-map" />,
272274
}}
273275
></Trans>
274-
<br />
275-
<a href="https://github.com/ToastHawaii/sustainable-map">
276-
{t("intro.viewSourceCode")}
277-
</a>
278276
</p>
279277

280-
<table>
281-
<tbody>
282-
<tr>
283-
<td>
284-
<a href="/?lang=en">English</a>
285-
</td>
286-
<td>
287-
<a href="/?lang=de">Deutsch</a>
288-
</td>
289-
<td>
290-
<a href="/?lang=es">Español</a>
291-
</td>
292-
<td>
293-
<a href="/?lang=fr">Français</a>
294-
</td>
295-
<td>
296-
<a href="/?lang=pl">Polski</a>
297-
</td>
298-
<td>
299-
<a href="https://hosted.weblate.org/engage/sustainable-map/">
300-
{t("intro.translate")}
301-
</a>
302-
</td>
303-
</tr>
304-
</tbody>
305-
</table>
278+
<div className="responsive-table">
279+
<table>
280+
<tbody>
281+
<tr>
282+
<td>
283+
<a href="/?lang=en">English</a>
284+
</td>
285+
<td>
286+
<a href="/?lang=de">Deutsch</a>
287+
</td>
288+
<td>
289+
<a href="/?lang=es">Español</a>
290+
</td>
291+
<td>
292+
<a href="/?lang=fr">Français</a>
293+
</td>
294+
<td>
295+
<a href="/?lang=pl">Polski</a>
296+
</td>
297+
<td>
298+
<a href="https://hosted.weblate.org/engage/sustainable-map/">
299+
{t("intro.translate")}
300+
</a>
301+
</td>
302+
</tr>
303+
</tbody>
304+
</table>
305+
</div>
306306

307307
<p>
308308
<a href="https://hosted.weblate.org/engage/sustainable-map/">

‎src/client/locales/en.json

Lines changed: 4 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -33,13 +33,12 @@
3333
"recycling": "Recycling",
3434
"community": "Community",
3535
"participation": "Participation",
36-
"osm": "The information is loaded from OpenStreetMap.",
37-
"license": "The app is licensed under the <a>GNU Affero General Public License v3.0</a>. The code is free for use, copying and modification if you publish under the same license.",
38-
"viewSourceCode": "View the source code on GitHub.",
36+
"osm": "The information is loaded from <o>OpenStreetMap</o>. <e>Add places you now.<e>",
37+
"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.",
3938
"translate": "Help translate",
4039
"translationStatus": "Translation status",
41-
"contribute": "How to contribute to OSM",
42-
"moreApps": "More apps based on OSM",
40+
"contribute": "How to contribute to OpenStreetMap",
41+
"moreApps": "More apps based on OpenStreetMap",
4342
"aboutMe": "About me"
4443
},
4544
"info": {

‎src/osm-app-component/index.ts

Lines changed: 28 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -144,11 +144,8 @@ export async function initMap<M>(
144144
document
145145
.querySelector("#filters .right-collapse")
146146
?.addEventListener("click", () => {
147-
if (document.getElementById("filters")?.className) {
148-
document.getElementById("filters")?.classList.remove("right-collapsed");
149-
} else {
150-
document.getElementById("filters")?.classList.add("right-collapsed");
151-
}
147+
document.getElementById("filters")?.classList.toggle("right-collapsed");
148+
getHtmlElement(".info-container").style.display = "none";
152149
});
153150

154151
document
@@ -164,7 +161,7 @@ export async function initMap<M>(
164161

165162
document.querySelector(".about")?.addEventListener("click", () => {
166163
getHtmlElement(".intro-container").style.display = "block";
167-
getHtmlElement(".menu-group").classList.toggle("collapsed");
164+
getHtmlElement(".menu-group").classList.remove("collapsed");
168165
});
169166

170167
(getHtmlElement(".donate") as HTMLLinkElement).href =
@@ -257,27 +254,29 @@ export async function initMap<M>(
257254
window.location.href = `https://www.openstreetmap.org/note/new#map=${zoom}/${latlng.lat}/${latlng.lng}`;
258255
});
259256

260-
getHtmlElement(".edit").addEventListener("click", () => {
261-
const latlng = map.getCenter();
262-
const zoom = map.getZoom();
263-
264-
let presets = "";
265-
for (const o of offers) {
266-
const p = filterOptions
267-
.filter((f) => `${f.group}/${f.value}` === o)
268-
.map((o) => o.edit.map((t) => t.replace(/=/gi, "/")).join(","))
269-
.filter((o) => o)
270-
.join(",");
271-
presets += (presets && p ? "," : "") + p;
272-
}
257+
getHtmlElements(".edit").forEach((e) =>
258+
e.addEventListener("click", function () {
259+
const latlng = map.getCenter();
260+
const zoom = map.getZoom();
261+
262+
let presets = "";
263+
for (const o of offers) {
264+
const p = filterOptions
265+
.filter((f) => `${f.group}/${f.value}` === o)
266+
.map((o) => o.edit.map((t) => t.replace(/=/gi, "/")).join(","))
267+
.filter((o) => o)
268+
.join(",");
269+
presets += (presets && p ? "," : "") + p;
270+
}
273271

274-
if (isIOS())
275-
window.location.href = `https://gomaposm.com/edit?center=${latlng.lat},${latlng.lng}&zoom=${zoom}`;
276-
else
277-
window.location.href = `https://www.openstreetmap.org/edit#editor=id&map=${zoom}/${
278-
latlng.lat
279-
}/${latlng.lng}${presets ? `&presets=${presets}` : ``}`;
280-
});
272+
if (isIOS())
273+
window.location.href = `https://gomaposm.com/edit?center=${latlng.lat},${latlng.lng}&zoom=${zoom}`;
274+
else
275+
window.location.href = `https://www.openstreetmap.org/edit#editor=id&map=${zoom}/${
276+
latlng.lat
277+
}/${latlng.lng}${presets ? `&presets=${presets}` : ``}`;
278+
})
279+
);
281280

282281
const attribution = [
283282
'Map data &copy; <a href="https://openstreetmap.org/">OpenStreetMap</a>',
@@ -783,6 +782,9 @@ data-taginfo-taglist-options='{"with_count": true, "lang": "${t("code")}"}'>
783782
"click",
784783
() => {
785784
getHtmlElement(".info-container").style.display = "none";
785+
document
786+
.getElementById("filters")
787+
?.classList.remove("right-collapsed");
786788

787789
document.title = t("title");
788790
document

‎src/osm-app-component/style.scss

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -541,14 +541,20 @@ a.menu {
541541
}
542542
}
543543

544+
.responsive-table {
545+
max-width: 100%;
546+
overflow: auto;
547+
white-space: nowrap;
548+
}
549+
544550
.close-button {
545551
position: absolute;
546552
top: 10px;
547553
right: 10px;
548554
padding: 6px;
549555
border: none;
550556
text-align: center;
551-
font: 16px/14px Tahoma, Verdana, sans-serif;
557+
font: 24px/14px Tahoma, Verdana, sans-serif;
552558
color: #c3c3c3;
553559
text-decoration: none;
554560
font-weight: bold;

0 commit comments

Comments
 (0)