Skip to content

Commit 855fdf4

Browse files
jimboidjimboid
authored
Merge pull request #27 from CCPBioSim/views
add the initial core team styling for bios
2 parents e8443a5 + b6ecadf commit 855fdf4

2 files changed

Lines changed: 172 additions & 199 deletions

File tree

‎com_ccpbiosim/media/css/teams.css‎

Lines changed: 131 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,137 @@
1-
.management-team-card-hover {
2-
transition: transform 0.25s ease, box-shadow 0.25s ease;
3-
}
1+
/* -------- Management Team ------- */
2+
3+
.management-team-card-hover {
4+
transition: transform 0.25s ease, box-shadow 0.25s ease;
5+
}
6+
7+
.management-team-card-hover:hover {
8+
transform: translateY(-6px);
9+
box-shadow: 0 10px 25px rgba(0,0,0,0.15);
10+
}
11+
12+
.management-team-social a {
13+
color: #555;
14+
margin: 0 8px;
15+
font-size: 1.2rem;
16+
transition: color 0.2s ease;
17+
}
18+
19+
.management-team-social a:hover {
20+
color: #0d6efd;
21+
}
22+
23+
/* -------- Core Team ------- */
24+
/* ---------- Card ---------- */
25+
26+
.core-team-card {
27+
border: 1px solid #e5e7eb;
28+
border-radius: 0.35rem;
29+
padding: 1.75rem;
30+
background: #fff;
31+
transition: transform 0.25s ease, box-shadow 0.25s ease;
32+
height: 100%;
33+
}
34+
35+
.core-team-card:hover {
36+
transform: translateY(-6px);
37+
box-shadow: 0 20px 35px rgba(15, 23, 42, 0.08);
38+
}
39+
40+
.core-team-horizontal {
41+
display: flex;
42+
align-items: center;
43+
}
44+
45+
/* ---------- Image ---------- */
46+
47+
.core-team-image-wrap {
48+
position: relative;
49+
/*width: 120px;*/
50+
/*min-width: 120px;*/
51+
height: 250px;
52+
border-radius: 0.35rem;
53+
overflow: hidden;
54+
}
55+
56+
.core-team-image-wrap img {
57+
width: 100%;
58+
height: 100%;
59+
object-fit: cover;
60+
}
61+
62+
.core-team-image-wrap::after {
63+
content: "";
64+
position: absolute;
65+
top: 0;
66+
right: 0;
67+
width: 55%;
68+
height: 100%;
69+
background: linear-gradient(
70+
to right,
71+
rgba(255, 255, 255, 0) 0%,
72+
rgba(255, 255, 255, 1) 90%
73+
);
74+
pointer-events: none;
75+
}
76+
77+
/* ---------- Text ---------- */
78+
79+
.core-team-content {
80+
margin-left: 1.5rem;
81+
flex: 1;
82+
}
83+
84+
.core-team-name {
85+
font-weight: 600;
86+
margin-bottom: 0.15rem;
87+
}
88+
89+
.core-team-role {
90+
font-size: 0.9rem;
91+
font-weight: 500;
92+
color: #0f172a;
93+
}
94+
95+
.core-team-institution {
96+
font-size: 0.85rem;
97+
color: #64748b;
98+
margin-bottom: 0.75rem;
99+
}
100+
101+
.core-team-bio {
102+
font-size: 0.9rem;
103+
color: #475569;
104+
line-height: 1.6;
105+
margin-bottom: 0;
106+
}
107+
108+
/* ---------- Animation ---------- */
109+
110+
.fade-up {
111+
opacity: 0;
112+
transform: translateY(24px);
113+
transition: opacity 0.6s ease, transform 0.6s ease;
114+
}
115+
116+
.fade-up.show {
117+
opacity: 1;
118+
transform: translateY(0);
119+
}
120+
121+
/* ---------- Mobile ---------- */
4122

5-
.management-team-card-hover:hover {
6-
transform: translateY(-6px);
7-
box-shadow: 0 10px 25px rgba(0,0,0,0.15);
123+
@media (max-width: 575px) {
124+
.core-team-horizontal {
125+
flex-direction: column;
126+
text-align: center;
8127
}
9128

10-
.management-team-social a {
11-
color: #555;
12-
margin: 0 8px;
13-
font-size: 1.2rem;
14-
transition: color 0.2s ease;
129+
.core-team-content {
130+
margin-left: 0;
131+
margin-top: 1rem;
15132
}
16133

17-
.management-team-social a:hover {
18-
color: #0d6efd;
134+
.core-team-image-wrap::after {
135+
display: none;
19136
}
137+
}

‎com_ccpbiosim/site/tmpl/coreteammembers/profile.php‎

Lines changed: 41 additions & 186 deletions
Original file line numberDiff line numberDiff line change
@@ -34,195 +34,50 @@
3434
$wa->useStyle('com_ccpbiosim.list');
3535
?>
3636

37+
<link rel="stylesheet" href="media/com_ccpbiosim/css/teams.css">
38+
3739
<?php if ($this->params->get('show_page_heading')) : ?>
3840
<div class="page-header">
3941
<h1> <?php echo $this->escape($this->params->get('page_heading')); ?> </h1>
4042
</div>
4143
<?php endif;?>
42-
<form action="<?php echo htmlspecialchars(Uri::getInstance()->toString()); ?>" method="post"
43-
name="adminForm" id="adminForm">
44-
45-
<div class="table-responsive">
46-
<table class="table table-striped" id="coreteammemberList">
47-
<thead>
48-
<tr>
49-
50-
<th class=''>
51-
<?php echo HTMLHelper::_('grid.sort', 'COM_CCPBIOSIM_CORETEAMMEMBERS_ID', 'a.id', $listDirn, $listOrder); ?>
52-
</th>
53-
54-
<th >
55-
<?php echo HTMLHelper::_('grid.sort', 'JPUBLISHED', 'a.state', $listDirn, $listOrder); ?>
56-
</th>
57-
58-
<th class=''>
59-
<?php echo HTMLHelper::_('grid.sort', 'COM_CCPBIOSIM_CORETEAMMEMBERS_TITLE', 'a.title', $listDirn, $listOrder); ?>
60-
</th>
61-
62-
<th class=''>
63-
<?php echo HTMLHelper::_('grid.sort', 'COM_CCPBIOSIM_CORETEAMMEMBERS_FIRSTNAME', 'a.firstname', $listDirn, $listOrder); ?>
64-
</th>
65-
66-
<th class=''>
67-
<?php echo HTMLHelper::_('grid.sort', 'COM_CCPBIOSIM_CORETEAMMEMBERS_SURNAME', 'a.surname', $listDirn, $listOrder); ?>
68-
</th>
69-
70-
<th class=''>
71-
<?php echo HTMLHelper::_('grid.sort', 'COM_CCPBIOSIM_CORETEAMMEMBERS_PROFILEPHOTO', 'a.profilephoto', $listDirn, $listOrder); ?>
72-
</th>
73-
74-
<th class=''>
75-
<?php echo HTMLHelper::_('grid.sort', 'COM_CCPBIOSIM_CORETEAMMEMBERS_ROLE', 'a.role', $listDirn, $listOrder); ?>
76-
</th>
77-
78-
<th class=''>
79-
<?php echo HTMLHelper::_('grid.sort', 'COM_CCPBIOSIM_CORETEAMMEMBERS_INSITUTION', 'a.insitution', $listDirn, $listOrder); ?>
80-
</th>
81-
82-
<th class=''>
83-
<?php echo HTMLHelper::_('grid.sort', 'COM_CCPBIOSIM_CORETEAMMEMBERS_GROUPWEBSITE', 'a.groupwebsite', $listDirn, $listOrder); ?>
84-
</th>
85-
86-
<th class=''>
87-
<?php echo HTMLHelper::_('grid.sort', 'COM_CCPBIOSIM_CORETEAMMEMBERS_PROGRAMME', 'a.programme', $listDirn, $listOrder); ?>
88-
</th>
89-
90-
<th class=''>
91-
<?php echo HTMLHelper::_('grid.sort', 'COM_CCPBIOSIM_CORETEAMMEMBERS_SOCIAL', 'a.social', $listDirn, $listOrder); ?>
92-
</th>
93-
94-
<th class=''>
95-
<?php echo HTMLHelper::_('grid.sort', 'COM_CCPBIOSIM_CORETEAMMEMBERS_CHAIR', 'a.chair', $listDirn, $listOrder); ?>
96-
</th>
97-
98-
<th class=''>
99-
<?php echo HTMLHelper::_('grid.sort', 'COM_CCPBIOSIM_CORETEAMMEMBERS_COSECPROJECTLEAD', 'a.cosecprojectlead', $listDirn, $listOrder); ?>
100-
</th>
44+
<p>Our core team is made up of our chair, administrative support from the chairs institution and CoSeC support staff from UKRI - STFC.</br></p>
45+
46+
<!-- Team -->
47+
<section class="pb-5">
48+
<div class="container container-md">
49+
<div class="row g-4">
50+
51+
<?php foreach ($this->items as $i => $item) : ?>
52+
<?php $canEdit = $user->authorise('core.edit', 'com_ccpbiosim'); ?>
53+
<?php if (!$canEdit && $user->authorise('core.edit.own', 'com_ccpbiosim')): ?>
54+
<?php $canEdit = Factory::getApplication()->getIdentity()->id == $item->created_by; ?>
55+
<?php endif; ?>
56+
57+
<div class="col-12 col-md-6 fade-up">
58+
<div class="core-team-card core-team-horizontal">
59+
<div class="core-team-image-wrap">
60+
<img src="<?php echo Uri::root() . $item->profilephoto; ?>" alt="<?php echo $item->title; ?> <?php echo $item->firstname; ?> <?php echo $item->surname; ?>">
61+
</div>
62+
<div class="core-team-content">
63+
<div class="core-team-name"><?php echo $item->title; ?> <?php echo $item->firstname; ?> <?php echo $item->surname; ?></div>
64+
<div class="core-team-institution"><?php echo $item->insitution; ?></div>
65+
<p class="core-team-bio"><?php echo $item->role; ?></p>
66+
</div>
67+
</div>
68+
</div>
69+
70+
<?php endforeach; ?>
10171

102-
<th class=''>
103-
<?php echo HTMLHelper::_('grid.sort', 'COM_CCPBIOSIM_CORETEAMMEMBERS_ADMINASSISTANT', 'a.adminassistant', $listDirn, $listOrder); ?>
104-
</th>
105-
106-
<?php if ($canEdit || $canDelete): ?>
107-
<th class="center">
108-
<?php echo Text::_('COM_CCPBIOSIM_CORETEAMMEMBERS_ACTIONS'); ?>
109-
</th>
110-
<?php endif; ?>
111-
112-
</tr>
113-
</thead>
114-
<tfoot>
115-
<tr>
116-
<td colspan="<?php echo isset($this->items[0]) ? count(get_object_vars($this->items[0])) : 10; ?>">
117-
<div class="pagination">
118-
<?php echo $this->pagination->getPagesLinks(); ?>
119-
</div>
120-
</td>
121-
</tr>
122-
</tfoot>
123-
<tbody>
124-
<?php foreach ($this->items as $i => $item) : ?>
125-
<?php $canEdit = $user->authorise('core.edit', 'com_ccpbiosim'); ?>
126-
<?php if (!$canEdit && $user->authorise('core.edit.own', 'com_ccpbiosim')): ?>
127-
<?php $canEdit = Factory::getApplication()->getIdentity()->id == $item->created_by; ?>
128-
<?php endif; ?>
129-
130-
<tr class="row<?php echo $i % 2; ?>">
131-
132-
<td>
133-
<?php echo $item->id; ?>
134-
</td>
135-
<td>
136-
<?php $class = ($canChange) ? 'active' : 'disabled'; ?>
137-
<a class="btn btn-micro <?php echo $class; ?>" href="<?php echo ($canChange) ? Route::_('index.php?option=com_ccpbiosim&task=coreteammember.publish&id=' . $item->id . '&state=' . (($item->state + 1) % 2), false, 2) : '#'; ?>">
138-
<?php if ($item->state == 1): ?>
139-
<i class="icon-publish"></i>
140-
<?php else: ?>
141-
<i class="icon-unpublish"></i>
142-
<?php endif; ?>
143-
</a>
144-
</td>
145-
<td>
146-
<?php echo $item->title; ?>
147-
</td>
148-
<td>
149-
<?php echo $item->firstname; ?>
150-
</td>
151-
<td>
152-
<?php echo $item->surname; ?>
153-
</td>
154-
<td>
155-
<img src="<?php echo Uri::root() . $item->profilephoto; ?>" alt="Preview" style="max-height: 50px;" />
156-
</td>
157-
<td>
158-
<?php echo $item->role; ?>
159-
</td>
160-
<td>
161-
<?php echo $item->insitution; ?>
162-
</td>
163-
<td>
164-
<?php echo $item->groupwebsite; ?>
165-
</td>
166-
<td>
167-
<?php echo $item->programme; ?>
168-
</td>
169-
<td>
170-
<?php echo $item->social; ?>
171-
</td>
172-
<td>
173-
<?php echo $item->chair; ?>
174-
</td>
175-
<td>
176-
<?php echo $item->cosecprojectlead; ?>
177-
</td>
178-
<td>
179-
<?php echo $item->adminassistant; ?>
180-
</td>
181-
<?php if ($canEdit || $canDelete): ?>
182-
<td class="center">
183-
<?php $canCheckin = Factory::getApplication()->getIdentity()->authorise('core.manage', 'com_ccpbiosim.' . $item->id) || $item->checked_out == Factory::getApplication()->getIdentity()->id; ?>
184-
185-
<?php if($canEdit && $item->checked_out == 0): ?>
186-
<a href="<?php echo Route::_('index.php?option=com_ccpbiosim&task=coreteammember.edit&id=' . $item->id, false, 2); ?>" class="btn btn-mini" type="button"><i class="icon-edit" ></i></a>
187-
<?php endif; ?>
188-
<?php if ($canDelete): ?>
189-
<a href="<?php echo Route::_('index.php?option=com_ccpbiosim&task=coreteammemberform.remove&id=' . $item->id, false, 2); ?>" class="btn btn-mini delete-button" type="button"><i class="icon-trash" ></i></a>
190-
<?php endif; ?>
191-
</td>
192-
<?php endif; ?>
193-
194-
</tr>
195-
<?php endforeach; ?>
196-
</tbody>
197-
</table>
198-
</div>
199-
<?php if ($canCreate) : ?>
200-
<a href="<?php echo Route::_('index.php?option=com_ccpbiosim&task=coreteammemberform.edit&id=0', false, 0); ?>"
201-
class="btn btn-success btn-small"><i
202-
class="icon-plus"></i>
203-
<?php echo Text::_('COM_CCPBIOSIM_ADD_ITEM'); ?></a>
204-
<?php endif; ?>
205-
206-
<input type="hidden" name="task" value=""/>
207-
<input type="hidden" name="boxchecked" value="0"/>
208-
<input type="hidden" name="filter_order" value=""/>
209-
<input type="hidden" name="filter_order_Dir" value=""/>
210-
<?php echo HTMLHelper::_('form.token'); ?>
211-
</form>
212-
213-
<?php
214-
if($canDelete) {
215-
$wa->addInlineScript("
216-
jQuery(document).ready(function () {
217-
jQuery('.delete-button').click(deleteItem);
218-
});
219-
220-
function deleteItem() {
221-
222-
if (!confirm(\"" . Text::_('COM_CCPBIOSIM_DELETE_MESSAGE') . "\")) {
223-
return false;
224-
}
225-
}
226-
", [], [], ["jquery"]);
227-
}
228-
?>
72+
</div>
73+
</div>
74+
</section>
75+
76+
<!-- Animation Script -->
77+
<script>
78+
window.addEventListener('load', () => {
79+
document.querySelectorAll('.fade-up').forEach((el, i) => {
80+
setTimeout(() => el.classList.add('show'), i * 120);
81+
});
82+
});
83+
</script>

0 commit comments

Comments
 (0)