Merge pull request BloomBooks#555 from BloomBooks/BL13299_ResourcesAn…

…dAbout Add About tab and change Create to Resources (BL-13299)
StephenMcConnel · Jul 9, 2024 · 0eec13b · 0eec13b
2 parents f30819a + ebe6a65
commit 0eec13b
Show file tree

Hide file tree

Showing 3 changed files with 56 additions and 29 deletions.
diff --git a/src/components/header/Header.tsx b/src/components/header/Header.tsx
@@ -13,29 +13,33 @@ import { useMediaQuery, Tab, Tabs } from "@material-ui/core";
 import { useHistory, useLocation } from "react-router-dom";
 import { useIntl } from "react-intl";
 import { BlorgLink } from "../BlorgLink";
-import { isInCreateSectionOfSite } from "../pages/ThemeForLocation";
+import {
+    isInCreateSectionOfSite,
+    isOnAboutPage,
+} from "../pages/ThemeForLocation";
 
 export const Header: React.FunctionComponent<{}> = (props) => {
     const location = useLocation();
-    const createTabSelected = isInCreateSectionOfSite(location.pathname);
+    const isCreateTabSelected = isInCreateSectionOfSite(location.pathname);
+    const isAboutTabSelected = isOnAboutPage(location.pathname);
     const routerHistory = useHistory();
-    const showSearchBelow = !useMediaQuery("(min-width:975px)");
-    const showReadCreateBelow = !useMediaQuery("(min-width:560px)");
-    const showReadCreateNarrower = !useMediaQuery("(min-width:640px)");
+    const showSearchBelow = !useMediaQuery("(min-width:1200px)");
+    const showTabsBelow = !useMediaQuery("(min-width:700px)");
+    const showTabsNarrower = !useMediaQuery("(min-width:830px)");
     // At widths less than 300px, the User Menu sticks out to the right and causes horizontal scrolling.
     const showUserMenu = useMediaQuery("(min-width:300px)");
-    const normalToobarHeight = "48px";
-    let toolbarHeight = normalToobarHeight;
-    if (showReadCreateBelow) {
+    const normalToolbarHeight = "48px";
+    let toolbarHeight = normalToolbarHeight;
+    if (showTabsBelow) {
         toolbarHeight = "146px";
     } else if (showSearchBelow) {
         toolbarHeight = "100px";
     }
     const l10n = useIntl();
 
-    const minTabWidth = showReadCreateNarrower ? "min-width:110px" : "";
+    const minTabWidth = showTabsNarrower ? "min-width:110px" : "";
 
-    const backgroundColor = createTabSelected
+    const backgroundColor = isCreateTabSelected
         ? commonUI.colors.creationArea
         : commonUI.colors.bloomRed;
     // 14pt bold is the minimum size for white text on bloom-red to be considered accessible
@@ -44,26 +48,32 @@ export const Header: React.FunctionComponent<{}> = (props) => {
         font-size: 14pt !important;
         font-weight: bold !important;
         flex-shrink: 2;
+        white-space: nowrap;
     `;
-    const readCreateTabs = (
+    const topLevelTabs = (
         <Tabs
-            value={createTabSelected ? 1 : 0}
-            onChange={(e, value) => {
-                //setCreateTabSelected(value);
-                routerHistory.push(value ? "/create" : "/read");
-                // window.history.pushState(
-                //     {},
-                //     "foo",
-                //     value ? "/create" : "/read"
-                // );
+            value={isAboutTabSelected ? 2 : isCreateTabSelected ? 1 : 0}
+            onChange={(_, value) => {
+                switch (value) {
+                    case 0:
+                    default:
+                        routerHistory.push("/read");
+                        break;
+                    case 1:
+                        routerHistory.push("/create");
+                        break;
+                    case 2:
+                        routerHistory.push("/about");
+                        break;
+                }
             }}
             // The margin-right generally grows and may well be much bigger than 30px.
             // The low value allows things to get tight without the text being cut off by the margin.
             // The opacity of 1 defeats the default MUI behavior of dimming the unselected tab text,
             // which leaves us without sufficient contrast between text and background for
             // accessibility.
             css={css`
-                margin-left: ${showReadCreateBelow ? "0" : "30px"};
+                margin-left: ${showTabsBelow ? "0" : "30px"};
                 margin-right: 13px;
                 .MuiTabs-indicator {
                     background-color: white !important;
@@ -86,8 +96,15 @@ export const Header: React.FunctionComponent<{}> = (props) => {
             ></Tab>
             <Tab
                 label={l10n.formatMessage({
-                    id: "header.create",
-                    defaultMessage: "Create",
+                    id: "header.resources",
+                    defaultMessage: "Resources",
+                })}
+                css={tabStyle}
+            ></Tab>
+            <Tab
+                label={l10n.formatMessage({
+                    id: "header.about",
+                    defaultMessage: "About",
                 })}
                 css={tabStyle}
             ></Tab>
@@ -110,7 +127,7 @@ export const Header: React.FunctionComponent<{}> = (props) => {
             <div
                 css={css`
                     display: flex;
-                    height: ${normalToobarHeight};
+                    height: ${normalToolbarHeight};
                     flex-shrink: 0;
                     box-sizing: content-box;
                     justify-content: space-between;
@@ -135,7 +152,7 @@ export const Header: React.FunctionComponent<{}> = (props) => {
                         })}
                     />
                 </BlorgLink>
-                {showReadCreateBelow || readCreateTabs}
+                {showTabsBelow || topLevelTabs}
                 {showSearchBelow || (
                     <div
                         // The margin-left:auto here (or on UserMenu if search is below)
@@ -152,14 +169,14 @@ export const Header: React.FunctionComponent<{}> = (props) => {
                 )}
                 {showUserMenu && (
                     <UserMenuCodeSplit
-                        buttonHeight={normalToobarHeight}
+                        buttonHeight={normalToolbarHeight}
                         css={css`
                             ${showSearchBelow ? "margin-left: auto" : ""};
                         `}
                     />
                 )}
             </div>
-            {showReadCreateBelow && readCreateTabs}
+            {showTabsBelow && topLevelTabs}
             {showSearchBelow && (
                 <div
                     css={css`

diff --git a/src/components/pages/ThemeForLocation.tsx b/src/components/pages/ThemeForLocation.tsx
@@ -30,3 +30,9 @@ export function isInCreateSectionOfSite(urlPathname: string): boolean {
 
     return urlPathname.includes("/create/");
 }
+
+export function isOnAboutPage(urlPathname: string): boolean {
+    if (!urlPathname) return false;
+
+    return urlPathname.endsWith("/about");
+}
diff --git a/src/localization/Code Strings.json b/src/localization/Code Strings.json
@@ -51,9 +51,13 @@
         "description": "",
         "message": "Read"
     },
-    "header.create": {
+    "header.resources": {
         "description": "",
-        "message": "Create"
+        "message": "Resources"
+    },
+    "header.about": {
+        "description": "Top-level tab which navigates to a page with information about Bloom",
+        "message": "About"
     },
     "header.home": {
         "description": "",