Make dropdown standard html

jamulussoftware · Jul 1, 2024 · bb86c3c · bb86c3c
1 parent 8330b98
commit bb86c3c
Show file tree

Hide file tree

Showing 4 changed files with 26 additions and 125 deletions.
diff --git a/_includes/headtags.html b/_includes/headtags.html
@@ -11,6 +11,7 @@
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <link rel="stylesheet" href="/assets/css/fox.min.css">
 <link rel="stylesheet" href="/assets/css/fw.css">
+<link rel="stylesheet" href="/assets/css/langsel.css">
 <noscript>
   <link rel="stylesheet" href="/assets/css/noscript.css">
 </noscript>

diff --git a/_includes/langselect.html b/_includes/langselect.html
@@ -2,36 +2,21 @@
   <div id="langselect">
     <!-- Language Dropdown -->
     <div class="language-dropdown">
-      <button class="dropdown-button" aria-haspopup="true" aria-expanded="false" aria-controls="dropdown-menu">
-        <span class="dropdown-button-content">
-          <img src="{{ site.baseurl }}/assets/img/lang-icon.svg" alt="Language Icon" class="lang-icon">
-          <span class="lang-text">{{ site.language_names[site.active_lang] }} &#9660;</span>
-          <link rel="stylesheet" href="{{ site.baseurl }}/assets/css/langsel.css">
-        </span>
-      </button>
-      <div class="dropdown-content" id="dropdown-menu" role="menu">
-        <ul>
-          {% assign sorted_languages = site.languages | sort %}
-          {% for lng in sorted_languages %}
-            {% if lng == site.active_lang %}
-              <li class="selected" role="menuitem" aria-current="page" tabindex="0" data-slang="{{ lng }}">{{ site.language_names[lng] }}</li>
-            {% else %}
-              {% if lng == site.default_lang %}
-                {% capture langlink %}
-                  {{ site.baseurl }}{{ page.url | replace: '/*' }}
-                {% endcapture %}
-                {% capture lang_rel %}canonical{% endcapture %}
-              {% else %}
-                {% capture langlink %}
-                  {{ site.baseurl }}/{{ lng }}{{ page.url }}
-                {% endcapture %}
-                {% capture lang_rel %}alternate{% endcapture %}
-              {% endif %}
-              <li role="menuitem" tabindex="0"><a href="{{ langlink }}" rel="{{ lang_rel }}" data-slang="{{ lng }}">{{ site.language_names[lng] }}</a></li>
-            {% endif %}
-          {% endfor %}
-        </ul>
-      </div>
+      <select id="language-select" onchange="location = this.value;">
+        {% assign sorted_languages = site.languages | sort %}
+        {% for lng in sorted_languages %}
+          {% if lng == site.default_lang %}
+            {% capture langlink %} {{ page.url }}{% endcapture %}
+            {% capture lang_rel %}canonical{% endcapture %}
+          {% else %}
+            {% capture langlink %}{{ site.baseurl }}/{{ lng }}{{ page.url }}{% endcapture %}
+            {% capture lang_rel %}alternate{% endcapture %}
+          {% endif %}
+          <option value="{{ langlink }}" {% if lng == site.active_lang %}selected{% endif %}>
+            {{ site.language_names[lng] }}
+          </option>
+        {% endfor %}
+      </select>
     </div>
   </div>
 </div>
diff --git a/assets/css/langsel.css b/assets/css/langsel.css
@@ -2,28 +2,11 @@
   text-align: right;
 }
 
-#langselect ul li {
-  display: inline-block;
-  list-style-type: none;
-  margin: 0 0.8em 0 0;
-  padding: 0;
-}
-
-#langselect .selected {
-  font-weight: bold;
-  text-decoration: none;
-  color: #2b7288; /* Dark moderate cyan */
-  border: 2px solid #2b7288; /* Border with the same color */
-  border-radius: 5px; /* Rounded corners */
-  padding: 0;
-}
-
 .language-dropdown {
-  position: relative;
   display: inline-block;
 }
 
-.dropdown-button {
+#language-select {
   background-color: #3daed2; /* Aquarius */
   color: white;
   padding: 6px;
@@ -32,87 +15,27 @@
   border-radius: 5px;
   cursor: pointer;
   text-align: left;
-  display: flex;
-  align-items: center;
-}
-
-.dropdown-button-content {
-  display: flex;
-  align-items: center;
-}
-
-.lang-icon {
-  height: 18px;
-  margin-right: 8px;
-}
-
-.lang-text {
-  display: inline-block;
-}
-
-.dropdown-button:hover, .dropdown-button:focus {
-  text-decoration: none;
-  transition: 0.4s;
-  opacity: 0.8;
 }
 
-.dropdown-content {
-  display: none;
-  position: absolute;
+#language-select option {
+  color: #2b7288; /* Dark moderate cyan */
   background-color: #eaf8fd; /* Light cyan */
-  min-width: 80px;
-  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
-  border-radius: 5px;
-  z-index: 1;
-  padding: 0;
-  margin: 0;
-  list-style-type: none;
-  white-space: normal;
-  left: 0;
-  text-align: left;
-}
-
-.language-dropdown:focus-within .dropdown-content {
-  display: block;
 }
 
-.dropdown-content ul {
-  padding: 10px;
-  margin: 0;
-  text-align: left;
-}
-
-.dropdown-content li {
-  width: 100%;
-  white-space: nowrap;
-  margin: 0; /* Vertical margin */
-}
-
-.dropdown-content a {
-  padding: 1px 10px; /* Adjusted padding to reduce vertical space */
-  text-decoration: none;
-  display: block;
-  color: #2b7288;
+#language-select option[selected] {
+  font-weight: bold;
 }
 
-.dropdown-content a:hover, .dropdown-content a:focus {
-  background-color: #f1f1f1; /* Whitesmoke */
-  outline: none;
-  border-radius: 5px;
+/* Styling for hover and focus states */
+#language-select:hover, #language-select:focus {
+  opacity: 0.8;
+  transition: 0.4s;
 }
 
-/* Media query for small screens */
 @media (max-height: 500px) {
-  .dropdown-content {
+  #language-select {
     max-height: 200px; /* Adjust the height as needed */
     overflow-y: auto; /* Enable vertical scrolling */
     overflow-x: hidden; /* Disable horizontal scrolling */
   }
 }
-
-/* Additional styling for focus state to enhance accessibility */
-#langselect ul li:focus, #langselect ul li:focus-within {
-  outline: 2px solid #2b7288;
-  outline-offset: 0;
-  border-radius: 5px;
-}
diff --git a/assets/img/lang-icon.svg b/assets/img/lang-icon.svg