Fix menu width

fixes #1441

Author: mariodian

css/obBase.css

@@ -490,16 +490,16 @@ form {
 }
 
 .listingDoesNotShipToYou {
-  background-color: rgba(37, 37, 37, 0.65); 
+  background-color: rgba(37, 37, 37, 0.65);
   /*border-radius: 20px;*/
-  height: 20px; 
+  height: 20px;
   left: 32px;
-  line-height: 20px; 
-  padding: 8px 4px; 
-  position: absolute; 
-  text-align: center; 
-  top: calc(50% - 32px); 
-  width: 242px; 
+  line-height: 20px;
+  padding: 8px 4px;
+  position: absolute;
+  text-align: center;
+  top: calc(50% - 32px);
+  width: 242px;
   transition: top .3s cubic-bezier(0, 0, 0.2, 1);
 }
 
@@ -3413,6 +3413,7 @@ input[type="checkbox"].fieldItem:checked + label .togLabelOff {
 .popMenu-navBar {
   top: 50px;
   right: 10px;
+  width: 100%;
   transform: none;
   transition: none;
 }
@@ -3432,10 +3433,15 @@ input[type="checkbox"].fieldItem:checked + label .togLabelOff {
   color: #fff;
   font-size: 13px;
   padding: 10px 0;
-  width: 230px;
+  width: auto;
+  min-width: 230px;
   overflow: hidden;
   transform: translateY(-110%);
-  transition: transform 200ms;   
+  transition: transform 200ms;
+}
+
+.popMenu-navBarSubMenu-servers {
+    width: 230px;
 }
 
 .popMenu-opened .popMenu-navBarSubMenu-pageNav,
@@ -4058,7 +4064,7 @@ input[type="checkbox"].fieldItem:checked + label .togLabelOff {
   border-style: solid;
   border-width: 10px 10px 0 10px;
   border-color: rgba(37,37,37,.95) transparent transparent transparent;
-  position: absolute; 
+  position: absolute;
   bottom: -10px;
   right: 48px;
 }

js/templates/pageNav.html

@@ -76,18 +76,18 @@ <h3 class="margin0 marginTop25"><%= polyglot.t('Discover') %></h3>
     <a href="#userPage">
       <span class="ion-document-text fontSize12 marginRight2 textOpacity1"></span>
     	<%= polyglot.t('nav.myPage') %>
-    	<span class="pull-right txt-muted"><%= config.keyShortcutPrefix + config.keyShortcuts.myPage.toUpperCase() %></span>
+    	<span class="pull-right txt-muted marginLeft10"><%= config.keyShortcutPrefix + config.keyShortcuts.myPage.toUpperCase() %></span>
     </a>
     <a href="#userPage/<%= ob.guid %>/customize">
       <span class="ion-paintbucket fontSize10  textOpacity1"></span>
       <%= polyglot.t('nav.customizePage') %>
-  	<span class="pull-right txt-muted"><%= config.keyShortcutPrefix + config.keyShortcuts.customizePage.toUpperCase() %></span>
+  	<span class="pull-right txt-muted marginLeft10"><%= config.keyShortcutPrefix + config.keyShortcuts.customizePage.toUpperCase() %></span>
     </a>
     <% if(ob.vendor) { %>
       <a href="#userPage/<%= ob.guid %>/listingNew" >
         <span class="ion-ios-pricetag fontSize10 marginRight2 textOpacity1"></span>
         <%= polyglot.t('nav.createListing') %>
-  	  <span class="pull-right txt-muted"><%= config.keyShortcutPrefix + config.keyShortcuts.create.toUpperCase() %></span>
+  	  <span class="pull-right txt-muted marginLeft10"><%= config.keyShortcutPrefix + config.keyShortcuts.create.toUpperCase() %></span>
       </a>
     <% }else{ %>
       <a href="#userPage/<%= ob.guid %>/createStore">
@@ -107,27 +107,27 @@ <h3 class="margin0 marginTop25"><%= polyglot.t('Discover') %></h3>
     <a href="#transactions/purchases">
       <span class="ion-log-out fontSize11 marginRight2 textOpacity1"></span>
       <%= polyglot.t('nav.purchases') %>
-  	<span class="pull-right txt-muted"><%= config.keyShortcutPrefix + config.keyShortcuts.purchases.toUpperCase() %></span>
+  	<span class="pull-right txt-muted marginLeft10"><%= config.keyShortcutPrefix + config.keyShortcuts.purchases.toUpperCase() %></span>
     </a>
     <% if(ob.vendor) { %>
       <a href="#transactions/sales">
         <span class="ion-log-in fontSize11 marginRight2 textOpacity1"></span>
         <%= polyglot.t('nav.sales') %>
-  	  <span class="pull-right txt-muted"><%= config.keyShortcutPrefix + config.keyShortcuts.sales.toUpperCase() %></span>
+  	  <span class="pull-right txt-muted marginLeft10"><%= config.keyShortcutPrefix + config.keyShortcuts.sales.toUpperCase() %></span>
       </a>
     <% } %>
     <% if(ob.moderator) { %>
       <a href="#transactions/cases">
         <span class="ion-briefcase fontSize11 marginRight2 textOpacity1"></span>
         <%= polyglot.t('nav.cases') %>
-  	  <span class="pull-right txt-muted"><%= config.keyShortcutPrefix + config.keyShortcuts.cases.toUpperCase() %></span>
+  	  <span class="pull-right txt-muted marginLeft10"><%= config.keyShortcutPrefix + config.keyShortcuts.cases.toUpperCase() %></span>
       </a>
     <% } %>
     <hr/>
     <a href="#settings">
       <span class="ion-toggle-filled fontSize11 marginRight2 textOpacity1"></span>
       <%= polyglot.t('nav.settings') %>
-  	<span class="pull-right txt-muted"><%= config.keyShortcutPrefix + config.keyShortcuts.settings.toUpperCase() %></span>
+  	<span class="pull-right txt-muted marginLeft10"><%= config.keyShortcutPrefix + config.keyShortcuts.settings.toUpperCase() %></span>
     </a>
     <hr/>
     <a class="js-showAboutModal">
@@ -140,7 +140,7 @@ <h3 class="margin0 marginTop25"><%= polyglot.t('Discover') %></h3>
     </a>
   </div>
 
-  <div class="js-serverSubmenu popMenu-navBarSubMenu popMenu-navBarSubMenu-servers" style="right: 222px"></div>  
+  <div class="js-serverSubmenu popMenu-navBarSubMenu popMenu-navBarSubMenu-servers"></div>
 </div>
 
 <div class="popMenu popMenu-notifications js-navNotificationsMenu" data-onclose="onNotifMenuClose" data-onopen="onNotifMenuOpen">

js/views/pageNavVw.js

@@ -630,6 +630,8 @@ module.exports = baseVw.extend({
   },
 
   mouseenterServerSubmenuTrigger: function(e) {
+    this.serverSubmenu.css('right', this.$('.popMenu-navBarSubMenu-pageNav').outerWidth());
+
     this.ServerSubmenuTimeout = setTimeout(() => {
       this.serverSubmenu.addClass('server-submenu-opened');
     }, 150);