Merge pull request #1670 from sharelatex/pr-fix-contrast-issues

Fix contrast issues (and others)

GitOrigin-RevId: 5882978b70163e65efdf0ef7d5f82a8fc29b48ec

services/web/app/views/layout/navbar.pug

@@ -77,19 +77,19 @@ nav.navbar.navbar-default.navbar-main
 					li
 						a(href="/project") #{translate('Projects')}
 					li.dropdown(dropdown)
-						a.dropbodw-toggle(href, dropdown-toggle)
+						a.dropdown-toggle(href, dropdown-toggle)
 							| #{translate('Account')}
 							b.caret
 						ul.dropdown-menu
 							li
 								div.subdued(ng-non-bindable) #{getUserEmail()}
-							li.divider
+							li.divider.hidden-xs.hidden-sm
 							li
 								a(href="/user/settings") #{translate('Account Settings')}
 							if nav.showSubscriptionLink
 								li
 									a(href="/user/subscription") #{translate('subscription')}
-							li.divider
+							li.divider.hidden-xs.hidden-sm
 							li
 								form(method="POST" action="/logout")
 									input(name='_csrf', type='hidden', value=csrfToken)

services/web/app/views/project/editor/history/previewPanelV2.pug

@@ -2,7 +2,7 @@
 	ng-if="history.isV2 && history.viewMode === HistoryViewModes.COMPARE"
 )
 	.diff(
-		ng-if="!!history.selection.diff && !isHistoryLoading() && !history.selection.diff.error",
+		ng-show="!!history.selection.diff && !isHistoryLoading() && !history.selection.diff.error",
 		ng-class="{ 'diff-binary': history.selection.diff.binary }"
 	)
 		.diff-editor-v2.hide-ace-cursor(

services/web/public/stylesheets/app/editor/left-menu.less

@@ -34,7 +34,9 @@
 	ul.nav {
 		a {
 			cursor: pointer;
-			&:hover, &:active {
+			&:hover,
+			&:active,
+			&:focus {
 				background-color: @link-color;
 				color: white;
 				i {

services/web/public/stylesheets/components/navbar.less

@@ -103,7 +103,7 @@
     margin: 0;
     background-color: @navbar-default-bg;
     border-bottom: solid 1px @navbar-default-border;
-    padding: 0 @navbar-default-padding-h;
+    padding: 0;
 
     @media (min-width: @grid-float-breakpoint) {
       // Get back to regular layout mode as soon as the menu items are 
@@ -217,8 +217,6 @@
 .navbar-toggle {
   position: relative;
   float: right;
-  margin-right: @navbar-padding-horizontal;
-  //.navbar-vertical-align(34px);
   background-color: transparent;
   background-image: none; // Reset unusual Firefox-on-Android default style; see https://github.com/necolas/normalize.css/issues/214
   border: 2px solid @navbar-default-link-color;
@@ -251,6 +249,7 @@
   }
 
   @media (max-width: @grid-float-breakpoint-max) {
+    margin: (@navbar-padding-vertical / 2) 0;
     // Dropdowns get custom display when collapsed
     .open .dropdown-menu {
       position: static;
@@ -261,16 +260,23 @@
       border: 0;
       box-shadow: none;
       > li > a,
+      > li > div.subdued,
+      > li > form > button,
       .dropdown-header {
         padding: 5px 15px 5px 25px;
       }
-      > li > a {
+      > li > a,
+      > li > form > button {
         line-height: @line-height-computed;
         &:hover,
         &:focus {
           background-image: none;
         }
       }
+      > li > div.subdued {
+        line-height: @line-height-computed;
+
+      }
     }
   }
 
@@ -431,13 +437,16 @@
     > li > a {
       color: @navbar-default-link-color;
       border: 2px solid transparent;
-      border-radius: @navbar-btn-border-radius;
       font-size: @navbar-btn-font-size;
       font-weight: @navbar-btn-font-weight;
       line-height: @navbar-btn-line-height;
-      padding: @navbar-btn-padding;
       background-color: @navbar-default-link-bg;
 
+      @media (min-width: @grid-float-breakpoint) {
+        border-radius: @navbar-btn-border-radius;
+        padding: @navbar-btn-padding;
+      }
+
       &:hover,
       &:focus {
         color: #fff;
@@ -465,7 +474,6 @@
     > li.subdued > a {
       border: 0;
       color: @navbar-subdued-color;
-      padding: @navbar-subdued-padding;
       margin-left: 0;
       background-color: transparent;
       &:hover,
@@ -476,6 +484,9 @@
       &:focus {
         .tab-focus()
       }
+      @media (min-width: @grid-float-breakpoint) {
+        padding: @navbar-subdued-padding;
+      }
     }
 
     @media (min-width: @grid-float-breakpoint) {
@@ -502,6 +513,9 @@
     border-color: @navbar-default-border;
   }
 
+  .navbar-collapse.in {
+    box-shadow: 0 10px 15px rgba(0, 0, 0, .25);
+  }
   // Dropdown menu items
   .navbar-nav {
     // Remove background color from open dropdown
@@ -526,12 +540,13 @@
     @media (max-width: @grid-float-breakpoint-max) {
       // Dropdowns get custom display when collapsed
       .open .dropdown-menu {
-        > li > a {
-          border-radius: @border-radius-base;
-          font-size: @font-size-base * .8;
-          font-weight: 700;
-          line-height: 1;
-          padding: 12px 12px 13px 30px;
+        background-color: lighten(@navbar-default-bg, 10%);
+        > li > div.subdued {
+          color: mix(@navbar-default-link-color, @navbar-default-bg);
+        }
+        > li > a,
+        > li > form > button {
+          // padding: 12px 12px 13px 30px;
           color: @navbar-default-link-color;
           &:hover,
           &:focus {
@@ -539,7 +554,8 @@
             background-color: @navbar-default-link-hover-bg;
           }
         }
-        > .active > a {
+        > .active > a,
+        > .active > form > button {
           &,
           &:hover,
           &:focus {
@@ -547,7 +563,8 @@
             background-color: @navbar-default-link-active-bg;
           }
         }
-        > .disabled > a {
+        > .disabled > a,
+        > .disabled > form > button {
           &,
           &:hover,
           &:focus {