0
0
mirror of https://github.com/naturalcrit/homebrewery.git synced 2026-01-07 05:32:41 +00:00
This commit is contained in:
Víctor Losada Hernández
2024-10-20 22:29:14 +02:00
parent 976740dc8b
commit ebdbb39f24
2 changed files with 44 additions and 59 deletions

View File

@@ -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>
); );
}; };

View File

@@ -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; }