Mirrors/unleash.unleash
1
0
Fork 0
mirror of https://github.com/Unleash/unleash.git synced 2025-04-15 01:16:22 +02:00
Code Issues Projects Releases Wiki Activity

fix: minur ux tweaks

Browse Source
This commit is contained in:
Ivar Conradi Østhus 2020-10-05 21:51:45 +02:00
parent 14595fb051
commit 107f932e03
5 changed files with 29 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
frontend/src/component/feature/form/strategy-configure.jsx
View File

@ -134,6 +134,7 @@ class StrategyConfigure extends React.Component {
}
return (
<div key={name}>
<br />
<StrategyInputPercentage
name={name}
onChange={this.handleConfigChange.bind(this, name)}

16
frontend/src/component/menu/__tests__/__snapshots__/drawer-test.jsx.snap
View File

@ -2,7 +2,12 @@
exports[`should render DrawerMenu 1`] = `
<react-mdl-Drawer
className="mdl-color--white"
style={
Object {
"border": 0,
"boxShadow": "none",
}
}
>
<span
className="drawerTitle mdl-layout-title"
@ -111,7 +116,12 @@ exports[`should render DrawerMenu 1`] = `
exports[`should render DrawerMenu with "features" selected 1`] = `
<react-mdl-Drawer
className="mdl-color--white"
style={
Object {
"border": 0,
"boxShadow": "none",
}
}
>
<span
className="drawerTitle mdl-layout-title"
@ -134,7 +144,7 @@ exports[`should render DrawerMenu with "features" selected 1`] = `
>
<a
aria-current="page"
className="navigationLink mdl-color-text--grey-900 navigationLink mdl-color-text--black mdl-color--blue-grey-100"
className="navigationLink mdl-color-text--grey-900 navigationLink mdl-color-text--black mdl-color--blue-grey-50"
href="/features"
onClick={[Function]}
style={Object {}}

9
frontend/src/component/menu/drawer.jsx
View File

@ -41,11 +41,11 @@ function renderLink(link) {
}
}
export const DrawerMenu = ({ links = [] }) => (
<Drawer className="mdl-color--white">
export const DrawerMenu = ({ links = [], title = 'Unleash' }) => (
<Drawer style={{ boxShadow: 'none', border: 0 }}>
<span className={[styles.drawerTitle, 'mdl-layout-title'].join(' ')}>
<img src="public/logo.png" width="32" height="32" className={styles.drawerTitleLogo} />
<span className={styles.drawerTitleText}>Unleash</span>
<span className={styles.drawerTitleText}>{title}</span>
</span>
<hr />
<Navigation className={styles.navigation}>
@ -54,7 +54,7 @@ export const DrawerMenu = ({ links = [] }) => (
key={item.path}
to={item.path}
className={[styles.navigationLink, 'mdl-color-text--grey-900'].join(' ')}
activeClassName={[styles.navigationLink, 'mdl-color-text--black', 'mdl-color--blue-grey-100'].join(
activeClassName={[styles.navigationLink, 'mdl-color-text--black', 'mdl-color--blue-grey-50'].join(
' '
)}
>
@ -69,4 +69,5 @@ export const DrawerMenu = ({ links = [] }) => (
DrawerMenu.propTypes = {
links: PropTypes.array,
title: PropTypes.string,
};

6
frontend/src/component/menu/header.jsx
View File

@ -35,16 +35,16 @@ class HeaderComponent extends PureComponent {
}
render() {
const { headerBackground, links } = this.props.uiConfig;
const { headerBackground, links, name } = this.props.uiConfig;
const style = headerBackground ? { background: headerBackground } : {};
return (
<React.Fragment>
<Header title={<Route path="/:path" component={Breadcrum} />} style={style}>
<Header scroll seamed title={<Route path="/:path" component={Breadcrum} />} style={style}>
<Navigation>
<ShowUserContainer />
</Navigation>
</Header>
<DrawerMenu links={links} />
<DrawerMenu links={links} title={name} />
</React.Fragment>
);
}

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

@ -10,7 +10,7 @@
}
.content {
width: 1200px;
width: 1100px;
margin-left: auto;
margin-right: auto;
margin-top: 16px;
@ -25,6 +25,8 @@
@media (max-width: 1024px) {
.content {
width: 100%;
margin-left: 0;
margin-right: 0;
}
}
@media (max-width: 600px) {
@ -46,6 +48,7 @@
padding-bottom: 16px;
padding-left: 24px !important;
}
@media screen and (max-width: 1024px) {
.drawerTitle {
padding-top: 12px;
@ -59,14 +62,16 @@
.drawerTitleText {
display: inline-block;
vertical-align: middle;
font-size: 0.8em;
}
.navigation {
padding: 8px 0 !important;
padding: 8px 5px 8px 0 !important;
}
.navigationLink {
padding: 12px 20px !important;
border-radius: 0 50px 50px 0;
}
@media screen and (max-width: 1024px) {
.navigationLink {