@openneuro/app 4.33.3 → 4.34.0-alpha.0

package/src/scripts/components/front-page/front-page.scss

@@ -0,0 +1,295 @@
+@import '../scss/variables';
+
+body {
+  font-family: $font-sans;
+}
+
+.contributors {
+  h3 {
+    margin: 20px 0 60px;
+  }
+  .contributors-wrap {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-wrap: wrap;
+    max-width: 1400px;
+    margin: 0 auto;
+  }
+
+  .contributor {
+    text-align: center;
+    margin: 0 45px 50px;
+    @media (max-width: 767px) {
+      width: 100%;
+      margin: 0 0 30px;
+    }
+
+    img {
+      max-width: 100%;
+      height: auto;
+      max-height: 112px;
+      padding: 20px;
+      box-sizing: border-box;
+    }
+
+    &:nth-child(2) {
+      max-width: 360px;
+    }
+  }
+}
+
+.contributor-logo-header {
+  text-align: center;
+  margin-bottom: 50px;
+  .logo-wrap {
+    margin: 0 auto;
+  }
+}
+
+.front-page .activity-slider {
+  padding-bottom: 70px;
+}
+
+.front-page .front-page-activity {
+  overflow: hidden;
+  position: relative;
+  margin: 0;
+  padding: 0;
+
+  h2 {
+    text-align: center;
+    position: relative;
+    z-index: 2;
+    padding-top: 60px;
+  }
+  .on-icon {
+    justify-content: center;
+    margin-bottom: 70px;
+  }
+}
+
+.get-updates-bar {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  background: #204e5a;
+  padding: 30px 60px;
+  border-radius: $border-radius-default;
+  max-width: 960px;
+  margin: 0 auto;
+  @media (max-width: 767px) {
+    flex-direction: column;
+    align-items: flex-start;
+    justify-content: center;
+    border-radius: 0;
+    padding: 20px 30px;
+    .get-updates-label {
+      padding: 0 20px 20px;
+    }
+  }
+  .get-updates-label,
+  .get-updates-form {
+    max-width: 50%;
+    flex-basis: 50%;
+    height: 110px;
+  }
+  .get-updates-form {
+    display: flex;
+    justify-content: flex-end;
+    align-items: center;
+    button {
+      margin-left: 5px;
+    }
+    .float-form-style.form-control {
+      background-color: #fff;
+      margin-bottom: 0;
+      flex-grow: 1;
+      position: relative;
+      input:not(:placeholder-shown) + label,
+      input:placeholder-shown + label {
+        top: -18px;
+        position: absolute;
+      }
+      input:focus + label,
+      input:not(:placeholder-shown) + label {
+        color: #fff;
+      }
+    }
+    @media (max-width: 767px) {
+      padding: 0;
+      max-width: 100%;
+      flex-basis: 100%;
+      min-width: 100%;
+    }
+    @media (max-width: 500px) {
+      flex-direction: column;
+      .float-form-style.form-control {
+        min-width: 100%;
+      }
+      button {
+        margin: 20px 0 0;
+        min-width: 100%;
+      }
+    }
+  }
+  .get-updates-label {
+    padding-right: 80px;
+    color: #fff;
+    h2 {
+      margin-top: 0;
+    }
+    h3 {
+      font-weight: 400;
+      font-size: 16px;
+    }
+    @media (max-width: 767px) {
+      padding: 0;
+      max-width: 100%;
+      flex-basis: 100%;
+    }
+  }
+}
+
+//infographic
+
+.infograph-block {
+  span {
+    display: block;
+    background: #e7e7e7;
+    width: 270px;
+    padding: 30px;
+    box-sizing: border-box;
+    height: 270px;
+    border-radius: 50%;
+    margin: 0 auto -59px;
+    img {
+      max-width: 90%;
+      margin: 0 auto;
+      display: block;
+    }
+  }
+
+  .info-card {
+    div {
+      max-width: 540px;
+      background: #e8f2f6;
+      border: 1px solid #d0dee2;
+      padding: 20px;
+    }
+    h3 {
+      margin: 0 0 15px;
+      font-size: 26px;
+    }
+  }
+
+  &#get-data,
+  &#share-data,
+  &#use-data {
+    position: relative;
+
+    margin: 0 auto 0 0;
+    width: 540px;
+  }
+
+  &#share-data {
+    margin-left: auto;
+    margin-right: -100px;
+    margin-top: -100px;
+    span {
+      margin-right: -20px;
+    }
+  }
+
+  &#use-data {
+    margin: 100px 0 0 -100px;
+    display: flex;
+    justify-content: flex-start;
+    width: 100%;
+    span {
+      margin: 30px 0 0 auto;
+    }
+  }
+  @media (max-width: 1600px) {
+    &#share-data {
+      margin-right: 0;
+    }
+    &#use-data {
+      margin: 0 auto 0 0;
+      display: block;
+      width: 540px;
+      span {
+        margin: 0 0 -59px 112px;
+      }
+    }
+  }
+  @media (max-width: 1600px) {
+    &#share-data span {
+      margin-right: 0;
+    }
+  }
+  @media (max-width: 1250px) {
+    &#get-data,
+    &#share-data,
+    &#use-data {
+      width: 90%;
+      display: block;
+      margin: 0 auto 50px;
+      span {
+        margin: 0 auto;
+        width: 240px;
+        height: 240px;
+      }
+      .info-card {
+        h3 {
+          text-align: center;
+        }
+        div {
+          max-width: 90%;
+          margin: 0 auto;
+        }
+      }
+    }
+  }
+  @media (max-width: 450px) {
+    &#get-data,
+    &#share-data,
+    &#use-data {
+      span {
+        background: none;
+        max-width: 100%;
+      }
+    }
+  }
+}
+
+.front-infographic {
+  width: 1100px;
+  max-width: 100%;
+  margin: 0 auto;
+  .bg-circle {
+    margin: 0 auto;
+    max-width: calc(100vw - 20px);
+    max-height: calc(100vw - 20px);
+    height: 1100px;
+    width: 1100px;
+    border: 2px solid #d9d9d9;
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    border-radius: 50%;
+    @media (max-width: 1250px) {
+      display: none;
+    }
+  }
+}
+
+.view-docs {
+  margin: 70px auto 0;
+  text-align: center;
+  h3 {
+    margin-bottom: 5px;
+  }
+}

package/src/scripts/components/header/Header.tsx

@@ -0,0 +1,151 @@
+import React from "react"
+import { NavLink } from "react-router-dom"
+import { Button } from "../button/Button"
+import { Logo } from "../logo/Logo"
+import { Modal } from "../modal/Modal"
+import { UserMenu } from "../user/UserMenu"
+import "./header.scss"
+
+export interface HeaderProps {
+  profile?: {
+    name: string
+    admin: boolean
+    email: string
+    provider: string
+  }
+  expanded?: boolean
+  isOpenSupport: boolean
+  toggleLoginModal: (
+    userModalParams?: React.MouseEvent<Element, MouseEvent>,
+  ) => void
+  signOutAndRedirect: () => void
+  toggleSupport: () => void
+  navigateToNewSearch: (resetSearchParams?: boolean) => void
+  renderOnExpanded: (profile) => React.ReactNode
+  renderOnFreshDeskWidget: () => React.ReactNode
+  renderUploader: () => React.ReactNode
+}
+
+export const Header = ({
+  profile,
+  expanded,
+  isOpenSupport,
+  toggleLoginModal,
+  signOutAndRedirect,
+  toggleSupport,
+  navigateToNewSearch,
+  renderOnExpanded,
+  renderOnFreshDeskWidget,
+  renderUploader,
+}: HeaderProps) => {
+  const [isOpen, setOpen] = React.useState(false)
+
+  return (
+    <>
+      <header>
+        <div
+          className={isOpen
+            ? "navbar-inner-wrap nav-open"
+            : "navbar-inner-wrap nav-closed"}
+        >
+          <div className="navbar-brand">
+            <NavLink to="/">
+              <Logo horizontal dark={false} />
+            </NavLink>
+            <h1 className="sr-only">OpenNeuro</h1>
+          </div>
+          <div className="navbar-navigation">
+            <span
+              className="mobile-collapse-toggle"
+              onClick={() => setOpen((prev) => !prev)}
+            >
+              <i className="fas fa-bars"></i>
+              <span>menu bar</span>
+            </span>
+            <ul>
+              <span
+                className="mobile-nav-close-x"
+                onClick={() => setOpen((prev) => !prev)}
+              >
+                &times;
+              </span>
+              <li>
+                <NavLink
+                  to="/search"
+                  onClick={(e) => {
+                    e.preventDefault()
+                    setOpen((prev) => !prev)
+                    navigateToNewSearch()
+                  }}
+                >
+                  Search
+                </NavLink>
+              </li>
+              <li>
+                <span
+                  className="no-a"
+                  onClick={() => {
+                    setOpen((prev) => !prev)
+                    toggleSupport()
+                  }}
+                >
+                  Support
+                </span>
+              </li>
+              <li>
+                <a href="https://docs.openneuro.org">Documentation</a>
+              </li>
+              {profile
+                ? (
+                  <li onClick={() => setOpen((prev) => !prev)}>
+                    {renderUploader()}
+                  </li>
+                )
+                : null}
+            </ul>
+          </div>
+          <div className="navbar-account">
+            {profile
+              ? (
+                <div className="header-account-btn">
+                  <UserMenu
+                    profile={profile}
+                    signOutAndRedirect={signOutAndRedirect}
+                  />
+                </div>
+              )
+              : (
+                <>
+                  <Button
+                    navbar
+                    onClick={toggleLoginModal}
+                    label="Sign in"
+                    size="large"
+                  />
+                </>
+              )}
+          </div>
+          {expanded ? renderOnExpanded(profile) : null}
+        </div>
+      </header>
+      <Modal
+        className="freshdesk-support"
+        isOpen={isOpenSupport}
+        toggle={toggleSupport}
+        closeText="Close"
+      >
+        <h3>OpenNeuro Support</h3>
+        <p>
+          Please email issues or questions to
+          <br />
+          <a href={"mailto:support@openneuro.freshdesk.com"}>
+            support@openneuro.freshdesk.com
+          </a>
+          <br />
+          or use the form below.
+        </p>
+        {renderOnFreshDeskWidget()}
+      </Modal>
+    </>
+  )
+}

package/src/scripts/components/header/LandingExpandedHeader.tsx

@@ -0,0 +1,110 @@
+import React from "react"
+import { useNavigate } from "react-router-dom"
+
+import { Button } from "../button/Button"
+import { ModalityCube } from "../modality-cube/ModalityCube"
+import { frontPage } from "../../common/content/front-page-content"
+import { cubeData } from "../../common/content/modality-cube-content"
+import orcidIcon from "../../../assets/orcid_24x24.png"
+
+import "./header.scss"
+
+export interface LandingExpandedHeaderProps {
+  user?: object
+  loginUrls?: Record<string, string>
+  renderAggregateCounts?: (modality?: string) => React.ReactNode
+  renderFacetSelect: () => React.ReactNode
+  renderSearchInput: () => React.ReactNode
+  onSearch: () => void
+}
+
+export const LandingExpandedHeader: React.FC<LandingExpandedHeaderProps> = ({
+  user,
+  loginUrls,
+  renderAggregateCounts,
+  renderFacetSelect,
+  renderSearchInput,
+  onSearch,
+}) => {
+  const aggregateCounts = (modality: string): React.ReactNode =>
+    renderAggregateCounts ? renderAggregateCounts(modality) : null
+  const navigate = useNavigate()
+  const hexGrid = (
+    <ul id="hexGrid">
+      {cubeData.map((item, index) => (
+        <ModalityCube
+          portal={item.portal}
+          key={index}
+          label={item.label}
+          cubeImage={item.cubeImage}
+          altText={item.altText}
+          cubeFaceImage={item.cubeFaceImage}
+          stats={aggregateCounts(item.label)}
+          onClick={(redirectPath) => (_err) => {
+            navigate(redirectPath)
+          }}
+        />
+      ))}
+    </ul>
+  )
+
+  return (
+    <div className="expaned-header" style={{ minHeight: "720px" }}>
+      <div className="container">
+        <div className="grid grid-between header-wrap">
+          <div className="col expaned-h-left">
+            {frontPage.pageDescription}
+            <div className="header-aggregate">{aggregateCounts(null)}</div>
+            <div className="header-modality-wrap">{renderFacetSelect()}</div>
+            <span className="header-or-text">Or</span>
+            <div className="header-input-wrap">
+              <div className="header-input">{renderSearchInput()}</div>
+
+              <div className="header-input-button">
+                <Button
+                  onClick={() => onSearch()}
+                  primary={true}
+                  icon="fas fa-search"
+                  size="small"
+                  iconOnly={true}
+                  label="Search"
+                />
+              </div>
+            </div>
+
+            {!user
+              ? (
+                <div className="grid  grid-start hero-signin">
+                  <div className=" hero-sigin-label">
+                    <h3>SIGN IN</h3>
+                  </div>
+                  <div>
+                    <a href={loginUrls.google}>
+                      <Button
+                        label="Google"
+                        color="#fff"
+                        icon="fab fa-google"
+                        iconSize="23px"
+                      />
+                    </a>
+                  </div>
+                  <div>
+                    <a href={loginUrls.orcid}>
+                      <Button
+                        label="ORCID"
+                        color="#fff"
+                        imgSrc={orcidIcon}
+                        iconSize="23px"
+                      />
+                    </a>
+                  </div>
+                </div>
+              )
+              : null}
+          </div>
+          {hexGrid}
+        </div>
+      </div>
+    </div>
+  )
+}