Added comments for language switcher documentation

hotosm · Mar 14, 2024 · 7fe30d0 · 7fe30d0
1 parent a460bc0
commit 7fe30d0
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 11 deletions.
diff --git a/hot_osm/static/css/hot_osm.css b/hot_osm/static/css/hot_osm.css
@@ -29,21 +29,24 @@
     --font-size-base-16: 1rem; /* 16pt */
 }
 
+/* Custom styling for the language select element */
 .language-select {
-    -moz-appearance: none;
-    -webkit-appearance: none;
-    appearance: none;
-    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;
-    background-size: 18px 18px; /* Adjust the size here */
-    /* background-position: calc(100% - 0.5rem) center; */
-    padding-right: 27.25px;
+  -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 */
 }
-  /* For IE (thanks to @SaiManoj) */
+
+/* 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;

diff --git a/utils/templates/language_switcher.html b/utils/templates/language_switcher.html
@@ -1,18 +1,20 @@
 {% load i18n %}
 {% load util_filters %}
-{% get_current_language as LANGUAGE_CODE %} {# returns preferred lang as a string - i.e. "en" #}
+{% get_current_language as LANGUAGE_CODE %} {# Fetches the current language code, e.g., "en" #}
 <div x-data="{language: '{{ LANGUAGE_CODE }}'}">
     <form action="{% url "set_language" %}" method="post">
         {% csrf_token %}
         <input name="next" type="hidden" value="{{ redirect_to }}">
+        <!-- The select element with custom styling for language selection -->
         <select name="language"
                 x-model="language"
                 @change="$event.target.form.submit()"
                 arial-labelledby="language-select-label"
                 class="language-select hover:underline border-none appearance-none focus:outline-none pl-4 cursor-pointer lg:pl-0">
-            {% get_available_languages as LANGUAGES %} {# returns a list of tuples - i.e. ("en", "English")  #}
+            {% get_available_languages as LANGUAGES %} {# Fetches a list of available languages as tuples, e.g., ("en", "English") #}
             {% get_language_info_list for LANGUAGES as languages %}
             {% for language in languages %}
+                <!-- Option elements for each available language -->
                 <option value="{{ language.code }}"
                         {% if language.code == LANGUAGE_CODE %}selected{% endif %}>
                     {{ language.name_local|title_case }}