diff --git a/src/App/App.css b/src/App/App.css
index e581cfc7118c55efcdd310ab737fc7f50dc49c3e..9cef50fca489aac6b07f5e40a099b115059de33a 100644
--- a/src/App/App.css
+++ b/src/App/App.css
@@ -148,7 +148,8 @@ code{
.sidebar>div{
overflow: hidden;
-text-align: center;
+text-align: left;
+margin-left: 10px;
cursor: pointer;
}
.sidebar>div>a>span{
@@ -266,12 +267,20 @@ tr:nth-child(1) {
background-color: var(--accent-gradient-one-of-three) !important;
}
+
/* * * * * * * */
/* BACKGROUND */
/* * * * * * * */
.bg-video-container{
margin-bottom: 10vw !important;
}
+
+.bg-db{
+ background-color: var(--darkerbeige) !important;
+}
+.bg-lb{
+ background-color: var(--lightblue) !important;
+}
.bg-d{
background-color: var(--text-primary) !important;
}
@@ -930,7 +939,6 @@ svg{
.collapse-card {
border-radius: 4px;
- background-color: var(--darkerbeige);
margin-top: 10px;
color: #333;
padding: 5px;
@@ -3232,4 +3240,29 @@ a{
margin-top: 1rem !important;
margin-bottom: 1rem;
margin-left: 1rem !important;
-}
\ No newline at end of file
+}
+
+.box{
+ padding: 10px;
+ border-radius: 10px;
+}
+
+ .detail-sideitem .sideitem{
+ padding-left: 10px !important;
+ }
+
+ .sideitem .cycletab{
+ line-height: 100%;
+ margin-left: 10px;
+ list-style-type: circle !important;
+ }
+
+ .active-sideitem {
+ background-color: var(--text-primary) !important;
+ color: white !important;
+ border-radius: 15px;
+ border-width: 15px;
+ border-color: #850F78;
+ padding-right: 10px;
+ padding-left: 10px;
+ }
\ No newline at end of file
diff --git a/src/App/App.scss b/src/App/App.scss
index e5d37f30dacc619f755218e6b22b86fb6322a0f2..18bf165c1f1e7e93f8a121a45f79177ccc0013dd 100644
--- a/src/App/App.scss
+++ b/src/App/App.scss
@@ -617,4 +617,4 @@ figure.snip1113 h3 span {
font-weight: 800;
}
-
+/* Collapsible 2 */
diff --git a/src/components/Collapsible.tsx b/src/components/Collapsible.tsx
index 0fcd4146d5c06744129afc65f5edf84123c208a8..15d78fd251d733685f306ca252106fc6c675ac3b 100644
--- a/src/components/Collapsible.tsx
+++ b/src/components/Collapsible.tsx
@@ -17,7 +17,7 @@ interface IProps {
return (
<>
- <div className="collapse-card">
+ <div className="collapse-card bg-db">
<div>
<div className="d-flex justify-content-between">
<h6 className="font-weight-bold collapsible-a">{title}</h6>
@@ -38,6 +38,39 @@ interface IProps {
</>
);
};
+
+ export const CollapsibleTwo: React.FC<IProps> = ({ open, children, title }) => {
+ const [isOpen, setIsOpen] = useState(open);
+
+ const handleFilterOpening = () => {
+ setIsOpen((prev) => !prev);
+ };
+
+ return (
+ <>
+ <section id={title}>
+ <div className="collapse-card">
+ <div>
+ <div className="d-flex justify-content-between">
+ <h3 className="font-weight-bold collapsible-a">{title}</h3>
+ <button type="button" className="btn" onClick={handleFilterOpening}>
+ {!isOpen ? (
+ <img className='updown' src="https://static.igem.wiki/teams/5247/design/icons/angle-small-down.png" />
+ ) : (
+ <img className='updown' src="https://static.igem.wiki/teams/5247/design/icons/angle-small-up32px.png" />
+ )}
+ </button>
+ </div>
+ </div>
+
+ <div className="">
+ <div>{isOpen && <div className="p-3"> <hr className='collapsible-hr'/> {children}</div>}</div>
+ </div>
+ </div>
+ </section>
+ </>
+ );
+ };
export default Collapsible;
\ No newline at end of file
diff --git a/src/components/Sidebar.tsx b/src/components/Sidebar.tsx
index 9b490710efe1415dcb0f8e38fa42829abc0d8f53..3cfee6bb8740bc6c7fd38f3a6006587e2fff3f58 100644
--- a/src/components/Sidebar.tsx
+++ b/src/components/Sidebar.tsx
@@ -92,10 +92,11 @@ function Sidebar(){
<div></div>
)
}
-
+
+
- function Highlight({el}: {el: HTMLElement | null}, {subtitle}:{subtitle: HTMLElement | null}){
+ export function Highlight({el}: {el: HTMLElement | null}, {subtitle}:{subtitle: HTMLElement | null}){
let TopDistance = 100;
if (el != null && subtitle != null){
if (el.getBoundingClientRect().top < TopDistance + 1 && el.getBoundingClientRect().bottom > TopDistance){
diff --git a/src/components/loremipsum.tsx b/src/components/loremipsum.tsx
index 06a110cef02b54d8fecb9fa4cfd70413e5b5f4a7..d5f43c6be71b5c647ac66e2f0a96c25443c94869 100644
--- a/src/components/loremipsum.tsx
+++ b/src/components/loremipsum.tsx
@@ -10,4 +10,12 @@ Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lo
Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer
</>
)
+}
+
+export function LoremShort(){
+ return(
+ <>
+ Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
+ </>
+ )
}
\ No newline at end of file
diff --git a/src/contents/engineering.tsx b/src/contents/engineering.tsx
index 3f0296f2ea35dbaf52356d65780ebf2d70348bd2..c9193c4200e6a5a92d0e327f14549e1f5ced6552 100644
--- a/src/contents/engineering.tsx
+++ b/src/contents/engineering.tsx
@@ -1,6 +1,7 @@
import { openIt } from "../components/Buttons";
-import { LoremMedium } from "../components/loremipsum";
+import { LoremShort } from "../components/loremipsum";
+
export function Engineering() {
@@ -8,51 +9,68 @@ export function Engineering() {
<>
<div className="row mt-4">
<div className="col">
- <br/>
- <br/>
-
-{/* <div className="row align-items-center">
- <div className="col-3">
-
-
- </div>
- <div className="col">
- <div className="cycletab" id="overview" style={{display: "block"}}>
- <h3>Overview</h3>
- <hr/>
- </div>
- <div className="cycletab" id="learning" style={{display: "none"}}>
- <h3>Learning</h3>
- <hr/>
- </div>
- <div className="cycletab" id="testing" style={{display: "none"}}>
- <h3>Testing</h3>
- <hr/>
- </div>
- <div className="cycletab" id="building" style={{display: "none"}}>
- <h3>Building</h3>
- <hr/>
- </div>
- <div className="cycletab" id="designing" style={{display: "none"}}>
- <h3>Designing</h3>
- <hr/>
- </div>
- </div>
- </div> */}
- <section id="one">
- <section id="mutations">
- <h3>Mutation canidates</h3>
- <LoremMedium/>
+ <br/> <br/> <br/>
+ <div id="tab-our-cycle" className="enginneeringtab" style={{display: "block"}}>
+ <section id="Our Cycle">
+ <h3>Our Cycle</h3>
+ <p><LoremShort></LoremShort></p>
</section>
- <section id="508del">
- <h3>508del</h3>
- <LoremMedium/>
+ </div>
+
+ <div id="tab-proof-of-concept" className="enginneeringtab" style={{display: "none"}}>
+ <section id="Proof of Concept" >
+ <div className="bg-lb box" >
+ <h3>Proof of Concept</h3>
+ <p><LoremShort></LoremShort></p>
+ </div>
+ </section>
+ </div>
+
+ <div className="enginneeringtab" id="tab-pe-systems" style={{display: "none"}}>
+ <section id="PE Systems" >
+ <div className="box" >
+ <h3>PE Systems</h3>
+ <p><LoremShort></LoremShort></p>
+ </div>
</section>
- </section>
- <section id="RNAbindingprotein">
-
- </section>
+ </div>
+ <div className="enginneeringtab" id="tab-nikase" style={{display: "none"}}>
+ <section id="Nikase" >
+ <div className="box" >
+ <h3>Nikase</h3>
+ <p><LoremShort></LoremShort></p>
+ </div>
+ </section>
+ </div>
+ <div className="enginneeringtab" id="tab-pegrna" style={{display: "none"}}>
+ <section id="pegRNA" >
+ <div className="box" >
+ <h3>pegRNA</h3>
+ <p><LoremShort></LoremShort></p>
+ </div>
+ </section>
+ </div>
+ <div className="enginneeringtab" id="tab-delivery" style={{display: "none"}}>
+ <section id="Delivery" >
+ <div className="box" >
+ <h3>Delivery</h3>
+ <p id="del1">
+ <h3>del1</h3>
+ <LoremShort></LoremShort>
+ </p>
+ <p><LoremShort></LoremShort></p>
+ <p><LoremShort></LoremShort></p>
+ </div>
+ </section>
+ </div>
+ <div className="enginneeringtab" id="tab-references" style={{display: "none"}}>
+ <section id="References" >
+ <h3>References</h3>
+ <p><LoremShort></LoremShort></p>
+ </section>
+ </div>
+
</div>
</div>
diff --git a/src/sidebars/engS.tsx b/src/sidebars/engS.tsx
index efc156193da292f08c44f4ba4e27332797db406e..cd0ad1f28de1b5df4ec4703c7d91dc3137799d38 100644
--- a/src/sidebars/engS.tsx
+++ b/src/sidebars/engS.tsx
@@ -1,6 +1,248 @@
+import { useEffect } from "react";
+
export function EngSide(){
+ let nums = [ "del1"]
+ useEffect(() => {
+ window.addEventListener('scroll', handleScroll);
+ return () => window.removeEventListener('scroll', handleScroll);
+ }, []);
+ const handleScroll = () => {
+ for(let idx in nums){
+ console.log("We are looking at 'item' = " + nums[idx])
+ const item = nums[idx];
+ let ind = nums.findIndex((e) => e == item)
+ console.log("ind is: " + ind)
+ let subdi = "subtitle" + ind
+ console.log("subdi is: " + subdi)
+ console.log("we use " + document.getElementById(item)?.id + " and " + document.getElementById(subdi)?.id)
+ Highlight({el: document.getElementById(item)!}, {subtitle: document.getElementById(subdi)!});
+ }
+ console.log("function HighlightCheck")
+ }
+ console.log(nums)
+
+
return(
- <div className="col-1 d-none d-lg-block">
+ <div className="col-2 d-none d-lg-block">
+ <br/>
+ <div className="sticky-top">
+ <nav className="sidebar">
+ <div>
+ <a onClick={openThem({it: "our-cycle"})}>
+ <div className="detail-sideitem">
+ <div id="parent-our-cycle" className="sideitem">
+ <summary>Our Cycle</summary>
+ <span id="our-cycle" 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>
+ </ul>
+ </span>
+ </div>
+ </div>
+ </a>
+ </div>
+ <div>
+ <a onClick={openThem({it: "proof-of-concept"})}>
+ <div className="detail-sideitem">
+ <div id="parent-proof-of-concept" className="sideitem">
+ <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>
+ </ul>
+ </span>
+ </div>
+ </div>
+ </a>
+ </div>
+ <div>
+ <a onClick={openThem({it: "pe-systems"})}>
+ <div className="detail-sideitem">
+ <div id="parent-pe-systems" className="sideitem">
+ <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>
+ </ul>
+ </span>
+ </div>
+ </div>
+ </a>
+ </div>
+ <div>
+ <a onClick={openThem({it: "nikase"})}>
+ <div className="detail-sideitem">
+ <div id="parent-nikase" className="sideitem">
+ <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>
+ </ul>
+ </span>
+ </div>
+ </div>
+ </a>
+ </div>
+ <div>
+ <a onClick={openThem({it: "pegrna"})}>
+ <div className="detail-sideitem">
+ <div id="parent-pegrna" className="sideitem">
+ <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>
+ </ul>
+ </span>
+ </div>
+ </div>
+ </a>
+ </div>
+ <div>
+ <a onClick={openThem({it: "delivery"})}>
+ <div className="detail-sideitem">
+ <div id="parent-delivery" className="sideitem">
+ <summary>Delivery</summary>
+ <span id="delivery" className="sidesubtab" style={{display: "none"}}>
+ <ul>
+ <li><a href="#del1">
+ <span id="subtitle0" 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>
+ </a>
+ </div>
+ <div>
+ <a onClick={openThem({it: "references"})}>
+ <div className="detail-sideitem">
+ <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>
+ </a>
+ </div>
+ </nav>
+ <br/>
+ <div className="col" style={{display: "flex", alignItems: "right"}}>
+ <a href='#' className="backtotop">
+ Back to Top ↑
+ </a>
+ </div>
+ </div>
</div>
+
)
-}
\ No newline at end of file
+}
+
+
+
+
+/* function SideItemEng({hesh, num}:{hesh: string; num: number}){
+ let subdi = "subtitle" + num
+ let openmore = stringToSlug(hesh)
+ console.log("openmore: " + openmore)
+ return(
+ <div>
+ <a onClick={openThem({it: openmore})}>
+ <div className="detail-sideitem">
+ <div id={subdi} className="sideitem">
+ <summary>{hesh}</summary>
+ <span id={openmore} className="sidesubtab" style={{display: "none"}}>
+ <ul>
+ <li>Other</li>
+ </ul>
+ </span>
+ </div>
+ </div>
+ </a>
+ </div>
+ )
+}
+ */
+function Highlight({el}: {el: HTMLElement | null}, {subtitle}:{subtitle: HTMLElement | null}){
+ let TopDistance = 150;
+ console.log("Starting highlight check...")
+ console.log("here come el...")
+ console.log(el)
+ console.log("here comes subtitle...")
+ console.log(subtitle)
+ if (el != null && subtitle != null){
+/* console.log("here comes el...")
+ console.log(el)
+ console.log(el.getBoundingClientRect()) */
+ if (el.getBoundingClientRect().top < TopDistance + 1 && el.getBoundingClientRect().bottom > TopDistance){
+ subtitle.style.color = "blue";
+ subtitle.style.backgroundColor = "rgb(133, 15, 120, 0.8)";
+ subtitle.style.borderRadius = "15px";
+ subtitle.style.borderWidth = "15px";
+ subtitle.style.borderColor = "#850F78";
+ subtitle.style.paddingLeft = "10px";
+ subtitle.style.paddingRight = "10px";
+
+/* console.log("subtitle: ",subtitle)
+ console.log("style: ", subtitle.style)
+ console.log("color: ",subtitle.style.color)
+ console.log("backcolor: ",subtitle.style.backgroundColor) */
+ }
+ else{
+ subtitle.style.color = "green";
+ subtitle.style.backgroundColor = "";
+ }
+ }
+
+ }
+
+ function openThem({it}: {it: string}){
+ const gotoandopen = (_event : React.MouseEvent<HTMLElement, MouseEvent>) => {
+
+ console.log("it classname: " + document.getElementById(it)?.className)
+ console.log("it: " + it)
+ let contenttabid = "tab-" + it;
+ let parent = "parent-" + it;
+ console.log("we want to open " + it + " and " + contenttabid)
+ let sideitems = document.getElementsByClassName("sideitem");
+ let subtabs = document.getElementsByClassName("sidesubtab");
+ let contenttabs = document.getElementsByClassName("enginneeringtab");
+ for (let i = 0; i < subtabs.length; i++) {
+ (subtabs[i] as HTMLElement).style.display = "none";
+ console.log("Hiding sidebar subtab...")
+ }
+ for (let i = 0; i < contenttabs.length; i++) {
+ (contenttabs[i] as HTMLElement).style.display = "none";
+ console.log("Hiding content tab...")
+ }
+ for (let i = 0; i < sideitems.length; i++) {
+ (sideitems[i] as HTMLElement)!.classList.remove("active-sideitem");
+ console.log("Hiding sidebar subtab...")
+ }
+
+ document.getElementById(it)!.style.display = "block";
+ document.getElementById(parent)!.classList.add("active-sideitem");
+ document.getElementById(contenttabid)!.style.display = "block";
+
+
+ }
+ return gotoandopen;
+ }
\ No newline at end of file