From 2636fd13132ebd34c2b035675c7ba9135f9bbfad Mon Sep 17 00:00:00 2001
From: liliana <liliana.sanfilippo@uni-bielefeld.de>
Date: Mon, 5 Aug 2024 19:22:43 +0200
Subject: [PATCH] engineering cycle
---
src/App/App.css | 25 +++-
src/components/svgs.tsx | 10 +-
src/contents/engineering.tsx | 203 ++++++++++++++++++++++++++++++-
src/contents/human-practices.tsx | 15 ++-
src/contents/index.tsx | 2 +-
src/pages.ts | 6 +-
src/sidebars/engS.tsx | 6 +
7 files changed, 244 insertions(+), 23 deletions(-)
create mode 100644 src/sidebars/engS.tsx
diff --git a/src/App/App.css b/src/App/App.css
index 5b6a43ba..b8872422 100644
--- a/src/App/App.css
+++ b/src/App/App.css
@@ -3298,4 +3298,27 @@ div[class*="boxy"] {
.cls-8{fill:#39dd17;}.cls-9{stroke:#ce1b1b;}
.cls-10{fill:#ce1b1b;}.cls-11{stroke:#f7931e;}
.cls-12{stroke:#7913e5;}.cls-13{fill:#7913e5;}
-
\ No newline at end of file
+
+
+.svg-button:hover{
+ cursor: pointer;
+}
+
+
+.rotate-linear-infinite{
+ animation: rotation 20s;
+ animation-timing-function: linear;
+ animation-iteration-count: infinite;
+}
+@keyframes rotation {
+ from {
+ transform: rotate(0deg);
+ }
+ to {
+ transform: rotate(359deg);
+ }
+}
+
+/* .rotate-linear-infinite:hover{
+ animation-play-state: paused;
+} */
\ No newline at end of file
diff --git a/src/components/svgs.tsx b/src/components/svgs.tsx
index 3e9b7085..dac229e4 100644
--- a/src/components/svgs.tsx
+++ b/src/components/svgs.tsx
@@ -817,10 +817,9 @@ export function Complex(){
export function EngineeringCycle(){
return(
<svg
- width="133.23538"
- height="128.97939"
- viewBox="0 0 133.23538 133.97939"
- version="1.1"
+ width="70%"
+ height="70%"
+ viewBox="0 0 133 133"
id="svg25"
xmlns="http://www.w3.org/2000/svg">
<defs
@@ -937,7 +936,8 @@ export function EngineeringCycle(){
}
-export function EngineeringCycleZwei(){
+
+function EngineeringCycleZwei(){
return(
<svg
viewBox="0 0 15851.014 15529.118"
diff --git a/src/contents/engineering.tsx b/src/contents/engineering.tsx
index ba0602c0..d6295859 100644
--- a/src/contents/engineering.tsx
+++ b/src/contents/engineering.tsx
@@ -1,13 +1,43 @@
-import { EngineeringCycle, EngineeringCycleZwei } from "../components/svgs";
+import React from "react";
export function Engineering() {
-
+
return (
<>
<div className="row mt-4">
- <div className="col-lg-8">
- <EngineeringCycle></EngineeringCycle>
+ <div className="col">
+ <br/>
+ <br/>
+ <div className="row align-items-center">
+ <div className="col-3">
+ <EngineeringCycleTab/>
+
+ </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="RNAbindingprotein">
</section>
@@ -25,4 +55,167 @@ export function Engineering() {
</div>
</>
);
- }
\ No newline at end of file
+ }
+
+ function openIt({it}: {it: string}){
+ const openit = (event : React.MouseEvent<HTMLElement, MouseEvent>) => {
+ /* console.log(document.getElementById(it)) */
+ console.log(document.getElementById(it)?.className)
+ let tabcontent = document.getElementsByClassName("cycletab");
+ for (let i = 0; i < tabcontent.length; i++) {
+ (tabcontent[i] as HTMLElement).style.display = "none";
+ }
+ /* console.log(document.getElementById(it)!.style.display) */
+ document.getElementById(it)!.style.display = "block";
+
+ event.currentTarget.className += " active";
+ }
+ return openit;
+ }
+
+function EngineeringCycleTab(){
+ return(
+ <svg className="rotate-linear-infinite"
+ width="100%"
+ height="100%"
+ viewBox="0 0 133 133"
+ id="svg25"
+ xmlns="http://www.w3.org/2000/svg">
+ <defs
+ id="defs1">
+ </defs>
+ <g
+ id="Layer_2"
+ data-name="Layer 2"
+ style={{strokeWidth:"6",strokeDasharray:"none"}}>
+ <g
+ id="Plasmid"
+ style={{strokeWidth:"6",strokeDasharray:"none"}}>
+ <g
+ id="g25"
+ transform="translate(7.500978,3.0504898)">
+ <a typeof="button" className="svg-button" onClick={openIt({it: "designing"})}>
+ <path
+ className="cls-7"
+ d="m 42.05,115.59 c 27.77,9.19 57.83,-4.79 69.76,-32.23"
+ id="path22"
+ style={{stroke:"#f4cc1e",strokeWidth:"15",strokeDasharray:"none",strokeOpacity:"1"}} />
+ </a>
+ </g>
+ <g
+ id="g26"
+ transform="translate(8.0019699,2.8418223)"
+ style={{strokeWidth:"6",strokeDasharray:"none"}}>
+ <polygon
+ className="cls-13"
+ points="112.07,83.36 110.94,76.27 117.65,78.84 "
+ id="polygon25"
+ style={{fill:"#850f78",fillOpacity:"1",strokeWidth:"6",strokeDasharray:"none"}}
+ transform="matrix(2.9806259,0,0,2.9806259,-225.43722,-156.45123)" />
+ <a typeof="button" className="svg-button" onClick={openIt({it: "learning"})}>
+ <path
+ className="cls-12"
+ d="M 114,78.55 C 123.45,50.86 110,20.75 82.66,8.6"
+ id="path25"
+ style={{strokeWidth:"15",strokeDasharray:"none",stroke:"#850f78",strokeOpacity:"1"}} />
+
+ <text
+ style={{fontSize:"17.3333px",lineHeight:"0",fontFamily:"Arial",fill:"#000000",fillOpacity:"1",stroke:"none",strokeWidth:"15",strokeLinecap:"round",strokeLinejoin:"round",strokeDasharray:"none",strokeOpacity:"1",paintOrder:"fill markers stroke"}}
+ id="text31"
+ transform="translate(5.6902194,-0.11551883)"><textPath
+ xlinkHref="#path25"
+ id="textPath33">Learn<tspan
+ id="tspan31" /></textPath></text> </a>
+ </g>
+ <g
+ id="g27"
+ style={{strokeWidth:"6",strokeDasharray:"none"}}
+ transform="translate(8.0019699,2.8418223)">
+ <polygon
+ className="cls-10"
+ points="62.53,7.12 63.47,0 69.17,4.37 "
+ id="polygon23"
+ transform="matrix(2.7712263,0.58147548,-0.58147548,2.7712263,-96.587828,-39.748071)"
+ style={{fill:"#a0a7f3",fillOpacity:"1",strokeWidth:"6",strokeDasharray:"none"}}
+ inkscape:transform-center-x="3.6173751"
+ inkscape:transform-center-y="5.1978852" />
+ <a typeof="button" className="svg-button" onClick={openIt({it: "testing"})}>
+ <path
+ className="cls-9"
+ d="M 78.599111,7.5468264 C 43.820346,-2.6177588 13.956746,14.286046 4.2106281,46.368749"
+ id="path23"
+ style={{stroke:"#a0a7f3",strokeWidth:"15",strokeDasharray:"none",strokeOpacity:"1"}} />
+ <text
+
+ style={{fontSize:"17.3333px",lineHeight:"0",fontFamily:"Arial",fill:"#000000",fillOpacity:"1",stroke:"none",strokeWidth:"6",strokeLinecap:"round",strokeLinejoin:"round",strokeDasharray:"none",strokeOpacity:"1",paintOrder:"fill markers stroke"}}
+ id="text28"
+
+ transform="translate(-0.03023506,-5.9602336)"><textPath
+ xlinkHref="#path23"
+ id="textPath28">Test</textPath></text> </a>
+ </g>
+ <g
+ id="g28"
+ style={{strokeWidth:"6",strokeDasharray:"none"}}
+ transform="translate(8.0019699,2.8418223)">
+ <polygon
+ className="cls-13"
+ points="117.65,78.84 112.07,83.36 110.94,76.27 "
+ id="polygon25-6"
+ style={{fill:"#f57d22",fillOpacity:"1",strokeWidth:"6",strokeDasharray:"none"}}
+ transform="matrix(-2.9650314,0.30449893,-0.30449893,-2.9650314,364.84067,249.28249)" />
+ <a typeof="button" className="svg-button" onClick={openIt({it: "building"})}>
+ <path
+ className="cls-11"
+ d="M 2.6659753,50.953505 C -2.0956694,72.727915 10.936866,102.94273 36.656234,113.62834"
+ id="path24"
+ style={{strokeWidth:"15",strokeDasharray:"none",stroke:"#f57d22",strokeOpacity:"1"}} />
+ <text
+
+ style={{fontSize:"17.3333px",lineHeight:"0",fontFamily:"Arial",fill:"#000000",fillOpacity:"1",stroke:"none",strokeWidth:"15",strokeLinecap:"round",strokeLinejoin:"round",strokeDasharray:"none",strokeOpacity:"1",paintOrder:"fill markers stroke"}}
+ id="text32"
+ transform="translate(-5.7110315,1.7453243)"><textPath
+ xlinkHref="#path24"
+ id="textPath32">Build<tspan
+ id="tspan32" /></textPath></text> </a>
+ </g>
+ <polygon
+ className="cls-8"
+ points="37.22,113.74 44.3,112.56 41.78,119.28 "
+ id="polygon22"
+ style={{strokeWidth:"6",strokeDasharray:"none",fill:"#f4cc1e",fillOpacity:"1"}}
+ transform="matrix(2.8248588,0,0,2.8248588,-67.797781,-207.96977)" />
+ <a typeof="button" className="svg-button" onClick={openIt({it: "designing"})}>
+ <text
+
+ style={{fontSize:"17.3333px",lineHeight:"0",fontFamily:"Arial",fill:"#000000",fillOpacity:"1",stroke:"none",strokeWidth:"15",strokeLinecap:"round",strokeLinejoin:"round",strokeDasharray:"none",strokeOpacity:"1",paintOrder:"fill markers stroke"}}
+ id="text29"
+ transform="translate(8.4052921,8.8553334)"><textPath
+ xlinkHref="#path22"
+ id="textPath34">Design<tspan
+ id="tspan29" /></textPath></text> </a>
+ </g>
+ </g>
+ <a typeof="button" className="svg-button" onClick={openIt({it: "overview"})}>
+ <circle
+ style={{opacity:"0.85",fill:"#e2dad7",fillOpacity:"1",strokeWidth:"15",strokeLinecap:"round",strokeLinejoin:"round",paintOrder:"fill markers stroke"}}
+ id="path1"
+ cx="67.916214"
+ cy="63.214005"
+ r="20" />
+ <text
+ style={{fontSize:"8px",lineHeight:"0",fontFamily:"Arial",opacity:"0.85",fill:"#000000",fillOpacity:"1",strokeWidth:"15",strokeLinecap:"round",strokeLinejoin:"round",strokeDasharray:"none",paintOrder:"fill markers stroke"}}
+ x="50.929825"
+ y="66.676674"
+ id="text1">
+ <tspan
+ id="tspan1"
+ x="50.929825"
+ y="66.676674"
+ style={{fontSize:"8px"}}>Overview</tspan></text>
+ </a>
+
+ </svg>
+
+ )
+ }
diff --git a/src/contents/human-practices.tsx b/src/contents/human-practices.tsx
index 5926d908..0bf4b7c2 100644
--- a/src/contents/human-practices.tsx
+++ b/src/contents/human-practices.tsx
@@ -16,6 +16,7 @@ import { BlockQuoteB } from "../components/Quotes";
import { Box, Tab } from "@mui/material";
import {TabContext, TabList, TabPanel} from '@mui/lab';
import React from "react";
+import { Circle } from "../components/Shapes";
let timelinebuttonrowdata = [
@@ -236,11 +237,10 @@ function HPTabsTwo(){
};
return(
<>
- <Box sx={{ width: '100%', typography: 'body1' }}>
- <TabContext value={value}>
<div className="row align-items-center">
<div className="col-3">
- <Box sx={{ borderBottom: 1, borderColor: 'divider' }}>
+ <Circle text="Reflection"></Circle>
+ {/* <Box sx={{ borderBottom: 1, borderColor: 'divider' }}>
<TabList onChange={handleChange} aria-label="lab API tabs example">
<Tab label="Patient Needs" value="1" />
<Tab label="Scientific Challenges" value="2" />
@@ -248,18 +248,17 @@ function HPTabsTwo(){
<Tab label="Ethical questions" value="4" />
<Tab label="Medical perspectives" value="5" />
</TabList>
- </Box>
+ </Box> */}
</div>
<div className="col">
- <TabPanel value="1"> 1 </TabPanel>
+ {/* <TabPanel value="1"> 1 </TabPanel>
<TabPanel value="2"> 2 </TabPanel>
<TabPanel value="3"> 3 </TabPanel>
<TabPanel value="4"> 4 </TabPanel>
- <TabPanel value="5"> 5 </TabPanel>
+ <TabPanel value="5"> 5 </TabPanel> */}
</div>
</div>
- </TabContext>
- </Box>
+
</>
)
}
diff --git a/src/contents/index.tsx b/src/contents/index.tsx
index e35e8d68..b8c3fb53 100644
--- a/src/contents/index.tsx
+++ b/src/contents/index.tsx
@@ -65,5 +65,5 @@ export * from "../headers/eth-h.tsx"
export * from "./example.tsx";
-
+export * from "../sidebars/engS.tsx"
export * from "../sidebars/none.tsx"
diff --git a/src/pages.ts b/src/pages.ts
index ef4b08c9..eb363fa2 100644
--- a/src/pages.ts
+++ b/src/pages.ts
@@ -26,7 +26,7 @@
Example
} from "./contents";
-import { DescSidebar, NoSidebar } from "./contents";
+import { DescSidebar, NoSidebar, EngSide } from "./contents";
import { BFHH, ETHH, JUDGEH, DESH, PROOFH, SUPH, PARTH, MESH, ENGH, DRYH, HOMEH, HPH, INTSH, SPONH, RESH, ATTH, CONTH, DESCH, EXPH, IMPH, NOTEH, SAFEH, TEAMH, WIKIH } from "./contents";
interface Base {
@@ -102,7 +102,7 @@ const Pages: (Page | Folder)[] = [
path: "/engineering",
component: Engineering,
header: ENGH,
- navlist: NoSidebar,
+ navlist: EngSide,
},
{
name: "Ethics",
@@ -339,7 +339,7 @@ export const NavPages: (Page | Folder)[] = [
path: "/engineering",
component: Engineering,
header: ENGH,
- navlist: NoSidebar,
+ navlist: EngSide,
},
],
},
diff --git a/src/sidebars/engS.tsx b/src/sidebars/engS.tsx
new file mode 100644
index 00000000..efc15619
--- /dev/null
+++ b/src/sidebars/engS.tsx
@@ -0,0 +1,6 @@
+export function EngSide(){
+ return(
+ <div className="col-1 d-none d-lg-block">
+ </div>
+ )
+}
\ No newline at end of file
--
GitLab