CORE-4729: update outputs page (#1024) (#1025)

components/toggle-panel/styles.module.scss

@@ -26,11 +26,3 @@
     }
   }
 }
-
-.toggle-content {
-  margin-top: 24px;
-  display: flex;
-  justify-content: space-between;
-  flex-wrap: wrap;
-  gap: 20px;
-}

data/research-outputs.yml

@@ -4,8 +4,29 @@ description: Writing about CORE? Discover our research outputs and cite our work
 
 image: /images/research-outputs
 
-opened-section:
-    id: our-vision
+links:
+  content:
+    - title:  CORE reference articles
+      href: our-vision
+    - title:  CORE aggregation approaches and infrastructure
+      href: aggregation-approaches-and-infrastructure
+    - title:  Selected AI/ML papers
+      href: ai-ml-papers
+    - title:  CORE Recommender
+      href: recommender
+    - title:  CORE repositories dashboard
+      href: repositories-dashboard
+    - title:  CORE and download statistics
+      href: download-statistics
+    - title:  Supporting research assessment and evaluation
+      href: supporting-research-assessment-and-evaluation
+  more: Find more our research outputs at [Big Scientific Data and Text Analytics group website.](http://bsdtag.kmi.open.ac.uk)
+  moreAction:
+    title: find more
+    link: http://bsdtag.kmi.open.ac.uk
+
+sections:
+  - id: our-vision
     title: CORE vision and mission
     subTitle: If you use CORE in your work, we kindly ask you to cite one of our reference publications.
     caption: Vision and mission
@@ -155,7 +176,6 @@ opened-section:
                      url = {http://oro.open.ac.uk/35755/},
                 abstract = {The last 10 years have seen a massive increase in the amount of Open Access publications in journals and institutional repositories. The open availability of large volumes of state-of-the-art knowledge online has the potential to provide huge savings and benefits in many fields. However, in order to fully leverage this knowledge, it is necessary to develop systems that (a) make it easy for users to discover and access this knowledge at the level of individual resources, (b) explore and analyse this knowledge at the level of collections of resources and (c) provide infrastructure and access to raw data in order to lower the barriers to the research and development of systems and services on top of this knowledge. In this paper, we argue why these requirements should be satisfied and show that current systems do not meet them. Consequently, we present the CORE (COnnecting REpositories) system, a large-scale Open Access aggregation, outlining its existing functionality and discussing the future technical development. We demonstrate how the system addresses the above needs and how it can be applied to the benefit of the whole ecosystem that includes institutional repositories, individuals, researchers, developers, funding bodies and governments.}
             }
-sections:
   - id: aggregation-approaches-and-infrastructure
     title: CORE aggregation approaches and infrastructure
     caption: Aggregation approaches and infrastructure

pages/about/about.module.scss

@@ -190,16 +190,38 @@
   .title {
     max-width: 25ch;
   }
-}
-
-.logo-container {
-  width: 520px;
-  height: 261px;
-  padding: 1rem;
-  img {
-    height: 100%;
-    width: 100%;
-    object-fit: contain;
+  .sectionWrapper {
+    max-width: 50ch;
+    gap: 16px;
+  }
+  .redirect-button-wrapper {
+    display: flex;
+    flex-direction: row;
+    padding: 1rem;
+    gap: 8px;
+    background: #f5f5f5;
+    margin: 16px 0;
+    .redirect-links {
+      width: calc(100% - 125px);
+    }
+    .redirect-button {
+      width: 125px;
+      height: max-content;
+      margin-top: 5px;
+    }
+  }
+  .redirect-wrapper {
+    padding: 1rem;
+    gap: 8px;
+    background: #f5f5f5;
+    margin: 16px 0;
+    .redirect-link {
+      line-height: 2rem;
+      list-style-type: disc;
+      text-decoration-line: underline;
+      margin-left: 16px;
+      cursor: pointer;
+    }
   }
 }
 
@@ -210,15 +232,6 @@
     width: 100%;
     max-width: unset;
   }
-  .always-open {
-    margin-top: 24px;
-    display: flex;
-    justify-content: space-between;
-    gap: 20px;
-    @media (max-width: $breakpoint-sm) {
-      flex-wrap: wrap;
-    }
-  }
   .toggle-panel-title {
     font-style: normal;
     font-weight: 500;
@@ -327,3 +340,11 @@
     }
   }
 }
+
+.toggle-content {
+  margin-top: 24px;
+  display: flex;
+  justify-content: space-between;
+  flex-wrap: wrap;
+  gap: 20px;
+}

pages/about/research-outputs.jsx

@@ -5,10 +5,9 @@ import { classNames } from '@oacore/design/lib/utils'
 import { Button } from '@oacore/design/lib/elements'
 
 import styles from './about.module.scss'
-import researchOutputs from '../../public/images/research-outputs.svg'
+import bsdtag from '../../public/images/bsdtag.svg'
 import coreLogo from '../../public/images/core-logo-circle.svg'
 import { Layout } from '../../design-v2/components'
-import TogglePanel from '../../components/toggle-panel/togglePanel'
 
 import { Content, Reference, Section } from 'components'
 import Markdown from 'components/markdown'
@@ -115,17 +114,15 @@ const ResearchOutputsSection = ({
   onPaperCite,
   isCitationsModalOpen,
   activePaper,
+  subTitle,
   ...restProps
 }) => (
   <Section id={id} {...restProps} className={styles.researchSection}>
     <Content className={styles.researchItem}>
-      <TogglePanel
-        id={title}
-        title={title}
-        key={title}
-        sectionId={id}
-        className={styles.toggler}
-        content={papers.map((paper) => (
+      <div className={styles.togglePanelTitle}>{title}</div>
+      <p className={styles.togglePanelSubTitle}>{subTitle}</p>
+      <div className={styles.toggleContent}>
+        {papers?.map((paper) => (
           <div
             className={classNames.use(styles.toggleItem, {
               [styles.toggleItemSmall]: papers.length > 1,
@@ -143,53 +140,35 @@ const ResearchOutputsSection = ({
             />
           </div>
         ))}
-      />
+      </div>
     </Content>
   </Section>
 )
 
-const ResearchOutputsOpenSection = ({
-  id,
-  title,
-  papers,
-  onPaperCite,
-  isCitationsModalOpen,
-  activePaper,
-  subTitle,
-  index,
-  ...restProps
-}) => (
-  <Section id={id} {...restProps} className={styles.researchSection}>
-    <div className={styles.togglePanelTitle}>{title}</div>
-    <p className={styles.togglePanelSubTitle}>{subTitle}</p>
-    <div className={styles.alwaysOpen}>
-      {papers?.map((paper) => (
-        <div
-          className={classNames.use(styles.toggleItem, {
-            [styles.toggleItemSmall]: papers.length > 1,
-          })}
-        >
-          <ResearchPaperCard
-            paper={paper}
-            papersLength={papers.length > 1}
-            key={paper.id}
-            className="mb-3"
-            isCitationsModalOpen={isCitationsModalOpen}
-            activePaper={activePaper}
-            {...paper}
-          />
-        </div>
-      ))}
-    </div>
-  </Section>
-)
-
 class ResearchOutputsPage extends Component {
   state = {
     isCitationsModalOpen: false,
     activePaper: null,
   }
 
+  constructor(props) {
+    super(props)
+    this.headerHeight = 50
+  }
+
+  handleScroll = (id) => {
+    const element = document.getElementById(id)
+    const offset = this.headerHeight
+
+    if (element) {
+      const position = element.offsetTop - offset
+      window.scrollTo({
+        top: position,
+        behavior: 'smooth',
+      })
+    }
+  }
+
   @bind
   toggleCitationsModal(event, paper) {
     this.setState(({ isCitationsModalOpen, activePaper }) => ({
@@ -209,29 +188,43 @@ class ResearchOutputsPage extends Component {
             <Markdown className={styles.description}>
               {page.description}
             </Markdown>
+            <img className={styles.headerImage} src={bsdtag} alt="bsdtag" />
           </div>
-          <div className={styles.logoContainer}>
-            <img className={styles.headerImage} src={researchOutputs} alt="" />
+          <div className={styles.sectionWrapper}>
+            <ul className={styles.redirectWrapper}>
+              {page.links.content.map((item) => (
+                <li className={styles.redirectLink}>
+                  {/* eslint-disable-next-line max-len */}
+                  {/* eslint-disable-next-line jsx-a11y/anchor-is-valid,jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions */}
+                  <a onClick={() => this.handleScroll(item.href)}>
+                    {item.title}
+                  </a>
+                </li>
+              ))}
+            </ul>
+            <div className={styles.redirectButtonWrapper}>
+              <Markdown className={styles.redirectLinks}>
+                {page.links.more}
+              </Markdown>
+              <Button
+                className={styles.redirectButton}
+                tag="a"
+                variant="contained"
+                href={page.links.moreAction.link}
+              >
+                {page.links.moreAction.title}
+              </Button>
+            </div>
           </div>
         </Section>
-        <ResearchOutputsOpenSection
-          key={page.openedSection.id}
-          id={page.openedSection.id}
-          caption={page.openedSection.caption || page.openedSection.title}
-          title={page.openedSection.title}
-          subTitle={page.openedSection.subTitle}
-          papers={page.openedSection.papers}
-          onPaperCite={this.toggleCitationsModal}
-          isCitationsModalOpen={isCitationsModalOpen}
-          activePaper={activePaper}
-        />
         {page.sections.map((section, index) => (
           <ResearchOutputsSection
             key={section.id}
             index={index}
             id={section.id}
             caption={section.caption || section.title}
             title={section.title}
+            subTitle={section.subTitle}
             papers={section.papers}
             onPaperCite={this.toggleCitationsModal}
             isCitationsModalOpen={isCitationsModalOpen}