r/p5.js-web-editor
1
0
Fork 0
Code Issues 1 Pull requests Releases 1 Wiki Activity

Merge pull request #1430 from processing/semantic-elements

Browse source 
Add <main> to all pages, add semantic HTML updates
This commit is contained in:
Cassie Tarakajian 2020-05-20 14:59:16 -04:00 committed by GitHub
commit ec16905ff0
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
16 changed files with 403 additions and 405 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

21
client/components/Nav.jsx
View file

@ -682,21 +682,12 @@ class Nav extends React.PureComponent {
}; };
return ( return (
<nav className="nav" title="main-navigation" ref={(node) => { this.node = node; }}> <header>
{this.renderLeftLayout(navDropdownState)} <nav className="nav" title="main-navigation" ref={(node) => { this.node = node; }}>
{this.renderUserMenu(navDropdownState)} {this.renderLeftLayout(navDropdownState)}
{/* {this.renderUserMenu(navDropdownState)}
<div className="nav__announce"> </nav>
This is a preview version of the editor, that has not yet been officially released. </header>
It is in development, you can report bugs <a
href="https://github.com/processing/p5.js-web-editor/issues"
target="_blank"
rel="noopener noreferrer"
>here</a>.
Please use with caution.
</div>
*/}
</nav>
); );
} }
} }

614
client/components/__test__/__snapshots__/Nav.test.jsx.snap
View file

@ -1,344 +1,346 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP // Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Nav renders correctly 1`] = ` exports[`Nav renders correctly 1`] = `
<nav <header>
className="nav" <nav
title="main-navigation" className="nav"
> title="main-navigation"
<ul
className="nav__items-left"
> >
<li <ul
className="nav__item-logo" className="nav__items-left"
> >
<test-file-stub <li
aria-label="p5.js Logo" className="nav__item-logo"
className="svg__logo"
focusable="false"
role="img"
/>
</li>
<li
className="nav__item"
>
<button
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
onMouseOver={[Function]}
> >
<span
className="nav__item-header"
>
File
</span>
<test-file-stub <test-file-stub
aria-hidden="true" aria-label="p5.js Logo"
className="nav__item-header-triangle" className="svg__logo"
focusable="false" focusable="false"
role="img"
/> />
</button> </li>
<ul <li
className="nav__dropdown" className="nav__item"
> >
<li <button
className="nav__dropdown-item" onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
onMouseOver={[Function]}
> >
<button <span
onBlur={[Function]} className="nav__item-header"
onClick={[Function]}
onFocus={[Function]}
> >
New File
</button> </span>
</li> <test-file-stub
<li aria-hidden="true"
className="nav__dropdown-item" className="nav__item-header-triangle"
focusable="false"
/>
</button>
<ul
className="nav__dropdown"
> >
<button <li
onBlur={[Function]} className="nav__dropdown-item"
onClick={[Function]}
onFocus={[Function]}
> >
Duplicate <button
</button> onBlur={[Function]}
</li> onClick={[Function]}
<li onFocus={[Function]}
className="nav__dropdown-item"
>
<button
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
>
Share
</button>
</li>
<li
className="nav__dropdown-item"
>
<button
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
>
Download
</button>
</li>
<li
className="nav__dropdown-item"
>
<a
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
style={Object {}}
>
Open
</a>
</li>
</ul>
</li>
<li
className="nav__item"
>
<button
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
onMouseOver={[Function]}
>
<span
className="nav__item-header"
>
Edit
</span>
<test-file-stub
aria-hidden="true"
className="nav__item-header-triangle"
focusable="false"
/>
</button>
<ul
className="nav__dropdown"
>
<li
className="nav__dropdown-item"
>
<button
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
>
Tidy Code
<span
className="nav__keyboard-shortcut"
> >
⇧ New
+Tab </button>
</span> </li>
</button> <li
</li> className="nav__dropdown-item"
<li
className="nav__dropdown-item"
>
<button
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
> >
Find <button
<span onBlur={[Function]}
className="nav__keyboard-shortcut" onClick={[Function]}
onFocus={[Function]}
> >
⌃ Duplicate
+F </button>
</span> </li>
</button> <li
</li> className="nav__dropdown-item"
<li
className="nav__dropdown-item"
>
<button
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
> >
Find Next <button
<span onBlur={[Function]}
className="nav__keyboard-shortcut" onClick={[Function]}
onFocus={[Function]}
> >
⌃ Share
+G </button>
</span> </li>
</button> <li
</li> className="nav__dropdown-item"
<li
className="nav__dropdown-item"
>
<button
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
> >
Find Previous <button
<span onBlur={[Function]}
className="nav__keyboard-shortcut" onClick={[Function]}
onFocus={[Function]}
> >
⇧ Download
+ </button>
⌃ </li>
+G <li
</span> className="nav__dropdown-item"
</button> >
</li> <a
</ul> onBlur={[Function]}
</li> onClick={[Function]}
<li onFocus={[Function]}
className="nav__item" style={Object {}}
> >
<button Open
onBlur={[Function]} </a>
onClick={[Function]} </li>
onFocus={[Function]} </ul>
onMouseOver={[Function]} </li>
<li
className="nav__item"
> >
<span <button
className="nav__item-header" onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
onMouseOver={[Function]}
> >
Sketch <span
</span> className="nav__item-header"
<test-file-stub
aria-hidden="true"
className="nav__item-header-triangle"
focusable="false"
/>
</button>
<ul
className="nav__dropdown"
>
<li
className="nav__dropdown-item"
>
<button
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
> >
Add File Edit
</button> </span>
</li> <test-file-stub
<li aria-hidden="true"
className="nav__dropdown-item" className="nav__item-header-triangle"
focusable="false"
/>
</button>
<ul
className="nav__dropdown"
> >
<button <li
onBlur={[Function]} className="nav__dropdown-item"
onClick={[Function]}
onFocus={[Function]}
> >
Add Folder <button
</button> onBlur={[Function]}
</li> onClick={[Function]}
<li onFocus={[Function]}
className="nav__dropdown-item"
>
<button
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
>
Run
<span
className="nav__keyboard-shortcut"
> >
⌃ Tidy Code
+Enter <span
</span> className="nav__keyboard-shortcut"
</button> >
</li> ⇧
<li +Tab
className="nav__dropdown-item" </span>
> </button>
<button </li>
onBlur={[Function]} <li
onClick={[Function]} className="nav__dropdown-item"
onFocus={[Function]}
> >
Stop <button
<span onBlur={[Function]}
className="nav__keyboard-shortcut" onClick={[Function]}
onFocus={[Function]}
> >
⇧ Find
+ <span
⌃ className="nav__keyboard-shortcut"
+Enter >
</span> ⌃
</button> +F
</li> </span>
</ul> </button>
</li> </li>
<li <li
className="nav__item" className="nav__dropdown-item"
> >
<button <button
onBlur={[Function]} onBlur={[Function]}
onClick={[Function]} onClick={[Function]}
onFocus={[Function]} onFocus={[Function]}
onMouseOver={[Function]} >
Find Next
<span
className="nav__keyboard-shortcut"
>
⌃
+G
</span>
</button>
</li>
<li
className="nav__dropdown-item"
>
<button
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
>
Find Previous
<span
className="nav__keyboard-shortcut"
>
⇧
+
⌃
+G
</span>
</button>
</li>
</ul>
</li>
<li
className="nav__item"
> >
<span <button
className="nav__item-header" onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
onMouseOver={[Function]}
> >
Help <span
</span> className="nav__item-header"
<test-file-stub >
aria-hidden="true" Sketch
className="nav__item-header-triangle" </span>
focusable="false" <test-file-stub
/> aria-hidden="true"
</button> className="nav__item-header-triangle"
<ul focusable="false"
className="nav__dropdown" />
</button>
<ul
className="nav__dropdown"
>
<li
className="nav__dropdown-item"
>
<button
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
>
Add File
</button>
</li>
<li
className="nav__dropdown-item"
>
<button
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
>
Add Folder
</button>
</li>
<li
className="nav__dropdown-item"
>
<button
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
>
Run
<span
className="nav__keyboard-shortcut"
>
⌃
+Enter
</span>
</button>
</li>
<li
className="nav__dropdown-item"
>
<button
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
>
Stop
<span
className="nav__keyboard-shortcut"
>
⇧
+
⌃
+Enter
</span>
</button>
</li>
</ul>
</li>
<li
className="nav__item"
> >
<li <button
className="nav__dropdown-item" onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
onMouseOver={[Function]}
> >
<button <span
onBlur={[Function]} className="nav__item-header"
onClick={[Function]}
onFocus={[Function]}
> >
Keyboard Shortcuts Help
</button> </span>
</li> <test-file-stub
<li aria-hidden="true"
className="nav__dropdown-item" className="nav__item-header-triangle"
focusable="false"
/>
</button>
<ul
className="nav__dropdown"
> >
<a <li
href="https://p5js.org/reference/" className="nav__dropdown-item"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
rel="noopener noreferrer"
target="_blank"
> >
Reference <button
</a> onBlur={[Function]}
</li> onClick={[Function]}
<li onFocus={[Function]}
className="nav__dropdown-item" >
> Keyboard Shortcuts
<a </button>
onBlur={[Function]} </li>
onClick={[Function]} <li
onFocus={[Function]} className="nav__dropdown-item"
style={Object {}}
> >
About <a
</a> href="https://p5js.org/reference/"
</li> onBlur={[Function]}
</ul> onClick={[Function]}
</li> onFocus={[Function]}
</ul> rel="noopener noreferrer"
</nav> target="_blank"
>
Reference
</a>
</li>
<li
className="nav__dropdown-item"
>
<a
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
style={Object {}}
>
About
</a>
</li>
</ul>
</li>
</ul>
</nav>
</header>
`; `;

4
client/modules/IDE/components/AssetList.jsx
View file

@ -175,7 +175,7 @@ class AssetList extends React.Component {
render() { render() {
const { assetList } = this.props; const { assetList } = this.props;
return ( return (
<div className="asset-table-container"> <article className="asset-table-container">
<Helmet> <Helmet>
<title>{this.getAssetsTitle()}</title> <title>{this.getAssetsTitle()}</title>
</Helmet> </Helmet>
@ -195,7 +195,7 @@ class AssetList extends React.Component {
{assetList.map(asset => <AssetListRow asset={asset} key={asset.key} />)} {assetList.map(asset => <AssetListRow asset={asset} key={asset.key} />)}
</tbody> </tbody>
</table>} </table>}
</div> </article>
); );
} }
} }

4
client/modules/IDE/components/CollectionList/CollectionList.jsx
View file

@ -129,7 +129,7 @@ class CollectionList extends React.Component {
const username = this.props.username !== undefined ? this.props.username : this.props.user.username; const username = this.props.username !== undefined ? this.props.username : this.props.user.username;
return ( return (
<div className="sketches-table-container"> <article className="sketches-table-container">
<Helmet> <Helmet>
<title>{this.getTitle()}</title> <title>{this.getTitle()}</title>
</Helmet> </Helmet>
@ -176,7 +176,7 @@ class CollectionList extends React.Component {
</Overlay> </Overlay>
) )
} }
</div> </article>
); );
} }
} }

8
client/modules/IDE/components/Console.jsx
View file

@ -86,8 +86,8 @@ class Console extends React.Component {
}); });
return ( return (
<div className={consoleClass} role="main"> <section className={consoleClass} >
<div className="preview-console__header"> <header className="preview-console__header">
<h2 className="preview-console__header-title">Console</h2> <h2 className="preview-console__header-title">Console</h2>
<div className="preview-console__header-buttons"> <div className="preview-console__header-buttons">
<button className="preview-console__clear" onClick={this.props.clearConsole} aria-label="Clear console"> <button className="preview-console__clear" onClick={this.props.clearConsole} aria-label="Clear console">
@ -104,7 +104,7 @@ class Console extends React.Component {
<UpArrowIcon focusable="false" aria-hidden="true" /> <UpArrowIcon focusable="false" aria-hidden="true" />
</button> </button>
</div> </div>
</div> </header>
<div ref={(element) => { this.consoleMessages = element; }} className="preview-console__messages"> <div ref={(element) => { this.consoleMessages = element; }} className="preview-console__messages">
{this.props.consoleEvents.map((consoleEvent) => { {this.props.consoleEvents.map((consoleEvent) => {
const { method, times } = consoleEvent; const { method, times } = consoleEvent;
@ -127,7 +127,7 @@ class Console extends React.Component {
); );
})} })}
</div> </div>
</div> </section>
); );
} }
} }

9
client/modules/IDE/components/Editor.jsx
View file

@ -314,10 +314,7 @@ class Editor extends React.Component {
}); });
return ( return (
<section <section className={editorSectionClass} >
role="main"
className={editorSectionClass}
>
<header className="editor__header"> <header className="editor__header">
<button <button
aria-label="Open Sketch files navigation" aria-label="Open Sketch files navigation"
@ -348,8 +345,8 @@ class Editor extends React.Component {
/> />
</div> </div>
</header> </header>
<div ref={(element) => { this.codemirrorContainer = element; }} className={editorHolderClass} > <article ref={(element) => { this.codemirrorContainer = element; }} className={editorHolderClass} >
</div> </article>
<EditorAccessibility <EditorAccessibility
lintMessages={this.props.lintMessages} lintMessages={this.props.lintMessages}
/> />

8
client/modules/IDE/components/Sidebar.jsx
View file

@ -68,8 +68,8 @@ class Sidebar extends React.Component {
const rootFile = this.props.files.filter(file => file.name === 'root')[0]; const rootFile = this.props.files.filter(file => file.name === 'root')[0];
return ( return (
<nav className={sidebarClass} title="file-navigation" > <section className={sidebarClass}>
<div className="sidebar__header" onContextMenu={this.toggleProjectOptions}> <header className="sidebar__header" onContextMenu={this.toggleProjectOptions}>
<h3 className="sidebar__title"> <h3 className="sidebar__title">
<span>Sketch Files</span> <span>Sketch Files</span>
</h3> </h3>
@ -130,12 +130,12 @@ class Sidebar extends React.Component {
} }
</ul> </ul>
</div> </div>
</div> </header>
<ConnectedFileNode <ConnectedFileNode
id={rootFile.id} id={rootFile.id}
canEdit={canEditProject} canEdit={canEditProject}
/> />
</nav> </section>
); );
} }
} }

4
client/modules/IDE/components/SketchList.jsx
View file

@ -414,7 +414,7 @@ class SketchList extends React.Component {
render() { render() {
const username = this.props.username !== undefined ? this.props.username : this.props.user.username; const username = this.props.username !== undefined ? this.props.username : this.props.user.username;
return ( return (
<div className="sketches-table-container"> <article className="sketches-table-container">
<Helmet> <Helmet>
<title>{this.getSketchesTitle()}</title> <title>{this.getSketchesTitle()}</title>
</Helmet> </Helmet>
@ -457,7 +457,7 @@ class SketchList extends React.Component {
/> />
</Overlay> </Overlay>
} }
</div> </article>
); );
} }
} }

4
client/modules/IDE/pages/FullView.jsx
View file

@ -25,7 +25,7 @@ class FullView extends React.Component {
owner={{ username: this.props.project.owner ? `${this.props.project.owner.username}` : '' }} owner={{ username: this.props.project.owner ? `${this.props.project.owner.username}` : '' }}
project={{ name: this.props.project.name, id: this.props.params.project_id }} project={{ name: this.props.project.name, id: this.props.params.project_id }}
/> />
<div className="preview-frame-holder"> <main className="preview-frame-holder">
<PreviewFrame <PreviewFrame
htmlFile={this.props.htmlFile} htmlFile={this.props.htmlFile}
jsFiles={this.props.jsFiles} jsFiles={this.props.jsFiles}
@ -48,7 +48,7 @@ class FullView extends React.Component {
expandConsole={this.ident} expandConsole={this.ident}
clearConsole={this.ident} clearConsole={this.ident}
/> />
</div> </main>
</div> </div>
); );
} }

8
client/modules/IDE/pages/IDEView.jsx
View file

@ -239,7 +239,7 @@ class IDEView extends React.Component {
/> />
</Overlay> </Overlay>
} }
<div className="editor-preview-container"> <main className="editor-preview-container">
<SplitPane <SplitPane
split="vertical" split="vertical"
size={this.state.sidebarSize} size={this.state.sidebarSize}
@ -327,7 +327,7 @@ class IDEView extends React.Component {
theme={this.props.preferences.theme} theme={this.props.preferences.theme}
/> />
</SplitPane> </SplitPane>
<div className="preview-frame-holder"> <section className="preview-frame-holder">
<header className="preview-frame__header"> <header className="preview-frame__header">
<h2 className="preview-frame__title">Preview</h2> <h2 className="preview-frame__title">Preview</h2>
</header> </header>
@ -370,10 +370,10 @@ class IDEView extends React.Component {
cmController={this.cmController} cmController={this.cmController}
/> />
</div> </div>
</div> </section>
</SplitPane> </SplitPane>
</SplitPane> </SplitPane>
</div> </main>
{ this.props.ide.modalIsVisible && { this.props.ide.modalIsVisible &&
<NewFileModal /> <NewFileModal />
} }

102
client/modules/User/components/Collection.jsx
View file

@ -227,7 +227,7 @@ class Collection extends React.Component {
// }; // };
return ( return (
<div className={`collection-metadata ${this.isOwner() ? 'collection-metadata--is-owner' : ''}`}> <header className={`collection-metadata ${this.isOwner() ? 'collection-metadata--is-owner' : ''}`}>
<div className="collection-metadata__columns"> <div className="collection-metadata__columns">
<div className="collection-metadata__column--left"> <div className="collection-metadata__column--left">
<h2 className="collection-metadata__name"> <h2 className="collection-metadata__name">
@ -270,7 +270,7 @@ class Collection extends React.Component {
} }
</div> </div>
</div> </div>
</div> </header>
); );
} }
@ -344,54 +344,56 @@ class Collection extends React.Component {
const title = this.hasCollection() ? this.getCollectionName() : null; const title = this.hasCollection() ? this.getCollectionName() : null;
return ( return (
<section className="collection-container" data-has-items={this.hasCollectionItems() ? 'true' : 'false'}> <main className="collection-container" data-has-items={this.hasCollectionItems() ? 'true' : 'false'}>
<Helmet> <article className="collection">
<title>{this.getTitle()}</title> <Helmet>
</Helmet> <title>{this.getTitle()}</title>
{this._renderLoader()} </Helmet>
{this.hasCollection() && this._renderCollectionMetadata()} {this._renderLoader()}
<div className="collection-content"> {this.hasCollection() && this._renderCollectionMetadata()}
<div className="collection-table-wrapper"> <article className="collection-content">
{this._renderEmptyTable()} <div className="collection-table-wrapper">
{this.hasCollectionItems() && {this._renderEmptyTable()}
<table className="sketches-table" summary="table containing all collections"> {this.hasCollectionItems() &&
<thead> <table className="sketches-table" summary="table containing all collections">
<tr> <thead>
{this._renderFieldHeader('name', 'Name')} <tr>
{this._renderFieldHeader('createdAt', 'Date Added')} {this._renderFieldHeader('name', 'Name')}
{this._renderFieldHeader('user', 'Owner')} {this._renderFieldHeader('createdAt', 'Date Added')}
<th scope="col"></th> {this._renderFieldHeader('user', 'Owner')}
</tr> <th scope="col"></th>
</thead> </tr>
<tbody> </thead>
{this.props.collection.items.map(item => <tbody>
(<CollectionItemRow {this.props.collection.items.map(item =>
key={item.id} (<CollectionItemRow
item={item} key={item.id}
user={this.props.user} item={item}
username={this.getUsername()} user={this.props.user}
collection={this.props.collection} username={this.getUsername()}
/>))} collection={this.props.collection}
</tbody> />))}
</table> </tbody>
} </table>
{ }
this.state.isAddingSketches && ( {
<Overlay this.state.isAddingSketches && (
title="Add sketch" <Overlay
actions={<SketchSearchbar />} title="Add sketch"
closeOverlay={this.hideAddSketches} actions={<SketchSearchbar />}
isFixedHeight closeOverlay={this.hideAddSketches}
> isFixedHeight
<div className="collection-add-sketch"> >
<AddToCollectionSketchList username={this.props.username} collection={this.props.collection} /> <div className="collection-add-sketch">
</div> <AddToCollectionSketchList username={this.props.username} collection={this.props.collection} />
</Overlay> </div>
) </Overlay>
} )
</div> }
</div> </div>
</section> </article>
</article>
</main>
); );
} }
} }

4
client/modules/User/pages/AccountView.jsx
View file

@ -46,7 +46,7 @@ class AccountView extends React.Component {
<Nav layout="dashboard" /> <Nav layout="dashboard" />
<section className="account-settings"> <main className="account-settings">
<header className="account-settings__header"> <header className="account-settings__header">
<h1 className="account-settings__title">Account Settings</h1> <h1 className="account-settings__title">Account Settings</h1>
</header> </header>
@ -67,7 +67,7 @@ class AccountView extends React.Component {
</Tabs> </Tabs>
} }
{ !accessTokensUIEnabled && <SocialLoginPanel {...this.props} /> } { !accessTokensUIEnabled && <SocialLoginPanel {...this.props} /> }
</section> </main>
</div> </div>
); );
} }

4
client/modules/User/pages/DashboardView.jsx
View file

@ -117,7 +117,7 @@ class DashboardView extends React.Component {
<div className="dashboard"> <div className="dashboard">
<Nav layout="dashboard" /> <Nav layout="dashboard" />
<section className="dashboard-header"> <main className="dashboard-header">
<div className="dashboard-header__header"> <div className="dashboard-header__header">
<h2 className="dashboard-header__header__title">{this.ownerName()}</h2> <h2 className="dashboard-header__header__title">{this.ownerName()}</h2>
<div className="dashboard-header__nav"> <div className="dashboard-header__nav">
@ -133,7 +133,7 @@ class DashboardView extends React.Component {
<div className="dashboard-content"> <div className="dashboard-content">
{this.renderContent(currentTab, username)} {this.renderContent(currentTab, username)}
</div> </div>
</section> </main>
{this.isCollectionCreate() && {this.isCollectionCreate() &&
<Overlay <Overlay
title="Create collection" title="Create collection"

4
client/modules/User/pages/LoginView.jsx
View file

@ -33,7 +33,7 @@ class LoginView extends React.Component {
return ( return (
<div className="login"> <div className="login">
<Nav layout="dashboard" /> <Nav layout="dashboard" />
<div className="form-container"> <main className="form-container">
<Helmet> <Helmet>
<title>p5.js Web Editor | Login</title> <title>p5.js Web Editor | Login</title>
</Helmet> </Helmet>
@ -52,7 +52,7 @@ class LoginView extends React.Component {
<Link className="form__reset-password-button" to="/reset-password">Reset your password</Link> <Link className="form__reset-password-button" to="/reset-password">Reset your password</Link>
</p> </p>
</div> </div>
</div> </main>
</div> </div>
); );
} }

4
client/modules/User/pages/SignupView.jsx
View file

@ -26,7 +26,7 @@ class SignupView extends React.Component {
return ( return (
<div className="signup"> <div className="signup">
<Nav layout="dashboard" /> <Nav layout="dashboard" />
<div className="form-container"> <main className="form-container">
<Helmet> <Helmet>
<title>p5.js Web Editor | Signup</title> <title>p5.js Web Editor | Signup</title>
</Helmet> </Helmet>
@ -38,7 +38,7 @@ class SignupView extends React.Component {
<Link className="form__login-button" to="/login">Log In</Link> <Link className="form__login-button" to="/login">Log In</Link>
</p> </p>
</div> </div>
</div> </main>
</div> </div>
); );
} }

6
client/styles/components/_collection.scss
View file

@ -7,6 +7,12 @@
flex-direction:column; flex-direction:column;
} }
.collection {
height: 100%;
display: flex;
flex-direction: column;
}
.collection-metadata { .collection-metadata {
max-width: #{1012 / $base-font-size}rem; max-width: #{1012 / $base-font-size}rem;
width: 100%; width: 100%;