Style footer Job-counts.
This commit is contained in:
parent
30f3903662
commit
09be1c64a3
@ -1,6 +1,8 @@
|
|||||||
import React, {useEffect} from 'react';
|
import React, {useEffect} from 'react';
|
||||||
import '../styles/footer.css';
|
import '../styles/footer.css';
|
||||||
import {Job} from './Job';
|
import {Job} from './Job';
|
||||||
|
import Icon from '@mdi/react';
|
||||||
|
import { mdiRun, mdiCounter, mdiEyeCheck } from '@mdi/js';
|
||||||
|
|
||||||
export default function Footer(){
|
export default function Footer(){
|
||||||
const [MonitoringJobsCount, setMonitoringJobsCount] = React.useState(0);
|
const [MonitoringJobsCount, setMonitoringJobsCount] = React.useState(0);
|
||||||
@ -19,9 +21,9 @@ export default function Footer(){
|
|||||||
|
|
||||||
return (
|
return (
|
||||||
<footer>
|
<footer>
|
||||||
<p>{MonitoringJobsCount}</p>
|
<div><Icon path={mdiEyeCheck} size={1} /> <span>{MonitoringJobsCount}</span></div>
|
||||||
<p>{AllJobsCount}</p>
|
<div><Icon path={mdiRun} size={1} /> <span>{RunningJobsCount}</span></div>
|
||||||
<p>{RunningJobsCount}</p>
|
<div><Icon path={mdiCounter} size={1} /> <span>{AllJobsCount}</span></div>
|
||||||
<p id="madeWith">Made with Blåhaj 🦈</p>
|
<p id="madeWith">Made with Blåhaj 🦈</p>
|
||||||
</footer>)
|
</footer>)
|
||||||
}
|
}
|
@ -19,3 +19,18 @@ footer {
|
|||||||
margin-right: 20px;
|
margin-right: 20px;
|
||||||
cursor: url("Website/media/blahaj.png"), grab;
|
cursor: url("Website/media/blahaj.png"), grab;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
footer div {
|
||||||
|
margin: 0 10px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-items: center;
|
||||||
|
background-color: rgba(255,255,255, 0.3);
|
||||||
|
border-radius: 10px;
|
||||||
|
padding: 0 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
footer div > * {
|
||||||
|
margin: 0 2px;
|
||||||
|
padding: 3px 0;
|
||||||
|
}
|
Loading…
Reference in New Issue
Block a user