me/vytal-redux
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Added issue buttons

Browse source
This commit is contained in:
z0ccc 2021-09-12 15:26:10 -04:00
parent fa69e2ec34
commit b6314363ac
4 changed files with 37 additions and 17 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

25
frontend/src/components/TableRow.js
View file

@ -6,6 +6,8 @@ import {
checkWebWorker,
checkScreenProperties,
} from './main';
import { ReactComponent as XCircle } from '../images/xCircle.svg';
import { ReactComponent as CheckCircle } from '../images/checkCircle.svg';
const TableRow = ({ item }) => {
const [workerData, setWorkerData] = useState('');
@ -30,18 +32,19 @@ const TableRow = ({ item }) => {
<td>{item.value}</td>
<td>
{issues ? (
<>
{item.issues.map((ele, index) => (
<div className="newline" key={index}>
{ele}
</div>
))}
<div className="newline">
{workerData && <>{`Did not match web worker (${workerData})`}</>}
</div>
</>
<XCircle className="circleButton" />
) : (
'No issues'
// <>
// {item.issues.map((ele, index) => (
// <div className="newline" key={index}>
// {ele}
// </div>
// ))}
// <div className="newline">
// {workerData && <>{`Did not match web worker (${workerData})`}</>}
// </div>
// </>
<CheckCircle className="circleButton" />
)}
</td>
</tr>

5
frontend/src/images/checkCircle.svg Normal file
View file

@ -0,0 +1,5 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
<g fill="#c3e6cb">
<path d="M504 256c0 136.967-111.033 248-248 248S8 392.967 8 256 119.033 8 256 8s248 111.033 248 248zM227.314 387.314l184-184c6.248-6.248 6.248-16.379 0-22.627l-22.627-22.627c-6.248-6.249-16.379-6.249-22.628 0L216 308.118l-70.059-70.059c-6.248-6.248-16.379-6.248-22.628 0l-22.627 22.627c-6.248 6.248-6.248 16.379 0 22.627l104 104c6.249 6.249 16.379 6.249 22.628.001z"/>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 470 B

5
frontend/src/images/xCircle.svg Normal file
View file

@ -0,0 +1,5 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
<g fill="#721c24">
<path d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm121.6 313.1c4.7 4.7 4.7 12.3 0 17L338 377.6c-4.7 4.7-12.3 4.7-17 0L256 312l-65.1 65.6c-4.7 4.7-12.3 4.7-17 0L134.4 338c-4.7-4.7-4.7-12.3 0-17l65.6-65-65.6-65.1c-4.7-4.7-4.7-12.3 0-17l39.6-39.6c4.7-4.7 12.3-4.7 17 0l65 65.7 65.1-65.6c4.7-4.7 12.3-4.7 17 0l39.6 39.6c4.7 4.7 4.7 12.3 0 17L312 256l65.6 65.1z"/>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 489 B

19
frontend/src/styles/App.css
View file

@ -44,7 +44,7 @@
}
.centerBlockInner {
width: 800px;
width: 650px;
margin: 24px 0 0 0;
}
@ -144,12 +144,8 @@ tbody:not(:last-child) {
border-bottom: 1px solid var(--border);
}
tr:hover {
color: var(--main);
}
td {
vertical-align: top;
/* vertical-align: top; */
padding: 12px;
}
@ -159,6 +155,17 @@ td:first-child {
word-break: normal;
}
td:nth-child(3) {
width: 40px;
font-weight: 600;
word-break: normal;
}
.circleButton {
display: flex;
width: 20px;
}
p {
margin: 12px 0 0 0;
}