bfh

src/App/App.css

@@ -46,6 +46,9 @@
     --node-size: 60px; 
 }
 
+.none{
+  display: none;
+}
 
 
 /* * * * * * * */
@@ -395,10 +398,19 @@ footer a:hover {
   margin-left: 5px;
   margin-right: 5px;
 }
-.hp-more-button :hover{
+.hp-more-button:hover, .bfh-more-button:hover{
   filter: brightness(0.5);
 }
   
+.bfh-more-button{
+  margin-top: 10px;
+  padding: 5px;
+  border-radius: 10px;
+  padding-left: 10px;
+  padding-right: 10px;
+  margin-left: 5px;
+  margin-right: 5px;
+}
 
 /* * * * * * * * */
 /*VILLAGE BUTTONS*/

src/components/Buttons.tsx

@@ -119,6 +119,26 @@ export function HPMoreButton({name}: {name: string}){
   )
 }
 
+export function BFHMoreButton({it}: {it: string}){
+  return(
+    <button className="tablinks bfh-more-button" onClick={expandIt({it})}> More</button>
+  )
+}
+
+function expandIt({it}: {it: string}){
+  const openit =  (_event : React.MouseEvent<HTMLButtonElement, MouseEvent>) =>{
+    console.log(document.getElementById(it))
+    console.log(document.getElementById(it)!.style.display)
+    if (document.getElementById(it)!.style.display === "block"){
+      document.getElementById(it)!.style.display = "none";
+    }
+    else if(document.getElementById(it)!.style.display === "none"){
+      document.getElementById(it)!.style.display = "block";
+    }
+  }
+  return openit; 
+}
+
 export function openTab({cityName, cla, weg}:{cityName: string, cla: string, weg?: string}) {
   const opencity =  (event : React.MouseEvent<HTMLButtonElement, MouseEvent>) =>{
     var i, tabcontent, tablinks, wegcontent;

src/components/My-Timeline.tsx

-
+import { BFHMoreButton } from "./Buttons";
 
 
 
 
 interface ItemProps {
-    date: string | undefined,
+    date: string ,
     children: React.ReactNode;
     tag: string, 
-    color: string 
+    color: string,
+    csstag: string
 }
 
 /* import ImageEvent from './ImageEvent.tsx';
 import UrlButton from './UrlButton.tsx'; */
 
 
-export const TimelineItem  = ({ date, tag, color, children }:ItemProps) => (
+export const TimelineItem  = ({ date, tag, color, children, csstag }:ItemProps) => (
     <div className="timeline-item">
         <div className="timeline-item-content">
             <span className="tag" style={{ background: color }}>
@@ -23,6 +24,7 @@ export const TimelineItem  = ({ date, tag, color, children }:ItemProps) => (
             <time>{date}</time>
             <hr/>
             {children}
+            <BFHMoreButton it={csstag}></BFHMoreButton>
             <span className="circle" />
         </div>
     </div>
@@ -42,8 +44,13 @@ export function MyTimeline () {
                 date='Scientific Talk I.'
                 tag= 'Talks'
                 color='var(--lightblue)'
+                csstag="talkone"
                 >
                     Scientific Talk 1 by Kristian Müller and Ram Shakar
+                    <div id="talkone" style={{display: "none"}}>
+                        So much more
+                    </div>
+                    
                     {/* 
                             <ImageEvent
                         date="4/13/19"
@@ -65,99 +72,151 @@ export function MyTimeline () {
                 date='How to Wiki'
                 tag='Workshop Session I.'
                 color='var(--text-primary)'
+                csstag="wikiworkshop"
                 >
                 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"}}>
+                        So much more
+                </div>
                 </TimelineItem>
                 <TimelineItem
                 date='How to SynBio'
                 tag='Workshop Session I.'
                 color='var(--text-primary)'
+                csstag="synworkshop"
                 >
                 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.
+                <div id="synworkshop" style={{display: "none"}}>
+                        So much more
+                </div>
                 </TimelineItem>
                 <TimelineItem
                 date='How to use AI as a scientist'
                 tag='Workshop Session I.'
                 color='var(--text-primary)'
+                csstag="aiworkshop"
                 >
                     <h5>Modern problems require modern solutions</h5>
                      Computational technologies are getting more in the focus of scientific research. Integration of generative KI like GenAI bypass limitations and offers potential risks - learn how to implement Artificial Intelligence.
+                     <div id="aiworkshop" style={{display: "none"}}>
+                        So much more
+                    </div> 
                 </TimelineItem>
                 <TimelineItem
                 date='Scientific Talk II.'
                 tag= 'Talks'
                 color='var(--lightblue)'
+                csstag="talktwo"
                 >
                     Scientific Talk 2 by Karla Wagner
+                    <div id="talktwo" style={{display: "none"}}>
+                        So much more
+                    </div> 
                 </TimelineItem>
                 <TimelineItem
                 date='Team project presentations'
                 tag= 'Team presentations'
                 color='var(--accent-primary'
+                csstag="teampres"
                 >
                     <h5>Team project presentations</h5>
+                    <div id="teampres" style={{display: "none"}}>
+                        So much more
+                    </div> 
                 </TimelineItem>
                 <TimelineItem
                 date='Poster Exhibition Booth'
                 tag= 'Team presentations'
                 color='var(--accent-primary)'
+                csstag="teambooth"
                 >
                     <h5>Poster Exhibition Booth </h5>
+                    <div id="teambooth" style={{display: "none"}}>
+                        So much more
+                    </div> 
                 </TimelineItem>
                 <TimelineItem
                 date='How to work safe'
                 tag='Workshop Session II.'
                 color='var(--text-primary)'
+                csstag="safeworkshop"
                 >
                     <h5>About Dual-use and Biosafety</h5>
                     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.
+                    <div id="safeworkshop" style={{display: "none"}}>
+                        So much more
+                    </div> 
                 </TimelineItem>
                 <TimelineItem
                 date='How to Communicate Science'
                 tag='Workshop Session II.'
                 color='var(--text-primary)'
+                csstag="commworkshop"
                 >
                     Experience how science communication could be. Learn creative and funny ways to communicate difficult topics. 
-                    Think outside the box and train your skills.    
+                    Think outside the box and train your skills. 
+                    <div id="commworkshop" style={{display: "none"}}>
+                        So much more
+                    </div>    
                 </TimelineItem>
                 <TimelineItem
                 date='How to Pitch Your Project'
                 tag='Workshop Session II.'
                 color='var(--text-primary)'
+                csstag="pitch"
                 > 
                 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.       
+                <div id="pitch" style={{display: "none"}}>
+                        So much more
+                    </div>  
                 </TimelineItem>
                 <TimelineItem
                 date='How to Multi Media'
                 tag='Workshop Session II.'
                 color='var(--text-primary)'
+                csstag="multimedia"
                 > 
                 
                 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.
+                <div id="multimedia" style={{display: "none"}}>
+                        So much more
+                    </div>  
                 </TimelineItem>
                 <TimelineItem
                 date='Panel Discussion'
                 tag= 'Talks'
                 color='var(--lightblue)'
+                csstag="panel"
                 >
                     Panel Discussion
+                    <div id="panel" style={{display: "none"}}>
+                        So much more
+                    </div>  
                 </TimelineItem>
                 <TimelineItem
                 date='iGEMer Ted Talks'
                 tag= 'Talks'
                 color='var(--lightblue)'
+                csstag="tedtalk"
                 >
                     iGEMer Ted Talks
+                    <div id="tedtalk" style={{display: "none"}}>
+                        So much more
+                    </div>  
                 </TimelineItem>
                 <TimelineItem
                 date='Science Slam Session'
                 tag= 'Talks'
                 color='var(--lightblue)'
+                csstag="slam"
                 >
                     Science Slam Session
+                    <div id="slam" style={{display: "none"}}>
+                        So much more
+                    </div>  
                 </TimelineItem>
                 <div className='timeline-end'>
                     Award Ceremony

src/components/Tabs.tsx

@@ -13,11 +13,20 @@ export function ButtonRowTabs({data, cla}: {data: Array<TabDatensatz>, cla: stri
   export function BFHStyleTabs({data, cla}: {data: Array<NodeDatensatz>, cla: string}) {
     let rows = []
     for ( let i = 0;  i < data.length; i++ ){
+      if (data[i].cssname === "timeline"){
+        rows.push(
+          <div id={data[i].cssname} className={cla} style={{display: "block"}}>
+              {data[i].node}
+          </div>
+        )
+      }
+      else{
       rows.push(
         <div id={data[i].cssname} className={cla}>
             {data[i].node}
         </div>
       )
+      }
     }
     return rows; 
   }
\ No newline at end of file

src/contents/Bfh.tsx

@@ -48,7 +48,7 @@ export function Bfh() {
                   <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"})}>
+              <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>