Merge pull request #73 from OpenSourcePolitics/fix/display_of_transla…

…tion_responsive fix: Fix the display of the language chooser while in cellphone format
OpenSourcePolitics · Oct 23, 2023 · 825e8e9 · 825e8e9
2 parents 105f9bd + 88877a2
commit 825e8e9
Show file tree

Hide file tree

Showing 3 changed files with 50 additions and 20 deletions.
diff --git a/app/packs/stylesheets/decidim/decidim_application.scss b/app/packs/stylesheets/decidim/decidim_application.scss
@@ -222,4 +222,28 @@ body, h1, h2, h3, h4, h5, h6, p, a, span {
       border-color: transparent;
     }
   }
+}
+
+.g-language-choose-medium {
+  .goog-te-gadget {
+    text-indent: -9999px;
+    font-size: 0;
+
+    & > span {
+      display: none;
+    }
+
+    & > div {
+      text-indent: 0;
+    }
+
+    select {
+      font-family: $body-font-family;
+      font-size: 1rem;
+      text-align: center;
+      background-color: transparent;
+      color: var(--secondary);
+      border-color: transparent;
+    }
+  }
 }
diff --git a/app/views/layouts/decidim/_language_chooser.html.erb b/app/views/layouts/decidim/_language_chooser.html.erb
@@ -82,4 +82,7 @@
   <div class="topbar__dropmenu language-choose g-language-choose show-for-medium" data-set="language-holder">
     <div class="js-append" id="google_translate_element"></div>
   </div>
+    <div class="g-language-choose-medium hide-for-medium" data-set="language-holder">
+      <div class="js-append" id="google_translate_element"></div>
+    </div>
 <% end %>
diff --git a/app/views/layouts/decidim/_wrapper.html.erb b/app/views/layouts/decidim/_wrapper.html.erb
@@ -22,26 +22,22 @@ end
       </button>
       <!-- Menu -->
       <div class="hide-for-medium" data-set="nav-holder">
-
-      <div class="navbar js-append">
-        <div class="row column">
-          <nav class="main-nav">
-            <ul>
-              <li class="main-nav__link">
-                <a class="main-nav" href="/processes/Citywidepb2023">About</a>
-              </li>
-              <li class="main-nav__link">
-                <a class="main-nav" href="/processes/vote">Election Center</a>
-              </li>
-              <li class="main-nav__link">
-                <%= render partial: "layouts/decidim/language_chooser" %>
-              </li>
-            </ul>
-          </nav>
+        <div class="navbar js-append">
+          <div class="row column">
+            <nav class="main-nav">
+              <ul>
+                <li class="main-nav__link">
+                  <a class="main-nav" href="/processes/Citywidepb2023">About</a>
+                </li>
+                <li class="main-nav__link">
+                  <a class="main-nav" href="/processes/vote">Election Center</a>
+                </li>
+              </ul>
+            </nav>
+          </div>
         </div>
       </div>
 
-      </div>
       <div class="hide-for-medium usermenu-off-canvas-holder"
            data-set="nav-login-holder"></div>
       <div class="hide-for-medium mt-s ml-s mr-s search-off-canvas-holder"
@@ -82,7 +78,9 @@ end
               </div>
 
               <% if current_user %>
-                <%= render partial: "layouts/decidim/language_chooser" %>
+                <div class="topbar__dropmenu language-choose g-language-choose show-for-medium" data-set="language-holder">
+                  <div class="js-append" id="google_translate_element"></div>
+                </div>
                 <%= render partial: "layouts/decidim/social_media_links" %>
                 <%= render partial: "layouts/decidim/admin_links" %>
                 <nav class="topbar__dropmenu topbar__user__logged" aria-label="<%= t("layouts.decidim.header.user_menu") %>">
@@ -107,19 +105,24 @@ end
                         <!-- Repeated due to dropdown limitations -->
                         <ul class="menu is-dropdown-submenu js-append usermenu-off-canvas">
                           <%= render partial: "layouts/decidim/user_menu" %>
-
                         </ul>
+                      <div class="js-append hide-for-medium">
+                        <%= render partial: "layouts/decidim/language_chooser" %>
+                      </div>
                       </div>
                     </li>
                   </ul>
+
                 </nav>
               <% else %>
                 <div class="topbar__user show-for-medium" data-set="nav-login-holder">
                   <div class="topbar__user__login js-append">
                     <%= link_to t("layouts.decidim.header.sign_in"), decidim.new_user_session_path, class: "sign-in-link" %>
                   </div>
+                  <div class="js-append">
+                    <%= render partial: "layouts/decidim/language_chooser" %>
+                  </div>
                 </div>
-                <%= render partial: "layouts/decidim/language_chooser" %>
                 <%= render partial: "layouts/decidim/social_media_links" %>
                 <%= render partial: "layouts/decidim/admin_links" %>
               <% end %>