From 9c4967dfbed994654950d585dd4e7f142df4b66f Mon Sep 17 00:00:00 2001
From: Liliana Sanfilippo <liliana.sanfilippo@uni-bielefeld.de>
Date: Mon, 23 Sep 2024 20:02:56 +0200
Subject: [PATCH] engineering sidebar
---
src/contents/engineering.tsx | 166 +++++++++++++++++++++++++++++------
src/sidebars/engS.tsx | 89 ++++++++++++++-----
2 files changed, 204 insertions(+), 51 deletions(-)
diff --git a/src/contents/engineering.tsx b/src/contents/engineering.tsx
index 311349d5..d2214d4c 100644
--- a/src/contents/engineering.tsx
+++ b/src/contents/engineering.tsx
@@ -21,6 +21,25 @@ export function Engineering() {
<H3 text="Our cycle" id="ourcycle"></H3>
<p>Hallo Prime Editing diesdas</p>
</div>
+
+ <br/>
+ <div className="row">
+ <div className="col">
+
+ </div>
+ <div className="col button-left">
+ <div className="right"><ButtonOneEngineering label="Next" open="proof-of-concept"/></div>
+ </div>
+ </div>
+ </section>
+ </div>
+
+ <div id="tab-proof-of-concept" className="enginneeringtab" style={{display: "none"}}>
+ <section >
+ <div className="bg-lb box" >
+ <H3 id="Proof of Concept" text="Proof of Concept"></H3>
+ <p><LoremShort></LoremShort></p>
+ </div>
<div className="box" >
<p id="cyc1">
<h3>cyc1</h3>
@@ -55,24 +74,6 @@ export function Engineering() {
</p>
</div>
<br/>
- <div className="row">
- <div className="col">
-
- </div>
- <div className="col button-left">
- <div className="right"><ButtonOneEngineering label="Next" open="proof-of-concept"/></div>
- </div>
- </div>
- </section>
- </div>
-
- <div id="tab-proof-of-concept" className="enginneeringtab" style={{display: "none"}}>
- <section >
- <div className="bg-lb box" >
- <H3 id="Proof of Concept" text="Proof of Concept"></H3>
- <p><LoremShort></LoremShort></p>
- </div>
- <br/>
<div className="row ">
<div className="col">
<div className="left"><ButtonOneEngineering label="Previous" open="our-cycle"/></div>
@@ -90,6 +91,30 @@ export function Engineering() {
<H3 id="PE Systems" text="PE Systems"></H3>
<p><LoremShort></LoremShort></p>
</div>
+ <div className="box" >
+ <p id="pe1">
+ <h3>pe1</h3>
+ <LoremShort></LoremShort>
+ <p><LoremShort></LoremShort></p>
+ <p><LoremShort></LoremShort></p>
+ </p>
+ </div>
+ <div className="box" >
+ <p id="pe2">
+ <h3>pe2</h3>
+ <LoremShort></LoremShort>
+ <p><LoremShort></LoremShort></p>
+ <p><LoremShort></LoremShort></p>
+ </p>
+ </div>
+ <div className="box" >
+ <p id="pe3">
+ <h3>pe3</h3>
+ <LoremShort></LoremShort>
+ <p><LoremShort></LoremShort></p>
+ <p><LoremShort></LoremShort></p>
+ </p>
+ </div>
<br/>
<div className="row ">
<div className="col">
@@ -107,7 +132,54 @@ export function Engineering() {
<H3 id="Nikase" text="Nikase"></H3>
<p><LoremShort></LoremShort></p>
<img src="https://static.igem.wiki/teams/5247/fanzor/movie2-ezgif-com-video-to-gif-converter.gif"></img>
-
+ </div>
+ <div className="box" >
+ <p id="nik1">
+ <h3>nik1</h3>
+ <LoremShort></LoremShort>
+ <p><LoremShort></LoremShort></p>
+ <p><LoremShort></LoremShort></p>
+ </p>
+ </div>
+ <div className="box" >
+ <p id="nik2">
+ <h3>nik2</h3>
+ <LoremShort></LoremShort>
+ <p><LoremShort></LoremShort></p>
+ <p><LoremShort></LoremShort></p>
+ </p>
+ </div>
+ <div className="box" >
+ <p id="nik3">
+ <h3>nik3</h3>
+ <LoremShort></LoremShort>
+ <p><LoremShort></LoremShort></p>
+ <p><LoremShort></LoremShort></p>
+ </p>
+ </div>
+ <div className="box" >
+ <p id="nik4">
+ <h3>nik4</h3>
+ <LoremShort></LoremShort>
+ <p><LoremShort></LoremShort></p>
+ <p><LoremShort></LoremShort></p>
+ </p>
+ </div>
+ <div className="box" >
+ <p id="nik5">
+ <h3>nik5</h3>
+ <LoremShort></LoremShort>
+ <p><LoremShort></LoremShort></p>
+ <p><LoremShort></LoremShort></p>
+ </p>
+ </div>
+ <div className="box" >
+ <p id="nik6">
+ <h3>nik6</h3>
+ <LoremShort></LoremShort>
+ <p><LoremShort></LoremShort></p>
+ <p><LoremShort></LoremShort></p>
+ </p>
</div>
<br/>
<div className="row ">
@@ -126,6 +198,54 @@ export function Engineering() {
<H3 id="pegRNA" text="pegRNA"></H3>
<p><LoremShort></LoremShort></p>
</div>
+ <div className="box" >
+ <p id="peg1">
+ <h3>peg1</h3>
+ <LoremShort></LoremShort>
+ </p>
+ <p><LoremShort></LoremShort></p>
+ <p><LoremShort></LoremShort></p>
+ </div>
+ <div className="box" >
+ <p id="peg2">
+ <h3>peg2</h3>
+ <LoremShort></LoremShort>
+ </p>
+ <p><LoremShort></LoremShort></p>
+ <p><LoremShort></LoremShort></p>
+ </div>
+ <div className="box" >
+ <p id="peg3">
+ <h3>peg3</h3>
+ <LoremShort></LoremShort>
+ </p>
+ <p><LoremShort></LoremShort></p>
+ <p><LoremShort></LoremShort></p>
+ </div>
+ <div className="box" >
+ <p id="peg4">
+ <h3>peg4</h3>
+ <LoremShort></LoremShort>
+ </p>
+ <p><LoremShort></LoremShort></p>
+ <p><LoremShort></LoremShort></p>
+ </div>
+ <div className="box" >
+ <p id="peg5">
+ <h3>peg5</h3>
+ <LoremShort></LoremShort>
+ </p>
+ <p><LoremShort></LoremShort></p>
+ <p><LoremShort></LoremShort></p>
+ </div>
+ <div className="box" >
+ <p id="peg6">
+ <h3>peg6</h3>
+ <LoremShort></LoremShort>
+ </p>
+ <p><LoremShort></LoremShort></p>
+ <p><LoremShort></LoremShort></p>
+ </div>
<br/>
<div className="row ">
<div className="col">
@@ -167,14 +287,6 @@ export function Engineering() {
<p><LoremShort></LoremShort></p>
<p><LoremShort></LoremShort></p>
</div>
- <div className="box" >
- <p id="del4">
- <h3>del4</h3>
- <LoremShort></LoremShort>
- </p>
- <p><LoremShort></LoremShort></p>
- <p><LoremShort></LoremShort></p>
- </div>
<br/>
<div className="row ">
<div className="col">
diff --git a/src/sidebars/engS.tsx b/src/sidebars/engS.tsx
index 8ddb6ed9..76396c8a 100644
--- a/src/sidebars/engS.tsx
+++ b/src/sidebars/engS.tsx
@@ -3,7 +3,8 @@ import { NewHighlight } from "../utils/Highlight-functions";
import { openThem } from "../utils/openThem";
export function EngSide(){
- let nums = [ "cyc1", "cyc2", "cyc3", "cyc4", "del1", "del2", "del3", "del4", "del5"]
+ let nums = [ "cyc1", "cyc2", "cyc3", "cyc4", "pe1", "pe2", "pe3", "nik1", "nik2", "nik3", "nik4", "nik5", "nik6",
+ "peg1", "peg2", "peg3", "peg4", "peg5", "peg6", "del1", "del2", "del3"]
useEffect(() => {
window.addEventListener('scroll', handleScroll);
return () => window.removeEventListener('scroll', handleScroll);
@@ -48,9 +49,18 @@ export function EngSide(){
<summary>Proof Of Concept</summary>
<span id="proof-of-concept" className="sidesubtab" style={{display: "none"}}>
<ul>
- <a href="#"><li>Iteration 1</li></a>
- <a href="#"><li>Iteration 2</li></a>
- <a href="#"><li>Iteration 3</li></a>
+ <li><a href="#cyc1">
+ <span id="subtitle0" className='sideitem'>Iteration 1</span>
+ </a></li>
+ <li><a href="#cyc2">
+ <span id="subtitle1" className='sideitem'>Iteration 2</span>
+ </a></li>
+ <li><a href="#cyc3">
+ <span id="subtitle2" className='sideitem'>Iteration 3</span>
+ </a></li>
+ <li><a href="#cyc4">
+ <span id="subtitle3" className='sideitem'>Iteration 4 </span>
+ </a></li>
</ul>
</span>
</div>
@@ -64,9 +74,15 @@ export function EngSide(){
<summary>PE Systems</summary>
<span id="pe-systems" className="sidesubtab" style={{display: "none"}}>
<ul>
- <a href="#"><li>Iteration 1</li></a>
- <a href="#"><li>Iteration 2</li></a>
- <a href="#"><li>Iteration 3</li></a>
+ <li><a href="#pe1">
+ <span id="subtitle4" className='sideitem'>Iteration 1</span>
+ </a></li>
+ <li><a href="#pe2">
+ <span id="subtitle5" className='sideitem'>Iteration 2</span>
+ </a></li>
+ <li><a href="#pe3">
+ <span id="subtitle6" className='sideitem'>Iteration 3</span>
+ </a></li>
</ul>
</span>
</div>
@@ -80,9 +96,24 @@ export function EngSide(){
<summary>Nikase</summary>
<span id="nikase" className="sidesubtab" style={{display: "none"}}>
<ul>
- <a href="#"><li>Iteration 1</li></a>
- <a href="#"><li>Iteration 2</li></a>
- <a href="#"><li>Iteration 3</li></a>
+ <li><a href="#nik1">
+ <span id="subtitle7" className='sideitem'>Iteration 1</span>
+ </a></li>
+ <li><a href="#nik2">
+ <span id="subtitle8" className='sideitem'>Iteration 2</span>
+ </a></li>
+ <li><a href="#nik3">
+ <span id="subtitle9" className='sideitem'>Iteration 3</span>
+ </a></li>
+ <li><a href="#nik4">
+ <span id="subtitle10" className='sideitem'>Iteration 4</span>
+ </a></li>
+ <li><a href="#nik5">
+ <span id="subtitle11" className='sideitem'>Iteration 5</span>
+ </a></li>
+ <li><a href="#nik6">
+ <span id="subtitle12" className='sideitem'>Iteration 6</span>
+ </a></li>
</ul>
</span>
</div>
@@ -96,9 +127,24 @@ export function EngSide(){
<summary>pegRNA</summary>
<span id="pegrna" className="sidesubtab" style={{display: "none"}}>
<ul>
- <a href="#"><li>Iteration 1</li></a>
- <a href="#"><li>Iteration 2</li></a>
- <a href="#"><li>Iteration 3</li></a>
+ <li><a href="#peg1">
+ <span id="subtitle13" className='sideitem'>Iteration 1</span>
+ </a></li>
+ <li><a href="#peg2">
+ <span id="subtitle14" className='sideitem'>Iteration 2</span>
+ </a></li>
+ <li><a href="#peg3">
+ <span id="subtitle15" className='sideitem'>Iteration 3</span>
+ </a></li>
+ <li><a href="#peg4">
+ <span id="subtitle16" className='sideitem'>Iteration 4</span>
+ </a></li>
+ <li><a href="#peg5">
+ <span id="subtitle17" className='sideitem'>Iteration 6</span>
+ </a></li>
+ <li><a href="#peg6">
+ <span id="subtitle18" className='sideitem'>Iteration 7</span>
+ </a></li>
</ul>
</span>
</div>
@@ -113,13 +159,14 @@ export function EngSide(){
<span id="delivery" className="sidesubtab" style={{display: "none"}}>
<ul>
<li><a href="#del2">
- <span id="subtitle3" className='sideitem'>Iteration 1</span>
+ <span id="subtitle19" className='sideitem'>Iteration 1</span>
</a></li>
<li><a href="#del2">
- <span id="subtitle4" className='sideitem'>Iteration 1</span>
+ <span id="subtitle20" className='sideitem'>Iteration 2</span>
+ </a></li>
+ <li><a href="#del3">
+ <span id="subtitle21" className='sideitem'>Iteration 3</span>
</a></li>
- <a href="#"><li>Iteration 2</li></a>
- <a href="#"><li>Iteration 3</li></a>
</ul>
</span>
</div>
@@ -132,13 +179,7 @@ export function EngSide(){
<div id="parent-references" className="sideitem">
<summary>References</summary>
<span id="references" className="sidesubtab" style={{display: "none"}}>
- <ul>
- <li><a href="#subtitle1">
- <span id="" className='sideitem'>Iteration 1</span>
- </a></li>
- <a href="#"><li>Iteration 2</li></a>
- <a href="#"><li>Iteration 3</li></a>
- </ul>
+
</span>
</div>
</div>
--
GitLab