From 05e4816da2f243b4d557238b32f33e7cfa53a851 Mon Sep 17 00:00:00 2001
From: HouTeng Chan <ht-chen21@mails.tsinghua.edu.cn>
Date: Mon, 30 Sep 2024 12:34:11 +0000
Subject: [PATCH] Update file human-practices.html
---
wiki/pages/human-practices.html | 213 ++++++++++++++++++--------------
1 file changed, 121 insertions(+), 92 deletions(-)
diff --git a/wiki/pages/human-practices.html b/wiki/pages/human-practices.html
index 82d7b8b4..3b091413 100644
--- a/wiki/pages/human-practices.html
+++ b/wiki/pages/human-practices.html
@@ -1,86 +1,87 @@
<!DOCTYPE html>
<html lang="en">
<head>
- <meta charset="UTF-8">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <title>Expert Card - Li Peng</title>
- <style>
- body {
- font-family: Calibri, sans-serif;
- line-height: 1.6;
- margin: 0;
- padding: 20px;
- background-color: #f4f4f4;
- }
- .row {
- display: flex;
- flex-wrap: wrap;
- }
- .col-lg-12 {
- width: 100%;
- padding: 15px;
- }
- .expert-card {
- background-color: white;
- border-radius: 8px;
- box-shadow: 0 2px 10px rgba(0,0,0,0.1);
- overflow: hidden;
- transition: box-shadow 0.3s ease;
- }
- .expert-card:hover {
- box-shadow: 0 4px 20px rgba(0,0,0,0.15);
- }
- .col-md-3, .col-md-9 {
- padding: 15px;
- }
- .expert-image {
- width: 100%;
- max-width: 200px;
- height: auto;
- border-radius: 8px;
- }
- .expert-name {
- font-size: 1.5rem;
- font-weight: bold;
- color: #333;
- }
- .expert-role {
- font-size: 1.1rem;
- color: #666;
- }
- .expert-takeaway {
- background-color: #f9f9f9;
- padding: 15px;
- border-radius: 8px;
- margin-top: 15px;
- }
- .expert-content {
- display: none;
- padding: 15px;
- background-color: #fff;
- border-top: 1px solid #eee;
- animation: fadeIn 0.5s ease;
- }
- @keyframes fadeIn {
- from { opacity: 0; }
- to { opacity: 1; }
- }
- .toggle-btn {
- display: block;
- width: 100%;
- padding: 10px;
- background-color: #007bff;
- color: white;
- border: none;
- border-radius: 0 0 8px 8px;
- cursor: pointer;
- font-size: 1rem;
- transition: background-color 0.3s ease;
- }
- .toggle-btn:hover {
- background-color: #0056b3;
- }
- </style>
+ <meta charset="UTF-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <link rel="icon" type="image/x-icon" href="https://static.igem.wiki/teams/5187/art/icon.png">
+ <title>Tsinghua - IGEM 2024</title>
+ <style>
+ body {
+ font-family: Calibri, sans-serif;
+ line-height: 1.6;
+ margin: 0;
+ padding: 20px;
+ background-color: #f4f4f4;
+ }
+ .expert-card {
+ background-color: white;
+ border-radius: 8px;
+ box-shadow: 0 2px 10px rgba(0,0,0,0.1);
+ transition: box-shadow 0.3s ease, transform 0.3s ease;
+ overflow: hidden;
+ }
+ .expert-card:hover {
+ box-shadow: 0 4px 20px rgba(0,0,0,0.15);
+ transform: translateY(-5px);
+ }
+ .expert-image {
+ width: 100%;
+ max-width: 200px;
+ height: auto;
+ border-radius: 8px;
+ transition: transform 0.3s ease;
+ }
+ .expert-card:hover .expert-image {
+ transform: scale(1.05);
+ }
+ .expert-name {
+ font-size: 1.5rem;
+ font-weight: bold;
+ color: #333;
+ margin-bottom: 5px;
+ }
+ .expert-role {
+ font-size: 1.1rem;
+ color: #666;
+ display: block;
+ margin-bottom: 10px;
+ }
+ .expert-takeaway {
+ background-color: #f9f9f9;
+ padding: 15px;
+ border-radius: 8px;
+ margin-top: 15px;
+ transition: background-color 0.3s ease;
+ }
+ .expert-card:hover .expert-takeaway {
+ background-color: #f0f0f0;
+ }
+ .expert-content {
+ max-height: 0;
+ overflow: hidden;
+ transition: max-height 0.5s ease, padding 0.5s ease;
+ background-color: #fff;
+ border-top: 1px solid #eee;
+ }
+ .expert-content.show {
+ max-height: 2000px; /* Adjust based on content length */
+ padding: 15px;
+ }
+ .toggle-content {
+ display: block;
+ width: 100%;
+ padding: 10px;
+ background-color: #007bff;
+ color: white;
+ border: none;
+ cursor: pointer;
+ font-size: 1rem;
+ transition: background-color 0.3s ease;
+ }
+ .toggle-content:hover {
+ background-color: #0056b3;
+ }
+ </style>
</head>
<body>
{% extends "layout.html" %}
@@ -180,7 +181,6 @@
</div>
</div>
</div>
- <button class="toggle-btn" onclick="toggleContent(this)">Show Details</button>
</div>
</div>
</div>
@@ -766,19 +766,48 @@
</div>
</div>
+
<script>
- function toggleContent(button) {
- const card = button.closest('.expert-card');
- const content = card.querySelector('.expert-content');
- if (content.style.display === 'none' || content.style.display === '') {
- content.style.display = 'block';
- button.textContent = 'Hide Details';
- } else {
- content.style.display = 'none';
- button.textContent = 'Show Details';
- }
+ function toggleContent(element) {
+ const card = element.closest('.expert-card');
+ const content = card.querySelector('.expert-content');
+ const button = card.querySelector('.toggle-content');
+
+ content.classList.toggle('show');
+
+ if (content.classList.contains('show')) {
+ button.textContent = 'Hide Details';
+ content.style.maxHeight = content.scrollHeight + "px";
+ } else {
+ button.textContent = 'Show Details';
+ content.style.maxHeight = "0";
+ }
+
+ // Prevent the click event from bubbling up to the card
+ event.stopPropagation();
}
-</script>
+
+ // Add click event listener to the card
+ document.querySelector('.expert-card').addEventListener('click', function(event) {
+ if (event.target.classList.contains('toggle-content')) {
+ return; // Let the button handle its own click
+ }
+ const button = this.querySelector('.toggle-content');
+ toggleContent(button);
+ });
+
+ // Add the toggle button if it doesn't exist
+ window.addEventListener('load', function() {
+ const card = document.querySelector('.expert-card');
+ if (!card.querySelector('.toggle-content')) {
+ const button = document.createElement('button');
+ button.className = 'toggle-content';
+ button.textContent = 'Show Details';
+ button.onclick = function() { toggleContent(this); };
+ card.appendChild(button);
+ }
+ });
+ </script>
</body>
</html>
{% endblock %}
\ No newline at end of file
--
GitLab