Skip to content

Commit 44f5c11

Browse files
steph1111steph1111
committed
Clickable cards on team page
1 parent 7f97f6b commit 44f5c11

File tree

9 files changed

+199
-97
lines changed

9 files changed

+199
-97
lines changed

‎_data/alumni.yml‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
- name: Isaac Eda
22
image: https://cdn.pixabay.com/photo/2015/01/08/18/27/startup-593341_960_720.jpg
33
link:
4-
roles: Electrical (2023 & 2024)
4+
roles: Electrical & Pilot (2023 & 2024)
55
current: SJSU EE
6-
description: blah blah blahls
6+
description: Isaac is currently studying at San Jose State pursuing a degree in Electrical Engineering. In the future, he hopes to work on electric vehicles.

‎_includes/alumni.html‎

Lines changed: 71 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,72 @@
1-
<div class="columns is-centered is-multiline is-mobile">
2-
{% for alumni in site.data.alumni %}
3-
<div class="column has-text-centered m-2 is-one-third-widescreen is-one-third-desktop is-one-fifth-fullhd is-one-third-tablet is-two-fifths-mobile is-three-quarters-touch"
4-
id="project-card">
5-
<div class="has-background-black-ter card">
6-
<figure class="image is-4by5" style="background-image: url({{alumni.image}});">
7-
</figure>
8-
<div class="card-content">
9-
<h2 class="has-text-white-ter has-text-weight-bold is-size-6">{{ alumni.name }}</h2>
10-
<p class="has-text-white-ter has-text-weight-normal">{{ alumni.current }}</p>
11-
<!-- <p class="has-text-grey-lighter has-text-weight-light content size-9">{{ member.description}}</p> -->
12-
</div>
1+
<div id="team">
2+
<div class="columns is-centered is-multiline is-mobile">
3+
{% for alum in site.data.alumni %}
4+
<div class="column has-text-centered m-2 is-one-third-widescreen is-one-third-desktop is-one-fifth-fullhd is-one-third-tablet is-two-fifths-mobile is-three-quarters-touch">
5+
<div class="person-card"
6+
data-image="{{ alum.image }}"
7+
data-name="{{ alum.name }}"
8+
data-current="{{ alum.current }}"
9+
data-roles="{{ alum.roles }}"
10+
data-description="{{ alum.description }}">
11+
<div class="card">
12+
<figure class="image is-4by5" style="background-image: url({{alum.image}});"></figure>
13+
<div class="card-content">
14+
<h2 class="has-text-white-ter has-text-weight-bold is-size-6">{{ alum.name }}</h2>
15+
<p class="has-text-weight-normal">{{ alum.current }}</p>
16+
</div>
17+
</div>
18+
</div>
19+
</div>
20+
{% endfor %}
21+
</div>
22+
23+
<div id="person-popup" class="popup">
24+
<div class="popup-content">
25+
<span class="popup-close">&times;</span>
26+
<div class="popup-image-container">
27+
<img id="popup-image" src="" alt="Alumni Photo">
28+
</div>
29+
<div class="popup-text">
30+
<h2 id="popup-name"></h2>
31+
<p id="popup-current"></p>
32+
<p id="popup-roles"></p>
33+
<br>
34+
<p id="popup-description"></p>
35+
</div>
1336
</div>
14-
</div>
15-
{% endfor %}
16-
</div>
37+
</div>
38+
39+
</div>
40+
41+
<script>
42+
document.addEventListener("DOMContentLoaded", function () {
43+
const popup = document.getElementById("person-popup");
44+
const popup_image = document.getElementById("popup-image");
45+
const popup_name = document.getElementById("popup-name");
46+
const popup_current = document.getElementById("popup-current");
47+
const popup_roles = document.getElementById("popup-roles");
48+
const popup_description = document.getElementById("popup-description");
49+
const close_button = document.querySelector(".popup-close");
50+
51+
document.querySelectorAll(".person-card").forEach(function(card) {
52+
card.addEventListener("click", function() {
53+
popup_image.src = this.getAttribute("data-image");
54+
popup_name.textContent = this.getAttribute("data-name");
55+
popup_current.textContent = this.getAttribute("data-current");
56+
popup_roles.textContent = this.getAttribute("data-roles");
57+
popup_description.textContent = this.getAttribute("data-description");
58+
popup.classList.add("active");
59+
});
60+
});
61+
62+
close_button.addEventListener("click", function() {
63+
popup.classList.remove("active");
64+
});
65+
66+
popup.addEventListener("click", function(event) {
67+
if (event.target === popup) {
68+
popup.classList.remove("active");
69+
}
70+
});
71+
});
72+
</script>

‎_includes/member.html‎

Lines changed: 31 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
1-
<div id="member">
1+
<div id="team">
22
<div class="columns is-centered is-multiline is-mobile">
33
{% for member in site.data.members %}
44
<div class="column has-text-centered m-2 is-one-third-widescreen is-one-third-desktop is-one-fifth-fullhd is-one-third-tablet is-two-fifths-mobile is-three-quarters-touch">
5-
<div class="member-card"
5+
<div class="person-card"
66
data-image="{{member.image}}"
77
data-name="{{ member.name }}"
88
data-roles="{{ member.roles }}"
@@ -19,45 +19,50 @@ <h2 class="has-text-white-ter has-text-weight-bold is-size-6">{{ member.name }}<
1919
{% endfor %}
2020
</div>
2121

22-
<div id="member-popup" class="popup">
22+
<div id="person-popup" class="popup">
2323
<div class="popup-content">
2424
<span class="popup-close">&times;</span>
25-
<img id="popup-image" src="" alt="Member Photo">
26-
<h2 id="popup-name"></h2>
27-
<p id="popup-roles"></p>
28-
<p id="popup-description"></p>
25+
<div class="popup-image-container">
26+
<img id="popup-image" src="" alt="Member Photo">
27+
</div>
28+
<div class="popup-text">
29+
<h2 id="popup-name"></h2>
30+
<p id="popup-roles"></p>
31+
<br>
32+
<p id="popup-description"></p>
33+
</div>
2934
</div>
3035
</div>
36+
3137
</div>
3238

3339
<script>
34-
document.addEventListener('DOMContentLoaded', function () {
35-
const popup = document.getElementById('member-popup');
36-
const popupImage = document.getElementById('popup-image');
37-
const popupName = document.getElementById('popup-name');
38-
const popupRoles = document.getElementById('popup-roles');
39-
const popupDescription = document.getElementById('popup-description');
40-
const closeButton = document.querySelector('.popup-close');
40+
document.addEventListener("DOMContentLoaded", function () {
41+
const popup = document.getElementById("person-popup");
42+
const popup_image = document.getElementById("popup-image");
43+
const popup_name = document.getElementById("popup-name");
44+
const popup_roles = document.getElementById("popup-roles");
45+
const popup_description = document.getElementById("popup-description");
46+
const close_button = document.querySelector(".popup-close");
4147

42-
document.querySelectorAll('.member-card').forEach(function(card) {
43-
card.addEventListener('click', function() {
44-
popupImage.src = this.getAttribute('data-image');
45-
popupName.textContent = this.getAttribute('data-name');
46-
popupRoles.textContent = this.getAttribute('data-roles');
47-
popupDescription.textContent = this.getAttribute('data-description');
48-
popup.classList.add('active');
48+
document.querySelectorAll(".person-card").forEach(function(card) {
49+
card.addEventListener("click", function() {
50+
popup_image.src = this.getAttribute("data-image");
51+
popup_name.textContent = this.getAttribute("data-name");
52+
popup_roles.textContent = this.getAttribute("data-roles");
53+
popup_description.textContent = this.getAttribute("data-description");
54+
popup.classList.add("active");
4955
});
5056
});
5157

52-
closeButton.addEventListener('click', function() {
53-
popup.classList.remove('active');
58+
close_button.addEventListener("click", function() {
59+
popup.classList.remove("active");
5460
});
5561

56-
popup.addEventListener('click', function(event) {
62+
popup.addEventListener("click", function(event) {
5763
if (event.target === popup) {
58-
popup.classList.remove('active');
64+
popup.classList.remove("active");
5965
}
6066
});
6167
});
62-
6368
</script>

‎_includes/mentors.html‎

Lines changed: 67 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,68 @@
1-
<div class="columns is-centered is-multiline is-mobile">
2-
{% for mentor in site.data.mentors %}
3-
<div class="column has-text-centered m-2 is-one-third-widescreen is-one-third-desktop is-one-fifth-fullhd is-one-third-tablet is-two-fifths-mobile is-three-quarters-touch"
4-
id="project-card">
5-
<div class="has-background-black-ter card">
6-
<figure class="image is-4by5" style="background-image: url({{mentor.image}});">
7-
</figure>
8-
<div class="card-content">
9-
<h2 class="has-text-white-ter has-text-weight-bold is-size-6">{{ mentor.name }}</h2>
10-
<p class="has-text-white-ter has-text-weight-normal">{{ mentor.roles }}</p>
11-
</div>
1+
<div id="team">
2+
<div class="columns is-centered is-multiline is-mobile">
3+
{% for mentor in site.data.mentors %}
4+
<div class="column has-text-centered m-2 is-one-third-widescreen is-one-third-desktop is-one-fifth-fullhd is-one-third-tablet is-two-fifths-mobile is-three-quarters-touch">
5+
<div class="person-card"
6+
data-image="{{mentor.image}}"
7+
data-name="{{ mentor.name }}"
8+
data-roles="{{ mentor.roles }}"
9+
data-description="{{ mentor.description }}">
10+
<div class="card">
11+
<figure class="image is-4by5" style="background-image: url({{mentor.image}});"></figure>
12+
<div class="card-content">
13+
<h2 class="has-text-white-ter has-text-weight-bold is-size-6">{{ mentor.name }}</h2>
14+
<p class="has-text-weight-normal">{{ mentor.roles }}</p>
15+
</div>
16+
</div>
17+
</div>
18+
</div>
19+
{% endfor %}
20+
</div>
21+
22+
<div id="person-popup" class="popup">
23+
<div class="popup-content">
24+
<span class="popup-close">&times;</span>
25+
<div class="popup-image-container">
26+
<img id="popup-image" src="" alt="Mentor Photo">
27+
</div>
28+
<div class="popup-text">
29+
<h2 id="popup-name"></h2>
30+
<p id="popup-roles"></p>
31+
<br>
32+
<p id="popup-description"></p>
33+
</div>
1234
</div>
13-
</div>
14-
{% endfor %}
15-
</div>
35+
</div>
36+
37+
</div>
38+
39+
<script>
40+
document.addEventListener("DOMContentLoaded", function () {
41+
const popup = document.getElementById("person-popup");
42+
const popup_image = document.getElementById("popup-image");
43+
const popup_name = document.getElementById("popup-name");
44+
const popup_roles = document.getElementById("popup-roles");
45+
const popup_description = document.getElementById("popup-description");
46+
const close_button = document.querySelector(".popup-close");
47+
48+
document.querySelectorAll(".person-card").forEach(function(card) {
49+
card.addEventListener("click", function() {
50+
popup_image.src = this.getAttribute("data-image");
51+
popup_name.textContent = this.getAttribute("data-name");
52+
popup_roles.textContent = this.getAttribute("data-roles");
53+
popup_description.textContent = this.getAttribute("data-description");
54+
popup.classList.add("active");
55+
});
56+
});
57+
58+
close_button.addEventListener("click", function() {
59+
popup.classList.remove("active");
60+
});
61+
62+
popup.addEventListener("click", function(event) {
63+
if (event.target === popup) {
64+
popup.classList.remove("active");
65+
}
66+
});
67+
});
68+
</script>

0 commit comments

Comments
 (0)