Skip to content

Commit b60e8a6

Browse files
jimboidjimboid
authored
Merge pull request #160 from CCPBioSim/software
Software
2 parents d31a803 + 4a54700 commit b60e8a6

4 files changed

Lines changed: 168 additions & 25 deletions

File tree

‎pkg_ccpbiosim/constituents/com_ccpbiosim/media/css/site.css‎

Lines changed: 41 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
/* ------------------------------------------- All -------------------------------------------------- */
2-
32
.fade-up {
43
opacity: 0;
54
transform: translateY(24px);
@@ -12,7 +11,6 @@
1211
}
1312

1413
/* -------------------------------------- Management Team ------------------------------------------- */
15-
/* -------------- Card ------------ */
1614
.management-team-card-hover {
1715
transition: transform 0.25s ease, box-shadow 0.25s ease;
1816
}
@@ -22,8 +20,6 @@
2220
box-shadow: 0 10px 25px rgba(0,0,0,0.15);
2321
}
2422

25-
/* ------------ Social ----------- */
26-
2723
.management-team-social a {
2824
color: #555;
2925
margin: 0 8px;
@@ -36,8 +32,6 @@
3632
}
3733

3834
/* ---------------------------------------------- Core Team ---------------------------------------- */
39-
/* ---------- Card ---------- */
40-
4135
.core-team-card {
4236
border: 1px solid #e5e7eb;
4337
border-radius: 0.35rem;
@@ -57,8 +51,6 @@
5751
align-items: center;
5852
}
5953

60-
/* ---------- Image ---------- */
61-
6254
.core-team-image-wrap {
6355
position: relative;
6456
/*width: 120px;*/
@@ -89,8 +81,6 @@
8981
pointer-events: none;
9082
}
9183

92-
/* ---------- Text ---------- */
93-
9484
.core-team-content {
9585
margin-left: 1.5rem;
9686
flex: 1;
@@ -120,8 +110,6 @@
120110
margin-bottom: 0;
121111
}
122112

123-
/* ---------- Mobile ---------- */
124-
125113
@media (max-width: 575px) {
126114
.core-team-horizontal {
127115
flex-direction: column;
@@ -139,8 +127,6 @@
139127
}
140128

141129
/* ---------------------------------------------- Community ---------------------------------------- */
142-
/* --------- Card ---------*/
143-
144130
.community-card {
145131
border: 1.5px solid #dee2e6; /* visible border */
146132
border-radius: 0.75rem;
@@ -159,8 +145,6 @@
159145
}
160146

161147
/* ---------------------------------------------- Events ---------------------------------------- */
162-
/* --------- Events view ---------*/
163-
164148
.events-row {
165149
align-items: center;
166150
cursor: pointer;
@@ -212,9 +196,6 @@
212196
}
213197

214198
/* ---------------------------------------------- Workshops ---------------------------------------- */
215-
/* --------- Workshops view ---------*/
216-
217-
/* Smooth hover effect for cards */
218199
.workshopcard {
219200
transition: transform 0.4s ease, box-shadow 0.4s ease;
220201
cursor: pointer;
@@ -228,7 +209,6 @@
228209
box-shadow: 0 1rem 2rem rgba(0,0,0,0.2);
229210
}
230211

231-
/* Left image card layout */
232212
.workshopcard-horizontal {
233213
display: flex;
234214
flex-direction: row;
@@ -277,3 +257,44 @@
277257
clear: right;
278258
padding-top: 5px;
279259
}
260+
261+
/* ---------------------------------------------- Software ---------------------------------------- */
262+
.software-category-bar{
263+
background:white;
264+
padding:15px;
265+
border-radius:10px;
266+
margin-bottom:25px;
267+
}
268+
269+
.software-category-btn{
270+
margin:5px;
271+
}
272+
273+
.software-card{
274+
cursor:pointer;
275+
transition:0.25s;
276+
text-align:center;
277+
}
278+
279+
.software-card:hover{
280+
transform:translateY(-6px);
281+
box-shadow:0 10px 30px rgba(0,0,0,0.15);
282+
}
283+
284+
.software-logo-box{
285+
height:80px;
286+
display:flex;
287+
align-items:center;
288+
justify-content:center;
289+
margin-bottom:10px;
290+
}
291+
292+
.software-logo-box img{
293+
max-height:60px;
294+
max-width:100%;
295+
}
296+
297+
.software-modal-logo{
298+
max-height:120px;
299+
margin-bottom:15px;
300+
}

‎pkg_ccpbiosim/constituents/com_ccpbiosim/site/tmpl/events/all-accordion.php‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -42,7 +42,7 @@
4242
<h1> <?php echo $this->escape($this->params->get('page_heading')); ?> </h1>
4343
</div>
4444
<?php endif;?>
45-
<p>Below are upcoming events relevant to our community.</p>
45+
<p>Below are all-time events relevant to our community.</p>
4646
<?php if ($canCreate) : ?>
4747
<a href="<?php echo Route::_('index.php?option=com_ccpbiosim&task=eventform.edit&id=0', false, 0); ?>"
4848
class="btn btn-success btn-small"><i

‎pkg_ccpbiosim/constituents/com_ccpbiosim/site/tmpl/events/previous-accordion.php‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -42,7 +42,7 @@
4242
<h1> <?php echo $this->escape($this->params->get('page_heading')); ?> </h1>
4343
</div>
4444
<?php endif;?>
45-
<p>Below are upcoming events relevant to our community.</p>
45+
<p>Below are past events relevant to our community.</p>
4646
<?php if ($canCreate) : ?>
4747
<a href="<?php echo Route::_('index.php?option=com_ccpbiosim&task=eventform.edit&id=0', false, 0); ?>"
4848
class="btn btn-success btn-small"><i

‎pkg_ccpbiosim/constituents/com_ccpbiosim/site/tmpl/software/default.php‎

Lines changed: 125 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -20,13 +20,135 @@
2020
$wa = $this->document->getWebAssetManager();
2121
$wa->useStyle('com_ccpbiosim.site')
2222
->useScript('com_ccpbiosim.site');
23+
$json = "https://ccpbiosim.github.io/assets.json";
24+
$data = json_decode(file_get_contents($json), true);
25+
$data_sorted = array("scientific" => array("catname" => "Scientific Software"),
26+
"data-tools" => array("catname" => "Data Tools"));
27+
foreach ($data["software"] as $application => $applicationdata) {
28+
$data_sorted[$applicationdata["category"]]["software"][$application] = $applicationdata;
29+
}
2330
?>
2431
<?php if ($this->params->get('show_page_heading')) : ?>
2532
<div class="page-header">
26-
<h1> <?php echo $this->escape($this->params->get('page_heading')); ?> </h1>
33+
<h1><?php echo $this->escape($this->params->get('page_heading')); ?></h1>
2734
</div>
2835
<?php endif; ?>
29-
<p>code will go here.</p>
30-
<p></br></p>
36+
<p>Our software packages that are actively maintained by our core CoSeC support team:</p>
37+
<div class="container mt-5">
38+
<div class="software-category-bar text-center">
39+
<button class="btn btn-outline-primary software-category-btn active" data-category="all">All</button>
40+
<?php foreach ($data_sorted as $category => $categorydata) : ?>
41+
<button class="btn btn-outline-primary software-category-btn" data-category="<? echo $category; ?>"><?php echo $categorydata["catname"]; ?></button>
42+
<? endforeach ?>
43+
</div>
44+
<div class="row g-4">
45+
<?php foreach ($data_sorted as $category => $categorydata) : ?>
46+
<?php foreach ($categorydata["software"] as $app => $appdata) : ?>
47+
<div class="col-md-4 product"
48+
data-category="<?php echo $category; ?>"
49+
data-name="<?php echo $appdata["name"]; ?>"
50+
data-logo="/images/logos/<?php echo $appdata["image"]; ?>"
51+
data-summary="<?php echo $appdata["shortdesc"]; ?>"
52+
data-description="<?php echo $appdata["longdesc"]; ?>"
53+
data-pip="pip install <?php echo $app; ?>"
54+
data-conda="conda install -c CCPBioSim <?php echo $app; ?>"
55+
data-docs="<?php echo $appdata["docs"]; ?>"
56+
data-source="<?php echo $appdata["github"]; ?>"
57+
data-authors="Authors: <?php echo $appdata["authors"]; ?>">
58+
<div class="card software-card h-100"
59+
data-bs-toggle="modal"
60+
data-bs-target="#modal">
61+
<div class="card-body">
62+
<div class="software-logo-box"><img src="/images/logos/<?php echo $appdata["image"]; ?>"></div>
63+
<h5><?php echo $appdata["name"]; ?></h5>
64+
<p><?php echo $appdata["shortdesc"]; ?></p>
65+
</div>
66+
</div>
67+
</div>
68+
<? endforeach ?>
69+
<? endforeach ?>
70+
</div>
71+
</div>
72+
<div class="modal fade" id="modal" tabindex="-1" aria-labelledby="modalLabel" aria-hidden="true">
73+
<div class="modal-dialog modal-lg modal-dialog-centered">
74+
<div class="modal-content">
75+
<div class="modal-header">
76+
<h5 class="modal-title" id="modalTitle">Software Package Name</h5>
77+
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
78+
</div>
79+
<div class="modal-body">
80+
<div class="container">
81+
<div class="row">
82+
<div class="col-3">
83+
<img src="" id="modalLogo" class="img-fluid mb-3 software-modal-logo" alt="Software Logo">
84+
</div>
85+
<div class="col">
86+
<p id="modalSummary" class="fw-bold modalsoftware-summarytext"></p>
87+
<p id="modalAuthors" class="fw-bold modalsoftware-authors"></p>
88+
</div>
89+
</div>
90+
</div>
91+
<p id="modalDescription"></p>
92+
<p>Install by Pip</p>
93+
<code id="modalPip"></code>
94+
<p style="padding-top: 10px;">Install by Conda</p>
95+
<code id="modalConda"></code>
96+
</div>
97+
<div class="modal-footer">
98+
<button class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
99+
<a href="#" id="modalSource" target="_blank" class="btn btn-primary">Source Code</a>
100+
<a href="#" id="modalDocs" target="_blank" class="btn btn-success">Documentation</a>
101+
</div>
102+
</div>
103+
</div>
104+
</div>
105+
106+
<script src="/media/vendor/bootstrap/js/modal.min.js?5.3.8" type="module"></script>
107+
108+
<script>
109+
const products = document.querySelectorAll(".product");
110+
const modalTitle = document.getElementById("modalTitle");
111+
const modalSummary = document.getElementById("modalSummary");
112+
const modalDescription = document.getElementById("modalDescription");
113+
const modalLogo = document.getElementById("modalLogo");
114+
const modalPip = document.getElementById("modalPip");
115+
const modalConda = document.getElementById("modalConda");
116+
const modalSource = document.getElementById("modalSource");
117+
const modalDocs = document.getElementById("modalDocs");
118+
const modalAuthors = document.getElementById("modalAuthors");
119+
120+
products.forEach(product => {
121+
product.addEventListener("click", () => {
122+
modalTitle.innerText = product.dataset.name;
123+
modalSummary.innerText = product.dataset.summary;
124+
modalDescription.innerText = product.dataset.description;
125+
modalLogo.src = product.dataset.logo;
126+
modalPip.innerText = product.dataset.pip;
127+
modalConda.innerText = product.dataset.conda;
128+
modalAuthors.innerText = product.dataset.authors;
129+
modalSource.href = product.dataset.source;
130+
modalDocs.href = product.dataset.docs;
131+
});
132+
});
31133

134+
const categoryButtons = document.querySelectorAll(".software-category-btn");
135+
let activeCategory = "all";
136+
categoryButtons.forEach(btn => {
137+
btn.addEventListener("click", () => {
138+
categoryButtons.forEach(b=>b.classList.remove("active"));
139+
btn.classList.add("active");
140+
activeCategory = btn.dataset.category;
141+
filterProducts();
142+
});
143+
});
32144

145+
function filterProducts(){
146+
products.forEach(product=>{
147+
const name = product.dataset.name.toLowerCase();
148+
const category = product.dataset.category;
149+
let show = true;
150+
if(activeCategory!="all" && category!=activeCategory) show=false;
151+
product.style.display = show ? "block" : "none";
152+
});
153+
}
154+
</script>

0 commit comments

Comments
 (0)