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 @@ ...@@ -17,6 +17,7 @@
"bulma": "0.9", "bulma": "0.9",
"react": "^16.13.1", "react": "^16.13.1",
"react-dom": "^16.13.1", "react-dom": "^16.13.1",
"react-collapsible": "^2.8.1",
"terser": "^5.0.0" "terser": "^5.0.0"
}, },
"browserslist": "> 0.25%, not dead" "browserslist": "> 0.25%, not dead"
......
'use strict'; 'use strict';
const React = require('react'); 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 { class Section extends React.Component {
render() { render() {
const { suite } = this.props; 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 ( 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="tile box has-background-danger">
<div className="content"> <Collapsible trigger={ suite.name } open>
<p className='title is-5 has-text-white'>{ suite.name }</p> {good.length > 0 && <StatusSection label="good" pkgs={ good } />}
<ul> {bad.length > 0 && <StatusSection label="bad" pkgs={ bad } open />}
{suite.pkgs.map(function(pkg) { {unknown.length > 0 && <StatusSection label="unknown" pkgs={ unknown } open />}
if (pkg.status == 'BAD') { </Collapsible>
return <li key={pkg.name}><p className="subtitle is-6 has-text-white">{pkg.name}-{pkg.version}</p></li>
}
})}
</ul>
</div>
</div> </div>
</section> </section>
) )
......
...@@ -14,6 +14,14 @@ $link: #212952; ...@@ -14,6 +14,14 @@ $link: #212952;
@import "../node_modules/bulma/sass/layout/section.sass"; @import "../node_modules/bulma/sass/layout/section.sass";
@import "../node_modules/bulma/sass/grid/tiles.sass"; @import "../node_modules/bulma/sass/grid/tiles.sass";
a:hover {
text-decoration: underline;
}
.section a:link, .section a:visited {
color: white;
}
.bold { .bold {
font-weight: bold; font-weight: bold;
} }
...@@ -47,3 +55,46 @@ ul { ...@@ -47,3 +55,46 @@ ul {
columns: 8; 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