@openneuro/app 4.4.8 → 4.5.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@openneuro/app",
-  "version": "4.4.8",
+  "version": "4.5.0",
   "description": "React JS web frontend for the OpenNeuro platform.",
   "license": "MIT",
   "main": "public/client.js",
@@ -19,10 +19,10 @@
     "@elastic/apm-rum": "5.9.1",
     "@emotion/react": "11.6.0",
     "@emotion/styled": "11.6.0",
-    "@openneuro/client": "^4.4.8",
-    "@openneuro/components": "^4.4.8",
+    "@openneuro/client": "^4.5.0",
+    "@openneuro/components": "^4.5.0",
     "babel-runtime": "^6.26.0",
-    "bids-validator": "1.8.8",
+    "bids-validator": "1.9.2",
     "bytes": "^3.0.0",
     "comlink": "^4.0.5",
     "core-js": "^3.3.2",
@@ -116,5 +116,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "b8a034d3dc02824a74f92dbf4917a3da8f8defae"
+  "gitHead": "8771d59f40e642de9313468e8764f91fb0d811b2"
 }

package/src/scripts/app.tsx

@@ -1,6 +1,6 @@
 import React, { FC, ReactNode } from 'react'
 import Helmet from 'react-helmet'
-import { frontPage } from './front-page/front-page-content'
+import { frontPage } from './pages/front-page/front-page-content'
 import { CookiesProvider, Cookies } from 'react-cookie'
 import { ToastContainer } from 'react-toastify'
 import { MediaContextProvider } from './styles/media'

package/src/scripts/common/partials/papaya.jsx

@@ -25,6 +25,7 @@ class Papaya extends React.Component {
       allowScroll: false,
       fullScreenPadding: false,
       showControlBar: true,
+      showOrientation: true,
       images: [this.props.image],
       kioskMode: true,
     }

package/src/scripts/index.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import Uploader from './refactor_2021/uploader/uploader.jsx'
-import Routes from './refactor_2021/routes'
+import Routes from './routes'
 import HeaderContainer from './refactor_2021/containers/header'
 import FooterContainer from './refactor_2021/containers/footer'
 import { SearchParamsProvider } from './refactor_2021/search/search-params-ctx'

package/src/scripts/{refactor_2021 → pages}/admin/admin.jsx

@@ -4,7 +4,7 @@ import React from 'react'
 import { Redirect, Switch, Route, NavLink } from 'react-router-dom'
 import Users from './users.jsx'
 import FlaggedFiles from './flagged-files.jsx'
-import AdminUser from '../authentication/admin-user.jsx'
+import AdminUser from '../../refactor_2021/authentication/admin-user.jsx'
 
 class Dashboard extends React.Component {
   // life cycle events --------------------------------------------------

package/src/scripts/{refactor_2021 → pages}/admin/user-tools.tsx

@@ -2,7 +2,7 @@ import React, { FC, ReactElement } from 'react'
 import { gql } from '@apollo/client'
 import { Mutation } from '@apollo/client/react/components'
 import { WarnButton } from '@openneuro/components/warn-button'
-import { getProfile } from '../authentication/profile.js'
+import { getProfile } from '../../refactor_2021/authentication/profile.js'
 import { useCookies } from 'react-cookie'
 import { USER_FRAGMENT } from './user-fragment'
 

package/src/scripts/pages/citation-page.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { frontPage } from '../front-page/front-page-content'
+import { frontPage } from './front-page/front-page-content'
 import styled from '@emotion/styled'
 
 const CitationPageStyle = styled.div`

package/src/scripts/{front-page → pages/front-page}/front-page-content.ts

@@ -1,13 +1,13 @@
-import ljaf from '../../assets/ljaf.png'
-import nsf from '../../assets/nsf.png'
-import nih from '../../assets/nih.png'
-import squishymedia from '../../assets/squishymedia.png'
-import stanford from '../../assets/stanford.png'
-import logo_app from '../../assets/logo_app.png'
-import logo_cube from '../../assets/logo_cube.png'
-import logo_data from '../../assets/logo_data.png'
-import logo_users from '../../assets/logo_users.png'
-import brand_mark from '../../assets/brand_mark.png'
+import ljaf from '../../../assets/ljaf.png'
+import nsf from '../../../assets/nsf.png'
+import nih from '../../../assets/nih.png'
+import squishymedia from '../../../assets/squishymedia.png'
+import stanford from '../../../assets/stanford.png'
+import logo_app from '../../../assets/logo_app.png'
+import logo_cube from '../../../assets/logo_cube.png'
+import logo_data from '../../../assets/logo_data.png'
+import logo_users from '../../../assets/logo_users.png'
+import brand_mark from '../../../assets/brand_mark.png'
 
 export const frontPage = {
   pageTitle: 'OpenNeuro',

package/src/scripts/{refactor_2021/containers/front-page-container.tsx → pages/front-page/front-page.tsx}

@@ -2,9 +2,9 @@ import { apm } from '../../apm'
 import React from 'react'
 import { gql, useQuery } from '@apollo/client'
 import { Mutation } from '@apollo/client/react/components'
+import styled from '@emotion/styled'
 
 import {
-  FrontPage,
   AffiliateBlock,
   ActivityHeader,
   Contributors,
@@ -154,37 +154,58 @@ export const FrontPageNewQuery = ({ query }) => {
     )
   }
 }
-const FrontPageContainer: React.FC = () => {
-  return (
-    <>
-      <FrontPage
-        className="front-page"
-        renderAffiliateBlock={() => <AffiliateBlock />}
-        renderInfographic={() => <Infographic />}
-        renderActivitySliderFront={() => (
-          <>
-            <ActivityHeader />
-            <FrontPageTopQuery query={TOP_VIEWED} />
-            <FrontPageNewQuery query={RECENTLY_PUBLISHED} />
-          </>
-        )}
-        renderGetUpdates={() => (
-          <Mutation mutation={SUBSCRIBE_TO_NEWSLETTER}>
-            {subscribeToNewsletter => (
-              <GetUpdates
-                subscribe={(email, cb) => {
-                  subscribeToNewsletter({ variables: { email } })
-                    .then(cb)
-                    .catch(cb)
-                }}
-              />
-            )}
-          </Mutation>
+
+const FrontPageSection = styled.section`
+  margin: 100px 0;
+  &:last-child {
+    margin-bottom: 0;
+  }
+  &.gray-bg {
+    margin: 0;
+    padding: 100px 0;
+    &:last-child {
+      padding-bottom: 0;
+    }
+  }
+`
+
+const FrontPageContainer: React.FC = () => (
+  <div className="front-page page">
+    <FrontPageSection>
+      <AffiliateBlock />
+    </FrontPageSection>
+    <FrontPageSection>
+      <div className="container">
+        <Infographic />
+      </div>
+    </FrontPageSection>
+    <FrontPageSection className="front-page-activity">
+      <div className="activity-swoop">
+        <div></div>
+      </div>
+      <div className="swoop-content gray-bg">
+        <div className="container">
+          <ActivityHeader />
+          <FrontPageTopQuery query={TOP_VIEWED} />
+          <FrontPageNewQuery query={RECENTLY_PUBLISHED} />
+        </div>
+      </div>
+    </FrontPageSection>
+    <FrontPageSection className="gray-bg">
+      <Mutation mutation={SUBSCRIBE_TO_NEWSLETTER}>
+        {subscribeToNewsletter => (
+          <GetUpdates
+            subscribe={(email, cb) => {
+              subscribeToNewsletter({ variables: { email } }).then(cb).catch(cb)
+            }}
+          />
         )}
-        renderContributors={() => <Contributors />}
-      />
-    </>
-  )
-}
+      </Mutation>
+    </FrontPageSection>
+    <FrontPageSection className="gray-bg">
+      <Contributors />
+    </FrontPageSection>
+  </div>
+)
 
 export default FrontPageContainer

package/src/scripts/pages/front-page-comp.tsx

@@ -0,0 +1,57 @@
+import React from 'react'
+import styled from '@emotion/styled'
+
+const FrontPageSection = styled.section`
+  margin: 100px 0;
+  &:last-child {
+    margin-bottom: 0;
+  }
+  &.gray-bg {
+    margin: 0;
+    padding: 100px 0;
+    &:last-child {
+      padding-bottom: 0;
+    }
+  }
+`
+
+export interface FrontPageProps {
+  renderAffiliateBlock: () => React.ReactNode
+  renderInfographic: () => React.ReactNode
+  renderActivitySliderFront: () => React.ReactNode
+  renderGetUpdates: () => React.ReactNode
+  renderContributors: () => React.ReactNode
+  className?: string
+}
+
+export const FrontPage: React.FC<FrontPageProps> = ({
+  renderAffiliateBlock,
+  renderInfographic,
+  renderActivitySliderFront,
+  renderGetUpdates,
+  renderContributors,
+  className,
+}) => (
+  <>
+    <div className={className + ' page'}>
+      <FrontPageSection>{renderAffiliateBlock()}</FrontPageSection>
+      <FrontPageSection>
+        <div className="container">{renderInfographic()}</div>
+      </FrontPageSection>
+      <FrontPageSection className="front-page-activity">
+        <div className="activity-swoop">
+          <div></div>
+        </div>
+        <div className="swoop-content gray-bg">
+          <div className="container">{renderActivitySliderFront()}</div>
+        </div>
+      </FrontPageSection>
+      <FrontPageSection className="gray-bg">
+        {renderGetUpdates()}
+      </FrontPageSection>
+      <FrontPageSection className="gray-bg">
+        {renderContributors()}
+      </FrontPageSection>
+    </div>
+  </>
+)