Mirrors/unleash.unleash
1
0
Fork 0
mirror of https://github.com/Unleash/unleash.git synced 2024-12-22 19:07:54 +01:00
Code Issues Projects Releases Wiki Activity

styling cleanup

Browse Source
This commit is contained in:
vsandvold 2017-03-01 21:53:25 +01:00
parent 0418603021
commit d62175eb5b
9 changed files with 26 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
frontend/src/component/app.jsx
View File

@ -5,7 +5,6 @@ import { Layout, Drawer, Header, Navigation, Content,
} from 'react-mdl'; } from 'react-mdl';
import { Link } from 'react-router'; import { Link } from 'react-router';
import styles from './styles.scss'; import styles from './styles.scss';
import { styles as commonStyles } from './common';
import ErrorContainer from './error/error-container'; import ErrorContainer from './error/error-container';
import UserContainer from './user/user-container'; import UserContainer from './user/user-container';
@ -114,7 +113,7 @@ export default class App extends Component {
}; };
return ( return (
<div> <div className={styles.container}>
<UserContainer /> <UserContainer />
<Layout fixedHeader> <Layout fixedHeader>
<Header title={this.getTitleWithLinks()}> <Header title={this.getTitleWithLinks()}>
@ -124,7 +123,7 @@ export default class App extends Component {
</Header> </Header>
<Drawer className="mdl-color--white"> <Drawer className="mdl-color--white">
<span className={[styles.drawerTitle, 'mdl-layout-title'].join(' ')}>Unleash</span> <span className={[styles.drawerTitle, 'mdl-layout-title'].join(' ')}>Unleash</span>
<hr className={commonStyles.divider}/> <hr/>
<Navigation className={styles.navigation}> <Navigation className={styles.navigation}>
{createListItem('/features', 'Feature toggles', 'list', true)} {createListItem('/features', 'Feature toggles', 'list', true)}
{createListItem('/strategies', 'Strategies', 'extension', true)} {createListItem('/strategies', 'Strategies', 'extension', true)}
@ -132,14 +131,13 @@ export default class App extends Component {
{createListItem('/archive', 'Archived toggles', 'archive', true)} {createListItem('/archive', 'Archived toggles', 'archive', true)}
{createListItem('/applications', 'Applications', 'apps', true)} {createListItem('/applications', 'Applications', 'apps', true)}
</Navigation> </Navigation>
<hr className={commonStyles.divider}/> <hr/>
<Navigation className={styles.navigation}> <Navigation className={styles.navigation}>
<a href="https://github.com/Unleash" target="_blank" className={[styles.navigationLink, 'mdl-color-text--grey-900'].join(' ')}> <a href="https://github.com/Unleash" target="_blank" className={[styles.navigationLink, 'mdl-color-text--grey-900'].join(' ')}>
<i className={[ <i className={[
'material-icons', 'material-icons',
styles.navigationIcon, styles.navigationIcon,
styles.githubIcon, styles.iconGitHub,
'mdl-color-text--grey-600',
].join(' ')}/>GitHub ].join(' ')}/>GitHub
</a> </a>
</Navigation> </Navigation>

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

@ -162,7 +162,7 @@ class ClientApplications extends PureComponent {
{url && {url &&
<CardMenu><IconLink url={url} icon="link"/></CardMenu> <CardMenu><IconLink url={url} icon="link"/></CardMenu>
} }
<hr className={commonStyles.divider}/> <hr/>
<Tabs activeTab={this.state.activeTab} onChange={(tabId) => this.setState({ activeTab: tabId })} ripple <Tabs activeTab={this.state.activeTab} onChange={(tabId) => this.setState({ activeTab: tabId })} ripple
tabBarProps={{ style: { width: '100%' } }} className="mdl-color--grey-100"> tabBarProps={{ style: { width: '100%' } }} className="mdl-color--grey-100">
<Tab>Details</Tab> <Tab>Details</Tab>

10
frontend/src/component/common/common.scss
View File

@ -17,16 +17,6 @@
display: none; display: none;
} }
.divider {
margin: 0;
height: auto;
border-color: rgba(0,0,0,.12);
}
.list {
margin: 0;
}
.listLink { .listLink {
color: #212121; color: #212121;
text-decoration: none; text-decoration: none;

2
frontend/src/component/common/index.js
View File

@ -17,7 +17,7 @@ export const AppsLinkList = ({ apps }) => (
<List> <List>
{apps.length > 0 && apps.map(({ appName, description = '-', icon = 'apps' }) => ( {apps.length > 0 && apps.map(({ appName, description = '-', icon = 'apps' }) => (
<ListItem twoLine key={appName}> <ListItem twoLine key={appName}>
<span className="mdl-list__item-primary-content"> <span className="mdl-list__item-primary-content" style={{ minWidth: 0 }}>
<Icon name={icon} className="mdl-list__item-avatar"/> <Icon name={icon} className="mdl-list__item-avatar"/>
<Link to={`/applications/${appName}`} className={[styles.listLink, styles.truncate].join(' ')}> <Link to={`/applications/${appName}`} className={[styles.listLink, styles.truncate].join(' ')}>
{appName} {appName}

4
frontend/src/component/feature/list-component.jsx
View File

@ -86,8 +86,8 @@ export default class FeatureListComponent extends React.PureComponent {
<MenuItem disabled={settings.sort === 'metrics'} data-target="metrics">Metrics</MenuItem> <MenuItem disabled={settings.sort === 'metrics'} data-target="metrics">Metrics</MenuItem>
</Menu> </Menu>
</CardActions> </CardActions>
<hr className={commonStyles.divider}/> <hr/>
<List className={commonStyles.list}> <List>
{features.map((feature, i) => {features.map((feature, i) =>
<Feature key={i} <Feature key={i}
settings={settings} settings={settings}

4
frontend/src/component/feature/metric-component.jsx
View File

@ -2,7 +2,7 @@ import React, { PropTypes } from 'react';
import { Grid, Cell, Icon, Chip, ChipContact } from 'react-mdl'; import { Grid, Cell, Icon, Chip, ChipContact } from 'react-mdl';
import Progress from './progress'; import Progress from './progress';
import { Link } from 'react-router'; import { Link } from 'react-router';
import { AppsLinkList, calc, styles as commonStyles } from '../common'; import { AppsLinkList, calc } from '../common';
import { formatFullDateTime } from '../common/util'; import { formatFullDateTime } from '../common/util';
import styles from './metrics.scss'; import styles from './metrics.scss';
@ -85,7 +85,7 @@ export default class MetricComponent extends React.Component {
<span>Created {formatFullDateTime(featureToggle.createdAt)}</span> <span>Created {formatFullDateTime(featureToggle.createdAt)}</span>
</Cell> </Cell>
</Grid> </Grid>
<hr className={commonStyles.divider}/> <hr/>
<StrategiesList strategies={featureToggle.strategies}/> <StrategiesList strategies={featureToggle.strategies}/>
</div>); </div>);
} }

2
frontend/src/component/feature/view-component.jsx
View File

@ -100,7 +100,7 @@ export default class ViewFeatureToggleComponent extends React.Component {
</span> </span>
<Button onClick={removeToggle} style={{ flexShrink: 0 }}>Archive</Button> <Button onClick={removeToggle} style={{ flexShrink: 0 }}>Archive</Button>
</CardActions> </CardActions>
<hr className={commonStyles.divider}/> <hr/>
<Tabs activeTab={activeTabId} ripple tabBarProps={{ style: { width: '100%' } }} className="mdl-color--grey-100"> <Tabs activeTab={activeTabId} ripple tabBarProps={{ style: { width: '100%' } }} className="mdl-color--grey-100">
<Tab onClick={() => this.goToTab('view', featureToggleName)}>Metrics</Tab> <Tab onClick={() => this.goToTab('view', featureToggleName)}>Metrics</Tab>
<Tab onClick={() => this.goToTab('edit', featureToggleName)}>Edit</Tab> <Tab onClick={() => this.goToTab('edit', featureToggleName)}>Edit</Tab>

4
frontend/src/component/strategies/list-component.jsx
View File

@ -2,7 +2,7 @@ import React, { Component } from 'react';
import { Link } from 'react-router'; import { Link } from 'react-router';
import { List, ListItem, ListItemContent, IconButton, Grid, Cell } from 'react-mdl'; import { List, ListItem, ListItemContent, IconButton, Grid, Cell } from 'react-mdl';
import { HeaderTitle, styles as commonStyles } from '../common'; import { HeaderTitle } from '../common';
class StrategiesListComponent extends Component { class StrategiesListComponent extends Component {
@ -26,7 +26,7 @@ class StrategiesListComponent extends Component {
name="add" name="add"
onClick={() => this.context.router.push('/strategies/create')} onClick={() => this.context.router.push('/strategies/create')}
title="Add new strategy" />} /> title="Add new strategy" />} />
<List className={commonStyles.list}> <List>
{strategies.length > 0 ? strategies.map((strategy, i) => ( {strategies.length > 0 ? strategies.map((strategy, i) => (
<ListItem key={i} twoLine> <ListItem key={i} twoLine>
<ListItemContent icon="extension" subtitle={strategy.description}> <ListItemContent icon="extension" subtitle={strategy.description}>

15
frontend/src/component/styles.scss
View File

@ -1,3 +1,14 @@
.container {
ul {
margin: 0;
}
hr {
margin: 0;
height: auto;
border-color: rgba(0,0,0,.12);
}
}
.content { .content {
width: 1200px; width: 1200px;
margin-left: auto; margin-left: auto;
@ -59,8 +70,8 @@
margin-right: 32px; margin-right: 32px;
} }
.githubIcon { .iconGitHub {
width: 24px; width: 24px;
height: 24px; height: 24px;
background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHN0eWxlPSJ3aWR0aDoyNHB4O2hlaWdodDoyNHB4IiB2aWV3Qm94PSIwIDAgMjQgMjQiPgogICAgPHBhdGggZmlsbD0iIzc1NzU3NSIgZD0iTTEyLDJBMTAsMTAgMCAwLDAgMiwxMkMyLDE2LjQyIDQuODcsMjAuMTcgOC44NCwyMS41QzkuMzQsMjEuNTggOS41LDIxLjI3IDkuNSwyMUM5LjUsMjAuNzcgOS41LDIwLjE0IDkuNSwxOS4zMUM2LjczLDE5LjkxIDYuMTQsMTcuOTcgNi4xNCwxNy45N0M1LjY4LDE2LjgxIDUuMDMsMTYuNSA1LjAzLDE2LjVDNC4xMiwxNS44OCA1LjEsMTUuOSA1LjEsMTUuOUM2LjEsMTUuOTcgNi42MywxNi45MyA2LjYzLDE2LjkzQzcuNSwxOC40NSA4Ljk3LDE4IDkuNTQsMTcuNzZDOS42MywxNy4xMSA5Ljg5LDE2LjY3IDEwLjE3LDE2LjQyQzcuOTUsMTYuMTcgNS42MiwxNS4zMSA1LjYyLDExLjVDNS42MiwxMC4zOSA2LDkuNSA2LjY1LDguNzlDNi41NSw4LjU0IDYuMiw3LjUgNi43NSw2LjE1QzYuNzUsNi4xNSA3LjU5LDUuODggOS41LDcuMTdDMTAuMjksNi45NSAxMS4xNSw2Ljg0IDEyLDYuODRDMTIuODUsNi44NCAxMy43MSw2Ljk1IDE0LjUsNy4xN0MxNi40MSw1Ljg4IDE3LjI1LDYuMTUgMTcuMjUsNi4xNUMxNy44LDcuNSAxNy40NSw4LjU0IDE3LjM1LDguNzlDMTgsOS41IDE4LjM4LDEwLjM5IDE4LjM4LDExLjVDMTguMzgsMTUuMzIgMTYuMDQsMTYuMTYgMTMuODEsMTYuNDFDMTQuMTcsMTYuNzIgMTQuNSwxNy4zMyAxNC41LDE4LjI2QzE0LjUsMTkuNiAxNC41LDIwLjY4IDE0LjUsMjFDMTQuNSwyMS4yNyAxNC42NiwyMS41OSAxNS4xNywyMS41QzE5LjE0LDIwLjE2IDIyLDE2LjQyIDIyLDEyQTEwLDEwIDAgMCwwIDEyLDJaIiAvPgo8L3N2Zz4=); background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHN0eWxlPSJ3aWR0aDoyNHB4O2hlaWdodDoyNHB4IiB2aWV3Qm94PSIwIDAgMjQgMjQiPgogICAgPHBhdGggZmlsbD0iIzc1NzU3NSIgZD0iTTEyLDJBMTAsMTAgMCAwLDAgMiwxMkMyLDE2LjQyIDQuODcsMjAuMTcgOC44NCwyMS41QzkuMzQsMjEuNTggOS41LDIxLjI3IDkuNSwyMUM5LjUsMjAuNzcgOS41LDIwLjE0IDkuNSwxOS4zMUM2LjczLDE5LjkxIDYuMTQsMTcuOTcgNi4xNCwxNy45N0M1LjY4LDE2LjgxIDUuMDMsMTYuNSA1LjAzLDE2LjVDNC4xMiwxNS44OCA1LjEsMTUuOSA1LjEsMTUuOUM2LjEsMTUuOTcgNi42MywxNi45MyA2LjYzLDE2LjkzQzcuNSwxOC40NSA4Ljk3LDE4IDkuNTQsMTcuNzZDOS42MywxNy4xMSA5Ljg5LDE2LjY3IDEwLjE3LDE2LjQyQzcuOTUsMTYuMTcgNS42MiwxNS4zMSA1LjYyLDExLjVDNS42MiwxMC4zOSA2LDkuNSA2LjY1LDguNzlDNi41NSw4LjU0IDYuMiw3LjUgNi43NSw2LjE1QzYuNzUsNi4xNSA3LjU5LDUuODggOS41LDcuMTdDMTAuMjksNi45NSAxMS4xNSw2Ljg0IDEyLDYuODRDMTIuODUsNi44NCAxMy43MSw2Ljk1IDE0LjUsNy4xN0MxNi40MSw1Ljg4IDE3LjI1LDYuMTUgMTcuMjUsNi4xNUMxNy44LDcuNSAxNy40NSw4LjU0IDE3LjM1LDguNzlDMTgsOS41IDE4LjM4LDEwLjM5IDE4LjM4LDExLjVDMTguMzgsMTUuMzIgMTYuMDQsMTYuMTYgMTMuODEsMTYuNDFDMTQuMTcsMTYuNzIgMTQuNSwxNy4zMyAxNC41LDE4LjI2QzE0LjUsMTkuNiAxNC41LDIwLjY4IDE0LjUsMjFDMTQuNSwyMS4yNyAxNC42NiwyMS41OSAxNS4xNywyMS41QzE5LjE0LDIwLjE2IDIyLDE2LjQyIDIyLDEyQTEwLDEwIDAgMCwwIDEyLDJaIiAvPgo8L3N2Zz4=);
} }