Influxdata
/
chronograf
mirror of https://github.com/influxdata/chronograf.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

Removing excess styles 

Mo’ generic yo
pull/676/head
Alex P 2016-12-06 15:36:23 -08:00
parent 67c7318452
commit fc1a2cac1b
3 changed files with 28 additions and 56 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

40
ui/src/chronograf/containers/Header.js
View File

@ -108,26 +108,28 @@ const Header = React.createClass({
{text: 'Delete', icon: 'trash', target: '#deleteExplorerModal', handler: this.openDeleteExplorerModal},
];
return (
<div className="page-header data-explorer__header">
<div className="page-header__left">
<h1 className="dropdown-title">Exploration:</h1>
<Dropdown
className="sessions-dropdown"
items={dropdownItems}
actions={dropdownActions}
onChoose={this.handleChooseExplorer}
selected={this.getName(selectedExplorer)}
/>
<div className="btn btn-sm btn-primary sessions-dropdown__btn" onClick={this.handleCreateExploration}>New Exploration</div>
</div>
<div className="page-header__right">
<h1>Source:</h1>
<div className="source-indicator">
<span className="icon cpu"></span>
{this.context.source.name}
<div className="page-header">
<div className="page-header__container">
<div className="page-header__left">
<h1 className="dropdown-title">Exploration:</h1>
<Dropdown
className="sessions-dropdown"
items={dropdownItems}
actions={dropdownActions}
onChoose={this.handleChooseExplorer}
selected={this.getName(selectedExplorer)}
/>
<div className="btn btn-sm btn-primary sessions-dropdown__btn" onClick={this.handleCreateExploration}>New Exploration</div>
</div>
<div className="page-header__right">
<h1>Source:</h1>
<div className="source-indicator">
<span className="icon cpu"></span>
{this.context.source.name}
</div>
<h1>Range:</h1>
<TimeRangeDropdown onChooseTimeRange={this.handleChooseTimeRange} selected={this.findSelected(timeRange)} />
</div>
<h1>Range:</h1>
<TimeRangeDropdown onChooseTimeRange={this.handleChooseTimeRange} selected={this.findSelected(timeRange)} />
</div>
<DeleteExplorerModal onConfirm={this.confirmDeleteExplorer} />
<EditExplorerModal onConfirm={this.confirmEditExplorer} />

2
ui/src/shared/components/ResizeContainer.js
View File

@ -62,7 +62,7 @@ const ResizeContainer = React.createClass({
const handle = <ResizeHandle isDragging={isDragging} onHandleStartDrag={this.handleStartDrag} />;
return (
<div className="resize-container main-content" onMouseLeave={this.handleMouseLeave} onMouseUp={this.handleStopDrag} onMouseMove={this.handleDrag} ref="resizeContainer" >
<div className="resize-container page-contents" onMouseLeave={this.handleMouseLeave} onMouseUp={this.handleStopDrag} onMouseMove={this.handleDrag} ref="resizeContainer" >
{left}
{handle}
{right}

42
ui/src/style/chronograf/layout/_main.scss
View File

@ -13,50 +13,20 @@
left: 0;
background-color: $g1-raven;
&__header {
margin-bottom: 0;
background-color: $g0-obsidian;
color: $g15-platinum;
position: absolute;
top: 0;
left: 0;
width: 100%;
.page-header {
padding-left: $explorer-page-padding;
padding-right: $explorer-page-padding;
justify-content: space-between;
padding-right: ($explorer-page-padding + $scrollbar-width);
}
&-container {
height: 100%;
position: absolute;
width: 100%;
}
.controls {
padding: 5px;
display: flex;
align-items: center;
justify-content: center;
}
/* Sessions Dropdown Styles */
.chronograf-header__left {
flex-direction: row;
align-items: center;
}
.dropdown-title {
white-space: nowrap;
.page-header__container {
max-width: 100%;
}
}
.main-content {
.resize-container.page-contents {
overflow: hidden;
display: flex;
flex-direction: row;
align-items: stretch;
position: absolute;
left: 0;
top: $chronograf-page-header-height;
height: calc(100% - #{$chronograf-page-header-height});
width: 100%;
}
.panels {