openstack/fuel-web
Code Issues Proposed changes

Merge "UI fixes for low resolution browser window"

Browse Source
This commit is contained in:
Jenkins 2015-07-17 17:18:04 +00:00 committed by Gerrit Code Review
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 { .clamp {
width: 100%; width: 100%;
max-width: @page-width; max-width: @page-width;
min-width: @page-width;
margin-left: auto; margin-left: auto;
margin-right: auto; margin-right: auto;
height: auto !important; height: auto !important;
@ -484,11 +489,12 @@ button, .btn:not(.btn-link) {.font-semibold;}
height: 70px; height: 70px;
background-color: @white; background-color: @white;
box-shadow: 0 0 10px @shadow-color; box-shadow: 0 0 10px @shadow-color;
min-width: @page-width;
} }
.navigation-box { .navigation-box {
width: 100%; width: 100%;
height: 70px; background-color: @white;
} }
.navbar { .navbar {
@ -503,9 +509,12 @@ button, .btn:not(.btn-link) {.font-semibold;}
background-color: transparent; background-color: transparent;
border-color: transparent; border-color: transparent;
.navbar-nav { .navbar-nav {
margin: 0;
margin-top: 18px; margin-top: 18px;
height: 34px;
li { li {
display: inline-block;
width: auto;
background-color: @white;
a { a {
font-family: 'bebas'; font-family: 'bebas';
font-size: @base-font-size + 7; 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() { render: function() {
var cluster = this.props.cluster; var cluster = this.props.cluster;
return ( return (
<div className='col-xs-12 col-md-9'> <div className='col-xs-9'>
<div className='page-title'> <div className='page-title'>
<h1 className='title'> <h1 className='title'>
{cluster.get('name')} {cluster.get('name')}
@ -401,7 +401,7 @@ function($, _, i18n, Backbone, React, utils, models, dispatcher, componentMixins
return node.get('pending_addition') && node.hasRole('virt'); return node.get('pending_addition') && node.hasRole('virt');
}); });
return ( return (
<div className='col-xs-6 col-md-3'> <div className='col-xs-3'>
<div className='deploy-box pull-right'> <div className='deploy-box pull-right'>
{task ? ( {task ? (
<div className={'deploy-process ' + taskName} key={taskName}> <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 ( return (
<div className='navigation-box'> <div className='navigation-box'>
<div className='navbar-bg'></div> <div className='navbar-bg'></div>
<div className='row'>
<nav className='navbar navbar-default' role='navigation'> <nav className='navbar navbar-default' role='navigation'>
<div className='container-fluid'> <div className='row'>
<div className='navbar-header'> <div className='navbar-header col-xs-2'>
<a className='navbar-logo' href='#'></a> <a className='navbar-logo' href='#'></a>
</div> </div>
<ul className='nav navbar-nav'> <div className='col-xs-5'>
{_.map(this.props.elements, function(element) { <ul className='nav navbar-nav pull-left'>
return ( {_.map(this.props.elements, function(element) {
<li className={utils.classNames({active: this.props.activeElement == element.url.slice(1)})} key={element.label}> return (
<a href={element.url}> <li className={utils.classNames({active: this.props.activeElement == element.url.slice(1)})} key={element.label}>
{i18n('navbar.' + element.label, {defaultValue: element.label})} <a href={element.url}>
</a> {i18n('navbar.' + element.label, {defaultValue: element.label})}
</li> </a>
); </li>
}, this)} );
</ul> }, this)}
<ul className='nav navbar-icons navbar-right'> </ul>
<li </div>
key='language-icon' <div className='col-xs-5'>
className='language-icon' <ul className='nav navbar-icons pull-right'>
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 <li
key='user-icon' key='language-icon'
className='user-icon' className='language-icon'
onClick={this.togglePopover('user')} onClick={this.togglePopover('language')}
></li> >
} <div className='language-text'>{i18n.getLocaleName(i18n.getCurrentLocale())}</div>
<li </li>
key='notifications-icon' <li
className='notifications-icon' key='statistics-icon'
onClick={this.togglePopover('notifications')} className={'statistics-icon ' + (this.props.statistics.get('unallocated') ? '' : 'no-unallocated')}
> onClick={this.togglePopover('statistics')}
{unreadNotificationsCount ? <span className='badge'>{unreadNotificationsCount}</span> : null} >
</li> {!!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 && {this.state.languagePopoverVisible &&
<LanguagePopover <LanguagePopover
key='language-popover' key='language-popover'
toggle={this.togglePopover('language')} toggle={this.togglePopover('language')}
/> />
} }
{this.state.statisticsPopoverVisible && {this.state.statisticsPopoverVisible &&
<StatisticsPopover <StatisticsPopover
key='statistics-popover' key='statistics-popover'
statistics={this.props.statistics} statistics={this.props.statistics}
toggle={this.togglePopover('statistics')} toggle={this.togglePopover('statistics')}
/> />
} }
{this.state.userPopoverVisible && {this.state.userPopoverVisible &&
<UserPopover <UserPopover
key='user-popover' key='user-popover'
user={this.props.user} user={this.props.user}
toggle={this.togglePopover('user')} toggle={this.togglePopover('user')}
/> />
} }
{this.state.notificationsPopoverVisible && {this.state.notificationsPopoverVisible &&
<NotificationsPopover <NotificationsPopover
key='notifications-popover' key='notifications-popover'
notifications={this.props.notifications} notifications={this.props.notifications}
displayCount={this.props.notificationsDisplayCount} displayCount={this.props.notificationsDisplayCount}
toggle={this.togglePopover('notifications')} toggle={this.togglePopover('notifications')}
/> />
} }
</ul> </ul>
</div>
</div> </div>
</nav> </nav>
</div>
</div> </div>
); );
} }