1
0
mirror of https://github.com/Unleash/unleash.git synced 2025-07-26 13:48:33 +02:00

Merge pull request #53 from Unleash/improved-page-layout

improved page layout + horizontal scrolling tables on mobile
This commit is contained in:
Vegard Sandvold 2017-01-23 10:31:25 +01:00 committed by GitHub
commit 5bcb00e101
17 changed files with 316 additions and 244 deletions

View File

@ -145,8 +145,8 @@ export default class App extends Component {
</Navigation>
</Drawer>
<ScrollContainer scrollKey="container" shouldUpdateScroll={shouldUpdateScroll}>
<Content>
<Grid shadow={1} style={{ maxWidth: '1200px', margin: '0 auto' }}>
<Content className="mdl-color--grey-50">
<Grid noSpacing className={styles.content}>
<Cell col={12}>
{this.props.children}
<ErrorContainer />

View File

@ -152,18 +152,20 @@ class ClientApplications extends PureComponent {
return (
<div>
<HeaderTitle title={<span><Icon name={icon} /> {appName}</span>} subtitle={description}
actions={url && <ExternalIconLink url={url}>Visit site</ExternalIconLink>}
/>
<Grid className="mdl-color--white">
<Cell col={12}>
<HeaderTitle title={<span><Icon name={icon} /> {appName}</span>} subtitle={description}
actions={url && <ExternalIconLink url={url}>Visit site</ExternalIconLink>}
/>
<Tabs activeTab={this.state.activeTab} onChange={(tabId) => this.setState({ activeTab: tabId })} ripple>
<Tab>Details</Tab>
<Tab>Edit</Tab>
</Tabs>
<Tabs activeTab={this.state.activeTab} onChange={(tabId) => this.setState({ activeTab: tabId })} ripple>
<Tab>Details</Tab>
<Tab>Edit</Tab>
</Tabs>
{content}
</div>
{content}
</Cell>
</Grid>
);
}
}

View File

@ -1,5 +1,5 @@
import React, { Component } from 'react';
import { ProgressBar } from 'react-mdl';
import { ProgressBar, Grid, Cell } from 'react-mdl';
import { AppsLinkList, HeaderTitle } from '../common';
class ClientStrategies extends Component {
@ -17,10 +17,12 @@ class ClientStrategies extends Component {
return <ProgressBar indeterminate />;
}
return (
<div>
<HeaderTitle title="Applications" />
<AppsLinkList apps={applications} />
</div>
<Grid className="mdl-color--white">
<Cell col={12}>
<HeaderTitle title="Applications" />
<AppsLinkList apps={applications} />
</Cell>
</Grid>
);
}
}

View File

@ -1,6 +1,6 @@
import React, { Component } from 'react';
import { Link } from 'react-router';
import { DataTable, TableHeader, IconButton, Icon } from 'react-mdl';
import { DataTable, TableHeader, IconButton, Icon, Grid, Cell } from 'react-mdl';
import { HeaderTitle } from '../common';
class ArchiveList extends Component {
@ -14,26 +14,31 @@ class ArchiveList extends Component {
e.reviveName = e.name;
});
return (
<div>
<HeaderTitle title="Toggle Archive" />
{
archive.length > 0 ?
<DataTable
rows={archive}
style={{ width: '100%' }}>
<TableHeader style={{ width: '25px' }} name="reviveName" cellFormatter={(reviveName) => (
<IconButton colored name="undo" onClick={() => revive(reviveName)} />
)}>Revive</TableHeader>
<TableHeader style={{ width: '25px' }} name="enabled" cellFormatter={(v) => (v ? 'Yes' : '-')}>Enabled</TableHeader>
<TableHeader name="name">Toggle name</TableHeader>
<TableHeader numeric name="createdAt">Created</TableHeader>
</DataTable> :
<div style={{ textAlign: 'center' }}>
<Icon name="report" style={{ color: '#aaa', fontSize: '40px' }}/><br />
No archived feature toggles, go see <Link to="/features">active toggles here</Link>
<Grid className="mdl-color--white">
<Cell col={12}>
<HeaderTitle title="Toggle Archive" />
<div style={{ overflowX: 'scroll' }}>
{
archive.length > 0 ?
<DataTable
rows={archive}
style={{ width: '100%' }}>
<TableHeader style={{ width: '25px' }} name="reviveName" cellFormatter={(reviveName) => (
<IconButton colored name="undo" onClick={() => revive(reviveName)} />
)}>Revive</TableHeader>
<TableHeader style={{ width: '25px' }} name="enabled" cellFormatter={(v) => (v ? 'Yes' : '-')}>
Enabled</TableHeader>
<TableHeader name="name">Toggle name</TableHeader>
<TableHeader numeric name="createdAt">Created</TableHeader>
</DataTable> :
<div style={{ textAlign: 'center' }}>
<Icon name="report" style={{ color: '#aaa', fontSize: '40px' }}/><br />
No archived feature toggles, go see <Link to="/features">active toggles here</Link>
</div>
}
</div>
}
</div>
</Cell>
</Grid>
);
}
}

View File

@ -4,13 +4,21 @@
text-overflow: ellipsis;
}
.fullwidth {
width: 100%;
}
.divider {
margin: 0;
border-color: rgba(0,0,0,.12);
}
@media (max-width: 960px) {
.hideLt960 {
.list {
margin: 0;
}
@media (max-width: 920px) {
.hideLt920 {
display: none;
}
}

View File

@ -55,7 +55,7 @@ const Feature = ({
<span className={['mdl-list__item-sub-title', commonStyles.truncate].join(' ')}>{description}</span>
</Link>
</span>
<span className={commonStyles.hideLt960} style={{ flexShrink: 0 }}>
<span className={commonStyles.hideLt920} style={{ flexShrink: 0 }}>
{strategyChips}
{summaryChip}
</span>

View File

@ -39,7 +39,7 @@
.topList {
display: flex;
margin: 10px 10px 10px 10px;
margin: 8px;
}
.topListItem0 {

View File

@ -1,5 +1,5 @@
import React, { Component, PropTypes } from 'react';
import { Textfield, Switch } from 'react-mdl';
import { Textfield, Switch, Grid, Cell } from 'react-mdl';
import StrategiesSection from './strategies-section-container';
import { FormButtons, HeaderTitle } from '../../common';
@ -45,53 +45,57 @@ class AddFeatureToggleComponent extends Component {
const configuredStrategies = input.strategies || [];
return (
<form onSubmit={onSubmit(input)}>
{title && <HeaderTitle title={title} />}
<section>
<Textfield
floatingLabel
label="Name"
name="name"
disabled={editmode}
required
value={name}
error={nameError}
onBlur={(v) => validateName(v.target.value)}
onChange={(v) => setValue('name', trim(v.target.value))} />
<br />
<Textfield
floatingLabel
style={{ width: '100%' }}
rows={1}
label="Description"
required
value={description}
onChange={(v) => setValue('description', v.target.value)} />
<Grid className="mdl-color--white">
<Cell col={12}>
<form onSubmit={onSubmit(input)}>
{title && <HeaderTitle title={title} />}
<section>
<Textfield
floatingLabel
label="Name"
name="name"
disabled={editmode}
required
value={name}
error={nameError}
onBlur={(v) => validateName(v.target.value)}
onChange={(v) => setValue('name', trim(v.target.value))} />
<br />
<Textfield
floatingLabel
style={{ width: '100%' }}
rows={1}
label="Description"
required
value={description}
onChange={(v) => setValue('description', v.target.value)} />
{!editmode && <div>
<br />
<Switch
checked={enabled}
onChange={() => {
setValue('enabled', !enabled);
}}>Enabled</Switch>
<hr />
</div>}
</section>
<StrategiesSection
configuredStrategies={configuredStrategies}
addStrategy={addStrategy}
updateStrategy={updateStrategy}
moveStrategy={moveStrategy}
removeStrategy={removeStrategy} />
{!editmode && <div>
<br />
<Switch
checked={enabled}
onChange={() => {
setValue('enabled', !enabled);
}}>Enabled</Switch>
<hr />
</div>}
</section>
<StrategiesSection
configuredStrategies={configuredStrategies}
addStrategy={addStrategy}
updateStrategy={updateStrategy}
moveStrategy={moveStrategy}
removeStrategy={removeStrategy} />
<br />
<FormButtons
submitText={editmode ? 'Update' : 'Create'}
onCancel={onCancel}
/>
</form>
<FormButtons
submitText={editmode ? 'Update' : 'Create'}
onCancel={onCancel}
/>
</form>
</Cell>
</Grid>
);
}

View File

@ -1,8 +1,9 @@
import React, { PropTypes } from 'react';
import Feature from './feature-list-item-component';
import { Link } from 'react-router';
import { Icon, Chip, ChipContact, IconButton, FABButton, Textfield, Menu, MenuItem } from 'react-mdl';
import { Icon, Chip, ChipContact, IconButton, FABButton, Textfield, Menu, MenuItem, Grid, Cell } from 'react-mdl';
import { styles as commonStyles } from '../common';
import styles from './feature.scss';
export default class FeatureListComponent extends React.PureComponent {
@ -49,70 +50,72 @@ export default class FeatureListComponent extends React.PureComponent {
const { features, toggleFeature, featureMetrics, settings } = this.props;
return (
<div>
<div className={styles.topList}>
<Chip onClick={() => this.toggleMetrics()} className={styles.topListItem0}>
{ settings.showLastHour &&
<ChipContact className="mdl-color--teal mdl-color-text--white">
<Icon name="hourglass_full" style={{ fontSize: '16px' }} />
</ChipContact> }
{ '1 hour' }
</Chip>
&nbsp;
<Chip onClick={() => this.toggleMetrics()} className={styles.topListItem0}>
{ !settings.showLastHour &&
<ChipContact className="mdl-color--teal mdl-color-text--white">
<Icon name="hourglass_empty" style={{ fontSize: '16px' }} />
</ChipContact> }
{ '1 minute' }
</Chip>
<Grid className="mdl-color--white">
<Cell col={12}>
<div className={styles.topList}>
<Chip onClick={() => this.toggleMetrics()} className={styles.topListItem0}>
{ settings.showLastHour &&
<ChipContact className="mdl-color--teal mdl-color-text--white">
<Icon name="hourglass_full" style={{ fontSize: '16px' }} />
</ChipContact> }
{ '1 hour' }
</Chip>
&nbsp;
<Chip onClick={() => this.toggleMetrics()} className={styles.topListItem0}>
{ !settings.showLastHour &&
<ChipContact className="mdl-color--teal mdl-color-text--white">
<Icon name="hourglass_empty" style={{ fontSize: '16px' }} />
</ChipContact> }
{ '1 minute' }
</Chip>
<div className={styles.topListItem2} style={{ margin: '-10px 10px 0 10px' }}>
<Textfield
floatingLabel
value={settings.filter}
onChange={(e) => { this.setFilter(e.target.value); }}
label="Filter toggles"
style={{ width: '100%' }}
/>
<div className={styles.topListItem2} style={{ margin: '-10px 10px 0 10px' }}>
<Textfield
floatingLabel
value={settings.filter}
onChange={(e) => { this.setFilter(e.target.value); }}
label="Filter toggles"
style={{ width: '100%' }}
/>
</div>
<div style={{ position: 'relative' }} className={styles.topListItem0}>
<IconButton name="sort" id="demo-menu-top-right" colored title="Sort" />
<Menu target="demo-menu-top-right" valign="bottom" align="right" ripple onClick={
(e) => this.setSort(e.target.getAttribute('data-target'))}>
<MenuItem disabled>Filter by:</MenuItem>
<MenuItem disabled={!settings.sort || settings.sort === 'nosort'} data-target="nosort">Default</MenuItem>
<MenuItem disabled={settings.sort === 'name'} data-target="name">Name</MenuItem>
<MenuItem disabled={settings.sort === 'enabled'} data-target="enabled">Enabled</MenuItem>
<MenuItem disabled={settings.sort === 'appName'} data-target="appName">Application name</MenuItem>
<MenuItem disabled={settings.sort === 'created'} data-target="created">Created</MenuItem>
<MenuItem disabled={settings.sort === 'strategies'} data-target="strategies">Strategies</MenuItem>
<MenuItem disabled={settings.sort === 'metrics'} data-target="metrics">Metrics</MenuItem>
</Menu>
</div>
<Link to="/features/create" className={styles.topListItem0}>
<IconButton ripple raised name="add" component="span" style={{ color: 'black' }}/>
</Link>
</div>
<div style={{ position: 'relative' }} className={styles.topListItem0}>
<IconButton name="sort" id="demo-menu-top-right" colored title="Sort" />
<Menu target="demo-menu-top-right" valign="bottom" align="right" ripple onClick={
(e) => this.setSort(e.target.getAttribute('data-target'))}>
<MenuItem disabled>Filter by:</MenuItem>
<MenuItem disabled={!settings.sort || settings.sort === 'nosort'} data-target="nosort">Default</MenuItem>
<MenuItem disabled={settings.sort === 'name'} data-target="name">Name</MenuItem>
<MenuItem disabled={settings.sort === 'enabled'} data-target="enabled">Enabled</MenuItem>
<MenuItem disabled={settings.sort === 'appName'} data-target="appName">Application name</MenuItem>
<MenuItem disabled={settings.sort === 'created'} data-target="created">Created</MenuItem>
<MenuItem disabled={settings.sort === 'strategies'} data-target="strategies">Strategies</MenuItem>
<MenuItem disabled={settings.sort === 'metrics'} data-target="metrics">Metrics</MenuItem>
</Menu>
</div>
<ul className={['mdl-list', commonStyles.list].join(' ')}>
{features.map((feature, i) =>
<Feature key={i}
settings={settings}
metricsLastHour={featureMetrics.lastHour[feature.name]}
metricsLastMinute={featureMetrics.lastMinute[feature.name]}
feature={feature}
toggleFeature={toggleFeature}/>
)}
</ul>
<hr />
<Link to="/features/create" className={styles.topListItem0}>
<IconButton ripple raised name="add" component="span" style={{ color: 'black' }}/>
<FABButton ripple component="span" mini>
<Icon name="add" />
</FABButton>
</Link>
</div>
<ul className="mdl-list">
{features.map((feature, i) =>
<Feature key={i}
settings={settings}
metricsLastHour={featureMetrics.lastHour[feature.name]}
metricsLastMinute={featureMetrics.lastMinute[feature.name]}
feature={feature}
toggleFeature={toggleFeature}/>
)}
</ul>
<hr />
<Link to="/features/create" className={styles.topListItem0}>
<FABButton ripple component="span" mini>
<Icon name="add" />
</FABButton>
</Link>
</div>
</Cell>
</Grid>
);
}
}

View File

@ -1,5 +1,5 @@
import React, { PropTypes } from 'react';
import { Tabs, Tab, ProgressBar, IconButton } from 'react-mdl';
import { Tabs, Tab, ProgressBar, IconButton, Grid, Cell } from 'react-mdl';
import { hashHistory, Link } from 'react-router';
import HistoryComponent from '../history/history-list-toggle-container';
@ -90,25 +90,27 @@ export default class ViewFeatureToggleComponent extends React.Component {
};
return (
<div>
<h4>
<SwitchWithLabel checked={featureToggle.enabled} onChange={() => toggleFeature(featureToggle.name)} />
{featureToggle.name} <small>{featureToggle.enabled ? 'is enabled' : 'is disabled'}</small>
<Grid className="mdl-color--white">
<Cell col={12}>
<h4 style={{ marginTop: '16px' }}>
<SwitchWithLabel checked={featureToggle.enabled} onChange={() => toggleFeature(featureToggle.name)} />
{featureToggle.name} <small>{featureToggle.enabled ? 'is enabled' : 'is disabled'}</small>
<IconButton style={{ float: 'right' }} name="delete" onClick={removeToggle} className="mdl-color-text--grey-600" />
<small style={{ float: 'right', lineHeight: '38px' }}>
Created {formatFullDateTime(featureToggle.createdAt)}
</small>
</h4>
<div className="mdl-color-text--grey"><small>{featureToggle.description}</small></div>
<Tabs activeTab={activeTabId} ripple style={{ marginBottom: '10px' }}>
<Tab onClick={() => this.goToTab('view', featureToggleName)}>Metrics</Tab>
<Tab onClick={() => this.goToTab('edit', featureToggleName)}>Edit</Tab>
<Tab onClick={() => this.goToTab('history', featureToggleName)}>History</Tab>
</Tabs>
<IconButton style={{ float: 'right' }} name="delete" onClick={removeToggle} className="mdl-color-text--grey-600" />
<small style={{ float: 'right', lineHeight: '38px' }}>
Created {formatFullDateTime(featureToggle.createdAt)}
</small>
</h4>
<div className="mdl-color-text--grey"><small>{featureToggle.description}</small></div>
<Tabs activeTab={activeTabId} ripple style={{ marginBottom: '10px' }} tabBarProps={{ style: { width: '100%' } }}>
<Tab onClick={() => this.goToTab('view', featureToggleName)}>Metrics</Tab>
<Tab onClick={() => this.goToTab('edit', featureToggleName)}>Edit</Tab>
<Tab onClick={() => this.goToTab('history', featureToggleName)}>History</Tab>
</Tabs>
{tabContent}
</div>
{tabContent}
</Cell>
</Grid>
);
}
}

View File

@ -1,6 +1,6 @@
import React, { PureComponent } from 'react';
import { Grid, Cell } from 'react-mdl';
import HistoryList from './history-list-container';
class History extends PureComponent {
componentDidMount () {
@ -18,7 +18,11 @@ class History extends PureComponent {
}
return (
<HistoryList history={history} title="Last 100 changes" />
<Grid className="mdl-color--white">
<Cell col={12}>
<HistoryList history={history} title="Last 100 changes" />
</Cell>
</Grid>
);
}
}

View File

@ -77,7 +77,7 @@ class HistoryItem extends PureComponent {
changes = <div className={KLASSES.N}>{JSON.stringify(entry.data, null, 2)}</div>;
}
return (<pre style={{ maxWidth: '500px', overflowX: 'auto', overflowY: 'hidden', width: 'auto' }}>
return (<pre style={{ maxWidth: '354px', overflowX: 'auto', overflowY: 'hidden', width: 'auto' }}>
<code className="smalltext man">{changes.length === 0 ? '(no changes)' : changes}</code>
</pre>);
}

View File

@ -2,10 +2,10 @@ import React, { Component } from 'react';
import HistoryItemDiff from './history-item-diff';
import HistoryItemJson from './history-item-json';
import { Table, TableHeader } from 'react-mdl';
import { HeaderTitle, SwitchWithLabel } from '../common';
import { HeaderTitle, SwitchWithLabel, styles as commonStyles } from '../common';
import { formatFullDateTime } from '../common/util';
import style from './history.scss';
import styles from './history.scss';
class HistoryList extends Component {
@ -32,7 +32,8 @@ class HistoryList extends Component {
diff: (<HistoryItemDiff entry={entry} />),
}, entry))
}
style={{ width: '100%' }}
className={commonStyles.fullwidth}
style={{ border: 0 }}
>
<TableHeader name="type">Type</TableHeader>
<TableHeader name="createdBy">User</TableHeader>
@ -42,11 +43,13 @@ class HistoryList extends Component {
}
return (
<div className={style.history}>
<div className={styles.history}>
<HeaderTitle title={this.props.title} actions={
<SwitchWithLabel checked={showData} onChange={this.toggleShowDiff.bind(this)}>Show full events</SwitchWithLabel>
}/>
{entries}
<div style={{ overflowX: 'scroll' }}>
{entries}
</div>
</div>
);
}

View File

@ -1,6 +1,6 @@
import React, { PropTypes, Component } from 'react';
import { Textfield, IconButton, Menu, MenuItem, Checkbox } from 'react-mdl';
import { Textfield, IconButton, Menu, MenuItem, Checkbox, Grid, Cell } from 'react-mdl';
import { FormButtons } from '../common';
@ -64,7 +64,7 @@ const Parameter = ({ set, input = {}, index }) => (
const EditHeader = () => (
<div>
<h4>Edit strategy</h4>
<h4 style={{ marginTop: '16px' }}>Edit strategy</h4>
<p style={{ background: '#ffb7b7', padding: '16px 20px' }}>
Be carefull! Changing a strategy definition might also require changes to the
implementation in the clients.
@ -74,7 +74,7 @@ const EditHeader = () => (
const CreateHeader = () => (
<div>
<h4>Create a new Strategy definition</h4>
<h4 style={{ marginTop: '16px' }}>Create a new Strategy definition</h4>
</div>
);
@ -130,44 +130,48 @@ class AddStrategy extends Component {
} = this.props;
return (
<form onSubmit={onSubmit(input)}>
{editmode ? <EditHeader /> : <CreateHeader />}
<Textfield label="Strategy name"
floatingLabel
name="name"
required
disabled={editmode}
pattern="^[0-9a-zA-Z\.\-]+$"
onChange={({ target }) => setValue('name', trim(target.value))}
value={input.name}
/>
<br />
<Textfield
floatingLabel
style={{ width: '100%' }}
rows={1}
label="Description"
name="description"
onChange={({ target }) => setValue('description', target.value)}
value={input.description}
/>
<Grid className="mdl-color--white">
<Cell col={12}>
<form onSubmit={onSubmit(input)}>
{editmode ? <EditHeader /> : <CreateHeader />}
<Textfield label="Strategy name"
floatingLabel
name="name"
required
disabled={editmode}
pattern="^[0-9a-zA-Z\.\-]+$"
onChange={({ target }) => setValue('name', trim(target.value))}
value={input.name}
/>
<br />
<Textfield
floatingLabel
style={{ width: '100%' }}
rows={1}
label="Description"
name="description"
onChange={({ target }) => setValue('description', target.value)}
value={input.description}
/>
<Parameters input={input.parameters} count={input._params} updateInList={updateInList} />
<IconButton raised name="add" title="Add parameter" onClick={(e) => {
e.preventDefault();
incValue('_params');
}}/> &nbsp;Add parameter
<Parameters input={input.parameters} count={input._params} updateInList={updateInList} />
<IconButton raised name="add" title="Add parameter" onClick={(e) => {
e.preventDefault();
incValue('_params');
}}/> &nbsp;Add parameter
<br />
<hr />
<br />
<hr />
<FormButtons
submitText={editmode ? 'Update' : 'Create'}
onCancel={onCancel}
/>
</form>
<FormButtons
submitText={editmode ? 'Update' : 'Create'}
onCancel={onCancel}
/>
</form>
</Cell>
</Grid>
);
}
}

View File

@ -1,8 +1,8 @@
import React, { Component } from 'react';
import { Link } from 'react-router';
import { List, ListItem, ListItemContent, IconButton } from 'react-mdl';
import { HeaderTitle } from '../common';
import { List, ListItem, ListItemContent, IconButton, Grid, Cell } from 'react-mdl';
import { HeaderTitle, styles as commonStyles } from '../common';
class StrategiesListComponent extends Component {
@ -18,26 +18,28 @@ class StrategiesListComponent extends Component {
const { strategies, removeStrategy } = this.props;
return (
<div>
<HeaderTitle title="Strategies"
actions={
<IconButton raised
name="add"
onClick={() => this.context.router.push('/strategies/create')}
title="Add new strategy" />} />
<List>
{strategies.length > 0 ? strategies.map((strategy, i) => (
<ListItem key={i} twoLine>
<ListItemContent icon="extension" subtitle={strategy.description}>
<Link to={`/strategies/view/${strategy.name}`}>
<strong>{strategy.name}</strong>
</Link>
</ListItemContent>
<IconButton name="delete" onClick={() => removeStrategy(strategy)} />
</ListItem>
)) : <ListItem>No entries</ListItem>}
</List>
</div>
<Grid className="mdl-color--white">
<Cell col={12}>
<HeaderTitle title="Strategies"
actions={
<IconButton raised
name="add"
onClick={() => this.context.router.push('/strategies/create')}
title="Add new strategy" />} />
<List className={commonStyles.list}>
{strategies.length > 0 ? strategies.map((strategy, i) => (
<ListItem key={i} twoLine>
<ListItemContent icon="extension" subtitle={strategy.description}>
<Link to={`/strategies/view/${strategy.name}`}>
<strong>{strategy.name}</strong>
</Link>
</ListItemContent>
<IconButton name="delete" onClick={() => removeStrategy(strategy)} />
</ListItem>
)) : <ListItem>No entries</ListItem>}
</List>
</Cell>
</Grid>
);
}
}

View File

@ -1,6 +1,6 @@
import React, { PropTypes, Component } from 'react';
import { hashHistory } from 'react-router';
import { Tabs, Tab, ProgressBar } from 'react-mdl';
import { Tabs, Tab, ProgressBar, Grid, Cell } from 'react-mdl';
import ShowStrategy from './show-strategy-component';
import EditStrategy from './edit-container';
import { HeaderTitle } from '../common';
@ -61,18 +61,20 @@ export default class StrategyDetails extends Component {
const tabContent = this.getTabContent(activeTabId);
return (
<div>
<HeaderTitle title={strategy.name} subtitle={strategy.description} />
<Tabs activeTab={activeTabId} ripple>
<Tab onClick={() => this.goToTab('view')}>Details</Tab>
<Tab onClick={() => this.goToTab('edit')}>Edit</Tab>
</Tabs>
<section>
<div className="content">
{tabContent}
</div>
</section>
</div>
<Grid className="mdl-color--white">
<Cell col={12}>
<HeaderTitle title={strategy.name} subtitle={strategy.description} />
<Tabs activeTab={activeTabId} ripple>
<Tab onClick={() => this.goToTab('view')}>Details</Tab>
<Tab onClick={() => this.goToTab('edit')}>Edit</Tab>
</Tabs>
<section>
<div className="content">
{tabContent}
</div>
</section>
</Cell>
</Grid>
);
}
}

View File

@ -1,3 +1,34 @@
.content {
width: 1200px;
margin-left: auto;
margin-right: auto;
margin-top: 16px;
margin-bottom: 16px;
}
@media (max-width: 1800px) {
.content {
width: 66.66%;
}
}
@media (max-width: 1260px) {
.content {
width: 840px;
}
}
@media (max-width: 920px) {
.content {
width: auto;
margin-left: 40px;
margin-right: 40px;
}
}
@media (max-width: 600px) {
.content {
margin-left: 0;
margin-right: 0;
}
}
.headerTitleLink {
text-decoration: none;
}