Skip to content

Commit

Permalink
Merge pull request #18 from hotosm/feat/issue-12/language-switcher
Browse files Browse the repository at this point in the history
Feat/issue 12/language switcher - Responsive Language Switcher with Custom SVG and Padding
  • Loading branch information
katporks authored Mar 18, 2024
2 parents c32972e + 11187b8 commit b5d1068
Show file tree
Hide file tree
Showing 23 changed files with 162 additions and 53 deletions.
Binary file added hot_osm/locale/en/LC_MESSAGES/django.mo
Binary file not shown.
28 changes: 18 additions & 10 deletions hot_osm/locale/en/LC_MESSAGES/django.po
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand All @@ -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 ""
Binary file added hot_osm/locale/es/LC_MESSAGES/django.mo
Binary file not shown.
32 changes: 20 additions & 12 deletions hot_osm/locale/es/LC_MESSAGES/django.po
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand All @@ -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 ""
Binary file added hot_osm/locale/fr/LC_MESSAGES/django.mo
Binary file not shown.
32 changes: 20 additions & 12 deletions hot_osm/locale/fr/LC_MESSAGES/django.po
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand All @@ -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 ""
11 changes: 8 additions & 3 deletions hot_osm/settings/base.py
Original file line number Diff line number Diff line change
Expand Up @@ -31,6 +31,7 @@
"home",
"search",
"users",
"utils",
"wagtail.contrib.forms",
"wagtail.contrib.redirects",
"wagtail.embeds",
Expand All @@ -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",
]

Expand All @@ -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": {
Expand Down Expand Up @@ -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"),
Expand Down
23 changes: 23 additions & 0 deletions hot_osm/static/css/hot_osm.css
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
26 changes: 18 additions & 8 deletions hot_osm/templates/components/mobile/mobile_navigation.html
Original file line number Diff line number Diff line change
@@ -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>
8 changes: 3 additions & 5 deletions hot_osm/templates/components/nav/primary_desktop_nav.html
Original file line number Diff line number Diff line change
Expand Up @@ -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>
6 changes: 3 additions & 3 deletions hot_osm/templates/components/nav/secondary_desktop_nav.html
Original file line number Diff line number Diff line change
Expand Up @@ -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>
1 change: 1 addition & 0 deletions hot_osm/urls.py
Original file line number Diff line number Diff line change
Expand Up @@ -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)),
Expand Down
Empty file added utils/__init__.py
Empty file.
3 changes: 3 additions & 0 deletions utils/admin.py
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
from django.contrib import admin

# Register your models here.
6 changes: 6 additions & 0 deletions utils/apps.py
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
from django.apps import AppConfig


class UtilsConfig(AppConfig):
default_auto_field = "django.db.models.BigAutoField"
name = "utils"
Empty file added utils/migrations/__init__.py
Empty file.
3 changes: 3 additions & 0 deletions utils/models.py
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
from django.db import models

# Create your models here.
Loading

0 comments on commit b5d1068

Please sign in to comment.