0
0
mirror of https://github.com/naturalcrit/homebrewery.git synced 2025-12-30 13:12:40 +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 ErrorBar = (props) => {
let hasOpenError = false, hasCloseError = false, hasMatchError = false;
const ErrorBar = (props)=>{
let hasOpenError = false, hasCloseError = false, hasMatchError = false;
const renderErrors = () => (
<ul>
{_.map(props.errors, (err, idx) => {
if (err.id === 'OPEN') hasOpenError = true;
if (err.id === 'CLOSE') hasCloseError = true;
if (err.id === 'MISMATCH') hasMatchError = true;
return (
<li key={idx}>
const renderErrors = ()=>(
<ul>
{_.map(props.errors, (err, idx)=>{
if(err.id === 'OPEN') hasOpenError = true;
if(err.id === 'CLOSE') hasCloseError = true;
if(err.id === 'MISMATCH') hasMatchError = true;
return (
<li key={idx}>
Line {err.line} : {err.text}, '{err.type}' tag
</li>
);
})}
</ul>
);
</li>
);
})}
</ul>
);
const renderProtip = () => (
<div className="protips">
<h4>Protips!</h4>
{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>}
{hasMatchError && <div>Type mismatch. Closed a tag with a different type.</div>}
</div>
);
const renderProtip = ()=>(
<div className='protips'>
<h4>Protips!</h4>
{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>}
{hasMatchError && <div>Type mismatch. Closed a tag with a different type.</div>}
</div>
);
if (!props.errors.length) return null;
if(!props.errors.length) return null;
return (
<Dialog className="errorBar" closeText={DISMISS_BUTTON} >
<div className="content">
<i className="fas fa-exclamation-triangle" />
<h3> There are HTML errors in your markup</h3>
return (
<Dialog className='errorBar' closeText={DISMISS_BUTTON} >
<div>
<i className='fas fa-exclamation-triangle' />
<h2> There are HTML errors in your markup</h2>
<small>
If these aren't fixed your brew will not render properly when you print it to PDF or share it
</small>
{renderErrors()}
</div>
<hr />
{renderProtip()}
</Dialog>
<hr />
{renderProtip()}
</Dialog>
);
};

View File

@@ -3,13 +3,11 @@
position : absolute;
z-index : 1000;
width : 100%;
padding : 20px;
padding-bottom : 10px;
color : white;
background-color : @red;
border : unset;
.content {
div {
> i {
float : left;
margin-right : 10px;
@@ -17,26 +15,19 @@
font-size : 3em;
opacity : 0.8;
}
h3 {
font-size : 1.1em;
font-weight : 800;
}
}
ul {
margin-top : 15px;
font-size : 0.8em;
list-style-position : inside;
list-style-type : disc;
li { line-height : 1.6em; }
h2 { font-weight : 800; }
ul {
margin-top : 15px;
font-size : 0.8em;
list-style-position : inside;
list-style-type : disc;
li { line-height : 1.6em; }
}
}
hr {
box-sizing : border-box;
width : 100%;
height : 2px;
margin-top : 25px;
margin-bottom : 15px;
margin-left : -100px;
background-color : darken(@red, 8%);
border : none;
}
@@ -45,26 +36,20 @@
opacity : 0.7;
}
.protips {
font-size : 0.6em;
& > div {
margin-bottom : 10px;
line-height : 1.2em;
}
font-size : 0.6em;
line-height : 1.2em;
h4 {
font-weight : 800;
line-height : 1.5em;
text-transform : uppercase;
opacity : 0.8;
}
}
button.dismiss {
position : absolute;
top : 30px;
top : 20px;
right : 30px;
height : max-content;
padding : unset;
font-size : 40px;
cursor : pointer;
background-color : transparent;
opacity : 0.6;
&:hover { opacity : 1; }