A batch of UI glitches fixes (#1264)

1. Logs view scrolling didin't work on safari 2. Menu on IE was being compresses 3. Changed logs view font to regular one
kubernetes · Sep 20, 2016 · fa75a2a · fa75a2a
1 parent 4b8b213
commit fa75a2a
Show file tree

Hide file tree

Showing 6 changed files with 26 additions and 13 deletions.
diff --git a/bower.json b/bower.json
@@ -5,7 +5,7 @@
     "angular": "~1.5.7",
     "angular-animate": "~1.5.7",
     "angular-aria": "~1.5.7",
-    "angular-material": "~1.1.0",
+    "angular-material": "~1.1.1",
     "angular-messages": "~1.5.7",
     "angular-ui-router": "~0.3.1",
     "angular-resource": "~1.5.7",

diff --git a/src/app/frontend/chrome/chrome.html b/src/app/frontend/chrome/chrome.html
@@ -28,10 +28,10 @@ <h2 class="kd-logo-menu" flex="none">
   </div>
 </md-toolbar>
 
-<md-content layout="row" class="kd-app-content">
+<md-content layout="row" class="kd-app-entire-content" flex="auto">
   <kd-nav flex="none"></kd-nav>
-  <md-content flex="auto" class="kd-app-content"  style="overflow-y: auto;">
-    <div ng-switch="$ctrl.loading" flex="auto" class="kd-content-div">
+  <md-content flex="auto" class="kd-main-content-box">
+    <div ng-switch="$ctrl.loading" class="kd-content-div kd-main-content-div">
       <div ng-switch-when="true" class="kd-spinner">
         <md-progress-circular ng-if="$ctrl.showLoadingSpinner" md-mode="indeterminate"
             md-diameter="48">

diff --git a/src/app/frontend/chrome/chrome.scss b/src/app/frontend/chrome/chrome.scss
@@ -34,6 +34,17 @@
   height: 100%;
 }
 
+.kd-main-content-div {
+  height: 100%;
+  position: absolute;
+  width: 100%;
+}
+
+.kd-main-content-box {
+  background-color: transparent;
+  overflow-y: auto;
+}
+
 .kd-spinner {
   align-content: center;
   align-items: center;
@@ -49,10 +60,16 @@
 }
 
 body,
+.kd-app-entire-content {
+  background-color: $body;
+  max-height: 100%;
+}
+
 .kd-app-content {
   background-color: $body;
   height: 100%;
   max-height: 100%;
+  position: relative;
 }
 
 a {
@@ -78,11 +95,6 @@ a {
   padding-left: $baseline-grid;
 }
 
-.kd-app-content {
-  background-color: $body;
-  position: relative;
-}
-
 .kd-text-icon {
   font-size: inherit;
   height: inherit;

diff --git a/src/app/frontend/chrome/nav/nav.html b/src/app/frontend/chrome/nav/nav.html
@@ -14,7 +14,7 @@
 limitations under the License.
 -->
 
-<md-sidenav md-is-locked-open="$ctrl.isVisible" class="kd-nav">
+<md-sidenav md-is-locked-open="$ctrl.isVisible" class="kd-nav" layout="column">
   <div class="kd-nav-group">
     <kd-nav-item class="kd-nav-group-item" state="{{::$ctrl.states.admin}}">{{::$ctrl.i18n.MSG_NAV_MENU_ADMIN}}</kd-nav-item>
     <kd-nav-item class="kd-nav-item" state="{{::$ctrl.states.namespace}}">{{::$ctrl.i18n.MSG_NAV_MENU_NAMESPACES}}</kd-nav-item>

diff --git a/src/app/frontend/chrome/nav/nav.scss b/src/app/frontend/chrome/nav/nav.scss
@@ -23,9 +23,10 @@
   width: $nav-width;
 
   &.md-closed {
+    // Remove "!important" when https://github.com/angular/material/issues/9425 is fixed
     &.md-locked-open-add-active {
-      min-width: $nav-width;
-      width: $nav-width;
+      min-width: $nav-width !important;
+      width: $nav-width !important;
     }
   }
 

diff --git a/src/app/frontend/logs/logs.scss b/src/app/frontend/logs/logs.scss
@@ -51,7 +51,7 @@ $logs-color-white: #fff;
 
 .kd-log-view {
   flex: 1;
-  font-family: $font-family-medium-monospace;
+  font-family: $font-family-monospace;
   width: 100%;
 }