From 2364c7d0bf22f042b6a564b863fcfdbac48c4bfb Mon Sep 17 00:00:00 2001
From: Billie Rinaldi <billie@apache.org>
Date: Tue, 16 Apr 2019 10:04:27 -0700
Subject: [PATCH] YARN-9466. Fixed application catalog navigation bar height in
 Safari. Contributed by Eric Yang

---
 .../src/main/webapp/css/bootstrap-hadoop.css  | 55 +++++++++++++++----
 .../src/main/webapp/css/specific.css          | 42 +++++++++++++-
 .../src/main/webapp/index.html                | 23 +++++---
 .../src/main/webapp/partials/home.html        |  6 +-
 4 files changed, 102 insertions(+), 24 deletions(-)

diff --git a/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-applications/hadoop-yarn-applications-catalog/hadoop-yarn-applications-catalog-webapp/src/main/webapp/css/bootstrap-hadoop.css b/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-applications/hadoop-yarn-applications-catalog/hadoop-yarn-applications-catalog-webapp/src/main/webapp/css/bootstrap-hadoop.css
index 231f9a998f2..d6f9fa29d0c 100644
--- a/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-applications/hadoop-yarn-applications-catalog/hadoop-yarn-applications-catalog-webapp/src/main/webapp/css/bootstrap-hadoop.css
+++ b/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-applications/hadoop-yarn-applications-catalog/hadoop-yarn-applications-catalog-webapp/src/main/webapp/css/bootstrap-hadoop.css
@@ -189,6 +189,11 @@
   background-color: #FFF;
   box-shadow: 0 0 2px 0 #1391c1;
 }
+.btn-secondary:visited {
+  color: #429929;
+  background-color: #FFF;
+  box-shadow: 0 0 2px 0 #1391c1;
+}
 .btn-secondary[disabled],
 .btn-secondary:focus[disabled],
 .btn-secondary.disabled,
@@ -772,20 +777,17 @@ input.radio:checked + label:after {
   border-radius: 6px;
 }
 .navigation-bar-container {
-  height: auto;
-  width: 230px;
-  background-color: #323544;
+  min-width: 230px;
   padding: 0;
   -ms-overflow-style: none;
   transition: width 0.5s ease-out;
   -webkit-font-smoothing: antialiased;
+  z-index: 999;
 }
 .navigation-bar-container ul.nav.side-nav-header {
-  width: 230px;
   transition: width 0.5s ease-out;
 }
 .navigation-bar-container ul.nav.side-nav-header li.navigation-header {
-  background: #313d54;
   padding: 15px 5px 15px 25px;
   height: 55px;
 }
@@ -849,8 +851,7 @@ input.radio:checked + label:after {
 }
 .navigation-bar-container ul.nav.side-nav-menu,
 .navigation-bar-container ul.nav.side-nav-footer {
-  background-color: #323544;
-  width: 230px;
+  min-width: 230px;
   transition: width 0.5s ease-out;
 }
 .navigation-bar-container ul.nav.side-nav-menu li,
@@ -858,15 +859,47 @@ input.radio:checked + label:after {
   padding: 0;
   margin: 0;
 }
+.navigation-bar-container ul.nav.side-nav-menu li.navigation-footer span.navbar-close,
+.navigation-bar-container ul.nav.side-nav-footer li.navigation-footer span.navbar-close,
+.navigation-bar-container ul.nav.side-nav-menu li.submenu-li span.navbar-close,
+.navigation-bar-container ul.nav.side-nav-footer li.submenu-li span.navbar-close,
+.navigation-bar-container ul.nav.side-nav-menu li.mainmenu-li span.navbar-close,
+.navigation-bar-container ul.nav.side-nav-footer li.mainmenu-li span.navbar-close {
+  text-align:right;
+}
+.navigation-bar-container ul.nav.side-nav-menu li.navigation-footer > span.line,
+.navigation-bar-container ul.nav.side-nav-footer li.navigation-footer > span.line,
+.navigation-bar-container ul.nav.side-nav-menu li.submenu-li > span.line,
+.navigation-bar-container ul.nav.side-nav-footer li.submenu-li > span.line,
+.navigation-bar-container ul.nav.side-nav-menu li.mainmenu-li > span.line,
+.navigation-bar-container ul.nav.side-nav-footer li.mainmenu-li > span.line {
+  width: 49%;
+  display:inline-block;
+  height: 35px;
+  padding: 10px 5px 10px 25px;
+  white-space: nowrap;
+}
+.navigation-bar-container ul.nav.side-nav-menu li.navigation-footer span.line a,
+.navigation-bar-container ul.nav.side-nav-footer li.navigation-footer span.line a,
+.navigation-bar-container ul.nav.side-nav-menu li.submenu-li span.line a,
+.navigation-bar-container ul.nav.side-nav-footer li.submenu-li span.line a,
+.navigation-bar-container ul.nav.side-nav-menu li.mainmenu-li span.line a,
+.navigation-bar-container ul.nav.side-nav-footer li.mainmenu-li span.line a {
+  font-family: 'Roboto', sans-serif;
+  font-weight: normal;
+  font-style: normal;
+  line-height: 1;
+  color: #333;
+  font-size: 14px;
+  color: #b8bec4;
+}
 .navigation-bar-container ul.nav.side-nav-menu li.navigation-footer > a,
 .navigation-bar-container ul.nav.side-nav-footer li.navigation-footer > a,
 .navigation-bar-container ul.nav.side-nav-menu li.submenu-li > a,
 .navigation-bar-container ul.nav.side-nav-footer li.submenu-li > a,
 .navigation-bar-container ul.nav.side-nav-menu li.mainmenu-li > a,
 .navigation-bar-container ul.nav.side-nav-footer li.mainmenu-li > a {
-  display: table-cell;
   vertical-align: middle;
-  width: 230px;
   border-radius: 0;
   -moz-border-radius: 0;
   -webkit-border-radius: 0;
@@ -1109,7 +1142,7 @@ input.radio:checked + label:after {
 .navigation-bar-container.collapsed ul.nav.side-nav-menu li ul.sub-menu,
 .navigation-bar-container.collapsed ul.nav.side-nav-footer li ul.sub-menu {
   display: none;
-  width: 230px;
+  min-width: 230px;
   position: absolute;
   z-index: 100;
   top: 0;
@@ -1118,7 +1151,7 @@ input.radio:checked + label:after {
 .navigation-bar-container.collapsed ul.nav.side-nav-menu li.submenu-li > a,
 .navigation-bar-container.collapsed ul.nav.side-nav-footer li.submenu-li > a {
   padding: 10px 5px 10px 25px;
-  width: 230px;
+  min-width: 230px;
 }
 .navigation-bar-container.collapsed ul.nav.side-nav-menu li.active,
 .navigation-bar-container.collapsed ul.nav.side-nav-footer li.active {
diff --git a/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-applications/hadoop-yarn-applications-catalog/hadoop-yarn-applications-catalog-webapp/src/main/webapp/css/specific.css b/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-applications/hadoop-yarn-applications-catalog/hadoop-yarn-applications-catalog-webapp/src/main/webapp/css/specific.css
index 3e75f91a741..9724cefe8ed 100644
--- a/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-applications/hadoop-yarn-applications-catalog/hadoop-yarn-applications-catalog-webapp/src/main/webapp/css/specific.css
+++ b/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-applications/hadoop-yarn-applications-catalog/hadoop-yarn-applications-catalog-webapp/src/main/webapp/css/specific.css
@@ -197,8 +197,8 @@ ul.nav.side-nav-menu li {
 .toparea {
   position: fixed;
   top: 0px;
-  left: 230px;
-  width: calc(100% - 230px);
+  left: 0px;
+  width: 100%;
   height: 300px;
   color: #2c2e3b;
   background: -webkit-linear-gradient(left,#2e3b51 ,#181d2b);
@@ -250,3 +250,41 @@ ul.nav.side-nav-menu li {
     margin:20px;
     padding:10px;
 }
+
+.grid-container {
+  display:table;
+  width:100%;
+  height: 100%;
+  padding: 0;
+  margin-top: 0px;
+}
+
+.grid-row {
+  height: 100%;
+  display: table-row;
+}
+
+.grid-row .no-float {
+  display: table-cell;
+  float: none;
+  vertical-align: top;
+}
+
+.navbar-close {
+  text-align:right;
+}
+
+.apps {
+  z-index: 99;
+}
+
+.side-bar {
+  min-width: 230px;
+  width: 16.666667%;
+  height: 100%;
+  background-color: #2D3A4F;
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: -1000;
+}
diff --git a/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-applications/hadoop-yarn-applications-catalog/hadoop-yarn-applications-catalog-webapp/src/main/webapp/index.html b/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-applications/hadoop-yarn-applications-catalog/hadoop-yarn-applications-catalog-webapp/src/main/webapp/index.html
index 2a96027a01e..306be22015e 100644
--- a/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-applications/hadoop-yarn-applications-catalog/hadoop-yarn-applications-catalog-webapp/src/main/webapp/index.html
+++ b/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-applications/hadoop-yarn-applications-catalog/hadoop-yarn-applications-catalog-webapp/src/main/webapp/index.html
@@ -28,9 +28,10 @@
 <div ng-controller="LoadScreenController" class="loader-wrapper {{loadScreen}}">
   <div class="loader"><img src="/css/img/loading.svg"></div>
 </div>
-<div class="container">
-  <div class="row">
-      <div class="navigation-bar-container col-sm-3 col-md-3 col-lg-3" ng-controller="AppListController">
+<div class="grid-container">
+  <div class="grid-row">
+      <div class="side-bar"></div>
+      <div class="navigation-bar-container col-sx-2 col-sm-2 col-md-2 col-lg-2 no-float" ng-controller="AppListController">
         <ul class="side-nav-header nav nav-pills nav-stacked">
           <li class="navigation-header">
             <div class="btn-group">
@@ -49,21 +50,27 @@
         </ul>
         <ul class="side-nav-menu nav nav-pills nav-stacked">
           <li class="mainmenu-li" ng-repeat="yarnApp in appList">
-            <a href="#!/app/{{yarnApp.id}}"><span class="glyphicon glyphicon-ok-sign"></span> {{yarnApp.name}}</a>
-            <a ng-click="deleteApp(yarnApp.id,yarnApp.name)" class="icon-width"><span class="glyphicon glyphicon-remove pull-right"></span></a>
+            <span class="line">
+              <a href="#!/app/{{yarnApp.id}}"><span class="glyphicon glyphicon-ok-sign"></span> {{yarnApp.name}}</a>
+            </span>
+            <span class="line navbar-close">
+              <a ng-click="deleteApp(yarnApp.id,yarnApp.name)"><span class="glyphicon glyphicon-remove"></span></a>
+            </span>
+            <div>
             <span class="navigation-menu-item">{{yarnApp.app}}</span>
+              </div>
           </li>
         </ul>
-        <ul class="side-nav-footer nav nav-pills nav-stacked">
+        <!--<ul class="side-nav-footer nav nav-pills nav-stacked">
           <li class="navigation-footer">
             <a href="#" data-toggle="collapse-side-nav">
               <span class="navigation-icon fa fa-angle-double-left"></span>
             </a>
           </li>
-        </ul>
+        </ul>-->
       </div>
 
-    <div class="col-xs-9 col-md-9 col-lg-9">
+    <div class="col-xs-10 col-sm-10 col-md-10 col-lg-10 no-float">
       <div data-ng-view></div>
     </div>
   </div>
diff --git a/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-applications/hadoop-yarn-applications-catalog/hadoop-yarn-applications-catalog-webapp/src/main/webapp/partials/home.html b/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-applications/hadoop-yarn-applications-catalog/hadoop-yarn-applications-catalog-webapp/src/main/webapp/partials/home.html
index e2b7f0876ae..1a440b9b581 100644
--- a/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-applications/hadoop-yarn-applications-catalog/hadoop-yarn-applications-catalog-webapp/src/main/webapp/partials/home.html
+++ b/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-applications/hadoop-yarn-applications-catalog/hadoop-yarn-applications-catalog-webapp/src/main/webapp/partials/home.html
@@ -11,8 +11,8 @@
   See the License for the specific language governing permissions and
   limitations under the License. See accompanying LICENSE file.
 -->
-<div class="toparea"><div class="pattern-wrapper"></div></div>
-<div class="container content toparea pattern-wrapper">
+<div class="container content apps">
+      <div class="toparea"><div class="pattern-wrapper"></div></div>
       <form>
         <div class="input-group input-group-lg">
           <div class="input-group-addon">
@@ -27,7 +27,7 @@
 
       <div ng-repeat="a in appStore" ng-if="$index % 3 == 0" class="row">
         <div ng-repeat="i in [$index, $index + 1, $index + 2]"
-             ng-if="appStore[i] != null" class="col-xs-4 col-md-4 col-lg-4">
+             ng-if="appStore[i] != null" class="col-xs-4 col-md-4 col-lg-4 apps">
           <div class="tile mdl-shadow-4dp">
             <img ng-src="{{appStore[i].icon}}" alt="" width="128" height="128" ng-if="appStore[i] != null" />
             <div class="card-title">