diff --git a/client/src/App.css b/client/src/App.css index 8022de09..cc5da6ab 100644 --- a/client/src/App.css +++ b/client/src/App.css @@ -13,6 +13,7 @@ /* display: "inline-block"; margin: "0 2px"; transform: "scale(0.8)"; + font: 26px; */ color: black; @@ -23,7 +24,6 @@ vertical-align: middle !important; } - .About-linkCard { min-height: 300px; min-width: 275px; @@ -42,6 +42,7 @@ text-align: center !important; } + /* about pages */ .member-image { width: 150px; @@ -110,6 +111,39 @@ background-color: inherit; /* Change to the desired background color on hover */ } +/*----------------------------------------------------------------------------------------------*/ +/* Account page- Servers.js CSS Components */ + +.Account-Servers-bullet { + display: inline-block; + margin: 0 2px; + transform: scale(0.8); +} + +.Account-Servers-server-card { + min-width: 275px; + min-height: 250px; + max-width: 500px; + text-align: left; + margin-bottom: 12px; + margin-top: 12px; + margin-left: 12px; +} + +.Account-Servers-heightened { + min-height: 250px; +} + +.Account-Servers-title { + font-size: 37px; +} + +.Account-Servers-pos { + margin-bottom: 12px; +} + + + /* Outlet styles */ .outlet-root { @@ -171,10 +205,11 @@ } .object-contents { - flex: 1; + flex:auto; display: flex; flex-direction: column; overflow: auto; + width: fit-content; } .button-confirm { @@ -194,4 +229,137 @@ .object-domain { margin-bottom: 35px; +} + +/* Homepage Styles */ +.home-root { + background-color: rgb(250, 249, 246); + min-height: 100%; + margin-top: auto; + /* padding-bottom: 3; + padding-top: 3; */ + margin-left: auto; + min-width: 275; +} + +.home-bullet { + display: inline-block; + margin: 0 2px; + transform: scale(0.8); +} + +.home-centered { + min-Width: 275; + text-align: center; + margin-Top: 0; +} + +.home-heightened { + min-height: 250px; +} + +.home-intro-title { + font-size: 28px !important; + font-weight: bold !important; +} + +.home-position { + margin-bottom: 12; +} + +.home-margintop{ + margin-top: 50px; +} + +.home-colorBackground { + background-color: rgb(186, 209, 234); +} + +.home-linkcard { + min-height: 470px; + min-width: 275; + text-align: center; + margin-top: 5; +} + +.home-supportcard { + text-align: center; + margin-bottom: 10; + min-height: 460px; + min-width: 275; +} + +.home-subtitle { + font-size: 24px !important; +} + +/* prefix Styles */ +.resources-root { + background-color: rgb(250, 249, 246); + margin-top: auto; + /* padding-bottom: 3; + padding-top: 3; */ + margin-left: auto; + min-width: 275; +} + +.resources-supportcard { + text-align: center; + margin-bottom: 8; +} + +.resources-title { + font-size: 28px !important; + font-weight: bold !important; +} + +.resources-linkcard { + min-height: auto; + text-align: center; +} + +.resources-subtitle { + font-size: 25px !important; + font-weight:600 !important; +} + +.resources-bullet { + display: inline-block; + margin: 0 2px; + transform: scale(0.8); +} + +/* builder Styles */ +.add-button { + /* border-radius: 60% !important; + width:20px !important; + height: 60px !important; */ + display: flex !important; + justify-content: center !important; + align-items: center !important; + color: rgb(37, 92, 181) !important; +} + +.delete-button { + color: var(--main-red-color) !important; + display: flex !important; + justify-content: center !important; + align-items: center !important; +} + +.bold-title { + font-weight: bold; +} + +.required-field { + /* color: rgb(227, 55, 55) !important; */ + color: var(--main-red-color) !important; +} + + +/* text field */ +.large_textfield { + border-style: inherit; + width: max-content; + grid-auto-rows: auto; } \ No newline at end of file diff --git a/client/src/components/home/BcoDb.js b/client/src/components/home/BcoDb.js index 607de7d9..bcd0dbb6 100644 --- a/client/src/components/home/BcoDb.js +++ b/client/src/components/home/BcoDb.js @@ -5,48 +5,27 @@ import { Card, CardActionArea, CardContent, - makeStyles, Typography } from "@material-ui/core"; import { Link } from "react-router-dom" import logo from "../../images/logo.png"; -const useStyles = makeStyles({ - bullet: { - display: "inline-block", - margin: "0 2px", - transform: "scale(0.8)", - }, - linkCard: { - minHeight: "300px", - minWidth: 275, - textAlign: "center" - }, - title: { - fontSize: "33px", - }, - pos: { - marginBottom: 12, - }, -}); - export default function BcoDb() { - const classes = useStyles(); return ( - - + + - + BioCompute DB Search
BCO logo
- + Search the BioCompute DB and view objects in the database.
- The BCODB page allwos searching and viewing BioCompute Objects from + The BCODB page allows searching and viewing BioCompute Objects from any DB instance that a user has signed up for. The Public DB is accessable without an account or providing credentials. diff --git a/client/src/components/home/BioComputeResources.js b/client/src/components/home/BioComputeResources.js index 0d3042a8..38079586 100644 --- a/client/src/components/home/BioComputeResources.js +++ b/client/src/components/home/BioComputeResources.js @@ -5,41 +5,18 @@ import { Card, CardActionArea, CardContent, - makeStyles, Typography } from "@material-ui/core"; import { Link } from "react-router-dom"; import cloudlogo from "../../images/cloud.png" -const useStyles = makeStyles({ - bullet: { - display: "inline-block", - margin: "0 2px", - transform: "scale(0.8)", - }, - centered: { - minWidth: 275, - textAlign: "center" - }, - heightened: { - minHeight: "250px" - }, - title: { - fontSize: "33px", - }, - pos: { - marginBottom: 12, - }, -}); - export default function BioComputeResources() { - const classes = useStyles(); return ( - + - - + + Cloud-based tools for BioCompute
cloud logo diff --git a/client/src/components/home/Builder.js b/client/src/components/home/Builder.js index 14c79014..74f1e652 100644 --- a/client/src/components/home/Builder.js +++ b/client/src/components/home/Builder.js @@ -5,45 +5,24 @@ import { Card, CardActionArea, CardContent, - makeStyles, Typography } from "@material-ui/core"; import { Link } from "react-router-dom" import logo from "../../images/logo.png"; -const useStyles = makeStyles({ - bullet: { - display: "inline-block", - margin: "0 2px", - transform: "scale(0.8)", - }, - linkCard: { - minHeight: "300px", - minWidth: 275, - textAlign: "center" - }, - title: { - fontSize: "33px", - }, - pos: { - marginBottom: 12, - }, -}); - export default function Builder() { - const classes = useStyles(); return ( - - + + - + BioCompute Builder
BCO logo
- + Use the BioCompute Builder or view objects in the database.
The BioCompute Builder is a platform-free, form-based editor. The diff --git a/client/src/components/home/Documentation.js b/client/src/components/home/Documentation.js index 5af7ee4b..d1db695e 100644 --- a/client/src/components/home/Documentation.js +++ b/client/src/components/home/Documentation.js @@ -5,57 +5,27 @@ import { Card, CardActionArea, CardContent, - makeStyles, Typography } from "@material-ui/core"; import mediaWiki from "../../images/mediawikiwiki.svg"; import api from "../../images/api.jpeg"; -const useStyles = makeStyles({ - bullet: { - display: "inline-block", - margin: "0 2px", - transform: "scale(0.8)" - }, - linkCard: { - minHeight: "300px", - textAlign: "center" - }, - supportCard: { - textAlign: "center", - marginBottom: 12, - minHeight: "460px", - minWidth: 275 - }, - title: { - minWidth: 275, - fontSize: "33px" - }, - subtitle: { - fontSize: "25px", - }, - pos: { - marginBottom: 12, - }, -}); - export default function Documentation() { - const classes = useStyles(); const wikiLink = "https://wiki.biocomputeobject.org/index.php?title=Main_Page"; - const docsLink = "https://docs.biocomputeobject.org/"; + const apiLink = "https://biocomputeobject.org/api/docs/"; return ( - - + + BioCompute Objects Documentation

- global.window.open(docsLink)}> + global.window.open(apiLink)}> - - MediaWiki logo + + MediaWiki logo API
@@ -64,12 +34,12 @@ export default function Documentation() {
global.window.open(wikiLink)}> - + MediaWiki logo BioCompute Wiki
- + The MediaWiki for the BioCompute Objects project diff --git a/client/src/components/home/FdaBox.js b/client/src/components/home/FdaBox.js index e78b989a..31ca7451 100644 --- a/client/src/components/home/FdaBox.js +++ b/client/src/components/home/FdaBox.js @@ -5,40 +5,20 @@ import { Card, CardActionArea, CardContent, - makeStyles, Typography } from "@material-ui/core"; -const useStyles = makeStyles({ - bullet: { - display: "inline-block", - margin: "0 2px", - transform: "scale(0.8)", - }, - linkCard: { - minWidth: 275, - textAlign: "center" - }, - title: { - fontSize: "33px", - }, - pos: { - marginBottom: 12, - }, -}); - export default function FdaBar() { - const classes = useStyles(); const fdaLink = "https://www.federalregister.gov/documents/2020/07/22/2020-15771/electronic-submissions-data-standards-support-for-the-international-institute-of-electrical-and"; return ( - - window.open(fdaLink)}> - - + + global.window.open(fdaLink)}> + + FDA Notice on BioCompute - + Electronic Submissions; Data Standards; Support for the International Institute of Electrical and Electronics Engineers Bioinformatics Computations and Analyses Standard for Bioinformatic Workflows. diff --git a/client/src/components/home/Galaxy.js b/client/src/components/home/Galaxy.js index cb6c38ba..a998446f 100644 --- a/client/src/components/home/Galaxy.js +++ b/client/src/components/home/Galaxy.js @@ -11,42 +11,19 @@ import { import hive from "../../images/galaxy.png"; import aws from "../../images/powered-by-aws.png"; -const useStyles = makeStyles({ - bullet: { - display: "inline-block", - margin: "0 2px", - transform: "scale(0.8)", - }, - linkCard: { - minWidth: 275, - minHeight: "250px", - textAlign: "center" - }, - heightened: { - minHeight: "250px" - }, - title: { - fontSize: "37px", - }, - pos: { - marginBottom: 12, - }, -}); - export default function Other() { - const classes = useStyles(); const galaxyLink = ("http://galaxy.aws.biochemistry.gwu.edu/"); return ( - + - + Galaxy logo
AWS logo - + BioCompute has been merged into the main Galaxy repository. This BioCompute enabled instance of Galaxy on AWS is therefore no longer operational. Thank you to those that have participated in its development. diff --git a/client/src/components/home/Hive.js b/client/src/components/home/Hive.js index a66553d9..f9ae6882 100644 --- a/client/src/components/home/Hive.js +++ b/client/src/components/home/Hive.js @@ -11,43 +11,20 @@ import { import hive from "../../images/hive.png"; import aws from "../../images/powered-by-aws.png"; -const useStyles = makeStyles({ - bullet: { - display: "inline-block", - margin: "0 2px", - transform: "scale(0.8)", - }, - supportCard: { - minHeight: "250px", - minWidth: 275, - textAlign: "center" - }, - heightened: { - minHeight: "250px" - }, - title: { - fontSize: "37px", - }, - pos: { - marginBottom: 12, - }, -}); - const hiveLink = "https://hive.aws.biochemistry.gwu.edu/dna.cgi?cmd=main"; export default function Hive() { - const classes = useStyles(); return ( - + window.open(hiveLink)}> - + HIVE logo
AWS logo - + Access AWS HIVE, the High-Performance Integrated Virtual Environment, on AWS. HIVE is a cloud-based environment optimized for the storage and analysis of extra-large data, such as biomedical data, clinical data, diff --git a/client/src/components/home/Intro.js b/client/src/components/home/Intro.js index 25c26701..c6c5d009 100644 --- a/client/src/components/home/Intro.js +++ b/client/src/components/home/Intro.js @@ -1,50 +1,18 @@ import React from "react"; import { - Box, + Box, Card, - CardActionArea, CardContent, - makeStyles, - Paper, Typography } from "@material-ui/core"; -import { Link } from "react-router-dom"; -import Background from "../../images/background.jpg" -const useStyles = makeStyles({ - bullet: { - display: "inline-block", - margin: "0 2px", - transform: "scale(0.8)", - }, - centered: { - minWidth: 275, - textAlign: "center", - marginTop: 0 - }, - heightened: { - minHeight: "250px" - }, - title: { - fontSize: "33px", - }, - pos: { - marginBottom: 12, - }, - colorBackground: { - backgroundColor: "#D8EDF9" - } -}); - -export default function Intro(props) { - const classes = useStyles(); +export default function Intro() { return ( - - - - - + + + + BioCompute: A platform for bioinformatics analysis workflow documentation diff --git a/client/src/components/home/NewsBar.js b/client/src/components/home/NewsBar.js index 95aa2c71..7fa9ec34 100644 --- a/client/src/components/home/NewsBar.js +++ b/client/src/components/home/NewsBar.js @@ -1,37 +1,18 @@ import React from "react"; import { Card, - makeStyles } from "@material-ui/core"; import { TwitterTimelineEmbed } from "react-twitter-embed"; -const useStyles = makeStyles({ - root: { - minWidth: 275, - }, - bullet: { - display: "inline-block", - margin: "0 2px", - transform: "scale(0.8)", - }, - title: { - fontSize: "33px", - }, - pos: { - marginBottom: 12, - }, -}); - export default function BcoDbViewer() { - const classes = useStyles(); return ( - + ); diff --git a/client/src/components/home/Specification.js b/client/src/components/home/Specification.js index c4684143..bba45ba2 100644 --- a/client/src/components/home/Specification.js +++ b/client/src/components/home/Specification.js @@ -5,43 +5,24 @@ import { Card, CardActionArea, CardContent, - makeStyles, Typography } from "@material-ui/core"; import ieee from "../../images/ieee.jpg"; -const useStyles = makeStyles({ - bullet: { - display: "inline-block", - margin: "0 2px", - transform: "scale(0.8)", - }, - linkCard: { - minHeight: "300px", - minWidth: 275, - textAlign: "center", - marginBottom: 12 - }, - title: { - fontSize: "33px", - }, - pos: { - marginBottom: 12, - }, -}); - export default function Specification() { - const classes = useStyles(); const ieeeLink = "https://standards.ieee.org/standard/2791-2020.html"; return ( - + window.open(ieeeLink)}> - - + + IEEE 2791-2020 - + + IEEE logo +
+
IEEE Standard for Bioinformatics Analyses Generated by High-Throughput Sequencing (HTS) to Facilitate Communication
diff --git a/client/src/components/home/Tsc.js b/client/src/components/home/Tsc.js index 9ffa85da..2fadcdcd 100644 --- a/client/src/components/home/Tsc.js +++ b/client/src/components/home/Tsc.js @@ -12,40 +12,17 @@ import { import logo from "../../images/logo.png"; -const useStyles = makeStyles({ - bullet: { - display: "inline-block", - margin: "0 2px", - transform: "scale(0.8)", - }, - linkCard: { - minHeight: "300px", - minWidth: 275, - textAlign: "center" - }, - heightened: { - minHeight: "250px" - }, - title: { - fontSize: "37px", - }, - pos: { - marginBottom: 12, - }, -}); - export default function Tsc() { - const classes = useStyles(); return ( - + - - + + BCO logo BCO TSC - + The Technical Steering Committee of the BioCompute Partnership (TSC) is a body of experienced professionals with BioCompute standard subject matter expertise. See here for the Meeting notes and agenda for all past and diff --git a/client/src/components/home/Workshop.js b/client/src/components/home/Workshop.js index 62fc534e..997d0e16 100644 --- a/client/src/components/home/Workshop.js +++ b/client/src/components/home/Workshop.js @@ -3,58 +3,37 @@ import { Card, CardActionArea, CardContent, - makeStyles, Typography } from "@material-ui/core"; import workshoppic from "../../images/workshop.jpg" - -const useStyles = makeStyles({ - bullet: { - display: "inline-block", - margin: "0 2px", - transform: "scale(0.8)", - fontSize: "22px" - }, - linkCard: { - minHeight: "300px", - textAlign: "center" - }, - supportCard: { - textAlign: "center", - marginBottom: 12, - minHeight: "300px", - minWidth: 275 - }, - title: { - minWidth: 275, - fontSize: "33px", - textAlign:"center" - }, - subtitle: { - fontSize: "27px", - }, -}); - export default function Workshop() { - const classes = useStyles(); - const workshopLink = "https://hive.biochemistry.gwu.edu/publications#Multimedia"; + const PreworkshopLink = "https://hive.biochemistry.gwu.edu/publications#Multimedia"; + const UpcomingworkshopLink = "https://wiki.biocomputeobject.org/index.php?title=BioCompute_Spring_Workshop_2024"; return ( - - global.window.open(workshopLink)}> - - + + + Workshop Resources +
+
+ + global.window.open(UpcomingworkshopLink)}> + + Workshop logo + Upcoming workshop
- - Workshop logo + + global.window.open(PreworkshopLink)}> +
- Access previous workshop videos, slides and more + Workshop logo + Previous workshop material - - + + ); } diff --git a/client/src/components/home/index.js b/client/src/components/home/index.js index b861132f..a05303d0 100644 --- a/client/src/components/home/index.js +++ b/client/src/components/home/index.js @@ -1,7 +1,7 @@ // src import React from "react"; -import { Box, Container, Grid, Typography, makeStyles } from "@material-ui/core"; +import { Box, Container, Grid, Typography } from "@material-ui/core"; import Docs from "./Documentation"; import Workshop from "./Workshop"; // import Tsc from "./Tsc"; @@ -15,32 +15,16 @@ import NewsBar from "./NewsBar"; import Specification from "./Specification"; import Intro from "./Intro" -const useStyles = makeStyles((theme) => ({ - root: { - backgroundColor: theme.palette.background.dark, - minHeight: "100%", - paddingBottom: theme.spacing(3), - paddingTop: theme.spacing(3) - }, - marginTopped: { - marginTop: "50px" - }, - whiteBackground: { - backgroundColor: "#ffffff" - } -})); - const HomePage = () => { - const classes = useStyles(); return ( - + - - - - + + + + @@ -72,11 +56,12 @@ const HomePage = () => { - + News and Events +