ui: overridden: Update home page to show journals and standards

CERNDocumentServer · Mar 11, 2024 · 913916e · 913916e
1 parent 879eee1
commit 913916e
Show file tree

Hide file tree

Showing 2 changed files with 99 additions and 14 deletions.
diff --git a/ui/src/overridableMapping.js b/ui/src/overridableMapping.js
@@ -13,7 +13,11 @@ import { DocumentRequestFormFields } from "./overridden/frontsite/DocumentReques
 import { DocumentRequestFormHeader } from "./overridden/frontsite/DocumentRequest/DocumentRequestFormHeader";
 import { NotAvailable } from "./overridden/frontsite/Document/DocumentDetails/DocumentCirculation/NotAvailable";
 import { StandardNumber } from "./overridden/frontsite/Document/DocumentDetails/DocumentPanel/StandardNumber";
-import { HomeContent, HomeHeadline } from "./overridden/frontsite/Home/HomeContent";
+import {
+  HomeContent,
+  HomeHeadline,
+  HomeButtons,
+} from "./overridden/frontsite/Home/HomeContent";
 import { LegacyRecordRoute } from "./overridden/frontsite/Routes/LegacyRoute";
 import { Slogan } from "./overridden/frontsite/Home/Slogan";
 import { SideBarMenuItem } from "./overridden/backoffice/Sidebar/SideBarMenuItem";
@@ -33,6 +37,7 @@ export const overriddenCmps = {
   "Backoffice.PatronDetails.Metadata.ActionMenuItem": PatronMetadataActionMenuItem,
   "Home.Headline": HomeHeadline,
   "Home.Headline.slogan": Slogan,
+  "Home.Headline.extra": HomeButtons,
   "Home.content": HomeContent,
   "ILSFooter": Footer,
   "ILSMenu.Logo": Logo,

diff --git a/ui/src/overridden/frontsite/Home/HomeContent.js b/ui/src/overridden/frontsite/Home/HomeContent.js
@@ -6,12 +6,81 @@ import {
 } from "@inveniosoftware/react-invenio-app-ils";
 import React from "react";
 import { parametrize } from "react-overridable";
-import { Container } from "semantic-ui-react";
+import {
+  Button,
+  Container,
+  Divider,
+  Grid,
+  Message,
+  Header,
+  Icon,
+  List,
+} from "semantic-ui-react";
+import { Link as ScrollLink } from "react-scroll";
+import { snvLink } from "../utils";
 
 export const HomeHeadline = parametrize(Headline, {
   backgroundImageURL: process.env.PUBLIC_URL + "/images/home-headline-background.jpg",
 });
 
+export const HomeButtons = () => {
+  return (
+    <Container className="container-extra">
+      <Divider />
+      <Grid>
+        <Grid.Row>
+          <Grid.Column width={16} textAlign="center">
+            <Button
+              className="headline-quick-access"
+              as={ScrollLink}
+              to="recent-books-ebooks"
+              offset={-100}
+              smooth
+              primary
+            >
+              Recent books/e-books
+            </Button>
+            <Button
+              className="headline-quick-access"
+              as={ScrollLink}
+              to="recent-journals-ejournals"
+              offset={-100}
+              smooth
+              primary
+            >
+              Recent journals/e-journals
+            </Button>
+          </Grid.Column>
+        </Grid.Row>
+        <Grid.Row>
+          <Grid.Column width={16} textAlign="center">
+            <Button
+              className="headline-quick-access"
+              as={ScrollLink}
+              to="most-loaned"
+              offset={-100}
+              smooth
+              primary
+            >
+              Most loaned books
+            </Button>
+            <Button
+              className="headline-quick-access"
+              as={ScrollLink}
+              to="standards"
+              offset={-100}
+              smooth
+              primary
+            >
+              Current and historical standards
+            </Button>
+          </Grid.Column>
+        </Grid.Row>
+      </Grid>
+    </Container>
+  );
+};
+
 export const HomeContent = () => {
   return (
     <Container fluid className="fs-landing-page-section-wrapper">
@@ -20,10 +89,10 @@ export const HomeContent = () => {
           <Container
             textAlign="center"
             className="fs-landing-page-section no-background"
-            id="recent-books"
+            id="recent-books-ebooks"
           >
             <DocumentCardGroup
-              title="Most recent books"
+              title="Most recent books and e-books"
               headerClass="section-header highlight"
               fetchDataMethod={documentApi.list}
               fetchDataQuery={documentApi
@@ -42,21 +111,15 @@ export const HomeContent = () => {
       <Container
         textAlign="center"
         className="fs-landing-page-section"
-        id="recent-ebooks"
+        id="recent-journals-ejournals"
       >
         <DocumentCardGroup
-          title="Most recent e-books"
+          title="Most recent journals and e-journals"
           headerClass="section-header highlight"
           fetchDataMethod={documentApi.list}
-          fetchDataQuery={documentApi
-            .query()
-            .withDocumentType("BOOK")
-            .withEitems()
-            .sortBy("-created")
-            .withSize(5)
-            .qs()}
+          fetchDataQuery="publication_info:*&sort=-created&size=5"
           viewAllUrl={FrontSiteRoutes.documentsListWithQuery(
-            "&f=doctype%3ABOOK&f=medium%3AE-BOOK&sort=created&order=desc"
+            "publication_info:*&sort=created&order=desc"
           )}
         />
       </Container>
@@ -80,6 +143,23 @@ export const HomeContent = () => {
           )}
         />
       </Container>
+      <Container textAlign="center" className="fs-landing-page-section" id="standards">
+        <Header as="h2" className="section-header highlight">
+          Current and historical standards
+        </Header>
+        <Message info icon style={{ justifyContent: "center" }}>
+          <Icon name="info circle" />
+          <List className="mt-5">
+            <Message.Header>
+              CERN readers have access to {snvLink} and can search directly!
+            </Message.Header>
+            <Message.Content>
+              CERN readers can access the standards online and download them on their
+              computers as PDF files.
+            </Message.Content>
+          </List>
+        </Message>
+      </Container>
     </Container>
   );
 };