Fixed Nextflow card size adjustment issue with xs screen

biocompute-objects · Sep 26, 2024 · 8197fe3 · 8197fe3
1 parent 0a7e179
commit 8197fe3
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 16 deletions.
diff --git a/client/src/App.css b/client/src/App.css
@@ -113,8 +113,8 @@
 /* ---------------------------------------------------------------------------------------------------- */
 /* Page box components */
 .About-half-width-box{
-  min-width: 350px;/* min-width: 275px; Ensure both boxes have a minimum width */
-  width: 90%; /* Half the width of the container minus spacing */
+  /* min-width: 350px;min-width: 275px; Ensure both boxes have a minimum width */
+  width: 90%; 
   margin: 0 auto; /* Add spacing between the boxes */
   border: 1px solid #ccc; /* Add a border for visual separation */
   border-radius: 8px; /* Add border radius for rounded corners */

diff --git a/client/src/components/HalfWidthBox.js b/client/src/components/HalfWidthBox.js
@@ -1,6 +1,7 @@
 import React from "react";
 import { Card, CardActionArea, CardContent, Typography } from "@mui/material";
 import PropTypes from 'prop-types';
+import { Link } from "react-router-dom";
 
 export default function HalfWidthBox({ link, title, content, image, imageAlt, cssClass }) {
   const handleClickOpen = () => {
@@ -10,17 +11,31 @@ export default function HalfWidthBox({ link, title, content, image, imageAlt, cs
   };
 
   return (
-    <Card className="About-half-width-box"> {/* Define a CSS class for half-width box */}
-      <CardActionArea onClick={handleClickOpen}>
-        <CardContent>
-          <Typography className="home-intro-title">
-            {title}
-          </Typography >
-          <br></br>
-          {image && <img src={image} height={100} alt={imageAlt} className="centered-image"/>}
-          <Typography className="about-text" dangerouslySetInnerHTML={{ __html: content }} />
-        </CardContent>
-      </CardActionArea>
+    <Card className={cssClass || "About-half-width-box"}> 
+      {link && link.startsWith("https://") ? (
+        <CardActionArea onClick={handleClickOpen}>
+          <CardContent>
+            <Typography className="home-intro-title">
+              {title}
+            </Typography>
+            <br />
+            {image && <img src={image} height={100} alt={imageAlt} className="centered-image" />}
+            <Typography className="about-text" dangerouslySetInnerHTML={{ __html: content }} />
+          </CardContent>
+        </CardActionArea>
+      ) : (
+        <CardActionArea component={Link} to={link} className="About-half-width-box">
+          <CardContent>
+            <Typography className="home-intro-title">
+              {title}
+              <br />
+              {image && <img src={image} height={100} alt={imageAlt} />} 
+              <br />
+            </Typography>
+            <Typography className="about-text" dangerouslySetInnerHTML={{ __html: content }} />
+          </CardContent>
+        </CardActionArea>
+      )}
     </Card>
   );
 }
@@ -39,4 +54,4 @@ HalfWidthBox.defaultProps = {
   image: '',
   imageAlt: 'Image',
   cssClass: ''
-};
+};
diff --git a/client/src/pages/Resources.js b/client/src/pages/Resources.js
@@ -27,15 +27,15 @@ export default function Resources() {
     <Paper>
       <Container maxWidth={false}>
         <Grid container justifyContent="center" spacing={3}>
-          <Grid item xs={4} sm={4} lg={6} xl={6}>
+          <Grid item xs={12} sm={6} lg={6} xl={6}>
             <HalfWidthBox
               title="BCODB API"
               image={swagger}
               content="Explore the BioCompute data base RESTful APIs, generated by Swagger"
               link={`${bcodbUrl}docs/`}
             />
           </Grid>
-          <Grid item xs={4} sm={4} lg={6} xl={6}>
+          <Grid item xs={12} sm={6} lg={6} xl={6}>
             <HalfWidthBox
               title="Nextflow"
               image={nextflow}