Fix merge conflicts and CSS changes

internetarchive · Feb 3, 2022 · fb83896 · fb83896
1 parent a7ab7b1
commit fb83896
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 38 deletions.
diff --git a/openlibrary/templates/site/alert.html b/openlibrary/templates/site/alert.html
@@ -4,9 +4,9 @@
 <div id="topNotice">
   <div class="page-banner page-banner-black page-banner-center">
     <div class="iaBar">
-        <a href="https://archive.org"><img alt="Internet Archive logo" src="/static/images/ia-logo.svg" width="160"></a>
+        <a class="iaLogo" href="https://archive.org"><img alt="Internet Archive logo" src="/static/images/ia-logo.svg" width="160"></a>
         <a class="ghost-btn" href="https://archive.org/donate/?platform=ol&origin=olwww-TopNavDonateButton" data-ol-link-track="IABar|DonateButton">Donate <span class="heart" aria-hidden="true">♥</span></a>
-      <div class="language-component" id="footer-locale-menu">
+      <div class="language-component header-dropdown" id="footer-locale-menu">
         <details>
           <summary>
             <img class="translate-icon" src="/static/images/language-icon.svg" title="Change Website Language" alt="Change Website Language"/>          </summary> 

diff --git a/static/css/components/iaBar.less b/static/css/components/iaBar.less
@@ -9,9 +9,12 @@
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
-  // This is to right align the donate button
-  a:last-child {
-    margin-left: auto;
+  // This is to right align the donate button and language dropdown
+  .iaLogo {
+    flex: 1;
+  }
+  .ghost-btn {
+    margin-right: 20px;
   }
 }
 // Changes color of heart unicode character

diff --git a/static/css/components/language.less b/static/css/components/language.less
@@ -1,15 +1,10 @@
-footer {
-  .lang-details {
-    width: 150px;
-  }
-  .lang-summary {
-    font-weight: 600;
-  }
-}
 .translate-icon {
   width: 1.5em;
   vertical-align: middle;
 }
+.language-component {
+  cursor: pointer;
+}
 .language-component summary::marker {
   content: "";
 }
@@ -18,13 +13,6 @@ footer {
   zoom: 70%;
   vertical-align: middle;
 }
-.language-dropdown-component {
-  margin: 0 !important;
-  li {
-    padding: 3px 8px;
-    margin: 0;
-  }
-}
 .dropdown-menu {
   width: 150px;
   text-align: left;
@@ -55,23 +43,19 @@ footer {
     // stylelint-enable max-nesting-depth, selector-max-specificity
   }
 }
-@media only screen and (min-width: @width-breakpoint-tablet) {
-  .language-component {
-    display: none;
-  }
-  .iaBar .language-component {
-    position: relative;
-    display: block;
-    // stylelint-disable selector-max-specificity, max-nesting-depth
-    .language-dropdown-component {
-      position: absolute;
-      right: 0;
-      top: 30px;
-      z-index: @z-index-level-5;
-      li {
-        padding: 8px;
-      }
+
+.iaBar .language-component {
+  position: relative;
+  display: block;
+  // stylelint-disable selector-max-specificity, max-nesting-depth
+  .language-dropdown-component {
+    position: absolute;
+    right: 0;
+    top: 30px;
+    z-index: @z-index-level-5;
+    li {
+      padding: 8px 12px;
     }
-    // stylelint-enable max-nesting-depth, selector-max-specificity
   }
-}
+  // stylelint-enable max-nesting-depth, selector-max-specificity
+}