openstack
/
fuel-web
Code Issues Proposed changes

Merge "UI fixes for low resolution browser window"

This commit is contained in:
Jenkins 2015-07-17 17:18:04 +00:00 committed by Gerrit Code Review
parent 02f6c73037 8b0b06d512
commit f3e65381dc
3 changed files with 90 additions and 79 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
nailgun/static/styles/main.less
View File

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

4
nailgun/static/views/cluster_page.jsx
View File

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

152
nailgun/static/views/layout.jsx
View File

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