mirror of
https://github.com/Unleash/unleash.git
synced 2024-12-22 19:07:54 +01:00
Adjusted layout #153
- fill full screen - be more responsive (don't show hamburger on desktop)
This commit is contained in:
ivaosthu
Ivar Conradi Østhus
parent
02cfdc522f
commit
ec77cd05ec
@ -2,6 +2,10 @@
|
||||
|
||||
function addOldFields (feature) {
|
||||
const modifiedFeature = Object.assign({}, feature);
|
||||
if (!feature.strategies) {
|
||||
modifiedFeature.strategies = [];
|
||||
return modifiedFeature;
|
||||
}
|
||||
modifiedFeature.strategy = feature.strategies[0].name;
|
||||
modifiedFeature.parameters = Object.assign({}, feature.strategies[0].parameters);
|
||||
return modifiedFeature;
|
||||
|
||||
@ -14,21 +14,24 @@ export default class App extends Component {
|
||||
};
|
||||
}
|
||||
|
||||
onOverlayClick = () => this.setState({ drawerActive: false });
|
||||
|
||||
render () {
|
||||
return (
|
||||
<div className={style.container}>
|
||||
<AppBar title="Unleash Admin" leftIcon="menu" onLeftIconClick={this.toggleDrawerActive} />
|
||||
<Layout>
|
||||
<NavDrawer active={this.state.drawerActive} permanentAt="sm" style={{ width: '200px' }}>
|
||||
<Navigation />
|
||||
</NavDrawer>
|
||||
<Panel scrollY={false}>
|
||||
<div style={{ padding: '1.8em' }}>
|
||||
{this.props.children}
|
||||
</div>
|
||||
|
||||
</Panel>
|
||||
</Layout>
|
||||
<AppBar title="Unleash Admin" leftIcon="menu" onLeftIconClick={this.toggleDrawerActive} className={style.appBar} />
|
||||
<div className={style.container} style={{ top: '6.4rem' }}>
|
||||
<Layout>
|
||||
<NavDrawer active={this.state.drawerActive} permanentAt="sm" onOverlayClick={this.onOverlayClick} >
|
||||
<Navigation />
|
||||
</NavDrawer>
|
||||
<Panel scrollY>
|
||||
<div style={{ padding: '1.8rem' }}>
|
||||
{this.props.children}
|
||||
</div>
|
||||
</Panel>
|
||||
</Layout>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
import React, { PropTypes } from 'react';
|
||||
import { connect } from 'react-redux';
|
||||
import { Input, Switch, Button } from 'react-toolbox';
|
||||
import { addFeatureToggle } from '../../store/actions';
|
||||
import { createFeatureToggles } from '../../store/featureToggleActions';
|
||||
|
||||
|
||||
class AddFeatureToggle extends React.Component {
|
||||
@ -32,7 +32,7 @@ class AddFeatureToggle extends React.Component {
|
||||
|
||||
onSubmit = (evt) => {
|
||||
evt.preventDefault();
|
||||
this.props.dispatch(addFeatureToggle(this.state.featureToggle));
|
||||
this.props.dispatch(createFeatureToggles(this.state.featureToggle));
|
||||
this.context.router.push('/features');
|
||||
};
|
||||
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
import { connect } from 'react-redux';
|
||||
import { toggleFeature, fetchFeatureToggles } from '../../store/actions';
|
||||
import { toggleFeature, fetchFeatureToggles } from '../../store/featureToggleActions';
|
||||
import FeatureList from './FeatureList';
|
||||
|
||||
const mapStateToProps = (state) => ({
|
||||
|
||||
@ -3,11 +3,22 @@ export const TOGGLE_FEATURE_TOGGLE = 'TOGGLE_FEATURE_TOGGLE';
|
||||
export const REQUEST_FEATURE_TOGGLES = 'REQUEST_FEATURE_TOGGLES';
|
||||
export const RECEIVE_FEATURE_TOGGLES = 'RECEIVE_FEATURE_TOGGLES';
|
||||
export const ERROR_RECEIVE_FEATURE_TOGGLES = 'ERROR_RECEIVE_FEATURE_TOGGLES';
|
||||
export const ERROR_CREATING_FEATURE_TOGGLE = 'ERROR_CREATING_FEATURE_TOGGLE';
|
||||
|
||||
export const addFeatureToggle = (featureToggle) => ({
|
||||
type: ADD_FEATURE_TOGGLE,
|
||||
featureToggle,
|
||||
});
|
||||
function addFeatureToggle (featureToggle) {
|
||||
return {
|
||||
type: ADD_FEATURE_TOGGLE,
|
||||
featureToggle,
|
||||
};
|
||||
};
|
||||
|
||||
function errorCreatingFeatureToggle (statusCode) {
|
||||
return {
|
||||
type: ERROR_CREATING_FEATURE_TOGGLE,
|
||||
statusCode,
|
||||
receivedAt: Date.now(),
|
||||
};
|
||||
}
|
||||
|
||||
export const toggleFeature = (featureName) => ({
|
||||
type: TOGGLE_FEATURE_TOGGLE,
|
||||
@ -54,3 +65,27 @@ export function fetchFeatureToggles () {
|
||||
.catch(error => dispatch(errorReceiveFeatureToggles(error)));
|
||||
};
|
||||
}
|
||||
|
||||
|
||||
export function createFeatureToggles (featureToggle) {
|
||||
return dispatch => {
|
||||
dispatch(requestFeatureToggles());
|
||||
return fetch('/features', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Accept': 'application/json',
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
body: JSON.stringify(featureToggle),
|
||||
})
|
||||
.then(response => {
|
||||
if (!response.ok) {
|
||||
let error = new Error('failed fetching');
|
||||
error.status = response.status;
|
||||
throw error;
|
||||
}
|
||||
})
|
||||
.then(() => dispatch(addFeatureToggle(featureToggle)))
|
||||
.catch(error => dispatch(errorCreatingFeatureToggle(error)));
|
||||
};
|
||||
}
|
||||
@ -2,7 +2,7 @@ import {
|
||||
ADD_FEATURE_TOGGLE,
|
||||
TOGGLE_FEATURE_TOGGLE,
|
||||
RECEIVE_FEATURE_TOGGLES,
|
||||
} from './actions';
|
||||
} from './featureToggleActions';
|
||||
|
||||
const feature = (state = {}, action) => {
|
||||
switch (action.type) {
|
||||
|
||||
@ -1,14 +1,17 @@
|
||||
.container {
|
||||
height: auto;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.navigation {
|
||||
.active {
|
||||
background-color: #EEE;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -3,15 +3,11 @@
|
||||
@import "~react-toolbox/lib/mixins";
|
||||
@import "~react-toolbox/lib/commons";
|
||||
|
||||
|
||||
$color-primary:$palette-blue-400;
|
||||
$color-primary-dark: $palette-blue-700;
|
||||
|
||||
$appbar-height-m-portrait: 5.6 * $unit !default;
|
||||
$appbar-height-m-landscape: 4.8 * $unit !default;
|
||||
|
||||
$navigation-drawer-desktop-width: 3 * $standard-increment-desktop !default;
|
||||
$navigation-drawer-max-desktop-width: 40 * $unit !default;
|
||||
$navigation-drawer-desktop-width: 4 * $standard-increment-desktop !default;
|
||||
$navigation-drawer-max-desktop-width: 70 * $unit !default;
|
||||
|
||||
// Mobile:
|
||||
// Width = Screen width − 56 dp
|
||||
@ -19,4 +15,17 @@ $navigation-drawer-max-desktop-width: 40 * $unit !default;
|
||||
$navigation-drawer-mobile-width: 5 * $standard-increment-mobile !default;
|
||||
|
||||
// sass doesn't like use of variable here: calc(100% - $standard-increment-mobile);
|
||||
$navigation-drawer-max-mobile-width: calc(100% - 5.6rem) !default;
|
||||
$navigation-drawer-max-mobile-width: calc(100% - 5.6rem) !default;
|
||||
|
||||
.appBar {
|
||||
.leftIcon {
|
||||
transition-timing-function: $animation-curve-default;
|
||||
transition-duration: $animation-duration;
|
||||
transition-property: width, min-width;
|
||||
}
|
||||
@media screen and (min-width: $layout-breakpoint-sm) {
|
||||
.leftIcon {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -59,7 +59,7 @@ module.exports = {
|
||||
devServer: {
|
||||
proxy: {
|
||||
'/features': {
|
||||
target: 'http://localhost:3001/',
|
||||
target: 'http://localhost:4242',
|
||||
secure: false,
|
||||
},
|
||||
},
|
||||
|
||||
Loading…
Reference in New Issue
Block a user