Skip to content

Commit e95d406

Browse files
steph1111steph1111
committed
Popup on click for members
1 parent d17869f commit e95d406

File tree

8 files changed

+170
-38
lines changed

8 files changed

+170
-38
lines changed

‎_includes/member.html‎

Lines changed: 62 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,63 @@
1-
<div class="columns is-centered is-multiline is-mobile">
2-
{% for member in site.data.members %}
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({{member.image}});">
7-
</figure>
8-
<div class="card-content">
9-
<h2 class="has-text-white-ter has-text-weight-bold is-size-6">{{ member.name }}</h2>
10-
<p class="has-text-white-ter has-text-weight-normal">{{ member.roles }}</p>
11-
<!-- <p class="has-text-grey-lighter has-text-weight-light content size-9">{{ member.description}}</p> -->
12-
</div>
1+
<div id="member">
2+
<div class="columns is-centered is-multiline is-mobile">
3+
{% for member in site.data.members %}
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="member-card"
6+
data-image="{{member.image}}"
7+
data-name="{{ member.name }}"
8+
data-roles="{{ member.roles }}"
9+
data-description="{{ member.description }}">
10+
<div class="card">
11+
<figure class="image is-4by5" style="background-image: url({{member.image}});"></figure>
12+
<div class="card-content">
13+
<h2 class="has-text-white-ter has-text-weight-bold is-size-6">{{ member.name }}</h2>
14+
<p class="has-text-weight-normal">{{ member.roles }}</p>
15+
</div>
16+
</div>
17+
</div>
18+
</div>
19+
{% endfor %}
20+
</div>
21+
22+
<div id="member-popup" class="popup">
23+
<div class="popup-content">
24+
<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>
1329
</div>
14-
</div>
15-
{% endfor %}
16-
</div>
30+
</div>
31+
</div>
32+
33+
<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');
41+
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');
49+
});
50+
});
51+
52+
closeButton.addEventListener('click', function() {
53+
popup.classList.remove('active');
54+
});
55+
56+
popup.addEventListener('click', function(event) {
57+
if (event.target === popup) {
58+
popup.classList.remove('active');
59+
}
60+
});
61+
});
62+
63+
</script>

‎_includes/team-showcase.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,11 +4,11 @@
44
<div class="container">
55
<div class="title-text">
66
<h1 class="title has-text-white-ter is-size-1 is-uppercase has-text-weight-bold">
7-
Our Team
7+
Cabrillo Robotics Club Team
88
</h1>
99
<hr>
1010
<a href="{{site.url}}{{site.baseurl}}/team#current-members"
11-
class="button is-rounded is-outlined has-text-weight-normal">Meet the Members</a>
11+
class="button is-rounded is-outlined has-text-weight-normal">Meet Our Members</a>
1212
</a>
1313
</div>
1414
</div>

‎_layouts/team.html‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -12,22 +12,22 @@
1212
<body>
1313
{% include navbar.html %}
1414
{% include team-showcase.html %}
15-
<section class="section has-text-centered has-background-black-bis" id="team">
15+
<section class="section has-text-centered" id="team">
1616
<div class="container">
1717
<div class="description has-text-left">
1818
<p>
1919
Cabrillo Robotics Club (CRC) is a dedicated team of students from Cabrillo College in Aptos, California united by a mutual passion for robotics. We design and engineer cutting-edge solutions, drawing from the diverse experience and knowledge of our interdisciplinary members. The team is structured into four specialized subteams: Electrical, Mechanical, Software, and Marketing. This decentralized approach fosters autonomy within each division, allowing members to focus on their areas of expertise, while working collaboratively to create innovative and reliable robotic systems.
2020
</p>
2121
</div>
22-
<h2 class="title has-text-left has-text-white-ter is-size-2 has-text-weight-bold mgb-medium" id="current-members">
22+
<h2 class="title has-text-left is-size-2 has-text-weight-bold mgb-medium" id="current-members">
2323
Current Members
2424
</h2>
2525
{% include member.html %}
26-
<h2 class="title has-text-left has-text-white-ter is-size-2 has-text-weight-bold mgb-medium">
26+
<h2 class="title has-text-left is-size-2 has-text-weight-bold mgb-medium">
2727
Mentors
2828
</h2>
2929
{% include mentors.html %}
30-
<h2 class="title has-text-left has-text-white-ter is-size-2 has-text-weight-bold mgb-medium">
30+
<h2 class="title has-text-left is-size-2 has-text-weight-bold mgb-medium">
3131
Alumni
3232
</h2>
3333
{% include alumni.html %}

‎_site/assets/css/style.css‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎_site/assets/css/style.css.map‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎_site/feed.xml‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
<?xml version="1.0" encoding="utf-8"?><feed xmlns="http://www.w3.org/2005/Atom" ><generator uri="https://jekyllrb.com/" version="4.3.3">Jekyll</generator><link href="http://localhost:4000/feed.xml" rel="self" type="application/atom+xml" /><link href="http://localhost:4000/" rel="alternate" type="text/html" /><updated>2024-08-23T22:19:19-07:00</updated><id>http://localhost:4000/feed.xml</id><title type="html">Cabrillo Robotics Club</title><subtitle>Student led robotics club at Cabrillo College in Aptos, California.</subtitle><entry><title type="html">Cabrillo Robotics Wins International Robotics Competition</title><link href="http://localhost:4000/blog/cabrillo-robotics-wins-international-robotics-competition" rel="alternate" type="text/html" title="Cabrillo Robotics Wins International Robotics Competition" /><published>2024-06-23T00:00:00-07:00</published><updated>2024-06-23T00:00:00-07:00</updated><id>http://localhost:4000/blog/cabrillo-robotics-wins-international-robotics-competition</id><content type="html" xml:base="http://localhost:4000/blog/cabrillo-robotics-wins-international-robotics-competition"><![CDATA[<p>The Cabrillo Robotics Club achieved an impressive victory, taking home First Place in the most advanced category of the Marine Advanced Technology Education (MATE) World Championship. Held in Kingsport, TN from June 20-22 2024, the competition gathered 82 teams from 17 countries to showcase advancements in underwater robotics.</p>
1+
<?xml version="1.0" encoding="utf-8"?><feed xmlns="http://www.w3.org/2005/Atom" ><generator uri="https://jekyllrb.com/" version="4.3.3">Jekyll</generator><link href="http://localhost:4000/feed.xml" rel="self" type="application/atom+xml" /><link href="http://localhost:4000/" rel="alternate" type="text/html" /><updated>2024-08-23T23:54:05-07:00</updated><id>http://localhost:4000/feed.xml</id><title type="html">Cabrillo Robotics Club</title><subtitle>Student led robotics club at Cabrillo College in Aptos, California.</subtitle><entry><title type="html">Cabrillo Robotics Wins International Robotics Competition</title><link href="http://localhost:4000/blog/cabrillo-robotics-wins-international-robotics-competition" rel="alternate" type="text/html" title="Cabrillo Robotics Wins International Robotics Competition" /><published>2024-06-23T00:00:00-07:00</published><updated>2024-06-23T00:00:00-07:00</updated><id>http://localhost:4000/blog/cabrillo-robotics-wins-international-robotics-competition</id><content type="html" xml:base="http://localhost:4000/blog/cabrillo-robotics-wins-international-robotics-competition"><![CDATA[<p>The Cabrillo Robotics Club achieved an impressive victory, taking home First Place in the most advanced category of the Marine Advanced Technology Education (MATE) World Championship. Held in Kingsport, TN from June 20-22 2024, the competition gathered 82 teams from 17 countries to showcase advancements in underwater robotics.</p>
22

33
<p>The MATE competition challenges teams worldwide to build Remotely Operated Vehicles (ROVs). These tethered, submersible robots perform observation, inspection, and physical tasks in various aquatic environments. Competing teams must build an ROV capable of executing simulated industry applications in a product demonstration. They also showcase their robot’s functionality and design rationale through marketing, technical documentation, and an engineering presentation.</p>
44

0 commit comments

Comments
 (0)