YARN-9466. Fixed application catalog navigation bar height in Safari. Contributed by Eric Yang
This commit is contained in:
parent
ad865888a6
commit
2364c7d0bf
|
@ -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 {
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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">
|
||||
|
|
Loading…
Reference in New Issue