mirror of
https://github.com/naturalcrit/homebrewery.git
synced 2026-01-07 05:32:41 +00:00
linting
This commit is contained in:
@@ -7,49 +7,49 @@ import Dialog from '../../../components/dialog.jsx';
|
|||||||
|
|
||||||
const DISMISS_BUTTON = <i className='fas fa-times dismiss' />;
|
const DISMISS_BUTTON = <i className='fas fa-times dismiss' />;
|
||||||
|
|
||||||
const ErrorBar = (props) => {
|
const ErrorBar = (props)=>{
|
||||||
let hasOpenError = false, hasCloseError = false, hasMatchError = false;
|
let hasOpenError = false, hasCloseError = false, hasMatchError = false;
|
||||||
|
|
||||||
const renderErrors = () => (
|
const renderErrors = ()=>(
|
||||||
<ul>
|
<ul>
|
||||||
{_.map(props.errors, (err, idx) => {
|
{_.map(props.errors, (err, idx)=>{
|
||||||
if (err.id === 'OPEN') hasOpenError = true;
|
if(err.id === 'OPEN') hasOpenError = true;
|
||||||
if (err.id === 'CLOSE') hasCloseError = true;
|
if(err.id === 'CLOSE') hasCloseError = true;
|
||||||
if (err.id === 'MISMATCH') hasMatchError = true;
|
if(err.id === 'MISMATCH') hasMatchError = true;
|
||||||
return (
|
return (
|
||||||
<li key={idx}>
|
<li key={idx}>
|
||||||
Line {err.line} : {err.text}, '{err.type}' tag
|
Line {err.line} : {err.text}, '{err.type}' tag
|
||||||
</li>
|
</li>
|
||||||
);
|
);
|
||||||
})}
|
})}
|
||||||
</ul>
|
</ul>
|
||||||
);
|
);
|
||||||
|
|
||||||
const renderProtip = () => (
|
const renderProtip = ()=>(
|
||||||
<div className="protips">
|
<div className='protips'>
|
||||||
<h4>Protips!</h4>
|
<h4>Protips!</h4>
|
||||||
{hasOpenError && <div>Unmatched opening tag. Close your tags, like this {'</div>'}. Match types!</div>}
|
{hasOpenError && <div>Unmatched opening tag. Close your tags, like this {'</div>'}. Match types!</div>}
|
||||||
{hasCloseError && <div>Unmatched closing tag. Either remove it or check where it was opened.</div>}
|
{hasCloseError && <div>Unmatched closing tag. Either remove it or check where it was opened.</div>}
|
||||||
{hasMatchError && <div>Type mismatch. Closed a tag with a different type.</div>}
|
{hasMatchError && <div>Type mismatch. Closed a tag with a different type.</div>}
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
|
||||||
if (!props.errors.length) return null;
|
if(!props.errors.length) return null;
|
||||||
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Dialog className="errorBar" closeText={DISMISS_BUTTON} >
|
<Dialog className='errorBar' closeText={DISMISS_BUTTON} >
|
||||||
<div className="content">
|
<div>
|
||||||
<i className="fas fa-exclamation-triangle" />
|
<i className='fas fa-exclamation-triangle' />
|
||||||
<h3> There are HTML errors in your markup</h3>
|
<h2> There are HTML errors in your markup</h2>
|
||||||
<small>
|
<small>
|
||||||
If these aren't fixed your brew will not render properly when you print it to PDF or share it
|
If these aren't fixed your brew will not render properly when you print it to PDF or share it
|
||||||
</small>
|
</small>
|
||||||
{renderErrors()}
|
{renderErrors()}
|
||||||
</div>
|
</div>
|
||||||
<hr />
|
<hr />
|
||||||
{renderProtip()}
|
{renderProtip()}
|
||||||
</Dialog>
|
</Dialog>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|||||||
@@ -3,13 +3,11 @@
|
|||||||
position : absolute;
|
position : absolute;
|
||||||
z-index : 1000;
|
z-index : 1000;
|
||||||
width : 100%;
|
width : 100%;
|
||||||
padding : 20px;
|
|
||||||
padding-bottom : 10px;
|
|
||||||
color : white;
|
color : white;
|
||||||
background-color : @red;
|
background-color : @red;
|
||||||
border : unset;
|
border : unset;
|
||||||
|
|
||||||
.content {
|
div {
|
||||||
> i {
|
> i {
|
||||||
float : left;
|
float : left;
|
||||||
margin-right : 10px;
|
margin-right : 10px;
|
||||||
@@ -17,26 +15,19 @@
|
|||||||
font-size : 3em;
|
font-size : 3em;
|
||||||
opacity : 0.8;
|
opacity : 0.8;
|
||||||
}
|
}
|
||||||
h3 {
|
h2 { font-weight : 800; }
|
||||||
font-size : 1.1em;
|
ul {
|
||||||
font-weight : 800;
|
margin-top : 15px;
|
||||||
}
|
font-size : 0.8em;
|
||||||
}
|
list-style-position : inside;
|
||||||
|
list-style-type : disc;
|
||||||
ul {
|
li { line-height : 1.6em; }
|
||||||
margin-top : 15px;
|
}
|
||||||
font-size : 0.8em;
|
|
||||||
list-style-position : inside;
|
|
||||||
list-style-type : disc;
|
|
||||||
li { line-height : 1.6em; }
|
|
||||||
}
|
}
|
||||||
hr {
|
hr {
|
||||||
box-sizing : border-box;
|
|
||||||
width : 100%;
|
|
||||||
height : 2px;
|
height : 2px;
|
||||||
margin-top : 25px;
|
margin-top : 25px;
|
||||||
margin-bottom : 15px;
|
margin-bottom : 15px;
|
||||||
margin-left : -100px;
|
|
||||||
background-color : darken(@red, 8%);
|
background-color : darken(@red, 8%);
|
||||||
border : none;
|
border : none;
|
||||||
}
|
}
|
||||||
@@ -45,26 +36,20 @@
|
|||||||
opacity : 0.7;
|
opacity : 0.7;
|
||||||
}
|
}
|
||||||
.protips {
|
.protips {
|
||||||
font-size : 0.6em;
|
font-size : 0.6em;
|
||||||
& > div {
|
line-height : 1.2em;
|
||||||
margin-bottom : 10px;
|
|
||||||
line-height : 1.2em;
|
|
||||||
}
|
|
||||||
h4 {
|
h4 {
|
||||||
font-weight : 800;
|
font-weight : 800;
|
||||||
line-height : 1.5em;
|
line-height : 1.5em;
|
||||||
text-transform : uppercase;
|
text-transform : uppercase;
|
||||||
opacity : 0.8;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
button.dismiss {
|
button.dismiss {
|
||||||
position : absolute;
|
position : absolute;
|
||||||
top : 30px;
|
top : 20px;
|
||||||
right : 30px;
|
right : 30px;
|
||||||
height : max-content;
|
|
||||||
padding : unset;
|
padding : unset;
|
||||||
font-size : 40px;
|
font-size : 40px;
|
||||||
cursor : pointer;
|
|
||||||
background-color : transparent;
|
background-color : transparent;
|
||||||
opacity : 0.6;
|
opacity : 0.6;
|
||||||
&:hover { opacity : 1; }
|
&:hover { opacity : 1; }
|
||||||
|
|||||||
Reference in New Issue
Block a user