From 1587941921bc741025148d233dd32ceab1ab373f Mon Sep 17 00:00:00 2001
From: liliana <liliana.sanfilippo@uni-bielefeld.de>
Date: Mon, 19 Aug 2024 22:08:27 +0200
Subject: [PATCH] engineerig
---
src/App/App.css | 39 +++++-
src/App/App.scss | 2 +-
src/components/Collapsible.tsx | 35 ++++-
src/components/Sidebar.tsx | 5 +-
src/components/loremipsum.tsx | 8 ++
src/contents/engineering.tsx | 104 ++++++++------
src/sidebars/engS.tsx | 246 ++++++++++++++++++++++++++++++++-
7 files changed, 387 insertions(+), 52 deletions(-)
diff --git a/src/App/App.css b/src/App/App.css
index e581cfc7..9cef50fc 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 e5d37f30..18bf165c 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 0fcd4146..15d78fd2 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 9b490710..3cfee6bb 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 06a110ce..d5f43c6b 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 3f0296f2..c9193c42 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 efc15619..cd0ad1f2 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
--
GitLab