From 02d0ee668774f60e4dd6bb39e8dcb5ca2435ebbe Mon Sep 17 00:00:00 2001
From: Devyani Ravi <devyaniravi2003@gmail.com>
Date: Sat, 28 Sep 2024 16:31:42 +0000
Subject: [PATCH] fix cards
---
docs/.vuepress/components/HumanPractices.vue | 227 ++++++++++---------
1 file changed, 120 insertions(+), 107 deletions(-)
diff --git a/docs/.vuepress/components/HumanPractices.vue b/docs/.vuepress/components/HumanPractices.vue
index 07c6b4e..ec24e17 100644
--- a/docs/.vuepress/components/HumanPractices.vue
+++ b/docs/.vuepress/components/HumanPractices.vue
@@ -1,135 +1,137 @@
<template>
<div>
<!-- Introduction Section -->
- <b-card no-body class="mb-2" style="background-color: #e3f2fd;">
- <b-card-header header-tag="header" role="tab">
- <b-button v-b-toggle.introduction variant="primary" style="background-color: #e3f2fd; color: #396d7e; border: none;">Introduction to Natronaut’s Human Practices: Answering the Important Questions</b-button>
- </b-card-header>
- <b-collapse id="introduction" accordion="accordion" role="tabpanel">
- <b-card-body style="background-color: #e5efdf;">
- <h5 style="color: #396d7e;">Designing the Natronaut Project: Values in Mind</h5>
- <p style="color: #333;">Write here...</p>
-
- <h5 style="color: #396d7e;">Consulting Resources and Communities Meaningful to Natronaut</h5>
- <p style="color: #333;">Write here...</p>
-
- <h5 style="color: #396d7e;">Evidence of Responsibility</h5>
- <p style="color: #333;">Write here...</p>
-
- <h5 style="color: #396d7e;">Impact of Natronaut</h5>
- <p style="color: #333;">Write here...</p>
- </b-card-body>
- </b-collapse>
- </b-card>
+ <div class="card mb-2" style="background-color: #e3f2fd;">
+ <div class="card-header" @click="toggleSection('introduction')">
+ <h2 style="cursor: pointer; color: #396d7e;">Introduction to Natronaut’s Human Practices: Answering the Important Questions</h2>
+ </div>
+ <div v-if="openSection === 'introduction'" class="card-body" style="background-color: #e5efdf;">
+ <h3 style="color: #396d7e;">Designing the Natronaut Project: Values in Mind</h3>
+ <p style="color: #333;">Write here...</p>
+
+ <h3 style="color: #396d7e;">Consulting Resources and Communities Meaningful to Natronaut</h3>
+ <p style="color: #333;">Write here...</p>
+
+ <h3 style="color: #396d7e;">Evidence of Responsibility</h3>
+ <p style="color: #333;">Write here...</p>
+
+ <h3 style="color: #396d7e;">Impact of Natronaut</h3>
+ <p style="color: #333;">Write here...</p>
+ </div>
+ </div>
<!-- Implementation Section -->
- <b-card no-body class="mb-2" style="background-color: #e3f2fd;">
- <b-card-header header-tag="header" role="tab">
- <b-button v-b-toggle.implementation variant="primary" style="background-color: #e3f2fd; color: #396d7e; border: none;">Implementation and Impact on Design: Natronaut Application Chamber System — 3D Model</b-button>
- </b-card-header>
- <b-collapse id="implementation" accordion="accordion" role="tabpanel">
- <b-card-body style="background-color: #e5efdf;">
- <h5 style="color: #396d7e;">1. Intake Pump</h5>
- <p style="color: #333;">Write here...</p>
+ <div class="card mb-2" style="background-color: #e3f2fd;">
+ <div class="card-header" @click="toggleSection('implementation')">
+ <h2 style="cursor: pointer; color: #396d7e;">Implementation and Impact on Design: Natronaut Application Chamber System — 3D Model</h2>
+ </div>
+ <div v-if="openSection === 'implementation'" class="card-body" style="background-color: #e5efdf;">
+ <h3 style="color: #396d7e;">1. Intake Pump</h3>
+ <p style="color: #333;">Write here...</p>
- <h5 style="color: #396d7e;">2. Physical Filter</h5>
- <p style="color: #333;">Write here...</p>
+ <h3 style="color: #396d7e;">2. Physical Filter</h3>
+ <p style="color: #333;">Write here...</p>
- <h5 style="color: #396d7e;">3. Interchangeable Filter Module</h5>
- <p style="color: #333;">Write here...</p>
+ <h3 style="color: #396d7e;">3. Interchangeable Filter Module</h3>
+ <p style="color: #333;">Write here...</p>
- <h5 style="color: #396d7e;">4. Vibrio natriegens Chamber</h5>
- <p style="color: #333;">Write here...</p>
+ <h3 style="color: #396d7e;">4. Vibrio natriegens Chamber</h3>
+ <p style="color: #333;">Write here...</p>
- <h5 style="color: #396d7e;">5. Drying Chamber for Single-Cell Proteins and Output Pipe</h5>
- <p style="color: #333;">Write here...</p>
+ <h3 style="color: #396d7e;">5. Drying Chamber for Single-Cell Proteins and Output Pipe</h3>
+ <p style="color: #333;">Write here...</p>
- <h5 style="color: #396d7e;">6. Output Pipe</h5>
- <p style="color: #333;">Write here...</p>
+ <h3 style="color: #396d7e;">6. Output Pipe</h3>
+ <p style="color: #333;">Write here...</p>
- <h5 style="color: #396d7e;">Considerations</h5>
- <p style="color: #333;">Write here...</p>
- </b-card-body>
- </b-collapse>
- </b-card>
+ <h3 style="color: #396d7e;">Considerations</h3>
+ <p style="color: #333;">Write here...</p>
+ </div>
+ </div>
<!-- Inclusivity Section -->
- <b-card no-body class="mb-2" style="background-color: #e3f2fd;">
- <b-card-header header-tag="header" role="tab">
- <b-button v-b-toggle.inclusivity variant="primary" style="background-color: #e3f2fd; color: #396d7e; border: none;">Taking Initiative: Inclusivity and Participation</b-button>
- </b-card-header>
- <b-collapse id="inclusivity" accordion="accordion" role="tabpanel">
- <b-card-body style="background-color: #e5efdf;">
- <h5 style="color: #396d7e;">“Day In The Life of an iGEM Memberâ€</h5>
- <p style="color: #333;">Write here...</p>
+ <div class="card mb-2" style="background-color: #e3f2fd;">
+ <div class="card-header" @click="toggleSection('inclusivity')">
+ <h2 style="cursor: pointer; color: #396d7e;">Taking Initiative: Inclusivity and Participation</h2>
+ </div>
+ <div v-if="openSection === 'inclusivity'" class="card-body" style="background-color: #e5efdf;">
+ <h3 style="color: #396d7e;">“Day In The Life of an iGEM Memberâ€</h3>
+ <p style="color: #333;">Write here...</p>
- <h5 style="color: #396d7e;">Introduction Days and Bachelor’s Open Day at Maastricht University</h5>
- <p style="color: #333;">Write here...</p>
+ <h3 style="color: #396d7e;">Introduction Days and Bachelor’s Open Day at Maastricht University</h3>
+ <p style="color: #333;">Write here...</p>
- <h5 style="color: #396d7e;">Spotify Link</h5>
- <p style="color: #333;">Write here...</p>
+ <h3 style="color: #396d7e;">Spotify Link</h3>
+ <p style="color: #333;">Write here...</p>
- <h5 style="color: #396d7e;">Colour-blind Friendly Colour Palette</h5>
- <p style="color: #333;">Write here...</p>
+ <h3 style="color: #396d7e;">Colour-blind Friendly Colour Palette</h3>
+ <p style="color: #333;">Write here...</p>
- <h5 style="color: #396d7e;">Postcards</h5>
- <p style="color: #333;">Write here...</p>
+ <h3 style="color: #396d7e;">Postcards</h3>
+ <p style="color: #333;">Write here...</p>
- <h5 style="color: #396d7e;">Eindhoven Funding Event</h5>
- <p style="color: #333;">Write here...</p>
- </b-card-body>
- </b-collapse>
- </b-card>
+ <h3 style="color: #396d7e;">Eindhoven Funding Event</h3>
+ <p style="color: #333;">Write here...</p>
+ </div>
+ </div>
<!-- Feedback Section -->
- <b-card no-body class="mb-2" style="background-color: #e3f2fd;">
- <b-card-header header-tag="header" role="tab">
- <b-button v-b-toggle.feedback variant="primary" style="background-color: #e3f2fd; color: #396d7e; border: none;">Gaining More Feedback and Stakeholder Insight</b-button>
- </b-card-header>
- <b-collapse id="feedback" accordion="accordion" role="tabpanel">
- <b-card-body style="background-color: #e5efdf;">
- <h5 style="color: #396d7e;">Survey on GMOs</h5>
- <p style="color: #333;">Write here...</p>
-
- <h5 style="color: #396d7e;">Interview with Philosophy of Technology Expert</h5>
- <p style="color: #333;">Introduction and Background: Write here...</p>
- <p style="color: #333;">Intersection of Technology and Nature in Synthetic Biology: Write here...</p>
- <p style="color: #333;">Ethical Challenges and Commodifying Life: Write here...</p>
- <p style="color: #333;">Governance and Public Participation in Synthetic Biology: Write here...</p>
- <p style="color: #333;">Philosophical Insights: Life as Technology: Write here...</p>
- <p style="color: #333;">Societal Impact and Environmental Concerns: Write here...</p>
- <p style="color: #333;">Ethical Frameworks and Global Impact: Write here...</p>
- <p style="color: #333;">Main Takeaways and Incorporation into the Project: Write here...</p>
-
- <h5 style="color: #396d7e;">Interview with Unimer: A Discussion on Organic Fertilizer</h5>
- <p style="color: #333;">Introduction and Background: Write here...</p>
-
- <h5 style="color: #396d7e;">Meeting with Promega's Marloes van der Zwalm</h5>
- <p style="color: #333;">Write here...</p>
-
- <h5 style="color: #396d7e;">Meeting with Cultivarium's Henry Lee and Lilan Ling</h5>
- <p style="color: #333;">Write here...</p>
-
- <h5 style="color: #396d7e;">Utrecht, NL: The Dutch iGEM 2024 Meet</h5>
- <p style="color: #333;">Write here...</p>
-
- <h5 style="color: #396d7e;">Wageningen, NL: SynBioNL event</h5>
- <p style="color: #333;">Write here...</p>
-
- <h5 style="color: #396d7e;">Madrid, ESP: European iGEM 2024 MeetUp</h5>
- <p style="color: #333;">Write here...</p>
-
- <h5 style="color: #396d7e;">University of Michigan: Bioremediation Virtual Symposium</h5>
- <p style="color: #333;">Write here...</p>
- </b-card-body>
- </b-collapse>
- </b-card>
+ <div class="card mb-2" style="background-color: #e3f2fd;">
+ <div class="card-header" @click="toggleSection('feedback')">
+ <h2 style="cursor: pointer; color: #396d7e;">Gaining More Feedback and Stakeholder Insight</h2>
+ </div>
+ <div v-if="openSection === 'feedback'" class="card-body" style="background-color: #e5efdf;">
+ <h3 style="color: #396d7e;">Survey on GMOs</h3>
+ <p style="color: #333;">Write here...</p>
+
+ <h3 style="color: #396d7e;">Interview with Philosophy of Technology Expert</h3>
+ <p style="color: #333;">Introduction and Background: Write here...</p>
+ <p style="color: #333;">Intersection of Technology and Nature in Synthetic Biology: Write here...</p>
+ <p style="color: #333;">Ethical Challenges and Commodifying Life: Write here...</p>
+ <p style="color: #333;">Governance and Public Participation in Synthetic Biology: Write here...</p>
+ <p style="color: #333;">Philosophical Insights: Life as Technology: Write here...</p>
+ <p style="color: #333;">Societal Impact and Environmental Concerns: Write here...</p>
+ <p style="color: #333;">Ethical Frameworks and Global Impact: Write here...</p>
+ <p style="color: #333;">Main Takeaways and Incorporation into the Project: Write here...</p>
+
+ <h3 style="color: #396d7e;">Interview with Unimer: A Discussion on Organic Fertilizer</h3>
+ <p style="color: #333;">Introduction and Background: Write here...</p>
+
+ <h3 style="color: #396d7e;">Meeting with Promega's Marloes van der Zwalm</h3>
+ <p style="color: #333;">Write here...</p>
+
+ <h3 style="color: #396d7e;">Meeting with Cultivarium's Henry Lee and Lilan Ling</h3>
+ <p style="color: #333;">Write here...</p>
+
+ <h3 style="color: #396d7e;">Utrecht, NL: The Dutch iGEM 2024 Meet</h3>
+ <p style="color: #333;">Write here...</p>
+
+ <h3 style="color: #396d7e;">Wageningen, NL: SynBioNL event</h3>
+ <p style="color: #333;">Write here...</p>
+
+ <h3 style="color: #396d7e;">Madrid, ESP: European iGEM 2024 MeetUp</h3>
+ <p style="color: #333;">Write here...</p>
+
+ <h3 style="color: #396d7e;">University of Michigan: Bioremediation Virtual Symposium</h3>
+ <p style="color: #333;">Write here...</p>
+ </div>
+ </div>
</div>
</template>
<script>
export default {
- name: "HumanPractices",
+ data() {
+ return {
+ openSection: null, // Track which section is open
+ };
+ },
+ methods: {
+ toggleSection(section) {
+ // Toggle the section, close others
+ this.openSection = this.openSection === section ? null : section;
+ },
+ },
};
</script>
@@ -137,4 +139,15 @@ export default {
.mb-2 {
margin-bottom: 1rem;
}
+.card {
+ border-radius: 10px;
+ box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+}
+.card-header {
+ padding: 1rem;
+ font-weight: bold;
+}
+.card-body {
+ padding: 1rem;
+}
</style>
--
GitLab