Improve AppBar and GoalTimeline response to different window widths.

src/components/AppBar/AppBarComponent.tsx

@@ -26,22 +26,20 @@ export default function AppBarComponent(props: AppBarComponentProps) {
             spacing={2}
             alignItems="center"
           >
-            <Grid item xs>
+            <Grid item xs={7} md={5} lg={4}>
               <Logo />
               {getProjectId() !== "" && (
                 <NavigationButtons currentTab={props.currentTab} />
               )}
             </Grid>
-            <Grid item xs>
+            <Grid item xs={2} sm={3} md={4}>
               {getProjectId() !== "" && (
                 <ProjectNameButton currentTab={props.currentTab} />
               )}
-            </Grid>
-            <Grid item>
               <DownloadButton colorSecondary />
             </Grid>
             <Grid item>
-              <UserMenu />
+              <UserMenu currentTab={props.currentTab} />
             </Grid>
           </Grid>
         </Toolbar>

src/components/AppBar/Logo.tsx

@@ -1,4 +1,4 @@
-import { Button } from "@material-ui/core";
+import { Button, Hidden } from "@material-ui/core";
 import React from "react";
 
 import history, { Path } from "browserHistory";
@@ -13,12 +13,12 @@ export default function Logo() {
         history.push(Path.ProjScreen);
       }}
     >
-      <img
-        srcSet={`${logo} 1200w, ${smallLogo} 600w`}
-        src={logo}
-        height="50"
-        alt="Logo"
-      />
+      <Hidden xsDown>
+        <img src={logo} height="50" alt="Logo" />
+      </Hidden>
+      <Hidden smUp>
+        <img src={smallLogo} height="50" alt="Logo" />
+      </Hidden>
     </Button>
   );
 }

src/components/AppBar/NavigationButtons.tsx

@@ -20,6 +20,7 @@ export default function NavigationButtons(props: NavigationButtonsProps) {
         }}
         color="inherit"
         style={{
+          width: "min-content",
           background: tabColor(props.currentTab, Path.DataEntry),
         }}
       >
@@ -32,6 +33,7 @@ export default function NavigationButtons(props: NavigationButtonsProps) {
         }}
         color="inherit"
         style={{
+          width: "min-content",
           background: tabColor(props.currentTab, Path.Goals),
         }}
       >

src/components/AppBar/ProjectNameButton.tsx

@@ -1,5 +1,7 @@
-import { Button } from "@material-ui/core";
+import { Button, Hidden, Tooltip } from "@material-ui/core";
+import { Settings } from "@material-ui/icons";
 import React from "react";
+import { Translate } from "react-localize-redux";
 import { useSelector } from "react-redux";
 
 import history, { Path } from "browserHistory";
@@ -14,17 +16,22 @@ export default function ProjectNameButton(props: ProjectNameButtonProps) {
   const projectName = useSelector((state: any) => state.currentProject.name);
 
   return (
-    <Button
-      id="project-name"
-      onClick={() => {
-        history.push(Path.ProjSettings);
-      }}
-      color="inherit"
-      style={{
-        background: tabColor(props.currentTab, Path.ProjSettings),
-      }}
-    >
-      {projectName}
-    </Button>
+    <React.Fragment>
+      <Tooltip title={<Translate id="userMenu.projectSettings" />}>
+        <Button
+          id="project-name"
+          onClick={() => {
+            history.push(Path.ProjSettings);
+          }}
+          color="inherit"
+          style={{
+            background: tabColor(props.currentTab, Path.ProjSettings),
+          }}
+        >
+          <Settings />
+          <Hidden xsDown>{projectName}</Hidden>
+        </Button>
+      </Tooltip>
+    </React.Fragment>
   );
 }

src/components/AppBar/UserMenu.tsx

@@ -1,4 +1,4 @@
-import { Avatar, Button, Menu, MenuItem } from "@material-ui/core";
+import { Avatar, Button, Hidden, Menu, MenuItem } from "@material-ui/core";
 import {
   ExitToApp,
   Help,
@@ -11,7 +11,7 @@ import { Translate } from "react-localize-redux";
 import { getUser } from "backend";
 import * as LocalStorage from "backend/localStorage";
 import history, { Path } from "browserHistory";
-import theme from "types/theme";
+import theme, { tabColor } from "types/theme";
 
 export async function getIsAdmin(): Promise<boolean> {
   const userId = LocalStorage.getUserId();
@@ -22,10 +22,14 @@ export async function getIsAdmin(): Promise<boolean> {
   return false;
 }
 
+interface UserMenuProps {
+  currentTab: Path;
+}
+
 /**
  * Avatar in appbar with dropdown UserMenu
  */
-export default function UserMenu() {
+export default function UserMenu(props: UserMenuProps) {
   const [anchorElement, setAnchorElement] = useState<null | HTMLElement>(null);
   const avatar = LocalStorage.getAvatar();
   const [isAdmin, setIsAdmin] = useState<boolean>(false);
@@ -47,7 +51,11 @@ export default function UserMenu() {
         aria-haspopup="true"
         onClick={handleClick}
         color="secondary"
+        style={{
+          background: tabColor(props.currentTab, Path.UserSettings),
+        }}
       >
+        <Hidden smDown>{LocalStorage.getCurrentUser()?.username}</Hidden>
         {avatar ? (
           <Avatar alt="User avatar" src={avatar} />
         ) : (

src/components/AppBar/tests/UserMenu.test.tsx

@@ -2,6 +2,7 @@ import { Button, MenuItem } from "@material-ui/core";
 import React from "react";
 import renderer, { ReactTestRenderer } from "react-test-renderer";
 
+import { Path } from "browserHistory";
 import UserMenu, { getIsAdmin, UserMenuList } from "components/AppBar/UserMenu";
 import { User } from "types/user";
 
@@ -13,8 +14,9 @@ jest.mock("backend", () => {
 
 jest.mock("backend/localStorage", () => {
   return {
-    getUserId: () => mockGetUserId(),
     getAvatar: jest.fn(),
+    getCurrentUser: jest.fn(),
+    getUserId: () => mockGetUserId(),
   };
 });
 
@@ -39,7 +41,7 @@ beforeEach(() => {
 describe("UserMenu", () => {
   it("renders without crashing", () => {
     renderer.act(() => {
-      testRenderer = renderer.create(<UserMenu />);
+      testRenderer = renderer.create(<UserMenu currentTab={Path.Root} />);
     });
     expect(testRenderer.root.findAllByType(Button).length).toEqual(1);
   });

src/components/AppBar/tests/__snapshots__/AppBarComponent.test.tsx.snap

@@ -21,6 +21,7 @@ Array [
     style={
       Object {
         "background": "inherit",
+        "width": "min-content",
       }
     }
     tabIndex={0}
@@ -51,6 +52,7 @@ Array [
     style={
       Object {
         "background": "#1976d2",
+        "width": "min-content",
       }
     }
     tabIndex={0}
@@ -67,6 +69,7 @@ Array [
 
 exports[`NavigationButtons has only one tab shaded 2`] = `
 <button
+  aria-describedby={null}
   className="MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-colorInherit"
   disabled={false}
   id="project-name"
@@ -78,6 +81,7 @@ exports[`NavigationButtons has only one tab shaded 2`] = `
   onKeyUp={[Function]}
   onMouseDown={[Function]}
   onMouseLeave={[Function]}
+  onMouseOver={[Function]}
   onMouseUp={[Function]}
   onTouchEnd={[Function]}
   onTouchMove={[Function]}
@@ -88,12 +92,22 @@ exports[`NavigationButtons has only one tab shaded 2`] = `
     }
   }
   tabIndex={0}
+  title={null}
   type="button"
 >
   <span
     className="MuiButton-label"
   >
-    Project
+    <svg
+      aria-hidden={true}
+      className="MuiSvgIcon-root"
+      focusable="false"
+      viewBox="0 0 24 24"
+    >
+      <path
+        d="M19.14 12.94c.04-.3.06-.61.06-.94 0-.32-.02-.64-.07-.94l2.03-1.58c.18-.14.23-.41.12-.61l-1.92-3.32c-.12-.22-.37-.29-.59-.22l-2.39.96c-.5-.38-1.03-.7-1.62-.94l-.36-2.54c-.04-.24-.24-.41-.48-.41h-3.84c-.24 0-.43.17-.47.41l-.36 2.54c-.59.24-1.13.57-1.62.94l-2.39-.96c-.22-.08-.47 0-.59.22L2.74 8.87c-.12.21-.08.47.12.61l2.03 1.58c-.05.3-.09.63-.09.94s.02.64.07.94l-2.03 1.58c-.18.14-.23.41-.12.61l1.92 3.32c.12.22.37.29.59.22l2.39-.96c.5.38 1.03.7 1.62.94l.36 2.54c.05.24.24.41.48.41h3.84c.24 0 .44-.17.47-.41l.36-2.54c.59-.24 1.13-.56 1.62-.94l2.39.96c.22.08.47 0 .59-.22l1.92-3.32c.12-.22.07-.47-.12-.61l-2.01-1.58zM12 15.6c-1.98 0-3.6-1.62-3.6-3.6s1.62-3.6 3.6-3.6 3.6 1.62 3.6 3.6-1.62 3.6-3.6 3.6z"
+      />
+    </svg>
   </span>
   <span
     className="MuiTouchRipple-root"
@@ -103,6 +117,7 @@ exports[`NavigationButtons has only one tab shaded 2`] = `
 
 exports[`ProjectNameButton has tab shaded when itself is called 1`] = `
 <button
+  aria-describedby={null}
   className="MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-colorInherit"
   disabled={false}
   id="project-name"
@@ -114,6 +129,7 @@ exports[`ProjectNameButton has tab shaded when itself is called 1`] = `
   onKeyUp={[Function]}
   onMouseDown={[Function]}
   onMouseLeave={[Function]}
+  onMouseOver={[Function]}
   onMouseUp={[Function]}
   onTouchEnd={[Function]}
   onTouchMove={[Function]}
@@ -124,12 +140,25 @@ exports[`ProjectNameButton has tab shaded when itself is called 1`] = `
     }
   }
   tabIndex={0}
+  title={null}
   type="button"
 >
   <span
     className="MuiButton-label"
   >
-    Project
+    <svg
+      aria-hidden={true}
+      className="MuiSvgIcon-root"
+      focusable="false"
+      viewBox="0 0 24 24"
+    >
+      <path
+        d="M19.14 12.94c.04-.3.06-.61.06-.94 0-.32-.02-.64-.07-.94l2.03-1.58c.18-.14.23-.41.12-.61l-1.92-3.32c-.12-.22-.37-.29-.59-.22l-2.39.96c-.5-.38-1.03-.7-1.62-.94l-.36-2.54c-.04-.24-.24-.41-.48-.41h-3.84c-.24 0-.43.17-.47.41l-.36 2.54c-.59.24-1.13.57-1.62.94l-2.39-.96c-.22-.08-.47 0-.59.22L2.74 8.87c-.12.21-.08.47.12.61l2.03 1.58c-.05.3-.09.63-.09.94s.02.64.07.94l-2.03 1.58c-.18.14-.23.41-.12.61l1.92 3.32c.12.22.37.29.59.22l2.39-.96c.5.38 1.03.7 1.62.94l.36 2.54c.05.24.24.41.48.41h3.84c.24 0 .44-.17.47-.41l.36-2.54c.59-.24 1.13-.56 1.62-.94l2.39.96c.22.08.47 0 .59-.22l1.92-3.32c.12-.22.07-.47-.12-.61l-2.01-1.58zM12 15.6c-1.98 0-3.6-1.62-3.6-3.6s1.62-3.6 3.6-3.6 3.6 1.62 3.6 3.6-1.62 3.6-3.6 3.6z"
+      />
+    </svg>
   </span>
+  <span
+    className="MuiTouchRipple-root"
+  />
 </button>
 `;

src/components/GoalTimeline/GoalList.tsx

@@ -77,7 +77,7 @@ function buttonStyle(orientation: Orientation, size: number): CSSProperties {
     case "vertical":
       return {
         height: size + "vw",
-        padding: "2vw",
+        padding: "1vw",
         width: "100%",
       };
   }

src/components/GoalTimeline/GoalTimelineComponent.tsx

@@ -38,7 +38,6 @@ interface GoalTimelineProps {
 
 interface GoalTimelineState {
   portrait: boolean;
-  reducedLandScape: boolean;
 }
 
 /**
@@ -54,7 +53,6 @@ export default class GoalTimeline extends React.Component<
     super(props);
     this.state = {
       portrait: window.innerWidth < window.innerHeight,
-      reducedLandScape: (window.innerWidth * 7) / 10 < window.innerHeight,
     };
     this.handleChange = this.handleChange.bind(this);
   }
@@ -66,7 +64,6 @@ export default class GoalTimeline extends React.Component<
   handleWindowSizeChange = () => {
     this.setState({
       portrait: window.innerWidth < window.innerHeight,
-      reducedLandScape: (window.innerWidth * 7) / 10 < window.innerHeight,
     });
   };
 
@@ -156,9 +153,9 @@ export default class GoalTimeline extends React.Component<
 
   renderLandscape() {
     return (
-      <GridList cols={this.state.reducedLandScape ? 6 : 8} cellHeight="auto">
+      <GridList cols={13} cellHeight="auto">
         {/* Alternatives */}
-        <GridListTile cols={2}>
+        <GridListTile cols={4}>
           <div style={{ ...timelineStyle.paneStyling, float: "right" } as any}>
             <Typography variant="h6">
               <Translate id={"goal.selector.other"} />
@@ -174,15 +171,15 @@ export default class GoalTimeline extends React.Component<
         </GridListTile>
 
         {/* Recommendation */}
-        <GridListTile cols={2} style={timelineStyle.paneStyling as any}>
+        <GridListTile cols={3} style={timelineStyle.paneStyling as any}>
           <Typography variant="h5">
             <Translate id={"goal.selector.present"} />
           </Typography>
           {this.goalButton()}
         </GridListTile>
 
         {/* History */}
-        <GridListTile cols={2}>
+        <GridListTile cols={4}>
           <div style={timelineStyle.paneStyling as any}>
             <Typography variant="h6">
               <Translate id={"goal.selector.past"} />