Verified Commit 7dec8314 authored by Levente Polyak's avatar Levente Polyak
Browse files

section: adding collapsible elements including good packages

parent ece6ad79
......@@ -17,6 +17,7 @@
"bulma": "0.9",
"react": "^16.13.1",
"react-dom": "^16.13.1",
"react-collapsible": "^2.8.1",
"terser": "^5.0.0"
},
"browserslist": "> 0.25%, not dead"
......
'use strict';
const React = require('react');
import Collapsible from 'react-collapsible'
function StatusSection(props) {
const isOpen = props.open;
const content = (
<ul>
{props.pkgs.map(function(pkg) {
return <li key={pkg.name}><p className="subtitle is-6 has-text-white">{pkg.name} {pkg.version}</p></li>
})}
</ul>
);
return (
<div>
{ isOpen
? <Collapsible trigger={props.label} lazyRender open>{ content }</Collapsible>
: <Collapsible trigger={props.label} lazyRender>{ content }</Collapsible>
}
</div>
);
}
class Section extends React.Component {
render() {
const { suite } = this.props;
const good = suite.pkgs.filter(pkg => pkg.status == "GOOD");
const bad = suite.pkgs.filter(pkg => pkg.status == "BAD");
const unknown = suite.pkgs.filter(pkg => pkg.status == "UNKWN");
return (
<section key={suite.name} className="section pt-4 pb-4" >
<section key={suite.name} className="section pt-4 pb-4" id={ suite.name }>
<div className="tile box has-background-danger">
<div className="content">
<p className='title is-5 has-text-white'>{ suite.name }</p>
<ul>
{suite.pkgs.map(function(pkg) {
if (pkg.status == 'BAD') {
return <li key={pkg.name}><p className="subtitle is-6 has-text-white">{pkg.name}-{pkg.version}</p></li>
}
})}
</ul>
</div>
<Collapsible trigger={ suite.name } open>
{good.length > 0 && <StatusSection label="good" pkgs={ good } />}
{bad.length > 0 && <StatusSection label="bad" pkgs={ bad } open />}
{unknown.length > 0 && <StatusSection label="unknown" pkgs={ unknown } open />}
</Collapsible>
</div>
</section>
)
......
......@@ -14,6 +14,14 @@ $link: #212952;
@import "../node_modules/bulma/sass/layout/section.sass";
@import "../node_modules/bulma/sass/grid/tiles.sass";
a:hover {
text-decoration: underline;
}
.section a:link, .section a:visited {
color: white;
}
.bold {
font-weight: bold;
}
......@@ -47,3 +55,46 @@ ul {
columns: 8;
}
}
.box {
padding: 5px 10px 10px 10px;
}
.Collapsible__contentInner {
margin-left: 1rem;
border: 1px black;
color: black;
}
.Collapsible__trigger {
display: block;
position: relative;
padding: 0 0 0 1rem;
color: white;
&:hover {
cursor: pointer;
text-decoration: underline;
}
&:before {
content: '^';
position: absolute;
left: 0;
display: block;
transition: transform 100ms;
color: #666;
}
&.is-closed {
&:before {
transform: rotateZ(90deg);
}
}
&.is-open {
&:before {
transform: rotateZ(180deg);
}
}
}
This diff is collapsed.
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment