UI fixes for low resolution browser window
- navigation panel layout fixed - wizard dialog has scroll bar now and allows to see apply button - deploy button didn't jump any more Change-Id: If58f39214554492688fecba48fa6196576507506
This commit is contained in:
parent
38d0e7db78
commit
8b0b06d512
|
@ -318,9 +318,14 @@ button, .btn:not(.btn-link) {.font-semibold;}
|
|||
}
|
||||
}
|
||||
|
||||
.modal-open .modal {
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
.clamp {
|
||||
width: 100%;
|
||||
max-width: @page-width;
|
||||
min-width: @page-width;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
height: auto !important;
|
||||
|
@ -484,11 +489,12 @@ button, .btn:not(.btn-link) {.font-semibold;}
|
|||
height: 70px;
|
||||
background-color: @white;
|
||||
box-shadow: 0 0 10px @shadow-color;
|
||||
min-width: @page-width;
|
||||
}
|
||||
|
||||
.navigation-box {
|
||||
width: 100%;
|
||||
height: 70px;
|
||||
background-color: @white;
|
||||
}
|
||||
|
||||
.navbar {
|
||||
|
@ -503,9 +509,12 @@ button, .btn:not(.btn-link) {.font-semibold;}
|
|||
background-color: transparent;
|
||||
border-color: transparent;
|
||||
.navbar-nav {
|
||||
margin: 0;
|
||||
margin-top: 18px;
|
||||
height: 34px;
|
||||
li {
|
||||
display: inline-block;
|
||||
width: auto;
|
||||
background-color: @white;
|
||||
a {
|
||||
font-family: 'bebas';
|
||||
font-size: @base-font-size + 7;
|
||||
|
|
|
@ -293,7 +293,7 @@ function($, _, i18n, Backbone, React, utils, models, dispatcher, componentMixins
|
|||
render: function() {
|
||||
var cluster = this.props.cluster;
|
||||
return (
|
||||
<div className='col-xs-12 col-md-9'>
|
||||
<div className='col-xs-9'>
|
||||
<div className='page-title'>
|
||||
<h1 className='title'>
|
||||
{cluster.get('name')}
|
||||
|
@ -401,7 +401,7 @@ function($, _, i18n, Backbone, React, utils, models, dispatcher, componentMixins
|
|||
return node.get('pending_addition') && node.hasRole('virt');
|
||||
});
|
||||
return (
|
||||
<div className='col-xs-6 col-md-3'>
|
||||
<div className='col-xs-3'>
|
||||
<div className='deploy-box pull-right'>
|
||||
{task ? (
|
||||
<div className={'deploy-process ' + taskName} key={taskName}>
|
||||
|
|
|
@ -96,88 +96,90 @@ function($, _, i18n, Backbone, React, utils, models, controls, componentMixins,
|
|||
return (
|
||||
<div className='navigation-box'>
|
||||
<div className='navbar-bg'></div>
|
||||
<div className='row'>
|
||||
<nav className='navbar navbar-default' role='navigation'>
|
||||
<div className='container-fluid'>
|
||||
<div className='navbar-header'>
|
||||
<div className='row'>
|
||||
<div className='navbar-header col-xs-2'>
|
||||
<a className='navbar-logo' href='#'></a>
|
||||
</div>
|
||||
<ul className='nav navbar-nav'>
|
||||
{_.map(this.props.elements, function(element) {
|
||||
return (
|
||||
<li className={utils.classNames({active: this.props.activeElement == element.url.slice(1)})} key={element.label}>
|
||||
<a href={element.url}>
|
||||
{i18n('navbar.' + element.label, {defaultValue: element.label})}
|
||||
</a>
|
||||
</li>
|
||||
);
|
||||
}, this)}
|
||||
</ul>
|
||||
<ul className='nav navbar-icons navbar-right'>
|
||||
<li
|
||||
key='language-icon'
|
||||
className='language-icon'
|
||||
onClick={this.togglePopover('language')}
|
||||
>
|
||||
<div className='language-text'>{i18n.getLocaleName(i18n.getCurrentLocale())}</div>
|
||||
</li>
|
||||
<li
|
||||
key='statistics-icon'
|
||||
className={'statistics-icon ' + (this.props.statistics.get('unallocated') ? '' : 'no-unallocated')}
|
||||
onClick={this.togglePopover('statistics')}
|
||||
>
|
||||
{!!this.props.statistics.get('unallocated') &&
|
||||
<div className='unallocated'>{this.props.statistics.get('unallocated')}</div>
|
||||
}
|
||||
<div className='total'>{this.props.statistics.get('total')}</div>
|
||||
</li>
|
||||
{this.props.version.get('auth_required') && this.props.user.get('authenticated') &&
|
||||
<div className='col-xs-5'>
|
||||
<ul className='nav navbar-nav pull-left'>
|
||||
{_.map(this.props.elements, function(element) {
|
||||
return (
|
||||
<li className={utils.classNames({active: this.props.activeElement == element.url.slice(1)})} key={element.label}>
|
||||
<a href={element.url}>
|
||||
{i18n('navbar.' + element.label, {defaultValue: element.label})}
|
||||
</a>
|
||||
</li>
|
||||
);
|
||||
}, this)}
|
||||
</ul>
|
||||
</div>
|
||||
<div className='col-xs-5'>
|
||||
<ul className='nav navbar-icons pull-right'>
|
||||
<li
|
||||
key='user-icon'
|
||||
className='user-icon'
|
||||
onClick={this.togglePopover('user')}
|
||||
></li>
|
||||
}
|
||||
<li
|
||||
key='notifications-icon'
|
||||
className='notifications-icon'
|
||||
onClick={this.togglePopover('notifications')}
|
||||
>
|
||||
{unreadNotificationsCount ? <span className='badge'>{unreadNotificationsCount}</span> : null}
|
||||
</li>
|
||||
key='language-icon'
|
||||
className='language-icon'
|
||||
onClick={this.togglePopover('language')}
|
||||
>
|
||||
<div className='language-text'>{i18n.getLocaleName(i18n.getCurrentLocale())}</div>
|
||||
</li>
|
||||
<li
|
||||
key='statistics-icon'
|
||||
className={'statistics-icon ' + (this.props.statistics.get('unallocated') ? '' : 'no-unallocated')}
|
||||
onClick={this.togglePopover('statistics')}
|
||||
>
|
||||
{!!this.props.statistics.get('unallocated') &&
|
||||
<div className='unallocated'>{this.props.statistics.get('unallocated')}</div>
|
||||
}
|
||||
<div className='total'>{this.props.statistics.get('total')}</div>
|
||||
</li>
|
||||
{this.props.version.get('auth_required') && this.props.user.get('authenticated') &&
|
||||
<li
|
||||
key='user-icon'
|
||||
className='user-icon'
|
||||
onClick={this.togglePopover('user')}
|
||||
></li>
|
||||
}
|
||||
<li
|
||||
key='notifications-icon'
|
||||
className='notifications-icon'
|
||||
onClick={this.togglePopover('notifications')}
|
||||
>
|
||||
{unreadNotificationsCount ? <span className='badge'>{unreadNotificationsCount}</span> : null}
|
||||
</li>
|
||||
|
||||
{this.state.languagePopoverVisible &&
|
||||
<LanguagePopover
|
||||
key='language-popover'
|
||||
toggle={this.togglePopover('language')}
|
||||
/>
|
||||
}
|
||||
{this.state.statisticsPopoverVisible &&
|
||||
<StatisticsPopover
|
||||
key='statistics-popover'
|
||||
statistics={this.props.statistics}
|
||||
toggle={this.togglePopover('statistics')}
|
||||
/>
|
||||
}
|
||||
{this.state.userPopoverVisible &&
|
||||
<UserPopover
|
||||
key='user-popover'
|
||||
user={this.props.user}
|
||||
toggle={this.togglePopover('user')}
|
||||
/>
|
||||
}
|
||||
{this.state.notificationsPopoverVisible &&
|
||||
<NotificationsPopover
|
||||
key='notifications-popover'
|
||||
notifications={this.props.notifications}
|
||||
displayCount={this.props.notificationsDisplayCount}
|
||||
toggle={this.togglePopover('notifications')}
|
||||
/>
|
||||
}
|
||||
</ul>
|
||||
{this.state.languagePopoverVisible &&
|
||||
<LanguagePopover
|
||||
key='language-popover'
|
||||
toggle={this.togglePopover('language')}
|
||||
/>
|
||||
}
|
||||
{this.state.statisticsPopoverVisible &&
|
||||
<StatisticsPopover
|
||||
key='statistics-popover'
|
||||
statistics={this.props.statistics}
|
||||
toggle={this.togglePopover('statistics')}
|
||||
/>
|
||||
}
|
||||
{this.state.userPopoverVisible &&
|
||||
<UserPopover
|
||||
key='user-popover'
|
||||
user={this.props.user}
|
||||
toggle={this.togglePopover('user')}
|
||||
/>
|
||||
}
|
||||
{this.state.notificationsPopoverVisible &&
|
||||
<NotificationsPopover
|
||||
key='notifications-popover'
|
||||
notifications={this.props.notifications}
|
||||
displayCount={this.props.notificationsDisplayCount}
|
||||
toggle={this.togglePopover('notifications')}
|
||||
/>
|
||||
}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
Loading…
Reference in New Issue