From 46c85bad8c1c8499b85e7c6df547bd3fbf4f4eb2 Mon Sep 17 00:00:00 2001
From: HouTeng Chan <ht-chen21@mails.tsinghua.edu.cn>
Date: Mon, 30 Sep 2024 12:36:20 +0000
Subject: [PATCH] Update file human-practices.html
---
wiki/pages/human-practices.html | 167 +++++++++++---------------------
1 file changed, 59 insertions(+), 108 deletions(-)
diff --git a/wiki/pages/human-practices.html b/wiki/pages/human-practices.html
index 3b091413..e95fad34 100644
--- a/wiki/pages/human-practices.html
+++ b/wiki/pages/human-practices.html
@@ -10,77 +10,59 @@
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;
+ padding: 0;
}
- .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;
+ .content {
+ padding: 20px;
+ max-width: 800px;
+ margin: 0 auto;
}
- .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;
+
+ h2 {
+ scroll-margin-top: 60px;
}
- .toggle-content:hover {
- background-color: #0056b3;
+ .row.mt-4 {
+ margin-right: 100px;
+ margin-left: 130px;
}
+
+ .expert-card {
+ background-color: white;
+ border: 1px solid #ddd;
+ border-radius: 8px;
+ padding: 20px;
+ margin-bottom: 20px;
+ transition: box-shadow 0.3s ease;
+ }
+ .expert-card:hover {
+ box-shadow: 0 4px 8px rgba(0,0,0,0.1);
+ }
+ .expert-image {
+ width: 200px;
+ height: 200px;
+ object-fit: cover;
+ }
+ .expert-details {
+ display: flex;
+ flex-direction: column;
+ }
+ .expert-name {
+ font-size: 1.5rem;
+ font-weight: bold;
+ }
+ .expert-role {
+ font-size: 1.2rem;
+ color: #666;
+ }
+ .expert-takeaway {
+ margin-top: 15px;
+ font-weight: bold;
+ }
+ .expert-content {
+ margin-top: 10px;
+ display: none;
+ }
+
</style>
</head>
<body>
@@ -767,47 +749,16 @@
</div>
- <script>
- 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();
- }
-
- // 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>
+<script>
+ function toggleContent(element) {
+ const content = element.querySelector('.expert-content');
+ if (content.style.display === 'none' || content.style.display === '') {
+ content.style.display = 'block';
+ } else {
+ content.style.display = 'none';
+ }
+ }
+ </script>
</body>
</html>
{% endblock %}
\ No newline at end of file
--
GitLab