Skip to content
Snippets Groups Projects
Commit 25074f5b authored by Liliana Sanfilippo's avatar Liliana Sanfilippo
Browse files

poster gally full screen images

parent ba5aff62
No related branches found
No related tags found
No related merge requests found
Pipeline #403360 failed
Stage: build
Hide whitespace changes
Inline Side-by-side
index.html
+ 16
− 0
View file @ 25074f5b
......@@ -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"
......
src/App/App.css
+ 23
− 0
View file @ 25074f5b
......@@ -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
src/components/My-Timeline.tsx
+ 93
− 31
View file @ 25074f5b
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>
......
src/contents/Bfh.tsx
+ 19
− 1
View file @ 25074f5b
......@@ -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="" />
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment