Skip to content
Snippets Groups Projects
Commit 02d0ee66 authored by Devyani Ravi's avatar Devyani Ravi
Browse files

fix cards

parent 2a7df41c
No related branches found
No related tags found
No related merge requests found
Pipeline #458447 passed
Stage: build
Stage: deploy
Hide whitespace changes
Inline Side-by-side
docs/.vuepress/components/HumanPractices.vue
+ 120
− 107
View file @ 02d0ee66
<template> <template>
<div> <div>
<!-- Introduction Section --> <!-- Introduction Section -->
<b-card no-body class="mb-2" style="background-color: #e3f2fd;"> <div class="card mb-2" style="background-color: #e3f2fd;">
<b-card-header header-tag="header" role="tab"> <div class="card-header" @click="toggleSection('introduction')">
<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> <h2 style="cursor: pointer; color: #396d7e;">Introduction to Natronaut’s Human Practices: Answering the Important Questions</h2>
</b-card-header> </div>
<b-collapse id="introduction" accordion="accordion" role="tabpanel"> <div v-if="openSection === 'introduction'" class="card-body" style="background-color: #e5efdf;">
<b-card-body style="background-color: #e5efdf;"> <h3 style="color: #396d7e;">Designing the Natronaut Project: Values in Mind</h3>
<h5 style="color: #396d7e;">Designing the Natronaut Project: Values in Mind</h5> <p style="color: #333;">Write here...</p>
<p style="color: #333;">Write here...</p>
<h3 style="color: #396d7e;">Consulting Resources and Communities Meaningful to Natronaut</h3>
<h5 style="color: #396d7e;">Consulting Resources and Communities Meaningful to Natronaut</h5> <p style="color: #333;">Write here...</p>
<p style="color: #333;">Write here...</p>
<h3 style="color: #396d7e;">Evidence of Responsibility</h3>
<h5 style="color: #396d7e;">Evidence of Responsibility</h5> <p style="color: #333;">Write here...</p>
<p style="color: #333;">Write here...</p>
<h3 style="color: #396d7e;">Impact of Natronaut</h3>
<h5 style="color: #396d7e;">Impact of Natronaut</h5> <p style="color: #333;">Write here...</p>
<p style="color: #333;">Write here...</p> </div>
</b-card-body> </div>
</b-collapse>
</b-card>
<!-- Implementation Section --> <!-- Implementation Section -->
<b-card no-body class="mb-2" style="background-color: #e3f2fd;"> <div class="card mb-2" style="background-color: #e3f2fd;">
<b-card-header header-tag="header" role="tab"> <div class="card-header" @click="toggleSection('implementation')">
<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> <h2 style="cursor: pointer; color: #396d7e;">Implementation and Impact on Design: Natronaut Application Chamber System — 3D Model</h2>
</b-card-header> </div>
<b-collapse id="implementation" accordion="accordion" role="tabpanel"> <div v-if="openSection === 'implementation'" class="card-body" style="background-color: #e5efdf;">
<b-card-body style="background-color: #e5efdf;"> <h3 style="color: #396d7e;">1. Intake Pump</h3>
<h5 style="color: #396d7e;">1. Intake Pump</h5> <p style="color: #333;">Write here...</p>
<p style="color: #333;">Write here...</p>
<h5 style="color: #396d7e;">2. Physical Filter</h5> <h3 style="color: #396d7e;">2. Physical Filter</h3>
<p style="color: #333;">Write here...</p> <p style="color: #333;">Write here...</p>
<h5 style="color: #396d7e;">3. Interchangeable Filter Module</h5> <h3 style="color: #396d7e;">3. Interchangeable Filter Module</h3>
<p style="color: #333;">Write here...</p> <p style="color: #333;">Write here...</p>
<h5 style="color: #396d7e;">4. Vibrio natriegens Chamber</h5> <h3 style="color: #396d7e;">4. Vibrio natriegens Chamber</h3>
<p style="color: #333;">Write here...</p> <p style="color: #333;">Write here...</p>
<h5 style="color: #396d7e;">5. Drying Chamber for Single-Cell Proteins and Output Pipe</h5> <h3 style="color: #396d7e;">5. Drying Chamber for Single-Cell Proteins and Output Pipe</h3>
<p style="color: #333;">Write here...</p> <p style="color: #333;">Write here...</p>
<h5 style="color: #396d7e;">6. Output Pipe</h5> <h3 style="color: #396d7e;">6. Output Pipe</h3>
<p style="color: #333;">Write here...</p> <p style="color: #333;">Write here...</p>
<h5 style="color: #396d7e;">Considerations</h5> <h3 style="color: #396d7e;">Considerations</h3>
<p style="color: #333;">Write here...</p> <p style="color: #333;">Write here...</p>
</b-card-body> </div>
</b-collapse> </div>
</b-card>
<!-- Inclusivity Section --> <!-- Inclusivity Section -->
<b-card no-body class="mb-2" style="background-color: #e3f2fd;"> <div class="card mb-2" style="background-color: #e3f2fd;">
<b-card-header header-tag="header" role="tab"> <div class="card-header" @click="toggleSection('inclusivity')">
<b-button v-b-toggle.inclusivity variant="primary" style="background-color: #e3f2fd; color: #396d7e; border: none;">Taking Initiative: Inclusivity and Participation</b-button> <h2 style="cursor: pointer; color: #396d7e;">Taking Initiative: Inclusivity and Participation</h2>
</b-card-header> </div>
<b-collapse id="inclusivity" accordion="accordion" role="tabpanel"> <div v-if="openSection === 'inclusivity'" class="card-body" style="background-color: #e5efdf;">
<b-card-body style="background-color: #e5efdf;"> <h3 style="color: #396d7e;">“Day In The Life of an iGEM Member”</h3>
<h5 style="color: #396d7e;">“Day In The Life of an iGEM Member”</h5> <p style="color: #333;">Write here...</p>
<p style="color: #333;">Write here...</p>
<h5 style="color: #396d7e;">Introduction Days and Bachelor’s Open Day at Maastricht University</h5> <h3 style="color: #396d7e;">Introduction Days and Bachelor’s Open Day at Maastricht University</h3>
<p style="color: #333;">Write here...</p> <p style="color: #333;">Write here...</p>
<h5 style="color: #396d7e;">Spotify Link</h5> <h3 style="color: #396d7e;">Spotify Link</h3>
<p style="color: #333;">Write here...</p> <p style="color: #333;">Write here...</p>
<h5 style="color: #396d7e;">Colour-blind Friendly Colour Palette</h5> <h3 style="color: #396d7e;">Colour-blind Friendly Colour Palette</h3>
<p style="color: #333;">Write here...</p> <p style="color: #333;">Write here...</p>
<h5 style="color: #396d7e;">Postcards</h5> <h3 style="color: #396d7e;">Postcards</h3>
<p style="color: #333;">Write here...</p> <p style="color: #333;">Write here...</p>
<h5 style="color: #396d7e;">Eindhoven Funding Event</h5> <h3 style="color: #396d7e;">Eindhoven Funding Event</h3>
<p style="color: #333;">Write here...</p> <p style="color: #333;">Write here...</p>
</b-card-body> </div>
</b-collapse> </div>
</b-card>
<!-- Feedback Section --> <!-- Feedback Section -->
<b-card no-body class="mb-2" style="background-color: #e3f2fd;"> <div class="card mb-2" style="background-color: #e3f2fd;">
<b-card-header header-tag="header" role="tab"> <div class="card-header" @click="toggleSection('feedback')">
<b-button v-b-toggle.feedback variant="primary" style="background-color: #e3f2fd; color: #396d7e; border: none;">Gaining More Feedback and Stakeholder Insight</b-button> <h2 style="cursor: pointer; color: #396d7e;">Gaining More Feedback and Stakeholder Insight</h2>
</b-card-header> </div>
<b-collapse id="feedback" accordion="accordion" role="tabpanel"> <div v-if="openSection === 'feedback'" class="card-body" style="background-color: #e5efdf;">
<b-card-body style="background-color: #e5efdf;"> <h3 style="color: #396d7e;">Survey on GMOs</h3>
<h5 style="color: #396d7e;">Survey on GMOs</h5> <p style="color: #333;">Write here...</p>
<p style="color: #333;">Write here...</p>
<h3 style="color: #396d7e;">Interview with Philosophy of Technology Expert</h3>
<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;">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;">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;">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;">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;">Philosophical Insights: Life as Technology: Write here...</p> <p style="color: #333;">Societal Impact and Environmental Concerns: 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;">Ethical Frameworks and Global Impact: Write here...</p> <p style="color: #333;">Main Takeaways and Incorporation into the Project: 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>
<h5 style="color: #396d7e;">Interview with Unimer: A Discussion on Organic Fertilizer</h5> <p style="color: #333;">Introduction and Background: Write here...</p>
<p style="color: #333;">Introduction and Background: Write here...</p>
<h3 style="color: #396d7e;">Meeting with Promega's Marloes van der Zwalm</h3>
<h5 style="color: #396d7e;">Meeting with Promega's Marloes van der Zwalm</h5> <p style="color: #333;">Write here...</p>
<p style="color: #333;">Write here...</p>
<h3 style="color: #396d7e;">Meeting with Cultivarium's Henry Lee and Lilan Ling</h3>
<h5 style="color: #396d7e;">Meeting with Cultivarium's Henry Lee and Lilan Ling</h5> <p style="color: #333;">Write here...</p>
<p style="color: #333;">Write here...</p>
<h3 style="color: #396d7e;">Utrecht, NL: The Dutch iGEM 2024 Meet</h3>
<h5 style="color: #396d7e;">Utrecht, NL: The Dutch iGEM 2024 Meet</h5> <p style="color: #333;">Write here...</p>
<p style="color: #333;">Write here...</p>
<h3 style="color: #396d7e;">Wageningen, NL: SynBioNL event</h3>
<h5 style="color: #396d7e;">Wageningen, NL: SynBioNL event</h5> <p style="color: #333;">Write here...</p>
<p style="color: #333;">Write here...</p>
<h3 style="color: #396d7e;">Madrid, ESP: European iGEM 2024 MeetUp</h3>
<h5 style="color: #396d7e;">Madrid, ESP: European iGEM 2024 MeetUp</h5> <p style="color: #333;">Write here...</p>
<p style="color: #333;">Write here...</p>
<h3 style="color: #396d7e;">University of Michigan: Bioremediation Virtual Symposium</h3>
<h5 style="color: #396d7e;">University of Michigan: Bioremediation Virtual Symposium</h5> <p style="color: #333;">Write here...</p>
<p style="color: #333;">Write here...</p> </div>
</b-card-body> </div>
</b-collapse>
</b-card>
</div> </div>
</template> </template>
<script> <script>
export default { 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> </script>
...@@ -137,4 +139,15 @@ export default { ...@@ -137,4 +139,15 @@ export default {
.mb-2 { .mb-2 {
margin-bottom: 1rem; 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> </style>
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment