diff --git a/src/App/App.scss b/src/App/App.scss index 18bf165c1f1e7e93f8a121a45f79177ccc0013dd..b3bb4a96ad4dcb04a9238f1ed2c63880661e2a2e 100644 --- a/src/App/App.scss +++ b/src/App/App.scss @@ -563,6 +563,25 @@ $shadow: #bc15aa; border-left-color: darken(#850F78, 10%); box-shadow: 2px 2px 4px rgba(0,0,0,.6); } +.cert-frame { + top: 0; + bottom: 0; + left: 0; + right: 0; + min-width: 180px; + max-width: 200px; + width: 70%; + margin: auto; + background: #fff; + padding: 10px; + border-style: solid; + border-width: 20px; + border-top-color: darken(#850F78, 0%); + border-right-color: darken(#850F78, 10%); + border-bottom-color: darken(#850F78, 0%); + border-left-color: darken(#850F78, 10%); + box-shadow: 2px 2px 4px rgba(0,0,0,.6); +} figure.snip1113 { font-family: 'Raleway', Arial, sans-serif; diff --git a/src/components/poster.tsx b/src/components/poster.tsx index b8b50180532b19bc3b59acc130ec0018a569d71c..e5cd14b49102dbb477e3bd7309fe104d5c030f59 100644 --- a/src/components/poster.tsx +++ b/src/components/poster.tsx @@ -5,6 +5,15 @@ export function Poster({postername, url}:{postername: string, url: string}){ </a> ) } +export function Certificate({postername, url}:{postername: string, url: string}){ + return( + <div className="col"> + <a typeof="button" onClick={reSize2({name: postername})}> + <img id={postername} className="cert-frame norm" src={url} alt={postername} /> + </a> + </div> + ) +} function reSize({name}:{name: string}){ const resize = (_event : React.MouseEvent<HTMLElement, MouseEvent>) =>{ @@ -20,7 +29,22 @@ function reSize({name}:{name: string}){ } } return resize; +} +function reSize2({name}:{name: string}){ + const resize = (_event : React.MouseEvent<HTMLElement, MouseEvent>) =>{ + var img; + img = document.getElementById(name); + if (img!.className === "cert-frame norm"){ + console.log("=== cert-frame norm") + img!.className = img!.className.replace("cert-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", "cert-frame norm"); + } } + return resize; +} export function PosterRow({postername1, postername2, url1, url2}:{postername1: string, url1: string, postername2: string, url2: string}){ diff --git a/src/contents/contribution.tsx b/src/contents/contribution.tsx index 609349a0d4fe78668e380b9c7e3adb29e6f2a125..4c8892591d03a5ffe828a9e5f29fc07d920f33d0 100644 --- a/src/contents/contribution.tsx +++ b/src/contents/contribution.tsx @@ -5,7 +5,7 @@ import { H2} from "../components/Headings"; import { OLDBFHStyleTabs } from "../components/Tabs"; import { BlockQuoteB } from "../components/Quotes"; import { useNavigateTabs } from "../utils/navigation"; -import { PosterRow } from "../components/poster"; +import { Certificate, Poster, PosterRow } from "../components/poster"; export function Contribution() { @@ -203,6 +203,14 @@ export function About(){ </ul> </div> </div> + <div className="row"> + <Certificate url="https://static.igem.wiki/teams/5247/photos/meetup/certs/bfh-best-booth-bronze-wageningen.png" postername="boothbronze" /> + <Certificate url="https://static.igem.wiki/teams/5247/photos/meetup/certs/bfh-best-booth-silver-frankfurt.png" postername="boothsilver" /> + <Certificate url="https://static.igem.wiki/teams/5247/photos/meetup/certs/bfh-best-booth-gold-freiburg.png" postername="boothgold" /> + <Certificate url="https://static.igem.wiki/teams/5247/photos/meetup/certs/bfh-best-presi-bronze-frankfurt.png" postername="presibronze" /> + <Certificate url="https://static.igem.wiki/teams/5247/photos/meetup/certs/bfh-best-presi-silver-margburg.png" postername="presisilver" /> + <Certificate url="https://static.igem.wiki/teams/5247/photos/meetup/certs/bfh-best-presi-gold-aachen.png" postername="presigold" /> + </div> <H2 text="What did we learn as organizers for the next few years?"/> <h3>Good planning is key</h3> <p>Starting early, clearly distributing tasks, and staying organized – that avoids chaos. We can now structure, coordinate, and manage the next meet-up in Frankfurt more efficiently and ahead of time. </p>