HomePage #21

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open

hunter-powell wants to merge 52 commits into master from HomePage

.vscode/launch.json

-Original file line number
+Diff line change
@@ -0,0 +1,15 @@
+    {
+        // Use IntelliSense to learn about possible attributes.
+        // Hover to view descriptions of existing attributes.
+        // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
+        "version": "0.2.0",
+        "configurations": [
+            {
+                "type": "pwa-chrome",
+                "request": "launch",
+                "name": "Launch Chrome against localhost",
+                "url": "http://localhost:8080",
+                "webRoot": "${workspaceFolder}"
+            }
+        ]
+    }

README.md

            
                      Original file line number
                      Diff line number
                      Diff line change
                  
    @@ -81,8 +81,8 @@ The BSD 2-Clause License
  
    * * *

    ![Alfred P. Sloan](./app/images/aps-sm.png)

    ![Alfred P. Sloan](./app/images/apsf-logo.png)

    ![University of California Riverside](./app/images/ucr-sm.png)

    ![University of Georgia at Athens](./app/images/uga-logo@2x.png)

    ![Pitch Interactive](./app/images/pitch.png)

app/app.global.css

            
                      Original file line number
                      Diff line number
                      Diff line change
                  
    @@ -10,6 +10,12 @@
  
      -webkit-box-sizing: border-box;

    }

    /* This gets rid of the blue border around different elements, might need to reimplement in future to

    to accomodate keyboard only users or find another way to visually replace it */

    *:focus {

      outline: 0 !important;

    }

    ::-webkit-scrollbar {

      -webkit-appearance: none;

      cursor: pointer;

    @@ -21,9 +27,10 @@
  
      border: 2px solid white;

    }

    ::-webkit-scrollbar-track {

      background-color: inherit;

    }

    /* This can later be used to add the line to show scroll bar range */

    /* ::-webkit-scrollbar-track {

    } */

    ::-webkit-scrollbar:vertical {

      width: 10px;

    @@ -41,30 +48,30 @@ html {
  
    body {

      position: relative;

      height: 100vh;

      font-weight: 200;

      background-color: #333;

      font-weight: 400;

      background-color: #575A5C;

      color: #eee;

      font-family: 'IBM Plex Sans', Verdana, Sans-serif;

      font-family: 'Open Sans';

      margin: 0;

      overflow: hidden;

    }

    h1 {

      font-weight: 200;

      font-weight: 400;

      font-size: 1.5rem;

      margin: 0;

      padding: 0;

    }

    h2 {

      font-weight: 200;

      font-weight: 400;

      font-size: 1.2rem;

      margin: 0;

      padding: 0;

    }

    p {

      font-weight: 200;

      font-weight: 400;

    }

    li {

    @@ -73,6 +80,7 @@ li {
  
    a {

      text-decoration: none;

      text-underline-offset: auto;

    }

    a:hover {

    @@ -86,4 +94,25 @@ img {
  
    button {

      cursor: pointer;

      background: none;

      border: none;

      outline: none !important;

    }

    button:hover {

      fill:#F09E6A;

    }

    button:focus {

      outline: none;

    }

    .__react_component_tooltip {

      padding: 2px 6px !important;

      font-weight: 600;

      z-index: 9999999 !important;

    }

    .__react_component_tooltip.show {

      opacity: 1 !important;

      z-index: 9999999 !important;

    }

app/components/About.js

-Original file line number
+Diff line change
@@ Expand Up / @@ -2,33 +2,95 @@ import React, { Component } from 'react'; @@
     import { Link, Redirect } from 'react-router-dom';
     import close from 'images/close.svg';
-    import aps from 'images/aps.png';
-    import ucr from 'images/ucr.png';
+    import closeDefault from 'images/closeDefault.svg';
+    import aps from 'images/apsf-logo.png';
+    import uga from 'images/uga-logo@2x.png';
     import pitch from 'images/pitch.png';
+    import arrow from 'images/arrow.svg';
+    import arrowHover from 'images/arrowHover.svg';
     import { pageView } from '../analytics';
     import SideBar from './SideBar';
     import styles from './Home.css';
+    import gstyles from './general.css';
     export default class About extends Component {
       constructor(props) {
         super(props);
         pageView('/about');
-        this.state = { redirect: null };
+        this.state = {
+          redirect: null,
+          hoveringClose: false,
+          link1: arrow,
+          link2: arrow,
+          link3: arrow,
+          link4: arrow,
+          link5: arrow,
+        };
+      }
+      /*This function deals with when the mouse hovers over the edit icon on top right of
+      the home screen and changes img src accordingly to correct svg file */
+      handleMouseOver (title) {
+        switch(title) {
+          case 'New to Phinch?':
+            this.setState({ link1: arrowHover });
+            break;
+          case 'View our Flagship Datasets':
+            this.setState({ link2: arrowHover });
+            break;
+          case 'Join the Community':
+            this.setState({ link3: arrowHover });
+            break;
+          case 'About Phinch':
+            this.setState({ link4: arrowHover });
+            break;
+          case 'Find a software issue?':
+            this.setState({ link5: arrowHover });
+            break;
+        }
+      }
+      /*This function deals with the mouse leaving an icon (no longer hovering) and
+      changed img src to correct svg file */
+      handleMouseLeave (title) {
+        switch(title) {
+          case 'New to Phinch?':
+            this.setState({ link1: arrow });
+            break;
+          case 'View our Flagship Datasets':
+            this.setState({ link2: arrow });
+            break;
+          case 'Join the Community':
+            this.setState({ link3: arrow });
+            break;
+          case 'About Phinch':
+            this.setState({ link4: arrow });
+            break;
+          case 'Find a software issue?':
+            this.setState({ link5: arrow });
+            break;
+        }
       }
       render() {
         if (this.state.redirect !== null && this.state.redirect !== '/about') {
-          return <Redirect push to={this.state.redirect} />;
+          return (<Redirect push to={this.state.redirect} />);
         }
         return (
           <div>
             <div className={styles.container} data-tid="container">
-              <SideBar context={this} />
-              <div className={`${styles.section} ${styles.right} ${styles.about}`}>
-                <div className={`${styles.section} ${styles.center} ${styles.scroll}`}>
+              <SideBar context={this} inAboutPage />
+              <div className={`${styles.section} ${styles.right} ${styles.about} ${styles.center}`}>
+                <div
+                  onMouseOver={() => this.setState({hoveringClose: true})}
+                  onMouseOut={() => this.setState({hoveringClose: false})}
+                >
+                  <Link to="/"><img className={styles.close} src={this.state.hoveringClose ? close : closeDefault} alt="Home" /></Link>
+                </div>
                   <h2>About Phinch</h2>
                   <p className={styles.first}>
                     PHINCH is an open-source framework for visualizing biological data, funded by a grant from the Alfred P. Sloan foundation. This project represents an interdisciplinary collaboration between Pitch Interactive, a data visualization studio in Oakland, CA, and biological researchers at UC Davis. {/* eslint-disable-line max-len */}
@@ Expand All / @@ -42,13 +104,11 @@ export default class About extends Component { @@
                   <p>
                     Scientific visualization represents an innovative method towards tackling the current bottleneck in bioinformatics; in addition to giving researchers a unique approach for exploring large datasets, it stands to empower biologists with the ability to conduct powerful analyses without requiring a deep level of computational knowledge. {/* eslint-disable-line max-len */}
                   </p>
-                </div>
-                <div className={`${styles.section} ${styles.logos}`}>
-                  <Link to="/"><img className={styles.close} src={close} alt="Home" /></Link>
-                  <img src={aps} className={styles.alogo} alt="Alfred P. Sloan Logo" />
-                  <img src={ucr} className={styles.alogo} alt="University of California Riverside Logo" />
-                  <img src={pitch} className={styles.alogo} alt="Pitch Interactive Logo" />
-                </div>
+                  <div className={` ${styles.logos}`}>
+                    <img src={aps} className={styles.alogo} alt="Alfred P. Sloan Logo" />
+                    <img src={uga} className={styles.ugalogo} alt="University of Georgia Logo" />
+                    <img src={pitch} className={styles.pitchlogo} alt="Pitch Interactive Logo" />
+                  </div>
               </div>
             </div>
           </div>
@@ Expand Down @@

app/components/CheckBoxes.css

-Original file line number
+Diff line change
@@ -1,6 +1,7 @@
     .group {
       color: #000;
-      font-weight: 300;
+      font-size: 14px;
+      font-weight: 500;
     }
     .row {
@@ Expand All / @@ -21,7 +22,7 @@ @@
     .name {
       font-size: 14px;
-      font-weight: 400;
+      font-weight: 600;
       vertical-align: top;
       margin-right: 1rem;
       overflow-wrap: break-word;
@@ Expand Down @@

app/components/CheckBoxes.js

-Original file line number
+Diff line change
@@ Expand Up / @@ -4,7 +4,7 @@ import styles from './CheckBoxes.css'; @@
     import gstyle from './general.css';
     export default class CheckBoxes extends Component {
-      render() {
+      render() {
         const buttons = this.props.filter.expanded ? (
           <div>
             <div
@@ Expand Down @@

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

HomePage #21

Uh oh!

Diff view

Diff view

There are no files selected for viewing

Uh oh!

HomePage #21

Are you sure you want to change the base?

Uh oh!

HomePage #21

Uh oh!

Uh oh!

Diff view

Diff view

There are no files selected for viewing

Uh oh!