Merge pull request #5113 from solidusio/elia/locale-selection-ui

Improve the CSS of the admin locale selection and login nav
solidusio · Jun 1, 2023 · 9b11dc7 · 9b11dc7
2 parents aa44e71 + 3da9d65
commit 9b11dc7
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 14 deletions.
diff --git a/backend/app/assets/stylesheets/spree/backend/components/_navigation.scss b/backend/app/assets/stylesheets/spree/backend/components/_navigation.scss
@@ -14,6 +14,7 @@ $padding-y-navbar-submenu: 9px;
  display: block;
  height: 39px;
  z-index: 1;
+ margin-bottom: 1em;
 
  span {
  font-size: $font-size-sm;
@@ -288,22 +289,34 @@ nav.menu {
  }
 }
 
-.admin-locale-selection {
- margin: 1em;
+.admin-navbar-selection {
+ margin: 0 1.5em;
  position: relative;
+ overflow: hidden;
+ display: inline-flex;
+ align-items: baseline;
+ min-height: 1.5em;
+
+ i {
+ cursor: pointer;
+ padding-right: 2.4em;
+ min-width: 1em;
+ height: 1em;
+ }
 
  &::after {
- content: "\f0ac";
  font-family: "FontAwesome";
  position: absolute;
  top: 0;
  left: 0;
  padding: .5rem 0 .5rem .25rem;
- z-index: -1;
  }
 
- .admin-nav-hidden & {
- .js-locale-selection.custom-select {
+ .admin-nav-hidden & {
+ position: relative;
+
+ select {
+ background-image: none;
  background-color: transparent;
  background-position: 1.5rem center;
  background-size: 8px 9px;
@@ -313,6 +326,7 @@ nav.menu {
  overflow: hidden;
  text-indent: 1rem;
  z-index: 1;
+ cursor: pointer;
 
  &:focus {
  box-shadow: none;
@@ -326,14 +340,16 @@ nav.menu {
  bottom: 0;
 }
 
+body.admin-nav-hidden .admin-nav:not(.fits) {
+ .admin-navbar-selection::after {
+ z-index: 0;
+ }
+}
+
 .admin-login-nav {
  list-style: none;
  padding: 0;
- margin: 1rem 0;
-
- li {
- padding: 0.3rem 1.2rem;
- }
+ margin: 1em 1.5em;
 
  a {
  display: inline-block;
@@ -345,7 +361,8 @@ nav.menu {
  }
 
  i {
- margin-right: 0.5rem;
+ margin-right: 1.2em;
+ min-width: 1em;
  }
 }
 

diff --git a/backend/app/views/spree/admin/shared/_locale_selection.html.erb b/backend/app/views/spree/admin/shared/_locale_selection.html.erb
@@ -1,6 +1,7 @@
 <% available_locales = Spree.i18n_available_locales %>
 <% if available_locales.size > 1 %>
- <div class="admin-locale-selection">
+ <label class="admin-navbar-selection admin-locale-selection">
+ <i class="fa fa-globe fa-fw" title="<%= I18n.t('spree.choose_dashboard_locale') %>"></i>
  <select class="js-locale-selection custom-select fullwidth">
  <%=
  options_for_select(
@@ -11,5 +12,5 @@
  )
  %>
  </select>
- </div>
+ </label>
 <% end %>