chore(netlify-cms-core): remove unnecessary wrapper elements (#1888)

This commit is contained in:
Alexander Nanberg
2018-11-21 23:18:26 +01:00
committed by Shawn Erquhart
parent 2a63940d97
commit 9706b3cac7
3 changed files with 72 additions and 81 deletions

View File

@ -72,7 +72,6 @@ class App extends React.Component {
return ( return (
<ErrorContainer> <ErrorContainer>
<h1>{t('app.app.errorHeader')}</h1> <h1>{t('app.app.errorHeader')}</h1>
<div> <div>
<strong>{t('app.app.configErrors')}:</strong> <strong>{t('app.app.configErrors')}:</strong>
<ErrorCodeBlock>{config.get('error')}</ErrorCodeBlock> <ErrorCodeBlock>{config.get('error')}</ErrorCodeBlock>
@ -160,7 +159,7 @@ class App extends React.Component {
const hasWorkflow = publishMode === EDITORIAL_WORKFLOW; const hasWorkflow = publishMode === EDITORIAL_WORKFLOW;
return ( return (
<div> <>
<Notifs CustomComponent={Toast} /> <Notifs CustomComponent={Toast} />
<Header <Header
user={user} user={user}
@ -174,27 +173,25 @@ class App extends React.Component {
/> />
<AppMainContainer> <AppMainContainer>
{isFetching && <TopBarProgress />} {isFetching && <TopBarProgress />}
<div> <Switch>
<Switch> <Redirect exact from="/" to={defaultPath} />
<Redirect exact from="/" to={defaultPath} /> <Redirect exact from="/search/" to={defaultPath} />
<Redirect exact from="/search/" to={defaultPath} /> {hasWorkflow ? <Route path="/workflow" component={Workflow} /> : null}
{hasWorkflow ? <Route path="/workflow" component={Workflow} /> : null} <Route exact path="/collections/:name" component={Collection} />
<Route exact path="/collections/:name" component={Collection} /> <Route
<Route path="/collections/:name/new"
path="/collections/:name/new" render={props => <Editor {...props} newRecord />}
render={props => <Editor {...props} newRecord />} />
/> <Route path="/collections/:name/entries/:slug" component={Editor} />
<Route path="/collections/:name/entries/:slug" component={Editor} /> <Route
<Route path="/search/:searchTerm"
path="/search/:searchTerm" render={props => <Collection {...props} isSearchResults />}
render={props => <Collection {...props} isSearchResults />} />
/> <Route component={NotFoundPage} />
<Route component={NotFoundPage} /> </Switch>
</Switch> {useMediaLibrary ? <MediaLibrary /> : null}
{useMediaLibrary ? <MediaLibrary /> : null}
</div>
</AppMainContainer> </AppMainContainer>
</div> </>
); );
} }
} }

View File

@ -22,13 +22,9 @@ const styles = {
`, `,
}; };
const AppHeaderContainer = styled.header` const AppHeader = styled.header`
z-index: 300;
`;
const AppHeader = styled.div`
${shadows.dropMain}; ${shadows.dropMain};
position: fixed; position: sticky;
width: 100%; width: 100%;
top: 0; top: 0;
background-color: ${colors.foreground}; background-color: ${colors.foreground};
@ -136,59 +132,57 @@ class Header extends React.Component {
.toList(); .toList();
return ( return (
<AppHeaderContainer> <AppHeader>
<AppHeader> <AppHeaderContent>
<AppHeaderContent> <nav>
<nav> <AppHeaderNavLink
<AppHeaderNavLink to="/"
to="/" activeClassName="header-link-active"
activeClassName="header-link-active" isActive={(match, location) => location.pathname.startsWith('/collections/')}
isActive={(match, location) => location.pathname.startsWith('/collections/')} >
> <Icon type="page" />
<Icon type="page" /> {t('app.header.content')}
{t('app.header.content')} </AppHeaderNavLink>
{hasWorkflow ? (
<AppHeaderNavLink to="/workflow" activeClassName="header-link-active">
<Icon type="workflow" />
{t('app.header.workflow')}
</AppHeaderNavLink> </AppHeaderNavLink>
{hasWorkflow ? ( ) : null}
<AppHeaderNavLink to="/workflow" activeClassName="header-link-active"> {showMediaButton ? (
<Icon type="workflow" /> <AppHeaderButton onClick={openMediaLibrary}>
{t('app.header.workflow')} <Icon type="media-alt" />
</AppHeaderNavLink> {t('app.header.media')}
) : null} </AppHeaderButton>
{showMediaButton ? ( ) : null}
<AppHeaderButton onClick={openMediaLibrary}> </nav>
<Icon type="media-alt" /> <AppHeaderActions>
{t('app.header.media')} {createableCollections.size > 0 && (
</AppHeaderButton> <Dropdown
) : null} renderButton={() => (
</nav> <AppHeaderQuickNewButton> {t('app.header.quickAdd')}</AppHeaderQuickNewButton>
<AppHeaderActions> )}
{createableCollections.size > 0 && ( dropdownTopOverlap="30px"
<Dropdown dropdownWidth="160px"
renderButton={() => ( dropdownPosition="left"
<AppHeaderQuickNewButton> {t('app.header.quickAdd')}</AppHeaderQuickNewButton> >
)} {createableCollections.map(collection => (
dropdownTopOverlap="30px" <DropdownItem
dropdownWidth="160px" key={collection.get('name')}
dropdownPosition="left" label={collection.get('label_singular') || collection.get('label')}
> onClick={() => this.handleCreatePostClick(collection.get('name'))}
{createableCollections.map(collection => ( />
<DropdownItem ))}
key={collection.get('name')} </Dropdown>
label={collection.get('label_singular') || collection.get('label')} )}
onClick={() => this.handleCreatePostClick(collection.get('name'))} <SettingsDropdown
/> displayUrl={displayUrl}
))} imageUrl={user.get('avatar_url')}
</Dropdown> onLogoutClick={onLogoutClick}
)} />
<SettingsDropdown </AppHeaderActions>
displayUrl={displayUrl} </AppHeaderContent>
imageUrl={user.get('avatar_url')} </AppHeader>
onLogoutClick={onLogoutClick}
/>
</AppHeaderActions>
</AppHeaderContent>
</AppHeader>
</AppHeaderContainer>
); );
} }
} }

View File

@ -87,7 +87,7 @@ const lengths = {
richTextEditorMinHeight: '300px', richTextEditorMinHeight: '300px',
borderWidth: '2px', borderWidth: '2px',
topCardWidth: '682px', topCardWidth: '682px',
pageMargin: '84px 18px', pageMargin: '28px 18px',
}; };
const borders = { const borders = {