Feat/issue 12/language switcher - Responsive Language Switcher with Custom SVG and Padding

hot_osm/locale/en/LC_MESSAGES/django.po

@@ -3,12 +3,11 @@
 # This file is distributed under the same license as the PACKAGE package.
 # FIRST AUTHOR <EMAIL@ADDRESS>, YEAR.
 #
-#, fuzzy
 msgid ""
 msgstr ""
 "Project-Id-Version: PACKAGE VERSION\n"
 "Report-Msgid-Bugs-To: \n"
-"POT-Creation-Date: 2024-02-17 13:37+0000\n"
+"POT-Creation-Date: 2024-03-14 08:59+0000\n"
 "PO-Revision-Date: YEAR-MO-DA HO:MI+ZONE\n"
 "Last-Translator: FULL NAME <EMAIL@ADDRESS>\n"
 "Language-Team: LANGUAGE <[email protected]>\n"
@@ -17,34 +16,43 @@ msgstr ""
 "Content-Type: text/plain; charset=UTF-8\n"
 "Content-Transfer-Encoding: 8bit\n"
 "Plural-Forms: nplurals=2; plural=(n != 1);\n"
-#: hot_osm/templates/components/nav/primary_desktop_nav.html:6
+
+#: hot_osm/templates/components/mobile/mobile_navigation.html:11
+#: hot_osm/templates/components/nav/primary_desktop_nav.html:7
 msgid "Who We Are"
 msgstr ""
 
-#: hot_osm/templates/components/nav/primary_desktop_nav.html:7
+#: hot_osm/templates/components/mobile/mobile_navigation.html:12
+#: hot_osm/templates/components/nav/primary_desktop_nav.html:8
 msgid "Our Work"
 msgstr ""
 
-#: hot_osm/templates/components/nav/primary_desktop_nav.html:8
+#: hot_osm/templates/components/mobile/mobile_navigation.html:13
+#: hot_osm/templates/components/nav/primary_desktop_nav.html:9
 msgid "Our Mapping Hubs"
 msgstr ""
 
-#: hot_osm/templates/components/nav/primary_desktop_nav.html:9
+#: hot_osm/templates/components/mobile/mobile_navigation.html:14
+#: hot_osm/templates/components/nav/primary_desktop_nav.html:10
 msgid "Tools &amp; Resources"
 msgstr ""
 
-#: hot_osm/templates/components/nav/primary_desktop_nav.html:10
+#: hot_osm/templates/components/mobile/mobile_navigation.html:15
+#: hot_osm/templates/components/nav/primary_desktop_nav.html:11
 msgid "Get Involved"
 msgstr ""
 
-#: hot_osm/templates/components/nav/primary_desktop_nav.html:11
+#: hot_osm/templates/components/mobile/mobile_navigation.html:16
+#: hot_osm/templates/components/nav/primary_desktop_nav.html:12
 msgid "Start Mapping"
 msgstr ""
 
-#: hot_osm/templates/components/nav/secondary_desktop_nav.html:11
+#: hot_osm/templates/components/mobile/mobile_navigation.html:17
+#: hot_osm/templates/components/nav/secondary_desktop_nav.html:12
 msgid "News"
 msgstr ""
 
-#: hot_osm/templates/components/nav/secondary_desktop_nav.html:12
+#: hot_osm/templates/components/mobile/mobile_navigation.html:18
+#: hot_osm/templates/components/nav/secondary_desktop_nav.html:13
 msgid "Contact Us"
 msgstr ""

hot_osm/locale/es/LC_MESSAGES/django.po

@@ -3,12 +3,11 @@
 # This file is distributed under the same license as the PACKAGE package.
 # FIRST AUTHOR <EMAIL@ADDRESS>, YEAR.
 #
-#, fuzzy
 msgid ""
 msgstr ""
 "Project-Id-Version: PACKAGE VERSION\n"
 "Report-Msgid-Bugs-To: \n"
-"POT-Creation-Date: 2024-02-17 13:37+0000\n"
+"POT-Creation-Date: 2024-03-14 08:59+0000\n"
 "PO-Revision-Date: YEAR-MO-DA HO:MI+ZONE\n"
 "Last-Translator: FULL NAME <EMAIL@ADDRESS>\n"
 "Language-Team: LANGUAGE <[email protected]>\n"
@@ -17,34 +16,43 @@ msgstr ""
 "Content-Type: text/plain; charset=UTF-8\n"
 "Content-Transfer-Encoding: 8bit\n"
 "Plural-Forms: nplurals=2; plural=(n != 1);\n"
-#: hot_osm/templates/components/nav/primary_desktop_nav.html:6
-msgid "Who We Are"
-msgstr ""
 
+#: hot_osm/templates/components/mobile/mobile_navigation.html:11
 #: hot_osm/templates/components/nav/primary_desktop_nav.html:7
-msgid "Our Work"
-msgstr ""
+msgid "Who We Are"
+msgstr "Quiénes somos"
 
+#: hot_osm/templates/components/mobile/mobile_navigation.html:12
 #: hot_osm/templates/components/nav/primary_desktop_nav.html:8
+msgid "Our Work"
+msgstr "Nuestro trabajo"
+
+#: hot_osm/templates/components/mobile/mobile_navigation.html:13
+#: hot_osm/templates/components/nav/primary_desktop_nav.html:9
 msgid "Our Mapping Hubs"
 msgstr ""
 
-#: hot_osm/templates/components/nav/primary_desktop_nav.html:9
+#: hot_osm/templates/components/mobile/mobile_navigation.html:14
+#: hot_osm/templates/components/nav/primary_desktop_nav.html:10
 msgid "Tools &amp; Resources"
 msgstr ""
 
-#: hot_osm/templates/components/nav/primary_desktop_nav.html:10
+#: hot_osm/templates/components/mobile/mobile_navigation.html:15
+#: hot_osm/templates/components/nav/primary_desktop_nav.html:11
 msgid "Get Involved"
 msgstr ""
 
-#: hot_osm/templates/components/nav/primary_desktop_nav.html:11
+#: hot_osm/templates/components/mobile/mobile_navigation.html:16
+#: hot_osm/templates/components/nav/primary_desktop_nav.html:12
 msgid "Start Mapping"
 msgstr ""
 
-#: hot_osm/templates/components/nav/secondary_desktop_nav.html:11
+#: hot_osm/templates/components/mobile/mobile_navigation.html:17
+#: hot_osm/templates/components/nav/secondary_desktop_nav.html:12
 msgid "News"
 msgstr ""
 
-#: hot_osm/templates/components/nav/secondary_desktop_nav.html:12
+#: hot_osm/templates/components/mobile/mobile_navigation.html:18
+#: hot_osm/templates/components/nav/secondary_desktop_nav.html:13
 msgid "Contact Us"
 msgstr ""

hot_osm/locale/fr/LC_MESSAGES/django.po

@@ -3,12 +3,11 @@
 # This file is distributed under the same license as the PACKAGE package.
 # FIRST AUTHOR <EMAIL@ADDRESS>, YEAR.
 #
-#, fuzzy
 msgid ""
 msgstr ""
 "Project-Id-Version: PACKAGE VERSION\n"
 "Report-Msgid-Bugs-To: \n"
-"POT-Creation-Date: 2024-02-17 13:37+0000\n"
+"POT-Creation-Date: 2024-03-14 08:59+0000\n"
 "PO-Revision-Date: YEAR-MO-DA HO:MI+ZONE\n"
 "Last-Translator: FULL NAME <EMAIL@ADDRESS>\n"
 "Language-Team: LANGUAGE <[email protected]>\n"
@@ -17,34 +16,43 @@ msgstr ""
 "Content-Type: text/plain; charset=UTF-8\n"
 "Content-Transfer-Encoding: 8bit\n"
 "Plural-Forms: nplurals=2; plural=(n > 1);\n"
-#: hot_osm/templates/components/nav/primary_desktop_nav.html:6
-msgid "Who We Are"
-msgstr ""
 
+#: hot_osm/templates/components/mobile/mobile_navigation.html:11
 #: hot_osm/templates/components/nav/primary_desktop_nav.html:7
-msgid "Our Work"
-msgstr ""
+msgid "Who We Are"
+msgstr "Qui nous sommes"
 
+#: hot_osm/templates/components/mobile/mobile_navigation.html:12
 #: hot_osm/templates/components/nav/primary_desktop_nav.html:8
+msgid "Our Work"
+msgstr "Nos travaux"
+
+#: hot_osm/templates/components/mobile/mobile_navigation.html:13
+#: hot_osm/templates/components/nav/primary_desktop_nav.html:9
 msgid "Our Mapping Hubs"
 msgstr ""
 
-#: hot_osm/templates/components/nav/primary_desktop_nav.html:9
+#: hot_osm/templates/components/mobile/mobile_navigation.html:14
+#: hot_osm/templates/components/nav/primary_desktop_nav.html:10
 msgid "Tools &amp; Resources"
 msgstr ""
 
-#: hot_osm/templates/components/nav/primary_desktop_nav.html:10
+#: hot_osm/templates/components/mobile/mobile_navigation.html:15
+#: hot_osm/templates/components/nav/primary_desktop_nav.html:11
 msgid "Get Involved"
 msgstr ""
 
-#: hot_osm/templates/components/nav/primary_desktop_nav.html:11
+#: hot_osm/templates/components/mobile/mobile_navigation.html:16
+#: hot_osm/templates/components/nav/primary_desktop_nav.html:12
 msgid "Start Mapping"
 msgstr ""
 
-#: hot_osm/templates/components/nav/secondary_desktop_nav.html:11
+#: hot_osm/templates/components/mobile/mobile_navigation.html:17
+#: hot_osm/templates/components/nav/secondary_desktop_nav.html:12
 msgid "News"
 msgstr ""
 
-#: hot_osm/templates/components/nav/secondary_desktop_nav.html:12
+#: hot_osm/templates/components/mobile/mobile_navigation.html:18
+#: hot_osm/templates/components/nav/secondary_desktop_nav.html:13
 msgid "Contact Us"
 msgstr ""

hot_osm/settings/base.py

@@ -31,6 +31,7 @@
     "home",
     "search",
     "users",
+    "utils",
     "wagtail.contrib.forms",
     "wagtail.contrib.redirects",
     "wagtail.embeds",
@@ -57,13 +58,13 @@
 
 MIDDLEWARE = [
     "django.contrib.sessions.middleware.SessionMiddleware",
+    "django.middleware.locale.LocaleMiddleware",
     "django.middleware.common.CommonMiddleware",
     "django.middleware.csrf.CsrfViewMiddleware",
     "django.contrib.auth.middleware.AuthenticationMiddleware",
     "django.contrib.messages.middleware.MessageMiddleware",
     "django.middleware.clickjacking.XFrameOptionsMiddleware",
     "django.middleware.security.SecurityMiddleware",
-    "django.middleware.locale.LocaleMiddleware",
     "wagtail.contrib.redirects.middleware.RedirectMiddleware",
 ]
 
@@ -74,6 +75,7 @@
         "BACKEND": "django.template.backends.django.DjangoTemplates",
         "DIRS": [
             os.path.join(PROJECT_DIR, "templates"),
+            os.path.join(PROJECT_DIR, "..", "utils", "templates"),
         ],
         "APP_DIRS": True,
         "OPTIONS": {
@@ -126,21 +128,24 @@
 # Internationalization
 # https://docs.djangoproject.com/en/4.2/topics/i18n/
 
-LANGUAGE_CODE = "en-us"
+LANGUAGE_CODE = "en"
 
 TIME_ZONE = "UTC"
 
 USE_I18N = True
 
+USE_L10N = True
+
 WAGTAIL_I18N_ENABLED = True
 
 USE_TZ = True
 
 LOCALE_PATHS = [
     os.path.join(BASE_DIR, "locale"),
+    os.path.join(BASE_DIR, "hot_osm", "locale"),
 ]
 
-WAGTAIL_CONTENT_LANGUAGES = [
+WAGTAIL_CONTENT_LANGUAGES = LANGUAGES = [
     ("en", "English"),
     ("fr", "French"),
     ("es", "Spanish"),

hot_osm/static/css/hot_osm.css

@@ -28,3 +28,26 @@
     --font-size-base-18: 1.125rem; /* 18pt */
     --font-size-base-16: 1rem; /* 16pt */
 }
+
+/* Custom styling for the language select element */
+.language-select {
+  -moz-appearance: none; /* Removes Firefox's default select styling */
+  -webkit-appearance: none; /* Removes Chrome's default select styling */
+  appearance: none; /* Removes the default select styling for other browsers */
+  /* Custom Globe SVG: */
+  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");
+  background-repeat: no-repeat; /* Ensures the SVG only appears once */
+  background-size: 18px 18px; /* Controls the size of the SVG */
+  padding-right: 27.25px; /* Adds space on the right side of the select element to prevent SVG overlap with the text */
+}
+
+/* Removes IE's default dropdown arrow */
+/* .language-select::-ms-expand {
+  display: none;
+} */
+
+/* Removes the default focus outline and box-shadow */
+.language-select:focus {
+  outline: none !important;
+  box-shadow: none !important;
+}

hot_osm/templates/components/mobile/mobile_navigation.html

@@ -1,23 +1,33 @@
+{% load i18n %}
 <div x-show="isMenuOpen"
      @click.outside="isMenuOpen = false"
      class="font-barlow lg:hidden"
      id="mobile-menu">
     <nav class="gap-y-1 pb-3 pt-2 font-medium text-base-18"
          aria-label="Global - Mobile">
         <ul class="list-none pl-0">
-            <li>{% include "../mobile/mobile_menu_link.html" with link="#" text="Who We Are" selected=True parent=True %}</li>
-            <li>{% include "../mobile/mobile_menu_link.html" with link="#" text="Our Work" parent=True %}</li>
+            {% comment %} Strings for translation {% endcomment %}
+            {% translate "Who We Are" as who_we_are %}
+            {% translate "Our Work" as our_work %}
+            {% translate "Our Mapping Hubs" as our_mapping_hubs %}
+            {% translate "Tools &amp; Resources" as tools_resources %}
+            {% translate "Get Involved" as get_involved %}
+            {% translate "Start Mapping" as start_mapping %}
+            {% translate "News" as news %}
+            {% translate "Contact Us" as contact_us %}
+            <li>{% include "../mobile/mobile_menu_link.html" with link="#" text=who_we_are selected=True parent=True %}</li>
+            <li>{% include "../mobile/mobile_menu_link.html" with link="#" text=our_work parent=True %}</li>
             <li>{% include "../mobile/mobile_menu_link.html" with link="#" text="Open Mapping Hubs" parent=True %}</li>
-            <li>{% include "../mobile/mobile_menu_link.html" with link="#" text="Tools &amp; Resources" parent=True %}</li>
-            <li>{% include "../mobile/mobile_menu_link.html" with link="#" text="Get Involved" parent=True %}</li>
-            <li>{% include "../branded_elements/button.html" with text="Start Mapping" classes="my-2 ml-3 mr-4" %}</li>
+            <li>{% include "../mobile/mobile_menu_link.html" with link="#" text=tools_resources parent=True %}</li>
+            <li>{% include "../mobile/mobile_menu_link.html" with link="#" text=get_involved parent=True %}</li>
+            <li>{% include "../branded_elements/button.html" with text=start_mapping classes="my-2 ml-3 mr-4" %}</li>
         </ul>
     </nav>
     <nav class="border-t border-b border-hot-dark-grey py-2">
         <ul class="gap-y-0.5 list-none pl-0">
-            <li>{% include "../mobile/mobile_menu_link.html" with link="#" text="EN" parent=True classes="px-4" %}</li>
-            <li>{% include "../mobile/mobile_menu_link.html" with link="#" text="News" classes="px-4" %}</li>
-            <li>{% include "../mobile/mobile_menu_link.html" with link="#" text="Contact Us" classes="px-4" %}</li>
+            <li>{% include "language_switcher.html" %}</li>
+            <li>{% include "../mobile/mobile_menu_link.html" with link="#" text=news %}</li>
+            <li>{% include "../mobile/mobile_menu_link.html" with link="#" text=contact_us %}</li>
         </ul>
     </nav>
 </div>

hot_osm/templates/components/nav/primary_desktop_nav.html

@@ -12,11 +12,9 @@
             <li>{% include "../branded_elements/link.html" with link="#" text=who_we_are classes="py-2" parent=True %}</li>
             <li>{% include "../branded_elements/link.html" with link="#" text=our_work classes="py-2" parent=True %}</li>
             <li>{% include "../branded_elements/link.html" with link="#" text=our_mapping_hubs classes="py-2" parent=True %}</li>
-            <li>
-                {% include "../branded_elements/link.html" with link="#" text="Tools &amp; Resources" classes="py-2" parent=True %}
-            </li>
-            <li>{% include "../branded_elements/link.html" with link="#" text="Get Involved" classes="py-2" parent=True %}</li>
-            <li>{% include "../branded_elements/button.html" with text="Start Mapping" %}</li>
+            <li>{% include "../branded_elements/link.html" with link="#" text=tools_resources classes="py-2" parent=True %}</li>
+            {% include "../branded_elements/link.html" with link="#" text=get_involved classes="py-2" parent=True %}
+            <li>{% include "../branded_elements/button.html" with text=start_mapping %}</li>
         </ul>
     </nav>
 </div>

hot_osm/templates/components/nav/secondary_desktop_nav.html

@@ -11,9 +11,9 @@
             {% translate "News" as news %}
             {% translate "Contact Us" as contact_us %}
             <li>{% include "../search/search_icon.html" %}</li>
-            <li>{% include "../branded_elements/link.html" with link="#" text="EN" parent=True %}</li>
-            <li>{% include "../branded_elements/link.html" with link="#" text="News" %}</li>
-            <li>{% include "../branded_elements/link.html" with link="#" text="Contact Us" %}</li>
+            <li>{% include "language_switcher.html" %}</li>
+            <li>{% include "../branded_elements/link.html" with link="#" text=news %}</li>
+            <li>{% include "../branded_elements/link.html" with link="#" text=contact_us %}</li>
         </ul>
     </nav>
 </div>

hot_osm/urls.py

@@ -9,6 +9,7 @@
 from search import views as search_views
 
 urlpatterns = [
+    path("i18n/", include("django.conf.urls.i18n")),
     path("django-admin/", admin.site.urls),
     path("admin/", include(wagtailadmin_urls)),
     path("documents/", include(wagtaildocs_urls)),

utils/admin.py

@@ -0,0 +1,3 @@
+from django.contrib import admin
+
+# Register your models here.

utils/apps.py

@@ -0,0 +1,6 @@
+from django.apps import AppConfig
+
+
+class UtilsConfig(AppConfig):
+    default_auto_field = "django.db.models.BigAutoField"
+    name = "utils"

utils/models.py

@@ -0,0 +1,3 @@
+from django.db import models
+
+# Create your models here.