move language dropdown to personaltools

conestack · May 25, 2024 · 2c3ab6c · 2c3ab6c
1 parent d63b1b5
commit 2c3ab6c
Show file tree

Hide file tree

Showing 5 changed files with 36 additions and 25 deletions.
diff --git a/scss/styles.scss b/scss/styles.scss
@@ -193,37 +193,42 @@ body {
         #livesearch {
             order: 1;
             width: 100%;
-            padding-left: 40px!important;
+            padding-left: 40px !important;
         }
     }
     @include media-breakpoint-down(sm) {
+        #personaltools {
+            flex-direction: row-reverse;
+        }
         #personaltools > div {
-            padding: 5px 0;
-            width: 50%;
-            display:inline-flex!important; 
+            padding-left: 15px !important;
+            padding-right: 5px !important;
         }
         #personaltools-dropdown {
-            flex-direction: column;
-
-            .dropdown-menu {
-                position: relative;
-                width: 200%;
-                transform: translateX(-50%);
-            }
+            order: 1;
+        }
+        #language-dropdown {
+            order: 2;
+        }
+        #colortoggler {
+            order: 3;
         }
     }
     @include media-breakpoint-up(lg) {
         #navbar-content-wrapper {
-            box-shadow:none!important;
+            box-shadow: none !important;
         }
         #navbar-content-wrapper, #navbar-content, #mainmenu {
             height: 100%;
         }
         #personaltools-dropdown {
-            order:2;
+            order: 3;
+        }
+        #language-dropdown {
+            order: 2;
         }
         #colortoggler {
-            order:1;
+            order: 1;
         }
     }
     @include media-breakpoint-between(lg, xxl) {

diff --git a/src/cone/app/browser/static/cone/cone.app.css b/src/cone/app/browser/static/cone/cone.app.css
@@ -214,18 +214,21 @@ body {
   }
 }
 @media (max-width: 575.98px) {
+  #header-main #personaltools {
+    flex-direction: row-reverse;
+  }
   #header-main #personaltools > div {
-    padding: 5px 0;
-    width: 50%;
-    display: inline-flex !important;
+    padding-left: 15px !important;
+    padding-right: 5px !important;
   }
   #header-main #personaltools-dropdown {
-    flex-direction: column;
+    order: 1;
   }
-  #header-main #personaltools-dropdown .dropdown-menu {
-    position: relative;
-    width: 200%;
-    transform: translateX(-50%);
+  #header-main #language-dropdown {
+    order: 2;
+  }
+  #header-main #colortoggler {
+    order: 3;
   }
 }
 @media (min-width: 992px) {
@@ -236,6 +239,9 @@ body {
     height: 100%;
   }
   #header-main #personaltools-dropdown {
+    order: 3;
+  }
+  #header-main #language-dropdown {
     order: 2;
   }
   #header-main #colortoggler {

diff --git a/src/cone/app/browser/static/cone/cone.app.min.css b/src/cone/app/browser/static/cone/cone.app.min.css
diff --git a/src/cone/app/browser/templates/layout.pt b/src/cone/app/browser/templates/layout.pt
@@ -97,8 +97,6 @@
                   <tal:livesearch
                     condition="config.livesearch"
                     replace="structure tile('livesearch')" />
-
-                  <tal:language replace="structure tile('language')" />
                 </div>
               </div>
             </div>

diff --git a/src/cone/app/browser/templates/personaltools.pt b/src/cone/app/browser/templates/personaltools.pt
@@ -7,6 +7,8 @@
 
     <tal:colortoggler replace="structure tile('colortoggler')" />
 
+    <tal:language replace="structure tile('language')" />
+
     <div id="personaltools-dropdown"
          class="nav-item dropdown h-100 mx-0 mx-sm-3 my-1 my-sm-0">