Easier accessibility and JS scripts

• JS scripts that react to mouse-over events
• JS script that widens card when clicked

wiki/pages/team.html

@@ -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>