From 584233b35cd8ae02b2d78ed68a80da01bde29f0b Mon Sep 17 00:00:00 2001
From: Liliana Sanfilippo <liliana.sanfilippo@uni-bielefeld.de>
Date: Mon, 23 Sep 2024 00:02:04 +0200
Subject: [PATCH] certificates

---
 src/App/App.scss              | 19 +++++++++++++++++++
 src/components/poster.tsx     | 24 ++++++++++++++++++++++++
 src/contents/contribution.tsx | 10 +++++++++-
 3 files changed, 52 insertions(+), 1 deletion(-)

diff --git a/src/App/App.scss b/src/App/App.scss
index 18bf165c..b3bb4a96 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 b8b50180..e5cd14b4 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 609349a0..4c889259 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>
-- 
GitLab