Mirrors/unleash.unleash
1
0
Fork 0
mirror of https://github.com/Unleash/unleash.git synced 2025-07-31 13:47:02 +02:00
Code Issues Projects Releases Wiki Activity

improved page layout + horizontal scrolling tables on mobile

Browse Source
This commit is contained in:
vsandvold 2017-01-23 09:13:38 +01:00
parent 553989f636
commit 3415fcb82e
17 changed files with 316 additions and 244 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
frontend/src/component/app.jsx
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 />

6
frontend/src/component/application/application-edit-component.js
View File

@ -152,7 +152,8 @@ class ClientApplications extends PureComponent {
return (
<div>
<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>}
/>
@ -163,7 +164,8 @@ class ClientApplications extends PureComponent {
</Tabs>
{content}
</div>
</Cell>
</Grid>
);
}
}

8
frontend/src/component/application/application-list-component.js
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>
<Grid className="mdl-color--white">
<Cell col={12}>
<HeaderTitle title="Applications" />
<AppsLinkList apps={applications} />
</div>
</Cell>
</Grid>
);
}
}

11
frontend/src/component/archive/archive-list-component.jsx
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,8 +14,10 @@ class ArchiveList extends Component {
e.reviveName = e.name;
});
return (
<div>
<Grid className="mdl-color--white">
<Cell col={12}>
<HeaderTitle title="Toggle Archive" />
<div style={{ overflowX: 'scroll' }}>
{
archive.length > 0 ?
<DataTable
@ -24,7 +26,8 @@ class ArchiveList extends Component {
<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 style={{ width: '25px' }} name="enabled" cellFormatter={(v) => (v ? 'Yes' : '-')}>
Enabled</TableHeader>
<TableHeader name="name">Toggle name</TableHeader>
<TableHeader numeric name="createdAt">Created</TableHeader>
</DataTable> :
@ -34,6 +37,8 @@ class ArchiveList extends Component {
</div>
}
</div>
</Cell>
</Grid>
);
}
}

12
frontend/src/component/common/common.scss
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;
}
}

2
frontend/src/component/feature/feature-list-item-component.jsx
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>

2
frontend/src/component/feature/feature.scss
View File

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

6
frontend/src/component/feature/form/index.jsx
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,6 +45,8 @@ class AddFeatureToggleComponent extends Component {
const configuredStrategies = input.strategies || [];
return (
<Grid className="mdl-color--white">
<Cell col={12}>
<form onSubmit={onSubmit(input)}>
{title && <HeaderTitle title={title} />}
<section>
@ -92,6 +94,8 @@ class AddFeatureToggleComponent extends Component {
onCancel={onCancel}
/>
</form>
</Cell>
</Grid>
);
}

11
frontend/src/component/feature/list-component.jsx
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,7 +50,8 @@ export default class FeatureListComponent extends React.PureComponent {
const { features, toggleFeature, featureMetrics, settings } = this.props;
return (
<div>
<Grid className="mdl-color--white">
<Cell col={12}>
<div className={styles.topList}>
<Chip onClick={() => this.toggleMetrics()} className={styles.topListItem0}>
{ settings.showLastHour &&
@ -96,7 +98,7 @@ export default class FeatureListComponent extends React.PureComponent {
</Link>
</div>
<ul className="mdl-list">
<ul className={['mdl-list', commonStyles.list].join(' ')}>
{features.map((feature, i) =>
<Feature key={i}
settings={settings}
@ -112,7 +114,8 @@ export default class FeatureListComponent extends React.PureComponent {
<Icon name="add" />
</FABButton>
</Link>
</div>
</Cell>
</Grid>
);
}
}

12
frontend/src/component/feature/view-component.jsx
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,8 +90,9 @@ export default class ViewFeatureToggleComponent extends React.Component {
};
return (
<div>
<h4>
<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>
@ -101,14 +102,15 @@ export default class ViewFeatureToggleComponent extends React.Component {
</small>
</h4>
<div className="mdl-color-text--grey"><small>{featureToggle.description}</small></div>
<Tabs activeTab={activeTabId} ripple style={{ marginBottom: '10px' }}>
<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>
</Cell>
</Grid>
);
}
}

6
frontend/src/component/history/history-component.jsx
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 (
<Grid className="mdl-color--white">
<Cell col={12}>
<HistoryList history={history} title="Last 100 changes" />
</Cell>
</Grid>
);
}
}

2
frontend/src/component/history/history-item-diff.jsx
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>);
}

11
frontend/src/component/history/history-list-component.jsx
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,12 +43,14 @@ 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>
}/>
<div style={{ overflowX: 'scroll' }}>
{entries}
</div>
</div>
);
}
}

10
frontend/src/component/strategies/add-strategy.jsx
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,6 +130,8 @@ class AddStrategy extends Component {
} = this.props;
return (
<Grid className="mdl-color--white">
<Cell col={12}>
<form onSubmit={onSubmit(input)}>
{editmode ? <EditHeader /> : <CreateHeader />}
<Textfield label="Strategy name"
@ -168,6 +170,8 @@ class AddStrategy extends Component {
onCancel={onCancel}
/>
</form>
</Cell>
</Grid>
);
}
}

12
frontend/src/component/strategies/list-component.jsx
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,14 +18,15 @@ class StrategiesListComponent extends Component {
const { strategies, removeStrategy } = this.props;
return (
<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>
<List className={commonStyles.list}>
{strategies.length > 0 ? strategies.map((strategy, i) => (
<ListItem key={i} twoLine>
<ListItemContent icon="extension" subtitle={strategy.description}>
@ -37,7 +38,8 @@ class StrategiesListComponent extends Component {
</ListItem>
)) : <ListItem>No entries</ListItem>}
</List>
</div>
</Cell>
</Grid>
);
}
}

8
frontend/src/component/strategies/strategy-details-component.jsx
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,7 +61,8 @@ export default class StrategyDetails extends Component {
const tabContent = this.getTabContent(activeTabId);
return (
<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>
@ -72,7 +73,8 @@ export default class StrategyDetails extends Component {
{tabContent}
</div>
</section>
</div>
</Cell>
</Grid>
);
}
}

31
frontend/src/component/styles.scss
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;
}