big-data/hadoop
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

YARN-9466. Fixed application catalog navigation bar height in Safari. Contributed by Eric Yang

Browse Source
This commit is contained in:
Billie Rinaldi 2019-04-16 10:04:27 -07:00
parent ad865888a6
commit 2364c7d0bf
4 changed files with 102 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

55
hadoop-yarn-project/hadoop-yarn/hadoop-yarn-applications/hadoop-yarn-applications-catalog/hadoop-yarn-applications-catalog-webapp/src/main/webapp/css/bootstrap-hadoop.css vendored
View File

@ -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 {

42
hadoop-yarn-project/hadoop-yarn/hadoop-yarn-applications/hadoop-yarn-applications-catalog/hadoop-yarn-applications-catalog-webapp/src/main/webapp/css/specific.css
View File

@ -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;
}

23
hadoop-yarn-project/hadoop-yarn/hadoop-yarn-applications/hadoop-yarn-applications-catalog/hadoop-yarn-applications-catalog-webapp/src/main/webapp/index.html
View File

@ -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>

6
hadoop-yarn-project/hadoop-yarn/hadoop-yarn-applications/hadoop-yarn-applications-catalog/hadoop-yarn-applications-catalog-webapp/src/main/webapp/partials/home.html
View File

@ -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">