From 443b481033d7703aa6eb88a214462117cf202286 Mon Sep 17 00:00:00 2001
From: liliana <liliana.sanfilippo@uni-bielefeld.de>
Date: Thu, 4 Jul 2024 16:36:19 +0200
Subject: [PATCH] a lot
---
README.md | 42 +--
src/App/App.css | 397 ++++++++++++++++++++++++++
src/App/App.scss | 220 +++++++++++++-
src/App/App.tsx | 12 +-
src/Ideas.sx | 17 ++
src/components/HorizontalTimeline.tsx | 168 +++++++++++
src/components/data/humanpractice.js | 20 ++
src/components/data/stroke.svg | 2 +
src/components/headings.tsx | 25 ++
src/components/photo-grid.tsx | 59 ++--
src/contents/Bfh.tsx | 106 +++++--
src/contents/human-practices.tsx | 117 ++------
src/contents/index.tsx | 2 +
src/contents/team.tsx | 66 +++--
src/contents/wiki.tsx | 116 +++++++-
src/utils/select.js | 35 +++
16 files changed, 1187 insertions(+), 217 deletions(-)
create mode 100644 src/Ideas.sx
create mode 100644 src/components/HorizontalTimeline.tsx
create mode 100644 src/components/data/humanpractice.js
create mode 100644 src/components/data/stroke.svg
create mode 100644 src/utils/select.js
diff --git a/README.md b/README.md
index 1ef62c54..cab5cf89 100644
--- a/README.md
+++ b/README.md
@@ -6,19 +6,7 @@ Images, photos, icons and fonts **MUST** be stored on `static.igem.wiki` using [
For up-to-date requirements, resources, help and guidance, visit [competition.igem.org/deliverables/team-wiki](https://competition.igem.org/deliverables/team-wiki).
-## Getting started
-You should probably only edit the files inside folders `static`, `wiki` and `wiki > pages`.
-1. Open the Web IDE
-2. Make the changes on the files you wish:
- * For the menu, change the file [menu.html](wiki/menu.html)
- * For the layout, change the file [layout.html](wiki/layout.html)
- * For the pages, change the corresponding file in the foler [pages](wiki/pages)
-3. Review the changes you made
-4. Once you are done, save the changes by **committing** them to the *main branch* of the repository
-5. An automated script will build, test and deploy your wiki, which should take less than 30 seconds.
-
-## About this Template
### Files
@@ -47,32 +35,8 @@ The static assets are in the `static` directory. The layout and templates are in
└── yarn.lock -> Yarn lock file for dependency management
-### Technologies
-
- * [GitLab Pages](https://docs.gitlab.com/ee/user/project/pages/)
- * [Python](https://www.python.org): Programming language
- * [Flask](https://palletsprojects.com/p/flask/): Python framework
- * [Fronzen-Flask](https://pythonhosted.org/Frozen-Flask): Library that builds the wiki to be deployed as a static website
- * [Bootstrap](https://getbootstrap.com/docs/5.0/components): CSS and JS components used
-
-### Building locally (advanced users)
-
-To work locally with this project, follow the steps below:
-#### Install
-```bash
-git clone https://gitlab.igem.org/2024/bielefeld-cebitec.git
-cd bielefeld-cebitec
-python3 -m venv venv
-. venv/bin/activate # on Linux, MacOS; or
-. venv\Scripts\activate # on Windows
-pip install -r dependencies.txt
-```
-#### Execute
-```bash
-python app.py
-```
Read me changed for test
Kaya was here
@@ -84,6 +48,12 @@ hellooo it's mee, Flip :D
+### Local run
+yarn install
+
+
+
+
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.7/install.sh | bash
npm install @mui/material @emotion/react @emotion/styled
diff --git a/src/App/App.css b/src/App/App.css
index b6356f78..e6d15048 100644
--- a/src/App/App.css
+++ b/src/App/App.css
@@ -10,10 +10,12 @@
--accent-primary: #F4CC1E;
--lightyellow: #fae99e;
--lightblue: #A0A7F3 ;
+ --verylightblue: #ebecfd;
--offblack: #32232C ;
--cebitecgray: #8295A4;
/*--offwhite: #e9dff1; */
--ourbeige: #FFF6F2;
+ --darkerbeige: #e2dad7;
--background: white;
/*igem colours*/
--igemdarkgreen: #006530;
@@ -96,6 +98,8 @@ color: var(--text-primary);
/* * * * * * * */
/* * GENERAL * */
/* * * * * * * */
+.relative{position: relative;}
+.absolute{position: absolute;}
.left-aligned {margin-left: auto;}
.align-items-center{align-items:center!important}
.zweirem{padding: 2rem;}
@@ -126,6 +130,10 @@ color: var(--text-primary);
.center{
display: flex !important;
align-items: center !important;
+ text-align: center;
+}
+.shadow{
+ box-shadow: 0 4px 6px 0 hsla(0, 0%, 0%, 0.2);
}
/* * * * * * * */
/* * NAVBAR * */
@@ -168,6 +176,7 @@ color: var(--text-primary);
/* * * * * * * */
/* BACKGROUND */
/* * * * * * * */
+
.bg-d{
background-color: var(--text-primary) !important;
}
@@ -183,6 +192,25 @@ color: var(--text-primary);
/* * * * * * * */
/* *HEADINGS * */
/* * * * * * * */
+/* p:first-child::first-letter{
+ color:var(--text-primary);
+ font-weight: bold;
+ font-size: x-large;
+} */
+.popart{
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+ font-size: 5vw;
+ letter-spacing:0.1em;
+ -webkit-text-fill-color: transparent;
+ -webkit-text-stroke-width: 0.3vw;
+ -webkit-text-stroke-color: var(--accent-primary);
+ text-shadow:
+ 0.4vw 0.4vw var(--mediumpurple),
+ 0.8vw 0.8vw var(--offblack);
+}
h2{
font-size: 3rem !important;
-webkit-background-clip: text !important;
@@ -354,6 +382,10 @@ img .middle{
max-width: 50% !important;
}
+.img-round{
+ border-radius: 50%;
+ max-width: 80%;
+}
.updown{
max-width: 3vw;
}
@@ -494,6 +526,13 @@ svg{
-webkit-text-stroke-color: black;
}
+.error{
+ background-color: lightgray;
+ border-radius: 10px;
+ color: black;
+ padding-left: 1vw;
+ padding-right: 1vw;
+}
/* TIMELINE EINS */
@@ -647,6 +686,115 @@ svg{
display: none;
}
}
+/* Horizontal */
+.timeline {
+ white-space: nowrap;
+ overflow-x: auto;
+ overflow-y: hidden;
+}
+
+.timelineol {
+ font-size: 0;
+ width: 100vw;
+ padding: 250px 0;
+ transition: all 1s;
+}
+
+
+.t-tag{
+ color: #fff;
+ font-size: 12px;
+ font-weight: bold;
+ letter-spacing: 1px;
+ padding: 5px;
+ margin-bottom: 10px;
+ text-transform: uppercase;
+ width: fit-content !important;
+}
+
+.timelineolli {
+ position: relative;
+ display: inline-block;
+ list-style-type: none;
+ width: 160px;
+ height: 5px;
+ /* background-image: url("../components/data/stroke.svg");
+ background-size: auto 100%;
+ background-repeat: round;
+ background-position: 0em; */
+ background: var(--text-primary);
+}
+.timeline ol li:last-child {
+ width: 280px;
+}
+
+
+.timeline ol li:not(:first-child) {
+ margin-left: 14px;
+}
+
+.timeline ol li:not(:last-child)::after {
+ content: '';
+ position: absolute;
+ top: 50%;
+ left: calc(100% + 1px);
+ bottom: 0;
+ width: 12px;
+ height: 12px;
+ transform: translateY(-50%);
+ border-radius: 50%;
+ background: var(--lightblue);
+}
+
+
+.timeline ol li .timeline-item {
+ min-height: 310%;
+ position: absolute;
+ left: calc(100% + 7px);
+ width: 280px;
+ padding: 15px;
+ font-size: 1rem;
+ white-space: normal;
+ color: black;
+ background: white;
+}
+.timeline ol li:nth-child(2n+1) .moretop{
+ top: -30px !important;
+}
+
+.timeline ol li .timeline-item::before {
+ content: '';
+ position: absolute;
+ top: 100%;
+ left: 0;
+ width: 0;
+ height: 0;
+ border-style: solid;
+
+}
+
+.timeline ol li:nth-child(odd) .timeline-item {
+ top: -16px;
+ transform: translateY(-100%);
+ box-shadow: 0 4px 6px 0 hsla(0, 0%, 0%, 0.2);
+}
+
+.timeline ol li:nth-child(even) .timeline-item {
+ box-shadow: 0 4px 6px 0 hsla(0, 0%, 0%, 0.2);
+ top: calc(100% + 16px);
+}
+.timeline ol li:nth-child(odd) .timeline-item::before {
+ top: 100%;
+ border-width: 8px 8px 0 0;
+ border-color: white transparent transparent transparent;
+}
+.timeline ol li:nth-child(even) .timeline-item::before {
+ top: -8px;
+ border-width: 8px 0 0 8px;
+ border-color: transparent transparent transparent white;
+}
+
+
.timeline {
@@ -886,3 +1034,252 @@ html[dir=rtl] .hint-container.danger .hint-container-title:before {
.hint-container.info code {
background:var(--info-code-bg-color)
}
+
+
+/*POPUP*/
+.popup {
+ position: relative;
+ display: inline-block;
+ cursor: pointer;
+ -webkit-user-select: none;
+ -moz-user-select: none;
+ -ms-user-select: none;
+ user-select: none;
+}
+
+/* The actual popup */
+.popup .popuptext {
+ visibility: hidden;
+ min-width: 50vw;
+ min-height: 20vw;
+ background-color: #555;
+ color: #fff;
+ text-align: center;
+ border-radius: 6px;
+ z-index: 1;
+ position: absolute;
+ top:0;
+ bottom: 0;
+ left: 0;
+ right: 0;
+}
+
+/* Toggle this class - hide and show the popup */
+.popup .show {
+ visibility: visible;
+ -webkit-animation: fadeIn 1s;
+ animation: fadeIn 1s;
+}
+.tl-butt img:hover{
+ cursor: pointer;
+ box-shadow: 3px 3px 10px black;
+}
+/* Add animation (fade in the popup) */
+@-webkit-keyframes fadeIn {
+ from {opacity: 0;}
+ to {opacity: 1;}
+}
+
+@keyframes fadeIn {
+ from {opacity: 0;}
+ to {opacity:1 ;}
+}
+
+.tabcontent {
+ display: none;
+ padding: 6px 12px;
+ border: 1px solid #ccc;
+}
+
+
+/*GALLERY*/
+.gall {
+ --s: 150px; /* control the size */
+ --g: 10px; /* control the gap */
+ display: grid;
+ margin: calc(var(--s) + var(--g));
+}
+
+.gall > img {
+ grid-area: 1/1;
+ width: var(--s);
+ aspect-ratio: 1.15;
+ object-fit: cover;
+ clip-path: polygon(25% 0%, 75% 0%, 100% 50%,75% 100%,25% 100%,0 50%);
+ transform: translate(var(--_x,0),var(--_y,0)) scale(var(--_t,1));
+ cursor: pointer;
+ filter: grayscale(80%);
+ transition: .2s linear;
+}
+.gall > img:hover {
+ filter: grayscale(0);
+ z-index: 1;
+ --_t: 1.2;
+}
+
+.gall > img:nth-child(1) {--_y: calc(-100% - var(--g))}
+.gall > img:nth-child(7) {--_y: calc( 100% + var(--g))}
+.gall > img:nth-child(3), .gall > img:nth-child(5) {--_x: calc(-75% - .87*var(--g))}
+.gall > img:nth-child(4), .gall > img:nth-child(6) {--_x: calc( 75% + .87*var(--g))}
+.gall > img:nth-child(3),.gall > img:nth-child(4) {--_y: calc(-50% - .5*var(--g))}
+.gall > img:nth-child(5), .gall > img:nth-child(6) {--_y: calc( 50% + .5*var(--g))}
+
+
+
+.wrapper{
+ width: 500px;
+ height: 100%;
+ background: #fff;
+ margin: 15px auto 0;
+}
+.wrapper .tabs_wrap{
+ padding: 20px;
+ border-bottom: 1px solid #ebedec;
+}
+.wrapper .tabs_wrap ul{
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-pack: center;
+ -ms-flex-pack: center;
+ justify-content: center;
+}
+.wrapper .tabs_wrap ul li{
+ list-style-type: none;
+ width: 135px;
+ text-align: center;
+ background: #e9ecf1;
+ border-right: 1px solid #c1c4c9;
+ padding: 13px 15px;
+ cursor: pointer;
+ -webkit-transition: all 0.2s ease;
+ -o-transition: all 0.2s ease;
+ transition: all 0.2s ease;
+}
+
+.wrapper .tabs_wrap ul li:first-child{
+ border-top-left-radius: 25px;
+ border-bottom-left-radius: 25px;
+}
+
+.wrapper .tabs_wrap ul li:last-child{
+ border-right: 0px;
+ border-top-right-radius: 25px;
+ border-bottom-right-radius: 25px;
+}
+
+.wrapper .tabs_wrap ul li:hover,
+.wrapper .tabs_wrap ul li.active{
+ background: #7fc469;
+ color: #fff;
+}
+
+
+.gall-a {
+ --s: 200px; /* control the size */
+ --g: 8px; /* control the gap */
+
+ display: grid;
+ grid: auto-flow var(--s)/repeat(2,var(--s));
+ gap: var(--g);
+}
+.gall-a > span {
+ width: 100%;
+ aspect-ratio: 1;
+ z-index: 0;
+ position: relative;
+ transition: .25s,z-index 0s .25s;
+ background-color: lightgray;
+}
+.gall-b:hover{
+ background-color: var(--ourbeige);
+}
+.bg-act{
+ background-color: var(--background)!important;
+}
+.gall-a > span > div > img{
+ width: 8rem;
+ position: absolute;
+ cursor: pointer;
+}
+
+.gall-a > span:nth-child(1) > div > img{
+ bottom: 0.5rem;
+ right: 1rem;
+}
+.gall-a > span:nth-child(2) > div > img{
+ bottom: 0.5rem;
+ left : 1rem;
+}
+.gall-a > span:nth-child(3) > div > img{
+ top: 0.5rem;
+ right: 1rem;
+}
+.gall-a > span:nth-child(4) > div > img{
+ top: 0.5rem;
+ left: 1rem;
+}
+
+.gall-a > span:nth-child(1){
+ clip-path: circle(var(--_c,70% at 70% 70%));
+ place-self: start;
+}
+.gall-a > span:nth-child(2){
+ clip-path: circle(var(--_c,70% at 30% 70%));
+ place-self: start end;
+}
+.gall-a > span:nth-child(3){
+ clip-path: circle(var(--_c,70% at 70% 30%));
+ place-self: end start;
+}
+.gall-a > span:nth-child(4){
+ clip-path: circle(var(--_c,70% at 30% 30%));
+ place-self: end;
+}
+
+.buffer{
+ height: 5vw;
+}
+
+.explore{
+ position: absolute;
+ right: -4vw;
+ bottom: 8vw;
+ z-index: 1;
+ transform: rotate(-35deg);
+ font-size: xx-large;
+}
+
+.team-container {
+ grid-template-columns: 100px 50px 100px;
+ grid-template-rows: 80px auto 80px;
+ column-gap: 10px;
+ row-gap: 15px;
+}
+
+/* TEAM */
+.lnp{
+ background-image: url("https://static.igem.wiki/teams/5247/scientific-figures/lnp.png");
+ height: 12rem;
+ width: 12rem;
+ background-size: 12rem;
+ background-repeat: no-repeat;
+ align-items: center;
+}
+.lnp > img{
+ display: block;
+ margin-left: auto;
+ margin-right: auto;
+ width: 16rem !important;
+ max-width: 100% !important;
+ transition: all 1s ease;
+ border: 5px solid var(--text-primary);
+}
+.lnp > img:hover{
+ display: block;
+ margin-left: auto;
+ margin-right: auto;
+ width: 66% !important;
+ max-width: 66% !important;
+
+}
\ No newline at end of file
diff --git a/src/App/App.scss b/src/App/App.scss
index 6e43c7ce..5c80a0ca 100644
--- a/src/App/App.scss
+++ b/src/App/App.scss
@@ -102,4 +102,222 @@ $background: #E4FFF7;
span:nth-of-type(#{$item}){
animation-delay: #{(3 + ($item/10))}s;
}
-}
\ No newline at end of file
+}
+
+
+
+$size: 6;
+#gallery {
+ display: grid;
+ height: calc(100vh - 10px);
+ grid-template: repeat($size, 1fr) / repeat($size, 1fr);
+ grid-gap: 0.5em;
+ @media (max-width: 800px) {
+ display: flex;
+ align-items: flex-start;
+ flex-wrap: wrap;
+ justify-content: center;
+ & > div {
+ width: 48%;
+ margin: 1%;
+ @media (max-width: 350px) {
+ width: 98%;
+ }
+ }
+ }
+ & > div {
+ //Grid Structure
+ &:nth-child(#{$size}n + 1) {
+ grid-column: span 2;
+ grid-row: span 2;
+ }
+ &:nth-child(2) {
+ grid-column: span 3;
+ grid-row: span 3;
+ }
+ &:nth-child(4) {
+ grid-column: span 1;
+ grid-row: span 2;
+ }
+ & > a {
+ opacity: 0;
+ position: absolute;
+ color: #000;
+ background-color: #000;
+ font: bold 4em "Helvetica";
+ $shadow: 5px #fff;
+ text-shadow: 0 -1px $shadow, -1px 0px $shadow, 0 1px $shadow,
+ 1px 0px $shadow;
+ padding: 2rem;
+ mix-blend-mode: difference;
+ width: 100%;
+ height: 100%;
+ transition: all ease 1s;
+ }
+ & > img {
+ width: 100%;
+ min-height: 100%;
+ transition: all ease 1s;
+ }
+
+
+ }
+ & > div {
+ overflow: hidden;
+ position: relative;
+ box-shadow: 0 2px 8px 0 rgba(#000, 0.2), 0 3px 20px 0 rgba(#000, 0.19);
+ }
+ div,
+ a {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ text-decoration: none;
+ }
+}
+//
+// lightbox
+//
+[id^="lightbox-"] {
+ &:target {
+ opacity:1;
+ pointer-events:inherit;
+ img{
+ filter:blur(0);
+ }
+ }
+ position: fixed;
+ top: 0;
+ left: 0;
+ width: 100vw;
+ height: 100vh;
+ background-color: rgba(black, 0.5);
+ display: flex;
+ opacity:0;
+ transition: opacity 450ms ease-in-out;
+ align-items: center;
+ justify-content: center;
+ pointer-events: none;
+ .content {
+ max-width: 90%;
+ position: relative;
+ color: #fff;
+ &:hover > a.close {
+ opacity: 1;
+ transform: scale(1, 1);
+ }
+ &:hover > .title {
+ opacity: 1;
+ transform: translateY(-3px); //Fix extra line at end
+ &::after{
+ opacity:1;
+ }
+ }
+ & > * {
+ transition: all 450ms ease-in-out;
+ }
+ }
+ .title {
+ display: block;
+ margin: 0;
+ padding: 1em;
+ position: absolute;
+ bottom: 0;
+ width: 100%;
+ transform: translateY(50%);
+ font-size:1.5em;
+ opacity:0;
+ &::after{
+ content: ' ';
+ background-color: rgba(black, 0.4);
+ bottom:0;
+ left:0;
+ height:100%;
+ width:100%;
+ position:absolute;
+ transition: all 350ms ease-in-out 250ms;
+ opacity:0;
+ transform-origin:bottom;
+ mix-blend-mode: soft-light;
+ }
+ }
+ img {
+ max-height: 90vh;
+ max-width: 100%;
+ margin: 0;
+ padding: 0;
+ filter: blur(50px);
+ }
+ a.close {
+ width: 2em;
+ height: 2em;
+ position: absolute;
+ right: 0;
+ top: 0;
+ background-color: rgba(black, 0.5);
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ transform: scale(0, 0);
+ opacity: 0;
+ transform-origin: right top;
+ text-decoration:none;
+ color:#fff;
+ &::after {
+ content: "X";
+ }
+ }
+}
+
+
+.fancy {
+ position: relative;
+ white-space: nowrap;
+ &:after {
+ --deco-height: 0.3125em;
+ content: "";
+ position: absolute;
+ left: 0;
+ right: 0;
+ bottom: calc(var(--deco-height) * -0.625);
+ height: var(--deco-height);
+ background-image: url("../components/data/stroke.svg");
+ background-size: auto 100%;
+ background-repeat: round;
+ background-position: 0em;
+ }
+}
+
+.lines {
+ $color: #59c1fe;
+ position: fixed;
+ width: 100vw;
+ height: 4em;
+ background: linear-gradient(rgba($color, 0.2) 20%, $color 40%, $color 60%, rgba($color, 0.2) 80%);
+ background-size: 1px 0.5em;
+ box-shadow: 0 0 1em rgba($color, 0.4);
+ transform: translateY(-1em);
+ left: 0;
+}
+
+/* STROKE TEXT */
+$stroke: #111827;
+$shadow: #bc15aa;
+@mixin stroke-width($property) {
+ -webkit-text-stroke-width: $property;
+ -moz-text-stroke-width: $property;
+}
+
+@mixin stroke-color($property) {
+ -webkit-text-stroke-color: $property;
+ -moz-text-stroke-color: $property;
+}
+.stroke {
+ @include stroke-width(2px);
+ @include stroke-color($stroke);
+ color: transparent;
+ font-size: 5vw;
+}
+.shadow-stroke {
+ text-shadow: 0.25vw 0.25vw $shadow;
+}
\ No newline at end of file
diff --git a/src/App/App.tsx b/src/App/App.tsx
index 8458084b..c2a7117b 100644
--- a/src/App/App.tsx
+++ b/src/App/App.tsx
@@ -10,7 +10,7 @@ import { getPathMapping } from "../utils/getPathMapping.ts";
import { stringToSlug } from "../utils/stringToSlug.ts";
import { useEffect} from "react";
import Villbuttonrow from "../components/Villagebuttons.tsx";
-import Sidebar from "../components/Sidebar.tsx";
+/* import Sidebar from "../components/Sidebar.tsx"; */
import "../utils/highlight.js";
const App = () => {
@@ -37,7 +37,7 @@ const App = () => {
{/* Header and PageContent */}
<Routes>
{Object.entries(pathMapping).map(
- ([path, { navlist, title, lead, component: Component}]) => (
+ ([path, {title, lead, component: Component}]) => (
<Route
key={path}
path={path}
@@ -47,11 +47,15 @@ const App = () => {
{/* Page content */}
<div className="container-fluid">
<div className="row ">
- <div className="col-2 d-none d-lg-block">
+ <div className="col-1 d-none d-lg-block" >
+ {/* <!-- empty so far --> */}
+
+ </div>
+ {/* <div className="col-2 d-none d-lg-block">
<div className="sticky-top sidebar">
<Sidebar nums={navlist || [""]}></Sidebar>
</div>
- </div>
+ </div> */}
<div className="col">
<Component />
<Villbuttonrow/>
diff --git a/src/Ideas.sx b/src/Ideas.sx
new file mode 100644
index 00000000..51441e15
--- /dev/null
+++ b/src/Ideas.sx
@@ -0,0 +1,17 @@
+<div className="gall">
+ <img src="https://picsum.photos/id/1040/300/300" alt="a house on a mountain"/>
+ <img src="https://picsum.photos/id/106/300/300" alt="sime pink flowers"/>
+ <img src="https://picsum.photos/id/136/300/300" alt="big rocks with some trees"/>
+ <img src="https://picsum.photos/id/1039/300/300" alt="a waterfall, a lot of tree and a great view from the sky"/>
+ <img src="https://picsum.photos/id/110/300/300" alt="a cool landscape"/>
+ <img src="https://picsum.photos/id/1047/300/300" alt="inside a town between two big buildings"/>
+ <img src="https://picsum.photos/id/1057/300/300" alt="a great view of the sea above the mountain"/>
+ <img src="https://picsum.photos/id/1047/300/300" alt="inside a town between two big buildings"/>
+</div>
+
+
+<div> Icons made by <a href="https://www.freepik.com" title="Freepik"> Freepik </a> from <a href="https://www.flaticon.com/" title="Flaticon">www.flaticon.com'</a></div>
+<div> Icons made by <a href="https://www.freepik.com" title="Freepik"> Freepik </a> from <a href="https://www.flaticon.com/" title="Flaticon">www.flaticon.com'</a></div>
+<a href="https://www.flaticon.com/free-icons/download" title="download icons">Download icons created by Kiranshastry - Flaticon</a>
+<div> Icons made by <a href="https://www.freepik.com" title="Freepik"> Freepik </a> from <a href="https://www.flaticon.com/" title="Flaticon">www.flaticon.com'</a></div>
+
diff --git a/src/components/HorizontalTimeline.tsx b/src/components/HorizontalTimeline.tsx
new file mode 100644
index 00000000..2712a6e0
--- /dev/null
+++ b/src/components/HorizontalTimeline.tsx
@@ -0,0 +1,168 @@
+
+
+
+
+
+
+
+function TimeItem({color, tag, title, children, pic, author, tabid}: ItemProps){
+ return(
+ <li className="timelineolli">
+ <div className="timeline-item moretop">
+ <div className="">
+ <div className="t-tag" style={{ background: color }}>
+ {tag}
+ </div>
+ <div className="row align-items-center">
+ <div className="col" >
+ <span className="tl-butt" onClick={Open({person: author})}> <img className="img-round" src={pic} /></span>
+ </div>
+ <div className="col" >
+ {title}
+ </div>
+ </div>
+
+ <p>{children}</p>
+ <div className="tab">
+ <button className="tablinks" onClick={openCity({cityName: tabid})}>More</button>
+ </div>
+ </div>
+ </div>
+ </li>
+ )
+ }
+
+
+
+
+ export function AllPopus(){
+ let rows = []
+ for ( let i = 0; i < data.length; i++ ){
+ rows.push(<Popup person={data[i].author}>
+ Hi
+ </Popup>)
+ }
+ return rows;
+ }
+
+ export function TimeHori(){
+
+ return(
+ <div>
+
+ <section className="timeline row align-items-center">
+ <ol className="timelineol">
+ <AllItems></AllItems>
+ <li className="timelineolli"></li>
+ </ol>
+
+
+ </section>
+ </div>
+
+ )
+ }
+
+ function Open({person}:{person: string}){
+ const openPop = (event : React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
+ var popup = document.getElementById(person);
+ popup!.classList.toggle("show");
+ }
+ return openPop;
+ }
+
+ interface PopProps {
+ person: string,
+ children: React.ReactNode
+ }
+
+
+ function Popup({person, children}: PopProps){
+ return(
+ <div id="myPopup" className="popup">
+ <span className="popuptext" id={person}>
+ <div>
+ {children}
+ </div>
+ <button onClick={Open({person})} >Close</button>
+ </span>
+
+ </div>
+ )
+ }
+
+
+ function openCity({cityName}:{cityName: string}) {
+ const opencity = (event : React.MouseEvent<HTMLButtonElement, MouseEvent>) =>{
+ var i, tabcontent, tablinks;
+ tabcontent = document.getElementsByClassName("tabcontent");
+ for (i = 0; i < tabcontent.length; i++) {
+ (tabcontent[i] as HTMLElement).style.display = "none";
+ }
+ tablinks = document.getElementsByClassName("tablinks");
+ for (i = 0; i < tablinks.length; i++) {
+ tablinks[i].className = tablinks[i].className.replace(" active", "");
+ }
+ document.getElementById(cityName)!.style.display = "block";
+ event.currentTarget.className += " active";
+ }
+ return opencity;
+ }
+
+ interface ItemProps {
+ title: string ,
+ children: React.ReactNode;
+ tag: string,
+ color: string,
+ pic: string,
+ author: string,
+ tabid: string
+ }
+
+
+
+
+ function AllItems(){
+ let rows = []
+ for ( let i = 0; i < data.length; i++ ){
+ rows.push(<TimeItem
+ title={data[i].title}
+ pic={data[i].pic}
+ tag={data[i].tag}
+ color={data[i].color}
+ author={data[i].author}
+ tabid={data[i].tabid}
+ >
+ {data[i].text}
+ </TimeItem>)
+ }
+ return rows;
+ }
+
+
+let data = [
+ {
+ title: "Deutlich längerer Titel zum Test",
+ pic: "https://static.igem.wiki/teams/5247/placeholders/placehilderperson.jpeg",
+ tag: "Langer langer TAgs",
+ color: "blue",
+ author: "author",
+ tabid: "Eins",
+ text: "Text",
+ },
+ {
+ title: "Deutlich längerer Titel zum Test" ,
+ pic: "https://static.igem.wiki/teams/5247/placeholders/placehilderperson.jpeg",
+ tag: "Tag",
+ color: "blue",
+ author: "a",
+ tabid: "Paris",
+ text: "Text",
+ }
+ ]
+
+
+
+
+
+
diff --git a/src/components/data/humanpractice.js b/src/components/data/humanpractice.js
new file mode 100644
index 00000000..ac5f33e1
--- /dev/null
+++ b/src/components/data/humanpractice.js
@@ -0,0 +1,20 @@
+export const HPdata = [
+ {
+ title: "Deutlich längerer Titel zum Test",
+ pic: "https://static.igem.wiki/teams/5247/placeholders/placehilderperson.jpeg",
+ tag: "Langer langer TAgs",
+ color: "blue",
+ author: "author",
+ tabid: "Eins",
+ text: "Text",
+ },
+ {
+ title: "Deutlich längerer Titel zum Test" ,
+ pic: "https://static.igem.wiki/teams/5247/placeholders/placehilderperson.jpeg",
+ tag: "Tag",
+ color: "blue",
+ author: "a",
+ tabid: "Paris",
+ text: "Text",
+ }
+ ]
\ No newline at end of file
diff --git a/src/components/data/stroke.svg b/src/components/data/stroke.svg
new file mode 100644
index 00000000..50922ee5
--- /dev/null
+++ b/src/components/data/stroke.svg
@@ -0,0 +1,2 @@
+<svg width="100" height="64" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(#a)"><path d="M-17 30.5C-1 22 72-4 54 13 37.9 28.2-2.5 57.5 16 55.5s72-29 104-40" stroke="#850F78" stroke-width="10"/></g><defs><clipPath id="a"><path fill="#fff" d="M0 0h100v64H0z"/></clipPath></defs></svg>
+
diff --git a/src/components/headings.tsx b/src/components/headings.tsx
index 2dfcdf4d..a60fbd52 100644
--- a/src/components/headings.tsx
+++ b/src/components/headings.tsx
@@ -37,6 +37,14 @@ export function H1({text}:{text: string}){
)
}
+/* export function Hprompt({text}:{text: string}){
+ return(
+ <div>
+ <h2>{text}</h2>
+ <hr/>
+ </div>
+ )
+} */
export function H2({text}:{text: string}){
return(
<div>
@@ -89,4 +97,21 @@ export function Hwave({text}:{text: string}){
)
}
+export function Hpopart({text}:{text: string}){
+return(
+ <div className="relative">
+ <div className="absolute popart">
+ {text}
+ </div>
+ </div>
+)
+}
+
+export function Hshadone({text}:{text: string}){
+ return(
+ <div>
+ <p className="stroke shadow-stroke">{text}</p>
+ </div>
+ )
+}
export default H1;
\ No newline at end of file
diff --git a/src/components/photo-grid.tsx b/src/components/photo-grid.tsx
index 2e805995..bcb58b64 100644
--- a/src/components/photo-grid.tsx
+++ b/src/components/photo-grid.tsx
@@ -1,28 +1,28 @@
/* */
-import PhotoAlbum from "react-photo-album";
+
const images = [
- {src:"https://static.igem.wiki/teams/5247/photos/meetup/badges.jpeg", width: 320, height: 212},
- {src:"https://static.igem.wiki/teams/5247/photos/meetup/joern.jpeg", width: 320, height: 212},
- {src:"https://static.igem.wiki/teams/5247/photos/meetup/chekin.jpeg", width: 320, height: 212},
- {src:"https://static.igem.wiki/teams/5247/photos/meetup/sinan.jpeg", width: 320, height: 212},
- {src:"https://static.igem.wiki/teams/5247/photos/meetup/party.jpeg", width: 320, height: 212},
- {src:"https://static.igem.wiki/teams/5247/photos/meetup/orgateam.jpeg", width: 320, height: 212},
- {src:"https://static.igem.wiki/teams/5247/photos/meetup/hall.jpeg", width: 320, height: 212},
- {src:"https://static.igem.wiki/teams/5247/photos/meetup/bye1.jpeg", width: 320, height: 212},
- {src:"https://static.igem.wiki/teams/5247/photos/meetup/uni.jpeg", width: 320, height: 212},
- {src:"https://static.igem.wiki/teams/5247/photos/meetup/talking.jpeg", width: 320, height: 212},
- {src:"https://static.igem.wiki/teams/5247/photos/meetup/kristian.jpeg", width: 320, height: 212},
- {src:"https://static.igem.wiki/teams/5247/photos/meetup/affe.jpeg", width: 320, height: 212},
- {src:"https://static.igem.wiki/teams/5247/photos/meetup/margburg.jpeg", width: 320, height: 212},
- {src:"https://static.igem.wiki/teams/5247/photos/meetup/dietz.jpeg", width: 320, height: 212},
- {src:"https://static.igem.wiki/teams/5247/photos/meetup/wageningen.jpeg", width: 320, height: 212},
- {src:"https://static.igem.wiki/teams/5247/photos/meetup/aachen.jpeg", width: 320, height: 212},
- {src:"https://static.igem.wiki/teams/5247/photos/meetup/orgateam.jpeg", width: 320, height: 212},
- {src:"https://static.igem.wiki/teams/5247/photos/meetup/orgateam.jpeg", width: 320, height: 212},
- {src:"https://static.igem.wiki/teams/5247/photos/meetup/badges.jpeg", width: 320, height: 212},
- {src:"https://static.igem.wiki/teams/5247/photos/meetup/joern.jpeg", width: 320, height: 212},
- {src:"https://static.igem.wiki/teams/5247/photos/meetup/chekin.jpeg", width: 320, height: 212},
- {src:"https://static.igem.wiki/teams/5247/photos/meetup/sinan.jpeg", width: 320, height: 212},
+ {src:"https://static.igem.wiki/teams/5247/photos/meetup/badges.jpeg", width: 320, height: 212, tabs: ""},
+ {src:"https://static.igem.wiki/teams/5247/photos/meetup/joern.jpeg", width: 320, height: 212, tabs: ""},
+ {src:"https://static.igem.wiki/teams/5247/photos/meetup/chekin.jpeg", width: 320, height: 212, tabs: ""},
+ {src:"https://static.igem.wiki/teams/5247/photos/meetup/sinan.jpeg", width: 320, height: 212, tabs: ""},
+ {src:"https://static.igem.wiki/teams/5247/photos/meetup/party.jpeg", width: 320, height: 212, tabs: ""},
+ {src:"https://static.igem.wiki/teams/5247/photos/meetup/orgateam.jpeg", width: 320, height: 212, tabs: ""},
+ {src:"https://static.igem.wiki/teams/5247/photos/meetup/hall.jpeg", width: 320, height: 212, tabs: ""},
+ {src:"https://static.igem.wiki/teams/5247/photos/meetup/bye1.jpeg", width: 320, height: 212, tabs: ""},
+ {src:"https://static.igem.wiki/teams/5247/photos/meetup/uni.jpeg", width: 320, height: 212, tabs: ""},
+ {src:"https://static.igem.wiki/teams/5247/photos/meetup/talking.jpeg", width: 320, height: 212, tabs: ""},
+ {src:"https://static.igem.wiki/teams/5247/photos/meetup/kristian.jpeg", width: 320, height: 212, tabs: ""},
+ {src:"https://static.igem.wiki/teams/5247/photos/meetup/affe.jpeg", width: 320, height: 212, tabs: ""},
+ {src:"https://static.igem.wiki/teams/5247/photos/meetup/margburg.jpeg", width: 320, height: 212, tabs: ""},
+ {src:"https://static.igem.wiki/teams/5247/photos/meetup/dietz.jpeg", width: 320, height: 212, tabs: ""},
+ {src:"https://static.igem.wiki/teams/5247/photos/meetup/wageningen.jpeg", width: 320, height: 212, tabs: ""},
+ {src:"https://static.igem.wiki/teams/5247/photos/meetup/aachen.jpeg", width: 320, height: 212, tabs: ""},
+ {src:"https://static.igem.wiki/teams/5247/photos/meetup/orgateam.jpeg", width: 320, height: 212, tabs: ""},
+ {src:"https://static.igem.wiki/teams/5247/photos/meetup/orgateam.jpeg", width: 320, height: 212, tabs: ""},
+ {src:"https://static.igem.wiki/teams/5247/photos/meetup/badges.jpeg", width: 320, height: 212, tabs: ""},
+ {src:"https://static.igem.wiki/teams/5247/photos/meetup/joern.jpeg", width: 320, height: 212, tabs: ""},
+ {src:"https://static.igem.wiki/teams/5247/photos/meetup/chekin.jpeg", width: 320, height: 212, tabs: ""},
+ {src:"https://static.igem.wiki/teams/5247/photos/meetup/sinan.jpeg", width: 320, height: 212, tabs: ""},
{src:"https://static.igem.wiki/teams/5247/photos/meetup/party.jpeg", width: 320, height: 212},
{src:"https://static.igem.wiki/teams/5247/photos/meetup/orgateam.jpeg", width: 320, height: 212},
{src:"https://static.igem.wiki/teams/5247/photos/meetup/orgateam.jpeg", width: 320, height: 212},
@@ -35,11 +35,14 @@ const images = [
export default function BFHGallery(){
-
- return(
- <div>
- <PhotoAlbum layout="rows" photos={images} />;
- </div>
+ let rows = []
+ for ( let i = 0; i < images.length; i++ ){
+ rows.push(<div><img src={images[i].src}/></div>)
+ }
+ return(
+ <div id="gallery">
+ {rows}
+ </div>
)
}
diff --git a/src/contents/Bfh.tsx b/src/contents/Bfh.tsx
index 28f5c42a..cc47f56d 100644
--- a/src/contents/Bfh.tsx
+++ b/src/contents/Bfh.tsx
@@ -1,16 +1,50 @@
- import { MyTimeline } from "../components/My-Timeline";
-import { Box, Tab } from "@mui/material";
-import {TabContext, TabList, TabPanel} from '@mui/lab';
-import React from "react";
+import { MyTimeline } from "../components/My-Timeline";
import BFHGallery from "../components/photo-grid";
import BFHpdf from "../components/pdfs";
-import { H2 } from "../components/headings";
+import { H2} from "../components/headings";
export function Bfh() {
return (
<>
- <div className="row">
+ <div className="" /* style={{ paddingTop: "5vw"}} */>
+ <div className="row align-items-center" >
+ <div className="col" style={{position: "relative"}}>
+ <div className="explore">
+ <b className="fancy">Explore!</b>
+ </div>
+ </div>
+ <div className="col">
+ <div className="gall-a">
+ <span className="gall-b" typeof="button" onClick={openCity({cityName: "about"})}>
+ <div>
+ <img src="https://static.igem.wiki/teams/5247/design/icons/united.png" alt="a house on a mountain"/>
+ </div>
+ </span>
+ <span className="gall-b" typeof="button" onClick={openCity({cityName: "gall"})}>
+ <div>
+ <img src="https://static.igem.wiki/teams/5247/design/icons/gallery.png" alt="a house on a mountain"/>
+ </div>
+ </span>
+ <span className="gall-b" typeof="button" onClick={openCity({cityName: "timeline"})}>
+ <div>
+ <img src="https://static.igem.wiki/teams/5247/design/icons/timeline.png" alt="a house on a mountain"/>
+ </div>
+ </span>
+ <span className="gall-b" typeof="button" onClick={openCity({cityName: "pdf"})}>
+ <div>
+ <img src="https://static.igem.wiki/teams/5247/design/icons/file.png" alt="a house on a mountain"/>
+ </div>
+ </span>
+ </div>
+ </div>
+ <div className="col">
+
+ </div>
+ </div>
+ <div className="buffer">
+
+ </div>
<div className="col">
<LabTabs></LabTabs>
</div>
@@ -24,29 +58,24 @@ export function Bfh() {
}
export function LabTabs() {
- const [value, setValue] = React.useState('1');
-
- const handleChange = (_event: React.SyntheticEvent, newValue: string) => {
- setValue(newValue);
- };
return (
- <Box sx={{ width: '100%', typography: 'body1' }}>
- <TabContext value={value}>
- <Box sx={{ borderBottom: 1, borderColor: 'divider' }}>
- <TabList onChange={handleChange} aria-label="lab API tabs example">
- <Tab label="About" value="2" />
- <Tab label="Timeline" value="1" />
- <Tab label="Gallery" value="3" />
- <Tab label="Downloads" value="4" />
- </TabList>
- </Box>
- <TabPanel value="2"> <About/> </TabPanel>
- <TabPanel value="1"> <MyTimeline></MyTimeline> </TabPanel>
- <TabPanel value="3"> <BFHGallery/> </TabPanel>
- <TabPanel value="4"> <BFHpdf></BFHpdf> </TabPanel>
- </TabContext>
- </Box>
+ <div>
+ <div id="pdf" className="tabcontent">
+ <BFHpdf></BFHpdf>
+ </div>
+ <div id="timeline" className="tabcontent">
+ <MyTimeline></MyTimeline>
+ </div>
+ <div id="gall" className="tabcontent">
+ <BFHGallery/>
+ </div>
+ <div id="about" className="tabcontent">
+ <About/>
+ </div>
+
+
+ </div>
);
}
@@ -58,3 +87,26 @@ export function About(){
</div>
)
}
+
+
+function openCity({cityName}:{cityName: string}) {
+ const opencity = (event : React.MouseEvent<HTMLButtonElement, MouseEvent>) =>{
+ var i, tabcontent, tablinks;
+ tabcontent = document.getElementsByClassName("tabcontent");
+ for (i = 0; i < tabcontent.length; i++) {
+ (tabcontent[i] as HTMLElement).style.display = "none";
+ }
+ tablinks = document.getElementsByClassName("gall-b");
+ for (i = 0; i < tablinks.length; i++) {
+ tablinks[i].className = tablinks[i].className.replace(" bg-act", "");
+ }
+
+ document.getElementById(cityName)!.style.display = "block";
+ event.currentTarget.className += " bg-act";
+ }
+ return opencity;
+}
+
+
+
+
\ No newline at end of file
diff --git a/src/contents/human-practices.tsx b/src/contents/human-practices.tsx
index 44b815c4..49092dc4 100644
--- a/src/contents/human-practices.tsx
+++ b/src/contents/human-practices.tsx
@@ -1,3 +1,16 @@
+/*
+- seitwärts
+- mit Farben und Text anzeigen wozu die gehören
+- bei show more unten drunter Tabs öffnen
+- wenn man auf die Person klickt soll es Infos über die Person anzeigen
+- kann mn die Karten nach Links und nach rechts ausweiten zb für Mehr infos für die Person?
+- Meilensteine als Popup
+- Filter mit HalbkreisDing als Tabsteuerung | Einteilung nach Bereich (Academia, Insustry, ..., und auch nach Delivery und Mechanism)
+- DNA Strang als Timeline?
+*/
+
+import { TimeHori } from "../components/HorizontalTimeline";
+import { AllPopus } from "../components/HorizontalTimeline";
export function HumanPractices() {
@@ -5,96 +18,28 @@ export function HumanPractices() {
return (
<>
- <div className="row mt-4">
- <div className="col">
- <div className="bd-callout bd-callout-info">
- <h4>Silver Medal Criterion #2</h4>
- <p>
- Explain how you have determined your work is responsible and good
- for the world.
- </p>
- <hr />
- <p>
- Please see the{" "}
- <a href="https://competition.igem.org/judging/medals">
- 2024 Medals Page
- </a>{" "}
- for more information.
- </p>
- </div>
+
+ <AllPopus></AllPopus>
+ <TimeHori></TimeHori>
+ <div>
+ <div id="Eins" className="tabcontent">
+ <h3>London</h3>
+ <p>London is the capital city of England.</p>
+ </div>
- <div className="bd-callout bd-callout-info">
- <h4>Best Integrated Human Practices</h4>
- <p>
- How does your project affect society and how does society
- influence the direction of your project? How might ethical
- considerations and stakeholder input guide your project purpose
- and design and the experiments you conduct in the lab? How does
- this feedback enter into the process of your work all through the
- iGEM competition? Document a thoughtful and creative approach to
- exploring these questions and how your project evolved in the
- process to compete for this award!
- </p>
- <p>
- To compete for the Best Integrated Human Practices prize, select
- the prize on the{" "}
- <a href="https://competition.igem.org/deliverables/judging-form">
- judging form
- </a>{" "}
- and describe your work on this page.
- </p>
- <hr />
- <p>
- Please see the{" "}
- <a href="https://competition.igem.org/judging/awards">
- 2024 Awards Page
- </a>{" "}
- for more information.
- </p>
- </div>
- </div>
+ <div id="Paris" className="tabcontent">
+ <h3>Paris</h3>
+ <p>Paris is the capital of France.</p>
</div>
- <div className="row mt-4">
- <div className="col-lg-8">
- <h2>Overview</h2>
- <hr />
- <p>
- At iGEM we believe societal considerations should be upfront and
- integrated throughout the design and execution of synthetic biology
- projects. “Human Practices†refers to iGEM teams' efforts to
- actively consider how the world affects their work and their work
- affects the world. Through your Human Practices activities, your
- team should demonstrate how you have thought carefully and
- creatively about whether your project is responsible and good for
- the world. We invite you to explore issues relating (but not
- limited) to the ethics, safety, security, and sustainability of your
- project, and to show how this exploration feeds back into your
- project purpose, design, and execution.
- </p>
- <p>
- Please note you can compete for the Silver Medal criterion #2 and
- the Best Integrated Human Practices prize with this page.
- </p>
- <p>
- For more information, please see the{" "}
- <a href="https://responsibility.igem.org/human-practices/what-is-human-practices">
- Human Practices Hub
- </a>
- .
- </p>
- <p>
- On this page, your team should document all of your Human Practices
- work and activities. You should write about the Human Practices
- topics you considered in your project, document any activities you
- conducted to explore these topics (such as engaging with experts and
- stakeholders), describe why you took a particular approach
- (including referencing any work you built upon), and explain if and
- how you integrated takeaways from your Human Practices work back
- into your project purpose, design and/or execution.
- </p>
- </div>
+ <div id="Zwei" className="tabcontent">
+ <h3>Tokyo</h3>
+ <p>Tokyo is the capital of Japan.</p>
</div>
+ </div>
+
</>
);
}
+
+
diff --git a/src/contents/index.tsx b/src/contents/index.tsx
index 783fab67..2ec44d0c 100644
--- a/src/contents/index.tsx
+++ b/src/contents/index.tsx
@@ -1,3 +1,5 @@
+
+
export * from "./Home.tsx";
// Team
export * from "./team.tsx";
diff --git a/src/contents/team.tsx b/src/contents/team.tsx
index 708d6c32..bf880965 100644
--- a/src/contents/team.tsx
+++ b/src/contents/team.tsx
@@ -5,40 +5,44 @@ export function Team() {
return (
<>
- <div className="row">
- <div className="col-8">
- <h2>What should this page contain?</h2>
- <hr />
- <ul>
- <li>
- Include pictures of your teammates, don't forget instructors and
- advisors!
- </li>
- <li>
- You can add a small biography or a few words from each team
- member, to tell us what you like, and what motivated you to
- participate in iGEM.
- </li>
- <li>
- Take team pictures! Show us your school, your lab and little bit
- of your city.
- </li>
- <li>
- Remember that image galleries can help you showcase many pictures
- while saving space.
- </li>
- </ul>
- <div className="bd-callout bd-callout-info">
- <strong>Important:</strong> Your wiki pages will be archived at the
- end of the iGEM season and this content will remain online. Please
- keep this in mind as you post photos and personal information on
- this page.
- </div>
+ <div className="row center">
+ <div className="col">
+ <Steckbrief url="https://static.igem.wiki/teams/5247/placeholders/placehilderperson.jpeg"> # </Steckbrief>
</div>
- <div className="col-4">
-
+ <div className="col">
+ <Steckbrief url="https://static.igem.wiki/teams/5247/placeholders/placehilderperson.jpeg"> # </Steckbrief>
+ </div>
+ <div className="col">
+ <Steckbrief url="https://static.igem.wiki/teams/5247/placeholders/placehilderperson.jpeg"> # </Steckbrief>
</div>
</div>
+ <div className="row center">
+ <div className="col">#</div>
+ <div className="col">#</div>
+ <div className="col">#</div>
+ </div>
</>
);
}
+
+
+interface SteckProps{
+ name?: string;
+ url: string;
+ children: React.ReactNode;
+
+}
+
+function Steckbrief({children, url}: SteckProps){
+ return(
+ <>
+ <div className="lnp center">
+ <img src={url} className="img-round"></img>
+ </div>
+ <div className="center">
+ <p>Hi</p>
+ </div>
+ {children}
+ </>
+ )
+}
diff --git a/src/contents/wiki.tsx b/src/contents/wiki.tsx
index 2c18ec74..5a986cae 100644
--- a/src/contents/wiki.tsx
+++ b/src/contents/wiki.tsx
@@ -1,19 +1,127 @@
-
-
+import { Box, Tab } from "@mui/material";
+import {TabContext, TabList, TabPanel} from '@mui/lab';
+import React from "react";
+import Collapsible from "../components/Collapsible";
export function Wiki () {
return (
- <>
+ <>
<div className="row">
<div className="col">
+ <WikiTabs></WikiTabs>
</div>
</div>
<div className="row">
<div className="d-flex flex-column justify-content-center align-items-center">
-
</div>
</div>
</>
);
}
+
+
+export function WikiTabs() {
+ const [value, setValue] = React.useState('1');
+
+ const handleChange = (_event: React.SyntheticEvent, newValue: string) => {
+ setValue(newValue);
+ };
+
+ return (
+ <Box sx={{ width: '100%', typography: 'body1' }}>
+ <TabContext value={value}>
+ <Box sx={{ borderBottom: 1, borderColor: 'divider' }}>
+ <TabList onChange={handleChange} aria-label="lab API tabs example">
+ <Tab label="About" value="1" />
+ <Tab label="Troubleshooting" value="2" />
+ <Tab label="Components" value="3" />
+ <Tab label="Downloads" value="4" />
+ <Tab label="Resources" value="5" />
+ </TabList>
+ </Box>
+ <TabPanel value="1"> </TabPanel>
+ <TabPanel value="2"> <Troubleshooting/> </TabPanel>
+ <TabPanel value="3"> </TabPanel>
+ <TabPanel value="4"> </TabPanel>
+ <TabPanel value="5"> <Sources/> </TabPanel>
+ </TabContext>
+ </Box>
+ );
+}
+
+function Sources(){
+ return(
+ <div>
+ <Collapsible title="Images and Icons" >
+ Most teams need a lot of pictures, components, icons and alike. They can be difficult to find, especially free and open source ones.
+
+ <ul>
+ <li> <a href="https://bioicons.com/"> https://bioicons.com/</a> </li>
+ <li> <a href="https://togotv.dbcls.jp/en/pics.html" > https://togotv.dbcls.jp/en/pics.html </a> </li>
+ <li> <a href="https://smart.servier.com/" >https://smart.servier.com/</a> </li>
+ <li> <a href="https://openclipart.org/" > https://openclipart.org/</a> </li>
+ <li> <a href="https://commons.wikimedia.org/wiki/Category:SVG_files" >https://commons.wikimedia.org/wiki/Category:SVG_files</a> </li>
+ <li> <a href="https://www.flaticon.com/">https://www.flaticon.com/</a> </li>
+ <li> <a href="https://biologicalicons.com/en">https://biologicalicons.com/en</a> </li>
+ <li> <a href="https://www.svgrepo.com/">https://www.svgrepo.com/</a> </li>
+ <li> <a href="https://www.humanbiomedia.org/">https://www.humanbiomedia.org/</a> </li>
+ </ul>
+
+ </Collapsible>
+ </div>
+ )
+}
+
+function Troubleshooting(){
+ return(
+ <div>
+ <h3>React</h3>
+ <h4>Types and properties</h4>
+ <Collapsible title="Argument of type X is not assignable to parameter of type Y.">
+ <h6>Example</h6>
+ <h6>Solutions</h6>
+ </Collapsible>
+ <Collapsible title="Type X is not assignable to type Y.">
+ <h6>Example</h6>
+ <h6>Solutions</h6>
+ </Collapsible>
+ <Collapsible title="Property x is missing in type y but required in type z.">
+ <h6>Example</h6>
+ <h6>Solutions</h6>
+ </Collapsible>
+ <Collapsible title="Property x does not exist on type Y.">
+ <h6>Example</h6>
+ <h6>Solutions</h6>
+ </Collapsible>
+ <Collapsible title="Type X is missing the following properties from type Y: a, b, c">
+ <h6>Example</h6>
+ <h6>Solutions</h6>
+ </Collapsible>
+ <Collapsible title="Type 'x | undefined' is not assignable to type 'x'.">
+ <h6>Example</h6>
+ <h6>Solutions</h6>
+ </Collapsible>
+ <Collapsible title="Type 'undefined' cannot be used as an index type">
+ <h6>Example</h6>
+ <h6>Solutions</h6>
+ </Collapsible>
+
+ <h4>Overloads</h4>
+ <Collapsible title="No overload matches this call.">
+ <h6>Example</h6>
+ <h6>Solutions</h6>
+ </Collapsible>
+
+ <h4>Other</h4>
+ <Collapsible title="Module Z has already exported a member named A. Consider explicitly re-exporting to resolve the ambiguity.">
+ <h6>Example</h6>
+ index.tsx:
+ <p className="error"> Module "./Bfh.tsx" has already exported a member named 'LabTabs'. Consider explicitly re-exporting to resolve the ambiguity.</p>
+ <h6>Solutions</h6>
+ Simply rename the function in one of the modules or consider making it a component if you plan on using it frequently.
+ </Collapsible>
+
+ </div>
+ )
+}
\ No newline at end of file
diff --git a/src/utils/select.js b/src/utils/select.js
new file mode 100644
index 00000000..311a981c
--- /dev/null
+++ b/src/utils/select.js
@@ -0,0 +1,35 @@
+var tabs = document.querySelectorAll(".tabs_wrap ul li");
+var males = document.querySelectorAll(".male");
+var females = document.querySelectorAll(".female");
+var all = document.querySelectorAll(".item_wrap");
+
+tabs.forEach((tab)=>{
+ tab.addEventListener("click", ()=>{
+ tabs.forEach((tab)=>{
+ tab.classList.remove("active");
+ })
+ tab.classList.add("active");
+ var tabval = tab.getAttribute("data-tabs");
+
+ all.forEach((item)=>{
+ item.style.display = "none";
+ })
+
+ if(tabval == "male"){
+ males.forEach((male)=>{
+ male.style.display = "block";
+ })
+ }
+ else if(tabval == "female"){
+ females.forEach((female)=>{
+ female.style.display = "block";
+ })
+ }
+ else{
+ all.forEach((item)=>{
+ item.style.display = "block";
+ })
+ }
+
+ })
+})
\ No newline at end of file
--
GitLab