Merge branch 'main' of ssh://gitlab.igem.org/2024/bielefeld-cebitec

src/App/App.css

@@ -62,6 +62,7 @@
     --markmap-a-color: var(--text-primary) !important; 
 
     --node-size: 60px; 
+    --simple-margin: 20px; 
 }
 html{
   scroll-behavior: smooth;
@@ -3967,17 +3968,6 @@ height: min-content !important;
 }
 
 
-figure {
-  align-self: center;
-  display: table;
-  text-align: center;
-  font-style: italic;
-  font-size: medium; 
-  text-indent: 0;
-  margin: 0.5em;
- 
-}
-
 figcaption{
   display: table-caption;
   caption-side: bottom;
@@ -3991,11 +3981,7 @@ figure .row div{
  justify-content: center;
 }
 
-.figure-wrapper{
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
+
 
 figure img{
   object-fit: cover !important;
@@ -4179,4 +4165,41 @@ figure img{
   display: flex;
   justify-content: center;
   align-items: center;
+}
+
+
+
+.figure-wrapper {
+  border-color: var(--darkerbeige);
+  border-width: 5px;
+  background-color: white;
+  border-style: solid;
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  margin-top: var(--simple-margin); 
+  margin-bottom: var(--simple-margin); 
+}
+figure {
+  align-self: center;
+  text-align: center;
+  font-style: italic;
+  font-size: medium; 
+  text-indent: 0;
+  display: grid !important;
+  width: 100%;
+  text-align: center;
+  margin: 0 !important;
+}
+.responsive-image {
+  margin: auto;
+  padding-left: var(--simple-margin);
+  padding-right: var(--simple-margin);
+  margin-top: var(--simple-margin); 
+  margin-bottom: var(--simple-margin); 
+  align-self: center !important;
+  max-height: 40vh; /* Set the maximum height for tall images */
+  width: auto; /* Keeps the image's aspect ratio */
+  max-width: 100%; /* Limits the width to container's width */
+  object-fit: contain !important; /* Adds space around the image if it's narrower than the container */
 }
\ No newline at end of file

src/components/Figures.tsx

 interface FigureProps{
     pic1: string, 
-    pic2: string, 
+    pic2?: string, 
     pic3?: string, 
     pic4?: string, 
     pic5?: string, 
     pic6?: string, 
+    alt1: string,
     description: React.ReactNode | string, 
     num: string |number; 
 }
 
 
-export function ThreeVertical({description, num, pic1, pic2, pic3}:FigureProps){
+export function ThreeVertical({description, num, pic1, pic2, pic3, alt1}:FigureProps){
 
     return(
-        <figure>
-            <img src={pic1}/>
-            <img src={pic2}/>
-            <img src={pic3}/>
-            <figcaption><b>Figure {num}.</b> <span>{description}</span></figcaption>
-        </figure>
+        <div className="figure-wrapper">
+                <figure>
+                <img src={pic1} alt={alt1} className="responsive-image"/>
+                <img src={pic2} className="responsive-image"/>
+                <img src={pic3} className="responsive-image"/>
+                <figcaption><b>Figure {num}.</b> <span>{description}</span></figcaption>
+            </figure>
+           
+        </div>
     )
 }
 
-export function TwoVertical({description, num, pic1, pic2}:FigureProps){
+export function TwoVertical({description, num, pic1, pic2, alt1}:FigureProps){
 
     return(
+        <div className="figure-wrapper">
+        
         <figure>
-            <img src={pic1}/>
-            <img src={pic2}/>
+            <img src={pic1} alt={alt1} className="responsive-image"/>
+            <img src={pic2} className="responsive-image"/>
             <figcaption><b>Figure {num}.</b> <span>{description}</span></figcaption>
         </figure>
+       
+    </div>
+       
     )
 }
 
-export function TwoHorizontal({description, num, pic1, pic2}:FigureProps){
+export function TwoHorizontal({description, num, pic1, pic2, alt1}:FigureProps){
 
     return(
+        <div className="figure-wrapper">
+       
         <figure>
             <div className="row align-items-center">
                 <div className="col">
-                    <img src={pic1}/>
+                    <img src={pic1} alt={alt1} className="responsive-image"/>
                 </div>
                 <div className="col">
-                    <img src={pic2}/>
+                    <img src={pic2} className="responsive-image"/>
                 </div>
             </div>
             <figcaption><b>Figure {num}.</b> <span>{description}</span></figcaption>
         </figure>
+        
+    </div>
+        
     )
 }
 
-export function ThreeHorizontal({description, num, pic1, pic2, pic3}:FigureProps){
+export function ThreeHorizontal({description, num, pic1, pic2, pic3, alt1}:FigureProps){
 
     return(
+        <div className="figure-wrapper">
         <figure>
             <div className="row align-items-center">
                 <div className="col">
-                    <img src={pic1}/>
+                    <img src={pic1} alt={alt1} className="responsive-image"/>
                 </div>
                 <div className="col">
-                    <img src={pic2}/>
+                    <img src={pic2}className="responsive-image"/>
                 </div>
                 <div className="col">
-                    <img src={pic3}/>
+                    <img src={pic3} className="responsive-image"/>
                 </div>
             </div>
             <figcaption><b>Figure {num}.</b> <span>{description}</span></figcaption>
         </figure>
+       
+    </div>
+        
     )
 }
 
+export function OneFigure({description, num, pic1, alt1}:FigureProps){
+    return(
+        <div className="figure-wrapper">
+        
+          <figure>
+                    <img src={pic1} alt={alt1} className="responsive-image"/>
+            <figcaption><b>Figure {num}.</b> <span>{description}</span></figcaption>
+        </figure>
+         
+        </div>
+       
+    )
+}
+
+
+

src/components/Table.tsx

@@ -21,7 +21,7 @@ export function PartTable({data, cols}: {data: Array<Part>, cols: Array<string>}
     return(
         <div className="flex flex-col">
      <div className="min-w-full overflow-x-auto">
-       <div className="inline-block min-w-full py-4">
+       <div className="inline-block min-w-full">
          <div className="overflow-hidden p-2">
            <table className="text-center parttable">
              <thead className="bg-d">
@@ -62,7 +62,7 @@ export function ResTable({data, cols}: {data: Array<Res>, cols: Array<string>}){
   return(
       <div className="flex flex-col">
    <div className="min-w-full overflow-x-auto">
-     <div className="inline-block min-w-full py-4">
+     <div className="inline-block min-w-full">
        <div className="overflow-hidden p-2">
          <table className="text-center restable">
            <thead className="bg-d">