Skip to content
Snippets Groups Projects
Commit d15eef05 authored by Arina Filatova's avatar Arina Filatova
Browse files

kill-switch table component

parent 30b01812
No related branches found
No related tags found
No related merge requests found
Pipeline #478865 passed
Stage: build
Stage: deploy
Hide whitespace changes
Inline Side-by-side
docs/.vuepress/components/Kill-switch_table.vue 0 → 100644
+ 154
− 0
View file @ d15eef05
<template>
<div>
<table>
<thead>
<tr>
<th>BioBrick Part</th>
<th>Name</th>
<th>Sequence</th>
</tr>
</thead>
<tbody>
<tr>
<td><a :href="part.link">{{ part.name }}</a></td>
<td>{{ part.description }}</td>
<td>
<button class="styled-button" @click="openModal()">Open Sequence</button>
</td>
</tr>
</tbody>
</table>
<!-- Modal for sequence -->
<div v-if="isModalOpen" class="modal-overlay">
<div class="modal-content">
<span @click="closeModal" class="close">&times;</span>
<h2>Sequence for {{ part.name }}</h2>
<p>{{ part.sequence }}</p>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
part: {
name: "BBa_K1913025",
link: "https://parts.igem.org/Part:BBa_K1913025",
description: "Wild type plac-FixK2 hybrid promoter",
sequence: "ggcagtgagcgcaacgcaattccatccaggaccggcctcgggcatgacctacggggttctacgtaaggcaccccccttaagatatcgctcgaaattttcgaacctcccgataccgcgtaccaatgcgtcataattgtgagcggataacaattggaga"
},
isModalOpen: false,
};
},
methods: {
openModal() {
this.isModalOpen = true;
},
closeModal() {
this.isModalOpen = false;
}
}
}
</script>
<style scoped>
/* Include your styles here */
.modal-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.6);
display: flex;
justify-content: center;
align-items: center;
z-index: 1000;
}
.close {
position: absolute;
top: 10px;
right: 15px;
font-size: 20px;
cursor: pointer;
}
.close:hover {
color: #ff5c5c;
}
.modal-content {
background-color: white;
padding: 20px;
border-radius: 10px;
box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
position: relative;
width: 80%;
max-width: 600px;
max-height: 80vh;
overflow-y: auto;
}
table {
width: 100%;
border-collapse: collapse;
border-radius: 10px;
overflow: hidden;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
th {
padding: 12px;
background-color: #73aba2;
color: #ffffff;
border: 2px solid #00bf7d;
}
th, td {
padding: 10px;
text-align: center;
border: 2px solid #00bf7d;
}
td {
background-color: #e3f2fd;
color: #1c2740;
}
tbody tr:hover {
background-color: #00b4c5;
}
tbody tr:nth-child(odd) {
background-color: #8babf1;
}
a {
color: #00bf7d;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
/* Button Style */
button {
background-color: #73aba2;
color: white;
border: none;
border-radius: 8px;
padding: 8px 15px;
cursor: pointer;
font-size: 14px;
font-weight: bold;
}
button:hover {
background-color: #00897b;
}
</style>
docs/kill-switch.md
+ 3
− 152
View file @ d15eef05
......@@ -16,157 +16,8 @@ The Natronaut team intends to implement the kill switch once the testing phase o
It is important to point out the relevance of the **wavelength** chosen to trigger the antitoxin. Blue light is the type of visible light with the shortest wavelength, and thus, it carries the highest energy. This is relevant because blue light is able to penetrate deeper into the water layer that will surround Natronaut in case of a leak.
<table>
<thead>
<tr>
<th>BioBrick Part</th>
<th>Name</th>
<th>Sequence</th>
</tr>
</thead>
<tbody>
<tr>
<td><a href="https://parts.igem.org/Part:BBa_K1913025">BBa_K1913025</a></td>
<td>Wild type plac-FixK2 hybrid promoter</td>
<td>
<button class="styled-button" @click="openModal()">Open Sequence</button>
</td>
</tr>
</tbody>
</table>
<!-- Modal for sequence -->
<div v-if="isModalOpen" class="modal">
<div class="modal-content">
<span @click="closeModal" class="close">&times;</span>
<h2>Sequence for {{ part.name }}</h2>
<p>{{ part.sequence }}</p>
</div>
</div>
<style scoped>
/* Modal style */
.modal-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.6);
display: flex;
justify-content: center;
align-items: center;
z-index: 1000;
}
.close {
position: absolute;
top: 10px;
right: 15px;
font-size: 20px;
cursor: pointer;
}
.close:hover {
color: #ff5c5c;
}
.modal-content {
background-color: white;
padding: 20px;
border-radius: 10px;
box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
position: relative;
width: 80%;
max-width: 600px;
max-height: 80vh; /* Set a max height for the modal */
overflow-y: auto; /* Enable vertical scrolling */
}
table {
width: 100%; /* Force the table to cover the entire width */
max-width: 100%; /* Ensures it doesn't exceed the card */
border-collapse: collapse;
border-radius: 10px;
overflow: hidden;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
th {
padding: 12px;
background-color: #73aba2;
color: #ffffff;
border: 2px solid #00bf7d;
}
th, td {
padding: 10px;
text-align: center;
border: 2px solid #00bf7d;
}
td {
background-color: #e3f2fd;
color: #1c2740;
word-wrap: break-word; /* Allows long text to wra */
}
tbody tr:hover {
background-color: #00b4c5;
color: #1c2740;
}
tbody tr:nth-child(odd) {
background-color: #8babf1;
}
a {
color: #00bf7d;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
/* Button Style */
button {
background-color: #73aba2;
color: white;
border: none;
border-radius: 8px;
padding: 8px 15px;
cursor: pointer;
font-size: 14px;
font-weight: bold;
}
button:hover {
background-color: #00897b;
}
</style>
<script>
export default {
data() {
return {
part: {
name: "BBa_K1913025",
sequence: "ggcagtgagcgcaacgcaattccatccaggaccggcctcgggcatgacctacggggttctacgtaaggcaccccccttaagatatcgctcgaaattttcgaacctcccgataccgcgtaccaatgcgtcataattgtgagcggataacaattggaga"
},
isModalOpen: false,
};
},
methods: {
openModal() {
this.isModalOpen = true;
},
closeModal() {
this.isModalOpen = false;
}
}
}
</script>
<template>
<Kill-switch_table />
</template>
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