Skip to content

Commit b5d1068

Browse files
katporkskatporks
authored
Merge pull request #18 from hotosm/feat/issue-12/language-switcher
Feat/issue 12/language switcher - Responsive Language Switcher with Custom SVG and Padding
2 parents c32972e + 11187b8 commit b5d1068

File tree

23 files changed

+162
-53
lines changed

23 files changed

+162
-53
lines changed

‎hot_osm/locale/en/LC_MESSAGES/django.mo

380 Bytes
Binary file not shown.

‎hot_osm/locale/en/LC_MESSAGES/django.po

+18-10
Original file line numberDiff line numberDiff line change
@@ -3,12 +3,11 @@
33
# This file is distributed under the same license as the PACKAGE package.
44
# FIRST AUTHOR <EMAIL@ADDRESS>, YEAR.
55
#
6-
#, fuzzy
76
msgid ""
87
msgstr ""
98
"Project-Id-Version: PACKAGE VERSION\n"
109
"Report-Msgid-Bugs-To: \n"
11-
"POT-Creation-Date: 2024-02-17 13:37+0000\n"
10+
"POT-Creation-Date: 2024-03-14 08:59+0000\n"
1211
"PO-Revision-Date: YEAR-MO-DA HO:MI+ZONE\n"
1312
"Last-Translator: FULL NAME <EMAIL@ADDRESS>\n"
1413
"Language-Team: LANGUAGE <[email protected]>\n"
@@ -17,34 +16,43 @@ msgstr ""
1716
"Content-Type: text/plain; charset=UTF-8\n"
1817
"Content-Transfer-Encoding: 8bit\n"
1918
"Plural-Forms: nplurals=2; plural=(n != 1);\n"
20-
#: hot_osm/templates/components/nav/primary_desktop_nav.html:6
19+
20+
#: hot_osm/templates/components/mobile/mobile_navigation.html:11
21+
#: hot_osm/templates/components/nav/primary_desktop_nav.html:7
2122
msgid "Who We Are"
2223
msgstr ""
2324

24-
#: hot_osm/templates/components/nav/primary_desktop_nav.html:7
25+
#: hot_osm/templates/components/mobile/mobile_navigation.html:12
26+
#: hot_osm/templates/components/nav/primary_desktop_nav.html:8
2527
msgid "Our Work"
2628
msgstr ""
2729

28-
#: hot_osm/templates/components/nav/primary_desktop_nav.html:8
30+
#: hot_osm/templates/components/mobile/mobile_navigation.html:13
31+
#: hot_osm/templates/components/nav/primary_desktop_nav.html:9
2932
msgid "Our Mapping Hubs"
3033
msgstr ""
3134

32-
#: hot_osm/templates/components/nav/primary_desktop_nav.html:9
35+
#: hot_osm/templates/components/mobile/mobile_navigation.html:14
36+
#: hot_osm/templates/components/nav/primary_desktop_nav.html:10
3337
msgid "Tools &amp; Resources"
3438
msgstr ""
3539

36-
#: hot_osm/templates/components/nav/primary_desktop_nav.html:10
40+
#: hot_osm/templates/components/mobile/mobile_navigation.html:15
41+
#: hot_osm/templates/components/nav/primary_desktop_nav.html:11
3742
msgid "Get Involved"
3843
msgstr ""
3944

40-
#: hot_osm/templates/components/nav/primary_desktop_nav.html:11
45+
#: hot_osm/templates/components/mobile/mobile_navigation.html:16
46+
#: hot_osm/templates/components/nav/primary_desktop_nav.html:12
4147
msgid "Start Mapping"
4248
msgstr ""
4349

44-
#: hot_osm/templates/components/nav/secondary_desktop_nav.html:11
50+
#: hot_osm/templates/components/mobile/mobile_navigation.html:17
51+
#: hot_osm/templates/components/nav/secondary_desktop_nav.html:12
4552
msgid "News"
4653
msgstr ""
4754

48-
#: hot_osm/templates/components/nav/secondary_desktop_nav.html:12
55+
#: hot_osm/templates/components/mobile/mobile_navigation.html:18
56+
#: hot_osm/templates/components/nav/secondary_desktop_nav.html:13
4957
msgid "Contact Us"
5058
msgstr ""

‎hot_osm/locale/es/LC_MESSAGES/django.mo

471 Bytes
Binary file not shown.

‎hot_osm/locale/es/LC_MESSAGES/django.po

+20-12
Original file line numberDiff line numberDiff line change
@@ -3,12 +3,11 @@
33
# This file is distributed under the same license as the PACKAGE package.
44
# FIRST AUTHOR <EMAIL@ADDRESS>, YEAR.
55
#
6-
#, fuzzy
76
msgid ""
87
msgstr ""
98
"Project-Id-Version: PACKAGE VERSION\n"
109
"Report-Msgid-Bugs-To: \n"
11-
"POT-Creation-Date: 2024-02-17 13:37+0000\n"
10+
"POT-Creation-Date: 2024-03-14 08:59+0000\n"
1211
"PO-Revision-Date: YEAR-MO-DA HO:MI+ZONE\n"
1312
"Last-Translator: FULL NAME <EMAIL@ADDRESS>\n"
1413
"Language-Team: LANGUAGE <[email protected]>\n"
@@ -17,34 +16,43 @@ msgstr ""
1716
"Content-Type: text/plain; charset=UTF-8\n"
1817
"Content-Transfer-Encoding: 8bit\n"
1918
"Plural-Forms: nplurals=2; plural=(n != 1);\n"
20-
#: hot_osm/templates/components/nav/primary_desktop_nav.html:6
21-
msgid "Who We Are"
22-
msgstr ""
2319

20+
#: hot_osm/templates/components/mobile/mobile_navigation.html:11
2421
#: hot_osm/templates/components/nav/primary_desktop_nav.html:7
25-
msgid "Our Work"
26-
msgstr ""
22+
msgid "Who We Are"
23+
msgstr "Quiénes somos"
2724

25+
#: hot_osm/templates/components/mobile/mobile_navigation.html:12
2826
#: hot_osm/templates/components/nav/primary_desktop_nav.html:8
27+
msgid "Our Work"
28+
msgstr "Nuestro trabajo"
29+
30+
#: hot_osm/templates/components/mobile/mobile_navigation.html:13
31+
#: hot_osm/templates/components/nav/primary_desktop_nav.html:9
2932
msgid "Our Mapping Hubs"
3033
msgstr ""
3134

32-
#: hot_osm/templates/components/nav/primary_desktop_nav.html:9
35+
#: hot_osm/templates/components/mobile/mobile_navigation.html:14
36+
#: hot_osm/templates/components/nav/primary_desktop_nav.html:10
3337
msgid "Tools &amp; Resources"
3438
msgstr ""
3539

36-
#: hot_osm/templates/components/nav/primary_desktop_nav.html:10
40+
#: hot_osm/templates/components/mobile/mobile_navigation.html:15
41+
#: hot_osm/templates/components/nav/primary_desktop_nav.html:11
3742
msgid "Get Involved"
3843
msgstr ""
3944

40-
#: hot_osm/templates/components/nav/primary_desktop_nav.html:11
45+
#: hot_osm/templates/components/mobile/mobile_navigation.html:16
46+
#: hot_osm/templates/components/nav/primary_desktop_nav.html:12
4147
msgid "Start Mapping"
4248
msgstr ""
4349

44-
#: hot_osm/templates/components/nav/secondary_desktop_nav.html:11
50+
#: hot_osm/templates/components/mobile/mobile_navigation.html:17
51+
#: hot_osm/templates/components/nav/secondary_desktop_nav.html:12
4552
msgid "News"
4653
msgstr ""
4754

48-
#: hot_osm/templates/components/nav/secondary_desktop_nav.html:12
55+
#: hot_osm/templates/components/mobile/mobile_navigation.html:18
56+
#: hot_osm/templates/components/nav/secondary_desktop_nav.html:13
4957
msgid "Contact Us"
5058
msgstr ""

‎hot_osm/locale/fr/LC_MESSAGES/django.mo

467 Bytes
Binary file not shown.

‎hot_osm/locale/fr/LC_MESSAGES/django.po

+20-12
Original file line numberDiff line numberDiff line change
@@ -3,12 +3,11 @@
33
# This file is distributed under the same license as the PACKAGE package.
44
# FIRST AUTHOR <EMAIL@ADDRESS>, YEAR.
55
#
6-
#, fuzzy
76
msgid ""
87
msgstr ""
98
"Project-Id-Version: PACKAGE VERSION\n"
109
"Report-Msgid-Bugs-To: \n"
11-
"POT-Creation-Date: 2024-02-17 13:37+0000\n"
10+
"POT-Creation-Date: 2024-03-14 08:59+0000\n"
1211
"PO-Revision-Date: YEAR-MO-DA HO:MI+ZONE\n"
1312
"Last-Translator: FULL NAME <EMAIL@ADDRESS>\n"
1413
"Language-Team: LANGUAGE <[email protected]>\n"
@@ -17,34 +16,43 @@ msgstr ""
1716
"Content-Type: text/plain; charset=UTF-8\n"
1817
"Content-Transfer-Encoding: 8bit\n"
1918
"Plural-Forms: nplurals=2; plural=(n > 1);\n"
20-
#: hot_osm/templates/components/nav/primary_desktop_nav.html:6
21-
msgid "Who We Are"
22-
msgstr ""
2319

20+
#: hot_osm/templates/components/mobile/mobile_navigation.html:11
2421
#: hot_osm/templates/components/nav/primary_desktop_nav.html:7
25-
msgid "Our Work"
26-
msgstr ""
22+
msgid "Who We Are"
23+
msgstr "Qui nous sommes"
2724

25+
#: hot_osm/templates/components/mobile/mobile_navigation.html:12
2826
#: hot_osm/templates/components/nav/primary_desktop_nav.html:8
27+
msgid "Our Work"
28+
msgstr "Nos travaux"
29+
30+
#: hot_osm/templates/components/mobile/mobile_navigation.html:13
31+
#: hot_osm/templates/components/nav/primary_desktop_nav.html:9
2932
msgid "Our Mapping Hubs"
3033
msgstr ""
3134

32-
#: hot_osm/templates/components/nav/primary_desktop_nav.html:9
35+
#: hot_osm/templates/components/mobile/mobile_navigation.html:14
36+
#: hot_osm/templates/components/nav/primary_desktop_nav.html:10
3337
msgid "Tools &amp; Resources"
3438
msgstr ""
3539

36-
#: hot_osm/templates/components/nav/primary_desktop_nav.html:10
40+
#: hot_osm/templates/components/mobile/mobile_navigation.html:15
41+
#: hot_osm/templates/components/nav/primary_desktop_nav.html:11
3742
msgid "Get Involved"
3843
msgstr ""
3944

40-
#: hot_osm/templates/components/nav/primary_desktop_nav.html:11
45+
#: hot_osm/templates/components/mobile/mobile_navigation.html:16
46+
#: hot_osm/templates/components/nav/primary_desktop_nav.html:12
4147
msgid "Start Mapping"
4248
msgstr ""
4349

44-
#: hot_osm/templates/components/nav/secondary_desktop_nav.html:11
50+
#: hot_osm/templates/components/mobile/mobile_navigation.html:17
51+
#: hot_osm/templates/components/nav/secondary_desktop_nav.html:12
4552
msgid "News"
4653
msgstr ""
4754

48-
#: hot_osm/templates/components/nav/secondary_desktop_nav.html:12
55+
#: hot_osm/templates/components/mobile/mobile_navigation.html:18
56+
#: hot_osm/templates/components/nav/secondary_desktop_nav.html:13
4957
msgid "Contact Us"
5058
msgstr ""

‎hot_osm/settings/base.py

+8-3
Original file line numberDiff line numberDiff line change
@@ -31,6 +31,7 @@
3131
"home",
3232
"search",
3333
"users",
34+
"utils",
3435
"wagtail.contrib.forms",
3536
"wagtail.contrib.redirects",
3637
"wagtail.embeds",
@@ -57,13 +58,13 @@
5758

5859
MIDDLEWARE = [
5960
"django.contrib.sessions.middleware.SessionMiddleware",
61+
"django.middleware.locale.LocaleMiddleware",
6062
"django.middleware.common.CommonMiddleware",
6163
"django.middleware.csrf.CsrfViewMiddleware",
6264
"django.contrib.auth.middleware.AuthenticationMiddleware",
6365
"django.contrib.messages.middleware.MessageMiddleware",
6466
"django.middleware.clickjacking.XFrameOptionsMiddleware",
6567
"django.middleware.security.SecurityMiddleware",
66-
"django.middleware.locale.LocaleMiddleware",
6768
"wagtail.contrib.redirects.middleware.RedirectMiddleware",
6869
]
6970

@@ -74,6 +75,7 @@
7475
"BACKEND": "django.template.backends.django.DjangoTemplates",
7576
"DIRS": [
7677
os.path.join(PROJECT_DIR, "templates"),
78+
os.path.join(PROJECT_DIR, "..", "utils", "templates"),
7779
],
7880
"APP_DIRS": True,
7981
"OPTIONS": {
@@ -126,21 +128,24 @@
126128
# Internationalization
127129
# https://docs.djangoproject.com/en/4.2/topics/i18n/
128130

129-
LANGUAGE_CODE = "en-us"
131+
LANGUAGE_CODE = "en"
130132

131133
TIME_ZONE = "UTC"
132134

133135
USE_I18N = True
134136

137+
USE_L10N = True
138+
135139
WAGTAIL_I18N_ENABLED = True
136140

137141
USE_TZ = True
138142

139143
LOCALE_PATHS = [
140144
os.path.join(BASE_DIR, "locale"),
145+
os.path.join(BASE_DIR, "hot_osm", "locale"),
141146
]
142147

143-
WAGTAIL_CONTENT_LANGUAGES = [
148+
WAGTAIL_CONTENT_LANGUAGES = LANGUAGES = [
144149
("en", "English"),
145150
("fr", "French"),
146151
("es", "Spanish"),

‎hot_osm/static/css/hot_osm.css

+23
Original file line numberDiff line numberDiff line change
@@ -28,3 +28,26 @@
2828
--font-size-base-18: 1.125rem; /* 18pt */
2929
--font-size-base-16: 1rem; /* 16pt */
3030
}
31+
32+
/* Custom styling for the language select element */
33+
.language-select {
34+
-moz-appearance: none; /* Removes Firefox's default select styling */
35+
-webkit-appearance: none; /* Removes Chrome's default select styling */
36+
appearance: none; /* Removes the default select styling for other browsers */
37+
/* Custom Globe SVG: */
38+
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' id='globe'%3E%3Crect width='16' height='16' fill='none'%3E%3C/rect%3E%3Ccircle cx='128' cy='128' r='96' fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='8'%3E%3C/circle%3E%3Cline x1='37.467' x2='218.532' y1='96' y2='96' fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='8'%3E%3C/line%3E%3Cline x1='37.471' x2='218.534' y1='160' y2='160' fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='8'%3E%3C/line%3E%3Cellipse cx='128' cy='128' fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='8' rx='40' ry='93.423'%3E%3C/ellipse%3E%3C/svg%3E");
39+
background-repeat: no-repeat; /* Ensures the SVG only appears once */
40+
background-size: 18px 18px; /* Controls the size of the SVG */
41+
padding-right: 27.25px; /* Adds space on the right side of the select element to prevent SVG overlap with the text */
42+
}
43+
44+
/* Removes IE's default dropdown arrow */
45+
/* .language-select::-ms-expand {
46+
display: none;
47+
} */
48+
49+
/* Removes the default focus outline and box-shadow */
50+
.language-select:focus {
51+
outline: none !important;
52+
box-shadow: none !important;
53+
}

‎hot_osm/templates/components/mobile/mobile_navigation.html

+18-8
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,33 @@
1+
{% load i18n %}
12
<div x-show="isMenuOpen"
23
@click.outside="isMenuOpen = false"
34
class="font-barlow lg:hidden"
45
id="mobile-menu">
56
<nav class="gap-y-1 pb-3 pt-2 font-medium text-base-18"
67
aria-label="Global - Mobile">
78
<ul class="list-none pl-0">
8-
<li>{% include "../mobile/mobile_menu_link.html" with link="#" text="Who We Are" selected=True parent=True %}</li>
9-
<li>{% include "../mobile/mobile_menu_link.html" with link="#" text="Our Work" parent=True %}</li>
9+
{% comment %} Strings for translation {% endcomment %}
10+
{% translate "Who We Are" as who_we_are %}
11+
{% translate "Our Work" as our_work %}
12+
{% translate "Our Mapping Hubs" as our_mapping_hubs %}
13+
{% translate "Tools &amp; Resources" as tools_resources %}
14+
{% translate "Get Involved" as get_involved %}
15+
{% translate "Start Mapping" as start_mapping %}
16+
{% translate "News" as news %}
17+
{% translate "Contact Us" as contact_us %}
18+
<li>{% include "../mobile/mobile_menu_link.html" with link="#" text=who_we_are selected=True parent=True %}</li>
19+
<li>{% include "../mobile/mobile_menu_link.html" with link="#" text=our_work parent=True %}</li>
1020
<li>{% include "../mobile/mobile_menu_link.html" with link="#" text="Open Mapping Hubs" parent=True %}</li>
11-
<li>{% include "../mobile/mobile_menu_link.html" with link="#" text="Tools &amp; Resources" parent=True %}</li>
12-
<li>{% include "../mobile/mobile_menu_link.html" with link="#" text="Get Involved" parent=True %}</li>
13-
<li>{% include "../branded_elements/button.html" with text="Start Mapping" classes="my-2 ml-3 mr-4" %}</li>
21+
<li>{% include "../mobile/mobile_menu_link.html" with link="#" text=tools_resources parent=True %}</li>
22+
<li>{% include "../mobile/mobile_menu_link.html" with link="#" text=get_involved parent=True %}</li>
23+
<li>{% include "../branded_elements/button.html" with text=start_mapping classes="my-2 ml-3 mr-4" %}</li>
1424
</ul>
1525
</nav>
1626
<nav class="border-t border-b border-hot-dark-grey py-2">
1727
<ul class="gap-y-0.5 list-none pl-0">
18-
<li>{% include "../mobile/mobile_menu_link.html" with link="#" text="EN" parent=True classes="px-4" %}</li>
19-
<li>{% include "../mobile/mobile_menu_link.html" with link="#" text="News" classes="px-4" %}</li>
20-
<li>{% include "../mobile/mobile_menu_link.html" with link="#" text="Contact Us" classes="px-4" %}</li>
28+
<li>{% include "language_switcher.html" %}</li>
29+
<li>{% include "../mobile/mobile_menu_link.html" with link="#" text=news %}</li>
30+
<li>{% include "../mobile/mobile_menu_link.html" with link="#" text=contact_us %}</li>
2131
</ul>
2232
</nav>
2333
</div>

‎hot_osm/templates/components/nav/primary_desktop_nav.html

+3-5
Original file line numberDiff line numberDiff line change
@@ -12,11 +12,9 @@
1212
<li>{% include "../branded_elements/link.html" with link="#" text=who_we_are classes="py-2" parent=True %}</li>
1313
<li>{% include "../branded_elements/link.html" with link="#" text=our_work classes="py-2" parent=True %}</li>
1414
<li>{% include "../branded_elements/link.html" with link="#" text=our_mapping_hubs classes="py-2" parent=True %}</li>
15-
<li>
16-
{% include "../branded_elements/link.html" with link="#" text="Tools &amp; Resources" classes="py-2" parent=True %}
17-
</li>
18-
<li>{% include "../branded_elements/link.html" with link="#" text="Get Involved" classes="py-2" parent=True %}</li>
19-
<li>{% include "../branded_elements/button.html" with text="Start Mapping" %}</li>
15+
<li>{% include "../branded_elements/link.html" with link="#" text=tools_resources classes="py-2" parent=True %}</li>
16+
{% include "../branded_elements/link.html" with link="#" text=get_involved classes="py-2" parent=True %}
17+
<li>{% include "../branded_elements/button.html" with text=start_mapping %}</li>
2018
</ul>
2119
</nav>
2220
</div>

‎hot_osm/templates/components/nav/secondary_desktop_nav.html

+3-3
Original file line numberDiff line numberDiff line change
@@ -11,9 +11,9 @@
1111
{% translate "News" as news %}
1212
{% translate "Contact Us" as contact_us %}
1313
<li>{% include "../search/search_icon.html" %}</li>
14-
<li>{% include "../branded_elements/link.html" with link="#" text="EN" parent=True %}</li>
15-
<li>{% include "../branded_elements/link.html" with link="#" text="News" %}</li>
16-
<li>{% include "../branded_elements/link.html" with link="#" text="Contact Us" %}</li>
14+
<li>{% include "language_switcher.html" %}</li>
15+
<li>{% include "../branded_elements/link.html" with link="#" text=news %}</li>
16+
<li>{% include "../branded_elements/link.html" with link="#" text=contact_us %}</li>
1717
</ul>
1818
</nav>
1919
</div>

‎hot_osm/urls.py

+1
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@
99
from search import views as search_views
1010

1111
urlpatterns = [
12+
path("i18n/", include("django.conf.urls.i18n")),
1213
path("django-admin/", admin.site.urls),
1314
path("admin/", include(wagtailadmin_urls)),
1415
path("documents/", include(wagtaildocs_urls)),

‎utils/__init__.py

Whitespace-only changes.

‎utils/admin.py

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
from django.contrib import admin
2+
3+
# Register your models here.

‎utils/apps.py

+6
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
from django.apps import AppConfig
2+
3+
4+
class UtilsConfig(AppConfig):
5+
default_auto_field = "django.db.models.BigAutoField"
6+
name = "utils"

‎utils/migrations/__init__.py

Whitespace-only changes.

‎utils/models.py

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
from django.db import models
2+
3+
# Create your models here.

0 commit comments

Comments
 (0)