Skip to content
Snippets Groups Projects
Commit c5b6dda6 authored by Timofej Paramonov Bliki's avatar Timofej Paramonov Bliki :heart:
Browse files

Added: 

- JS scripts that react to mouse-over events
- JS script that widens card when clicked
To add:
- Everyone else's info...
- OPT: Animate the card clicking? I.e., make variable increment by certain px/s
parent 3d605e9f
No related branches found
No related tags found
1 merge request!10Easier accessibility and JS scripts
Pipeline #425113 failed
Stage: build
Hide whitespace changes
Inline Side-by-side
Showing
with 75 additions and 22 deletions
wiki/pages/team.html
+ 75
− 22
View file @ c5b6dda6
......@@ -14,22 +14,76 @@
}
.grid-child {
display: block;
width:350px;
height:550px;
width: 350px;
height: 550px;
background-color: white;
border: 2px solid black;
margin: 20px 0;
color: black;
overflow:scroll;
text-overflow: ellipsis;
}
.face-image {
/* width: 80%; */
height: 30%;
aspect-ratio: 1;
max-width: 50%;
max-height: 40%;
display:block;
margin: 5% auto;
margin: 2% auto auto;
}
</style>
<script>
class Card {
constructor(cardId) {
// Variables
this.cardId = cardId;
this.card = document.getElementById(cardId);
// Event listeners
this.card.addEventListener("mouseover", (event) => this.hoverOnBorder());
this.card.addEventListener("mouseout", (event) => this.hoverOffBorder());
this.card.addEventListener("click", (event) => this.toggleSize());
// Init styling size (to fix JS bug)
this.card.style.width = "350px";
this.card.style.overflow = "hidden";
}
hoverOnBorder() {
//this.card.style.borderColor = "#e3000b";
this.card.style.border = "4px solid #e3000b";
}
hoverOffBorder() {
//this.card.style.borderColor = "#000000";
this.card.style.border = "2px solid #000000";
}
toggleSize() {
if (this.card.style.width === "350px") {
this.card.style.overflow = "scroll";
this.card.style.width = "750px";
}
else {
this.card.style.overflow = "hidden";
this.card.style.width = "350px";
}
}
}
document.addEventListener('DOMContentLoaded', () => {
new Card("card_kate");
new Card("card_adrian");
new Card("card_maksym");
new Card("card_lea");
new Card("card_thijmen");
new Card("card_vasilis");
new Card("card_henriete");
new Card("card_tim");
new Card("card_luc-jan");
new Card("card_frank");
new Card("card_tom");
});
</script>
<h1 style="text-align:center">Who are we?</h1>
<div class="row" style="margin-bottom:3vh;">
<div class="col-4">
......@@ -41,68 +95,61 @@
</div>
<h2 style="text-align:center">Our members:</h2>
<div class="grid-parent">
<div class="grid-child">
<img src="https://static.igem.wiki/teams/5342/images/teamlogo-nb.png" class="face-image" alt="face">
<h4 style="text-align:center">Firstname Lastname</h4>
<h6 style="text-align:center"> Role 1, Role 2, and Role 3</h6>
<p style="margin: 0 5%;">Hi! I'm a generic member, and I exist for the sole purpose of being a template so that I can eventually get replaced by a REAL member :) My interests are helping the lead programmer :D</p>
</div>
<div class="grid-child">
<div class="grid-child" id = "card_kate">
<img src="https://static.igem.wiki/teams/5342/images/teamlogo-nb.png" class="face-image" alt="face">
<h4 style="text-align:center">Firstname Lastname</h4>
<h6 style="text-align:center"> Role 1, Role 2, and Role 3</h6>
<p style="margin: 0 5%;">Hi! I'm a generic member, and I exist for the sole purpose of being a template so that I can eventually get replaced by a REAL member :) My interests are helping the lead programmer :D</p>
</div>
<div class="grid-child">
<div class="grid-child" id = "card_adrian">
<img src="https://static.igem.wiki/teams/5342/images/teamlogo-nb.png" class="face-image" alt="face">
<h4 style="text-align:center">Firstname Lastname</h4>
<h6 style="text-align:center"> Role 1, Role 2, and Role 3</h6>
<p style="margin: 0 5%;">Hi! I'm a generic member, and I exist for the sole purpose of being a template so that I can eventually get replaced by a REAL member :) My interests are helping the lead programmer :D</p>
</div>
<div class="grid-child">
<div class="grid-child" id = "card_maksym">
<img src="https://static.igem.wiki/teams/5342/images/teamlogo-nb.png" class="face-image" alt="face">
<h4 style="text-align:center">Firstname Lastname</h4>
<h6 style="text-align:center"> Role 1, Role 2, and Role 3</h6>
<p style="margin: 0 5%;">Hi! I'm a generic member, and I exist for the sole purpose of being a template so that I can eventually get replaced by a REAL member :) My interests are helping the lead programmer :D</p>
</div>
<div class="grid-child">
<div class="grid-child" id = "card_lea">
<img src="https://static.igem.wiki/teams/5342/images/teamlogo-nb.png" class="face-image" alt="face">
<h4 style="text-align:center">Firstname Lastname</h4>
<h6 style="text-align:center"> Role 1, Role 2, and Role 3</h6>
<p style="margin: 0 5%;">Hi! I'm a generic member, and I exist for the sole purpose of being a template so that I can eventually get replaced by a REAL member :) My interests are helping the lead programmer :D</p>
</div>
<div class="grid-child">
<div class="grid-child" id = "card_thijmen">
<img src="https://static.igem.wiki/teams/5342/images/teamlogo-nb.png" class="face-image" alt="face">
<h4 style="text-align:center">Firstname Lastname</h4>
<h6 style="text-align:center"> Role 1, Role 2, and Role 3</h6>
<p style="margin: 0 5%;">Hi! I'm a generic member, and I exist for the sole purpose of being a template so that I can eventually get replaced by a REAL member :) My interests are helping the lead programmer :D</p>
</div>
<div class="grid-child">
<div class="grid-child" id = "card_vasilis">
<img src="https://static.igem.wiki/teams/5342/images/teamlogo-nb.png" class="face-image" alt="face">
<h4 style="text-align:center">Firstname Lastname</h4>
<h6 style="text-align:center"> Role 1, Role 2, and Role 3</h6>
<p style="margin: 0 5%;">Hi! I'm a generic member, and I exist for the sole purpose of being a template so that I can eventually get replaced by a REAL member :) My interests are helping the lead programmer :D</p>
</div>
<div class="grid-child">
<div class="grid-child" id = "card_henriete">
<img src="https://static.igem.wiki/teams/5342/images/teamlogo-nb.png" class="face-image" alt="face">
<h4 style="text-align:center">Firstname Lastname</h4>
<h6 style="text-align:center"> Role 1, Role 2, and Role 3</h6>
<p style="margin: 0 5%;">Hi! I'm a generic member, and I exist for the sole purpose of being a template so that I can eventually get replaced by a REAL member :) My interests are helping the lead programmer :D</p>
</div>
<div class="grid-child">
<div class="grid-child" id = "card_tim">
<img src="https://static.igem.wiki/teams/5342/images/teamlogo-nb.png" class="face-image" alt="face">
<h4 style="text-align:center">Firstname Lastname</h4>
<h6 style="text-align:center"> Role 1, Role 2, and Role 3</h6>
<p style="margin: 0 5%;">Hi! I'm a generic member, and I exist for the sole purpose of being a template so that I can eventually get replaced by a REAL member :) My interests are helping the lead programmer :D</p>
</div>
<div class="grid-child">
<div class="grid-child" id = "card_luc-jan">
<img src="https://static.igem.wiki/teams/5342/images/teamlogo-nb.png" class="face-image" alt="face">
<h4 style="text-align:center">Firstname Lastname</h4>
<h6 style="text-align:center"> Role 1, Role 2, and Role 3</h6>
<p style="margin: 0 5%;">Hi! I'm a generic member, and I exist for the sole purpose of being a template so that I can eventually get replaced by a REAL member :) My interests are helping the lead programmer :D</p>
</div>
<div class="grid-child">
<!-- Frank -->
<div class="grid-child" id = "card_frank">
<img src="https://static.igem.wiki/teams/5342/images/team/frank.webp" class="face-image" alt="face">
<h4 style="text-align:center">Frank Nelissen</h4>
<h6 style="text-align:center">Instructor</h6>
......@@ -114,6 +161,12 @@
I am happy to fulfil my role as instructor for the Radboud iGEM team and together try to find solutions for the research questions.
</p>
</div>
<div class="grid-child" id = "card_tom">
<img src="https://static.igem.wiki/teams/5342/images/teamlogo-nb.png" class="face-image" alt="face">
<h4 style="text-align:center">Firstname Lastname</h4>
<h6 style="text-align:center"> Role 1, Role 2, and Role 3</h6>
<p style="margin: 0 5%;">Hi! I'm a generic member, and I exist for the sole purpose of being a template so that I can eventually get replaced by a REAL member :) My interests are helping the lead programmer :D</p>
</div>
</div>
<h1 style="text-align:center">Where are we?</h1>
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment