diff --git a/index.html b/index.html
index c7d9d3a36e5038b3827ac266949281ec6ec33794..8fcdcf248538986afd23d0b93dc41cef4f7503e0 100644
--- a/index.html
+++ b/index.html
@@ -2,6 +2,22 @@
<html lang="en">
<head>
<meta charset="UTF-8" />
+ <script>
+ $('img[data-enlargable]').addClass('img-enlargable').click(function(){
+ var src = $(this).attr('src');
+ $('<div>').css({
+ background: 'RGBA(0,0,0,.5) url('+src+') no-repeat center',
+ backgroundSize: 'contain',
+ width:'100%', height:'100%',
+ position:'fixed',
+ zIndex:'10000',
+ top:'0', left:'0',
+ cursor: 'zoom-out'
+ }).click(function(){
+ $(this).remove();
+ }).appendTo('body');
+});
+ </script>
<link
rel="shortcut icon"
href="https://static.igem.wiki/teams/5247/logos-team/precyse-no-slogan.png"
diff --git a/src/App/App.css b/src/App/App.css
index 8fe37aa2703a6b50993e4831fe701c02a12b265a..6c5830e1521025e74dac144fdbcf4dcf3b129ed2 100644
--- a/src/App/App.css
+++ b/src/App/App.css
@@ -3181,4 +3181,27 @@ a{
}
.middle{
text-align: center;
+}
+
+.bfh-slider{
+ max-width: 500px !important;
+}
+.bfh-slider img{
+ max-width: 400px;
+
+ max-height: 70%;
+}
+
+.picture-frame:hover{
+
+}
+
+.full-screen-width {
+ position: relative !important;
+ left: 50% !important;
+ right: 50% !important;
+ margin-left: -50vw !important;
+ margin-right: 50vw !important;
+ max-width: 100vw !important;
+ width: 100vw !important;
}
\ No newline at end of file
diff --git a/src/components/My-Timeline.tsx b/src/components/My-Timeline.tsx
index 319c4b72d1bd734dad9ea8c9e75e3a499aa067c2..4fa5525e12c890f5cbdfa6c1f5effeea9995bbe9 100644
--- a/src/components/My-Timeline.tsx
+++ b/src/components/My-Timeline.tsx
@@ -1,12 +1,16 @@
import { BFHMoreButton } from "./Buttons";
+import SimpleSlider from "./slider";
interface ItemProps {
text?: string;
+ heading?: string;
vorname?: string,
+ vorname2?: string,
nachname?: string,
+ nachname2?: string,
date: string ,
children: React.ReactNode;
tag: string,
@@ -16,7 +20,7 @@ interface ItemProps {
/* import ImageEvent from './ImageEvent.tsx';
import UrlButton from './UrlButton.tsx'; */
-export const TimelineItemPic = ({ text, vorname, nachname, date, tag, color, children, csstag }:ItemProps) => (
+export const TimelineItemPic = ({ heading, text, vorname, nachname, date, tag, color, children, csstag }:ItemProps) => (
<div className="timeline-item">
<div className="timeline-item-content">
<span className="tag" style={{ background: color }}>
@@ -35,7 +39,47 @@ export const TimelineItemPic = ({ text, vorname, nachname, date, tag, color, ch
</figure>
</div>
<div className="col text-1-bfh">
- <span className="">{text}</span>
+ <h5>{heading}</h5>
+ <span className="">{text}</span>
+ </div>
+ {children}
+ </div>
+
+ <BFHMoreButton it={csstag}></BFHMoreButton>
+ <span className="circle" />
+ </div>
+ </div>
+);
+
+export const TimelineItemTwoPic = ({ heading, text, vorname, nachname, vorname2, nachname2, date, tag, color, children, csstag }:ItemProps) => (
+ <div className="timeline-item">
+ <div className="timeline-item-content">
+ <span className="tag" style={{ background: color }}>
+ {tag}
+ </span>
+ <time>{date}</time>
+
+ <hr/>
+ <div className="row">
+ <div className="col">
+ <figure className="snip1113 red">
+ <img src="https://static.igem.wiki/teams/5247/placeholders/placehilderperson.jpeg" alt="pr-sample1" />
+ <figcaption>
+ <h3>{vorname} <br/> <span>{nachname}</span></h3>
+ </figcaption>
+ </figure>
+ </div>
+ <div className="col">
+ <figure className="snip1113 red">
+ <img src="https://static.igem.wiki/teams/5247/placeholders/placehilderperson.jpeg" alt="pr-sample1" />
+ <figcaption>
+ <h3>{vorname2} <br/> <span>{nachname2}</span></h3>
+ </figcaption>
+ </figure>
+ </div>
+ <div className="col text-1-bfh">
+ <h5>{heading}</h5>
+ <span className="">{text}</span>
</div>
{children}
</div>
@@ -114,34 +158,23 @@ export function MyTimeline () {
Begin & Opening
</div>
- <TimelineItem
+ <TimelineItemTwoPic
date='Scientific Talk I.'
tag= 'Talks'
color='var(--lightblue)'
csstag="talkone"
+ vorname="Kristian"
+ vorname2="Ram"
+ nachname="Müller"
+ nachname2="Shakar"
+ heading="placeholder"
+ text="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"
>
- <span>Scientific Talk 1 by Kristian Müller and Ram Shakar</span>
<div id="talkone" style={{display: "none"}}>
So much more
</div>
-
- {/*
- <ImageEvent
- date="4/13/19"
- text="You can embed images..."
- src="https://res.cloudinary.com/dovoq8jou/image/upload/v1564772194/jellyfish.jpg"
- alt="jellyfish swimming"
- credit="Photo by [@tavi004](https://unsplash.com/@tavi004)"
- id='Scientific Talk I.'>
-
- <div>
- <UrlButton href="https://unsplash.com/search/photos/undersea">
- View more undersea photos
- </UrlButton>
- </div>
- </ImageEvent> */}
- </TimelineItem>
+ </TimelineItemTwoPic>
<TimelineItemPic
date='How to Wiki'
tag='Workshop Session I.'
@@ -149,6 +182,7 @@ export function MyTimeline () {
csstag="wikiworkshop"
vorname="Christian"
nachname="Kolland"
+ heading="placeholder"
text="Learning the basics of Wiki coding and design. In this workshop, the participants geined expertise to elevate their teams wiki."
>
<div id="wikiworkshop" style={{display: "none"}}>
@@ -164,12 +198,13 @@ export function MyTimeline () {
nachname="Haddock"
text="Design genetic constructs and re-write the genomic code, and plan experiments using AI. Learn how to effectively build genetic circuit systems for implementation in your iGEM project.
"
+ heading="placeholder"
>
<div id="synworkshop" style={{display: "none"}}>
So much more
</div>
</TimelineItemPic>
- <TimelineItem
+ <TimelineItemTwoPic
date='How to use AI as a scientist'
tag='Workshop Session I.'
color='var(--text-primary)'
@@ -181,7 +216,7 @@ export function MyTimeline () {
<div id="aiworkshop" style={{display: "none"}}>
So much more
</div>
- </TimelineItem>
+ </TimelineItemTwoPic>
<TimelineItemPic
date='Scientific Talk II.'
tag= 'Talks'
@@ -189,7 +224,8 @@ export function MyTimeline () {
csstag="talktwo"
vorname="Karla"
nachname="Wagner"
- text="Scientific Talk 2 by Karla Wagner"
+ heading="placeholder"
+ text="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"
>
<div id="talktwo" style={{display: "none"}}>
So much more
@@ -202,6 +238,13 @@ export function MyTimeline () {
csstag="teampres"
>
<h5>Team project presentations</h5>
+ <div className="col bfh-slider">
+ <SimpleSlider>
+ <img className="" src="https://static.igem.wiki/teams/5247/placeholders/placehilderperson.jpeg"/>
+ <img className="" src="https://static.igem.wiki/teams/5247/placeholders/placehilderperson.jpeg"/>
+ <img className="" src="https://static.igem.wiki/teams/5247/placeholders/placehilderperson.jpeg"/>
+ </SimpleSlider>
+ </div>
<span>
</span>
@@ -216,6 +259,13 @@ export function MyTimeline () {
csstag="teambooth"
>
<h5>Poster Exhibition Booth </h5>
+ <div className="col bfh-slider">
+ <SimpleSlider>
+ <img className="" src="https://static.igem.wiki/teams/5247/placeholders/placehilderperson.jpeg"/>
+ <img className="" src="https://static.igem.wiki/teams/5247/placeholders/placehilderperson.jpeg"/>
+ <img className="" src="https://static.igem.wiki/teams/5247/placeholders/placehilderperson.jpeg"/>
+ </SimpleSlider>
+ </div>
<span>
</span>
@@ -230,9 +280,9 @@ export function MyTimeline () {
csstag="safeworkshop"
vorname="Svenja"
nachname="Vinke"
+ heading="About Dual-use and Biosafety"
text="Novel technologies opened possibilities and risks. Learn how you implement Safety and Security Strategies within your project and think more responsible in terms of Dual Use."
>
- <h5>About Dual-use and Biosafety</h5>
<div id="safeworkshop" style={{display: "none"}}>
So much more
</div>
@@ -285,6 +335,7 @@ export function MyTimeline () {
csstag="pitch"
vorname="Madeleine"
nachname="Mussgnug"
+ heading="placeholder"
text="Image you have only three minutes with your boss to sell your idea...
After our workshop you learned techniques to sell every pen and even more to every boss on the planet.
"
@@ -300,6 +351,7 @@ export function MyTimeline () {
csstag="multimedia"
vorname="Michael"
nachname="Gröning"
+ heading="placeholder"
text="Learn the basics of filmmaking and video production.
Look behind the scenes and get in touch with professionals.
Train your skills to direct iGEM-related videos and movies."
@@ -315,9 +367,12 @@ export function MyTimeline () {
date='iGEMer Ted Talks'
tag= 'Talks'
color='var(--lightblue)'
+ heading="placeholder"
+ text="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"
+ vorname="place"
+ nachname="holder"
csstag="tedtalk1"
>
- <span>iGEMer Ted Talk 1</span>
<div id="tedtalk1" style={{display: "none"}}>
So much more
</div>
@@ -327,10 +382,11 @@ export function MyTimeline () {
tag= 'Talks'
color='var(--lightblue)'
csstag="tedtalk2"
- vorname=""
- nachname=""
+ vorname="place"
+ nachname="holder"
+ heading="placeholder"
+ text="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"
>
- <span>Ted Talk 2</span>
<div id="tedtalk2" style={{display: "none"}}>
So much more
</div>
@@ -340,8 +396,11 @@ export function MyTimeline () {
tag= 'Talks'
color='var(--lightblue)'
csstag="slam1"
+ heading="placeholder"
+ nachname="holder"
+ vorname="place"
+ text="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"
>
- <span>Science Slam Session</span>
<div id="slam1" style={{display: "none"}}>
So much more
</div>
@@ -351,8 +410,11 @@ export function MyTimeline () {
tag= 'Talks'
color='var(--lightblue)'
csstag="slam2"
+ heading="placeholder"
+ text="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"
+ vorname="place"
+ nachname="holder"
>
- <span>Science Slam Session</span>
<div id="slam2" style={{display: "none"}}>
So much more
</div>
diff --git a/src/contents/Bfh.tsx b/src/contents/Bfh.tsx
index dd4ba32bb7316093ba0371eb4da2ed9dc890f345..5c7813137945353e7c3edc15b66db5c7d0597108 100644
--- a/src/contents/Bfh.tsx
+++ b/src/contents/Bfh.tsx
@@ -2337,12 +2337,30 @@ IBzP/wMLphvI7KlpLQAAAABJRU5ErkJggg==
)
}
+function reSize({name}:{name: string}){
+ const resize = (_event : React.MouseEvent<HTMLElement, MouseEvent>) =>{
+ var img;
+ img = document.getElementById(name);
+ if (img!.className === "picture-frame norm"){
+ console.log("=== picture-frame norm")
+ img!.className = img!.className.replace("picture-frame norm", "full-screen-width");
+ }
+ else if (img!.className === "full-screen-width"){
+ console.log("=== full-screen-width")
+ img!.className = img!.className.replace("full-screen-width", "picture-frame norm");
+ }
+ }
+ return resize;
+}
+
function PosterGallery(){
return(
<>
<div className="row">
<div className="col">
- <img className="picture-frame" src="https://static.igem.wiki/teams/5247/placeholders/placehilderperson.jpeg" alt="" />
+ <a typeof="button" onClick={reSize({name: "bielefeld"})}>
+ <img id="bielefeld" className="picture-frame norm" src="https://static.igem.wiki/teams/5247/photos/meetup/posters-and-stuff/bfh-poster-bielefeld-1.png" alt="" />
+ </a>
</div>
<div className="col">
<img className="picture-frame" src="https://static.igem.wiki/teams/5247/placeholders/placehilderperson.jpeg" alt="" />