Skip to content

Commit

Permalink
changed the crates looks
Browse files Browse the repository at this point in the history
  • Loading branch information
cedricdcc committed Oct 24, 2023
1 parent 2dd5af4 commit 2e1c8f1
Show file tree
Hide file tree
Showing 4 changed files with 48 additions and 16 deletions.
20 changes: 11 additions & 9 deletions public/css/style.css
Original file line number Diff line number Diff line change
Expand Up @@ -328,22 +328,24 @@ header .intro-text {
left: 50%;
}
#crates i.fa {
font-size: 42px;
width: 120px;
height: 120px;
padding: 40px 0;
background: linear-gradient(to right, #6372ff 0%, #5ca9fb 100%);
border-radius: 50%;
font-size: 35px;
width: 80px;
height: 15px;
color: #fff;
box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.05);
}
#crates h3 {
font-weight: 500;

#crates i.fa:hover {
color: #000000;
}

#crates h4 {
font-weight: 400;
padding: 5px 0;
color: #fff;
}
#crates p {
color: rgba(255, 255, 255, 0.75);
padding: 5px 0;
}
#crates .crate-desc {
margin-bottom: 40px;
Expand Down
36 changes: 30 additions & 6 deletions src/components/crates.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -17,22 +17,46 @@ export const Crates = (props) => {
}
}

const githubClick = (crate) => {
//go to crate.url
console.log(crate);
if (crate.index) {
window.location.href = "#"+crate.url;
}
else {
//open a new tab
window.open(crate.github_url, "_blank");
}
}

return (
<div id="crates" className="text-center">
<div className="container">
<div className="section-title">
<h2>Our Crates</h2>
<h2>Our Data packages</h2>
</div>
<div className="row">
<div className="row" style={{padding:"20px"}}>
{props.data
? props.data.map((d, i) => (
<div key={`${d.name}-${i}`} className={`col-md-${12/props.data.length < 4 ? 4 : 12/props.data.length} cratecard`} onClick={() => crateClick(d)}>
<div key={`${d.name}-${i}`} className="col-md-12" >
{" "}
<i className={d.icon}></i>
<div className="service-desc">
<h3>{d.name}</h3>
<div className="col-md-2">
<h4>{d.name}</h4>
</div>
<div className="col-md-8">
<p>{d.text}</p>
</div>
<div className="col-md-1" onClick={() => githubClick(d)}>
<i className="fa fa-github"></i>
</div>
{
d.crateurl ?
<div className="col-md-1" onClick={() => crateClick(d)}>
<i className="fa fa-archive"></i>
</div>
:
<></>
}
</div>
))
: "loading"}
Expand Down
2 changes: 1 addition & 1 deletion src/components/navigation.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -111,7 +111,7 @@ export const Navigation = (props) => {
data-placement="bottom"
title="Research Object Crates (https://www.researchobject.org/ro-crate/): a way to package file-based research data so they are linked, grouped, described, and semantically annotated. In our Github spaces, each repository can also be a RO-Crate."
>
RO-Crates
Data
</a>
</li>
) : (
Expand Down
6 changes: 6 additions & 0 deletions src/data/project_crates.json
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@
"icon": "fa fa-archive",
"name": "Lorem ipsum dolor",
"url" : "http://www.google.com",
"crateurl": "https://w3id.org/ro/crate/1",
"text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit."
},
{
Expand All @@ -20,30 +21,35 @@
"icon": "fa fa-cart-arrow-down",
"name": "Consectetur adipiscing",
"url" : "http://www.google.com",
"crateurl": "https://w3id.org/ro/crate/1",
"text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sed dapibus leo nec ornare diam sedasd commodo nibh ante facilisis bibendum dolor feugiat at."
},
{
"icon": "fa fa-cloud-download",
"name": "Lorem ipsum dolor",
"url" : "http://www.google.com",
"crateurl": "https://w3id.org/ro/crate/1",
"text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sed dapibus leo nec ornare diam sedasd commodo nibh ante facilisis bibendum dolor feugiat at."
},
{
"icon": "fa fa-language",
"name": "Consectetur adipiscing",
"url" : "http://www.google.com",
"crateurl": "https://w3id.org/ro/crate/1",
"text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sed dapibus leo nec ornare diam sedasd commodo nibh ante facilisis bibendum dolor feugiat at."
},
{
"icon": "fa fa-plane",
"name": "Lorem ipsum dolor",
"url" : "http://www.google.com",
"crateurl": "https://w3id.org/ro/crate/1",
"text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sed dapibus leo nec ornare diam sedasd commodo nibh ante facilisis bibendum dolor feugiat at."
},
{
"icon": "fa fa-pie-chart",
"name": "Consectetur adipiscing",
"url" : "http://www.google.com",
"crateurl": "https://w3id.org/ro/crate/1",
"text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sed dapibus leo nec ornare diam sedasd commodo nibh ante facilisis bibendum dolor feugiat at."
}
]

0 comments on commit 2e1c8f1

Please sign in to comment.