switch div to sections
This commit is contained in:
parent
8f68b3aa58
commit
be010b8ac0
7 changed files with 19 additions and 21 deletions
|
@ -99,14 +99,14 @@ class Editor extends React.Component {
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
return (
|
return (
|
||||||
<div>
|
<section title="code editor" role="main">
|
||||||
<div ref="container" className="editor-holder" tabIndex="0" title="code editor" role="main">
|
<div ref="container" className="editor-holder" tabIndex="0">
|
||||||
</div>
|
</div>
|
||||||
<EditorAccessibility
|
<EditorAccessibility
|
||||||
lintMessages={this.props.lintMessages}
|
lintMessages={this.props.lintMessages}
|
||||||
lineNo={this.props.lineNo}
|
lineNo={this.props.lineNo}
|
||||||
/>
|
/>
|
||||||
</div>
|
</section>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -154,7 +154,7 @@ class Preferences extends React.Component {
|
||||||
>Off</button>
|
>Off</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="preference preference--hidden">
|
<div className="preference">
|
||||||
<h4 className="preference__title">Lint Warning Sound</h4>
|
<h4 className="preference__title">Lint Warning Sound</h4>
|
||||||
<div className="preference__options">
|
<div className="preference__options">
|
||||||
<button
|
<button
|
||||||
|
|
|
@ -135,7 +135,7 @@ class PreviewFrame extends React.Component {
|
||||||
htmlHeadContents += '<script src="/data.js"></script>\n';
|
htmlHeadContents += '<script src="/data.js"></script>\n';
|
||||||
htmlHeadContents += '<script src="/interceptor-functions.js"></script>\n';
|
htmlHeadContents += '<script src="/interceptor-functions.js"></script>\n';
|
||||||
htmlHeadContents += '<script src="/intercept-p5.js"></script>\n';
|
htmlHeadContents += '<script src="/intercept-p5.js"></script>\n';
|
||||||
htmlHeadContents += `<script type="text/javascript" src="http://chir.ag/projects/ntc/ntc.js"></script>`;
|
htmlHeadContents += '<script type="text/javascript" src="http://chir.ag/projects/ntc/ntc.js"></script>';
|
||||||
htmlFile = htmlFile.replace(/(?:<head.*?>)([\s\S]*?)(?:<\/head>)/gmi, `<head>\n${htmlHeadContents}\n</head>`);
|
htmlFile = htmlFile.replace(/(?:<head.*?>)([\s\S]*?)(?:<\/head>)/gmi, `<head>\n${htmlHeadContents}\n</head>`);
|
||||||
|
|
||||||
// const htmlHead = htmlFile.match(/(?:<head.*?>)([\s\S]*?)(?:<\/head>)/gmi);
|
// const htmlHead = htmlFile.match(/(?:<head.*?>)([\s\S]*?)(?:<\/head>)/gmi);
|
||||||
|
|
|
@ -21,7 +21,7 @@ function Toolbar(props) {
|
||||||
});
|
});
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="toolbar">
|
<section className="toolbar" title="toolbar" role="main">
|
||||||
<img className="toolbar__logo" src={logoUrl} alt="p5js Logo" />
|
<img className="toolbar__logo" src={logoUrl} alt="p5js Logo" />
|
||||||
<button className={playButtonClass} onClick={props.startSketch} aria-label="play sketch">
|
<button className={playButtonClass} onClick={props.startSketch} aria-label="play sketch">
|
||||||
<InlineSVG src={playUrl} alt="Play Sketch" />
|
<InlineSVG src={playUrl} alt="Play Sketch" />
|
||||||
|
@ -55,7 +55,7 @@ function Toolbar(props) {
|
||||||
>
|
>
|
||||||
<InlineSVG src={preferencesUrl} alt="Show Preferences" />
|
<InlineSVG src={preferencesUrl} alt="Show Preferences" />
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</section>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -71,6 +71,7 @@
|
||||||
color: $light-primary-text-color;
|
color: $light-primary-text-color;
|
||||||
background-color: $light-modal-button-background-color;
|
background-color: $light-modal-button-background-color;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
|
margin-bottom: #{20 / $base-font-size}rem;
|
||||||
line-height: #{50 / $base-font-size}rem;
|
line-height: #{50 / $base-font-size}rem;
|
||||||
& g {
|
& g {
|
||||||
fill: $light-primary-text-color;
|
fill: $light-primary-text-color;
|
||||||
|
|
|
@ -35,7 +35,7 @@
|
||||||
.preference {
|
.preference {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
padding-bottom: #{40 / $base-font-size}rem;
|
padding-bottom: #{12 / $base-font-size}rem;
|
||||||
& + & {
|
& + & {
|
||||||
border-top: 2px dashed $light-button-border-color;
|
border-top: 2px dashed $light-button-border-color;
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,9 +1,6 @@
|
||||||
var shadowDOMElement;
|
var shadowDOMElement;
|
||||||
var canvasLocation ='';
|
var canvasLocation ='';
|
||||||
|
|
||||||
//for object in setpu (??)
|
|
||||||
|
|
||||||
|
|
||||||
funcNames = refData["classitems"].map(function(x){
|
funcNames = refData["classitems"].map(function(x){
|
||||||
return {
|
return {
|
||||||
name: x["name"],
|
name: x["name"],
|
||||||
|
@ -15,7 +12,7 @@ funcNames = refData["classitems"].map(function(x){
|
||||||
});
|
});
|
||||||
|
|
||||||
funcNames = funcNames.filter(function(x) {
|
funcNames = funcNames.filter(function(x) {
|
||||||
let className = x["class"];
|
var className = x["class"];
|
||||||
return (x["name"] && x["params"] && (className==='p5'));
|
return (x["name"] && x["params"] && (className==='p5'));
|
||||||
})
|
})
|
||||||
|
|
||||||
|
|
Loading…
Reference in a new issue