From 19416ec2a307b5f030b0081f5511cbdc694f4fef Mon Sep 17 00:00:00 2001
From: liliana <liliana.sanfilippo@uni-bielefeld.de>
Date: Fri, 31 May 2024 12:40:13 +0200
Subject: [PATCH] added program
---
static/style.css | 26 ++++++++++++++++++
wiki/pages/bfh.html | 66 ++++++++++++++++++++++++++++++++++++++++++++-
2 files changed, 91 insertions(+), 1 deletion(-)
diff --git a/static/style.css b/static/style.css
index 879b223a..c962d6af 100644
--- a/static/style.css
+++ b/static/style.css
@@ -109,4 +109,30 @@ footer a:hover { color: white; text-decoration: underline; }
margin-bottom: 20px;
}
+/*collapsible*/
+ /* Style the button that is used to open and close the collapsible content */
+ .collapsible {
+ background-color: var(--yellow);
+ color: #444;
+ cursor: pointer;
+ padding: 18px;
+ width: 100%;
+ border: none;
+ text-align: left;
+ outline: none;
+ font-size: 15px;
+ margin: 5px;
+}
+
+/* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
+.active, .collapsible:hover {
+ background-color: var(--orange);
+}
+/* Style the collapsible content. Note: hidden by default */
+.content-laps {
+ padding: 18px 18px;
+ display: none;
+ overflow: hidden;
+ background-color: var(--yellow);
+}
diff --git a/wiki/pages/bfh.html b/wiki/pages/bfh.html
index 4d2182dc..a9ff43cb 100644
--- a/wiki/pages/bfh.html
+++ b/wiki/pages/bfh.html
@@ -41,7 +41,7 @@
<li> <a class="anchor sidebarEntry" href="#collab">The collaboration</a> </li>
<li> <a class="anchor sidebarEntry" href="#program">The program</a> </li>
<li> <a class="anchor sidebarEntry" href="#impact">Impact</a> </li>
- <li> <a class="anchor sidebarEntry" href="#">4</a> </li>
+ <li> <a class="anchor sidebarEntry" href="#gallery">Photos</a> </li>
</ul>
</div>
</div>
@@ -63,6 +63,38 @@
</p>
<h3 id="program"> The program</h3>
<hr>
+ <button type="button" class="collapsible">Scientific Talk</button>
+ <div class="content-laps">
+ <p>Lorem ipsum...</p>
+ </div>
+ <button type="button" class="collapsible">Workshops</button>
+ <div class="content-laps">
+ <p>Lorem ipsum...</p>
+ </div>
+ <button type="button" class="collapsible">Team project presentation</button>
+ <div class="content-laps">
+ <p>Lorem ipsum...</p>
+ </div>
+ <button type="button" class="collapsible">Poser exhibition</button>
+ <div class="content-laps">
+ <p>Lorem ipsum...</p>
+ </div>
+ <button type="button" class="collapsible">Panel discussion</button>
+ <div class="content-laps">
+ <p>Lorem ipsum...</p>
+ </div>
+ <button type="button" class="collapsible">iGem TED Talks</button>
+ <div class="content-laps">
+ <p>Lorem ipsum...</p>
+ </div>
+ <button type="button" class="collapsible">Science Slam</button>
+ <div class="content-laps">
+ <p>Lorem ipsum...</p>
+ </div>
+ <button type="button" class="collapsible">Award ceremony</button>
+ <div class="content-laps">
+ <p>Lorem ipsum...</p>
+ </div>
<p>
</p>
@@ -70,6 +102,11 @@
<hr>
<p>
+ </p>
+ <h3 id="gallery"> Photos</h3>
+ <hr>
+ <p>
+
</p>
</div>
@@ -86,5 +123,32 @@
<!-- Bootstrap Bundle with Popper -->
<script src="{{ url_for('static', filename = 'bootstrap.bundle.min.js') }}"></script>
+ <!-- collapsible script-->
+ <script>
+ var coll = document.getElementsByClassName("collapsible");
+ var i;
+
+ for (i = 0; i < coll.length; i++) {
+ coll[i].addEventListener("click", function() {
+ this.classList.toggle("active");
+ var content = this.nextElementSibling;
+ if (content.style.display === "block") {
+ content.style.display = "none";
+ } else {
+ content.style.display = "block";
+ }
+ });
+ }
+ </script>
</body>
</html>
+
+<!--
+
+ <button type="button" class="collapsible">Open Collapsible</button>
+ <div class="content-laps">
+ <p>Lorem ipsum...</p>
+ </div>
+
+-->
+
--
GitLab