You are viewing a plain text version of this content. The canonical link for it is here.
Posted to common-commits@hadoop.apache.org by bi...@apache.org on 2019/04/16 17:05:23 UTC
[hadoop] branch trunk updated: YARN-9466. Fixed application catalog
navigation bar height in Safari. Contributed by Eric Yang
This is an automated email from the ASF dual-hosted git repository.
billie pushed a commit to branch trunk
in repository https://gitbox.apache.org/repos/asf/hadoop.git
The following commit(s) were added to refs/heads/trunk by this push:
new 2364c7d YARN-9466. Fixed application catalog navigation bar height in Safari. Contributed by Eric Yang
2364c7d is described below
commit 2364c7d0bf22f042b6a564b863fcfdbac48c4bfb
Author: Billie Rinaldi <bi...@apache.org>
AuthorDate: Tue Apr 16 10:04:27 2019 -0700
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 231f9a9..d6f9fa2 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 3e75f91..9724cef 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 2a96027..306be22 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 e2b7f08..1a440b9 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">
---------------------------------------------------------------------
To unsubscribe, e-mail: common-commits-unsubscribe@hadoop.apache.org
For additional commands, e-mail: common-commits-help@hadoop.apache.org