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

13
client/components/Nav.jsx
View file

@ -682,21 +682,12 @@ class Nav extends React.PureComponent {
};
return (
<header>
<nav className="nav" title="main-navigation" ref={(node) => { this.node = node; }}>
{this.renderLeftLayout(navDropdownState)}
{this.renderUserMenu(navDropdownState)}
{/*
<div className="nav__announce">
This is a preview version of the editor, that has not yet been officially released.
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>
</header>
);
}
}

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

@ -1,10 +1,11 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Nav renders correctly 1`] = `
<nav
<header>
<nav
className="nav"
title="main-navigation"
>
>
<ul
className="nav__items-left"
>
@ -340,5 +341,6 @@ exports[`Nav renders correctly 1`] = `
</ul>
</li>
</ul>
</nav>
</nav>
</header>
`;

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

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

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

@ -86,8 +86,8 @@ class Console extends React.Component {
});
return (
<div className={consoleClass} role="main">
<div className="preview-console__header">
<section className={consoleClass} >
<header className="preview-console__header">
<h2 className="preview-console__header-title">Console</h2>
<div className="preview-console__header-buttons">
<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" />
</button>
</div>
</div>
</header>
<div ref={(element) => { this.consoleMessages = element; }} className="preview-console__messages">
{this.props.consoleEvents.map((consoleEvent) => {
const { method, times } = consoleEvent;
@ -127,7 +127,7 @@ class Console extends React.Component {
);
})}
</div>
</div>
</section>
);
}
}

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

@ -314,10 +314,7 @@ class Editor extends React.Component {
});
return (
<section
role="main"
className={editorSectionClass}
>
<section className={editorSectionClass} >
<header className="editor__header">
<button
aria-label="Open Sketch files navigation"
@ -348,8 +345,8 @@ class Editor extends React.Component {
/>
</div>
</header>
<div ref={(element) => { this.codemirrorContainer = element; }} className={editorHolderClass} >
</div>
<article ref={(element) => { this.codemirrorContainer = element; }} className={editorHolderClass} >
</article>
<EditorAccessibility
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];
return (
<nav className={sidebarClass} title="file-navigation" >
<div className="sidebar__header" onContextMenu={this.toggleProjectOptions}>
<section className={sidebarClass}>
<header className="sidebar__header" onContextMenu={this.toggleProjectOptions}>
<h3 className="sidebar__title">
<span>Sketch Files</span>
</h3>
@ -130,12 +130,12 @@ class Sidebar extends React.Component {
}
</ul>
</div>
</div>
</header>
<ConnectedFileNode
id={rootFile.id}
canEdit={canEditProject}
/>
</nav>
</section>
);
}
}

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

@ -414,7 +414,7 @@ class SketchList extends React.Component {
render() {
const username = this.props.username !== undefined ? this.props.username : this.props.user.username;
return (
<div className="sketches-table-container">
<article className="sketches-table-container">
<Helmet>
<title>{this.getSketchesTitle()}</title>
</Helmet>
@ -457,7 +457,7 @@ class SketchList extends React.Component {
/>
</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}` : '' }}
project={{ name: this.props.project.name, id: this.props.params.project_id }}
/>
<div className="preview-frame-holder">
<main className="preview-frame-holder">
<PreviewFrame
htmlFile={this.props.htmlFile}
jsFiles={this.props.jsFiles}
@ -48,7 +48,7 @@ class FullView extends React.Component {
expandConsole={this.ident}
clearConsole={this.ident}
/>
</div>
</main>
</div>
);
}

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

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

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

@ -227,7 +227,7 @@ class Collection extends React.Component {
// };
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__column--left">
<h2 className="collection-metadata__name">
@ -270,7 +270,7 @@ class Collection extends React.Component {
}
</div>
</div>
</div>
</header>
);
}
@ -344,13 +344,14 @@ class Collection extends React.Component {
const title = this.hasCollection() ? this.getCollectionName() : null;
return (
<section className="collection-container" data-has-items={this.hasCollectionItems() ? 'true' : 'false'}>
<main className="collection-container" data-has-items={this.hasCollectionItems() ? 'true' : 'false'}>
<article className="collection">
<Helmet>
<title>{this.getTitle()}</title>
</Helmet>
{this._renderLoader()}
{this.hasCollection() && this._renderCollectionMetadata()}
<div className="collection-content">
<article className="collection-content">
<div className="collection-table-wrapper">
{this._renderEmptyTable()}
{this.hasCollectionItems() &&
@ -390,8 +391,9 @@ class Collection extends React.Component {
)
}
</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" />
<section className="account-settings">
<main className="account-settings">
<header className="account-settings__header">
<h1 className="account-settings__title">Account Settings</h1>
</header>
@ -67,7 +67,7 @@ class AccountView extends React.Component {
</Tabs>
}
{ !accessTokensUIEnabled && <SocialLoginPanel {...this.props} /> }
</section>
</main>
</div>
);
}

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

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

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

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

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

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

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

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