-
Notifications
You must be signed in to change notification settings - Fork 2
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Fix Lex Master bug and grammar, and some refactors (#194)
* Fix lex role hack * Add basic theme to MUI * Refactor useIsScreenWide() into separate module * Add javadoc to useIsScreenWide() * Refactor header and footer into desktop-specific files * Refactor header and footer into HeaderFooterWrapper * Fix kisel spelling * Fix kisel spelling * Switch HeaderFooter for mobile * Refactor logout function to separate file * CHAPTER * Switch headers at 950 px * Dont extend MenuItem since we don't use the extra CSS * Share Header Navlinks between desktop and mobile * Refactor footernav into separate file * Refactor usermenu items into separate file * Fix desktop footer * Fix emotion css props * Add new light/dark versions of colors in the palette * Set up new mobile header * Fix discord channel name * Fix header css * Bump version ot 1.0.2
- Loading branch information
Showing
33 changed files
with
442 additions
and
208 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file was deleted.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
31 changes: 31 additions & 0 deletions
31
front/src/app/components/HeaderFooter/DesktopHeaderMenu.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,31 @@ | ||
| import {useState, useEffect} from "react"; | ||
| import {Link, useNavigate} from "react-router-dom"; | ||
| import {Button} from "@mui/material"; | ||
| import styled from "@emotion/styled"; | ||
|
|
||
| import {DropdownMenu} from "../DropdownMenu.js"; | ||
| import {getApiFetcher} from "../../api"; | ||
| import getUserMenuItems from "./navs/UserMenu"; | ||
|
|
||
|
|
||
| const StyledDesktopHeaderMenu = styled(DesktopHeaderMenu)({}); | ||
|
|
||
| function DesktopHeaderMenu({className}) { | ||
| let navigate = useNavigate(); | ||
|
|
||
| const [meData, setMeData] = useState(null); // Yarr, set me data (Logged-in user's member data) | ||
|
|
||
| const loadMeData = async () => {setMeData(await getApiFetcher().get("/me").json())} // Load user information when dropdown is opened | ||
| useEffect(() => { loadMeData() }, []); // Load user information when component is mounted, only once | ||
|
|
||
| return ( | ||
| <DropdownMenu | ||
| keepOpen | ||
| open={open} | ||
| trigger={<Button>User Menu</Button>} | ||
| menu={getUserMenuItems(navigate, meData)} | ||
| /> | ||
| ); | ||
| } | ||
|
|
||
| export default StyledDesktopHeaderMenu; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,44 @@ | ||
| import styled from "@emotion/styled"; | ||
|
|
||
| import FooterNav from "./navs/FooterNav"; | ||
| import { kisel_blue, secondary_purp, primary_light, accent_yellow, primary_dark, accent_maroon } from "../../palette.js"; | ||
|
|
||
| const StyledFooter = styled(Footer)({ | ||
| height: "5rem", | ||
| background: accent_maroon, | ||
| marginTop: "auto", | ||
| marginBottom: 0, | ||
| paddingTop: "0.5rem", | ||
| paddingBottom: "0.5rem", | ||
| gridRowStart: 2, | ||
| overflow: "scroll", | ||
| color: "#bbbbbb", | ||
|
|
||
| ul: { | ||
| padding: 0, | ||
| display: "flex", | ||
| flexDirection: "row", | ||
| justifyContent: "space-around", | ||
| textAlign: "center", | ||
| fontSize: "1rem", | ||
| }, | ||
|
|
||
| li: { | ||
| display: "inline" | ||
| }, | ||
|
|
||
| "a:link": { color: "#ffffff", textDecoration: "none" }, | ||
| "a:visited": { color: "#ffffff", textDecoration: "none" }, | ||
| "a:hover": { color: "#ffffff", textDecoration: "none" }, | ||
| "a:active": { color: "#ffffff", textDecoration: "none" }, | ||
| }); | ||
|
|
||
| function Footer({className}) { | ||
| return ( | ||
| <footer className={className}> | ||
| <FooterNav /> | ||
| </footer> | ||
| ) | ||
| } | ||
|
|
||
| export default StyledFooter; |
90 changes: 90 additions & 0 deletions
90
front/src/app/components/HeaderFooter/HeaderFooterWrapper.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,90 @@ | ||
| import {Suspense, lazy, useState} from "react"; | ||
| import styled from "@emotion/styled"; | ||
|
|
||
| import { getApiFetcher } from "../../api.js"; | ||
|
|
||
| import { kisel_blue } from "../../palette.js"; | ||
|
|
||
| import DesktopHeader from "./DesktopHeader"; | ||
| import MobileHeader from "./MobileHeader"; | ||
| import { header_height } from "./DesktopHeader"; | ||
| import { mobile_header_height } from "./MobileHeader"; | ||
| import Footer from "./Footer"; | ||
| const LoginModal = lazy(() => import("../LoginModal")); | ||
|
|
||
| import hasLoginCookie from "../../hasLoginCookie"; | ||
| import useIsScreenWide from "../../useIsScreenWide"; | ||
|
|
||
| const StyledHeaderFooterWrapper = styled(HeaderFooterWrapper)({ | ||
| "& > #expander": { | ||
| minHeight: `calc(100vh - ${header_height})`, | ||
| display: "grid", | ||
| gridTemplateRows: "1fr auto", | ||
| }, | ||
| }); | ||
|
|
||
| const DesktopExpander = styled.div({ | ||
| minHeight: `calc(100vh - ${header_height})`, | ||
| display: "grid", | ||
| gridTemplateRows: "1fr auto" | ||
| }); | ||
| const MobileExpander = styled.div({ | ||
| minHeight: "100vh", | ||
| display: "grid", | ||
| gridTemplateRows: "1fr auto" | ||
| }); | ||
|
|
||
| const MobileHeaderSpacer = styled.div({ | ||
| height: mobile_header_height | ||
| }); | ||
|
|
||
| /** | ||
| * Common wrapper for all routes that displays the navbars around the route | ||
| */ | ||
| function HeaderFooterWrapper({className, children}) { | ||
| const [loginModalOpen, setLoginModalOpen] = useState(false); | ||
|
|
||
| // State storing whether user is logged in or not. Initializes based on if user has login cookie or not. (We assume cookie is valid) | ||
| const [loggedIn, setLoggedIn] = useState(hasLoginCookie()); | ||
|
|
||
| // Switch between mobile header and desktop header/footer at 950 px | ||
| // 950 px should be wide enough for 5 links on the desktop header | ||
| // 950 px is also less than half of 1920 px but more than the 810 px of an iPad. | ||
| const screenIsWide = useIsScreenWide(950) | ||
|
|
||
| if(screenIsWide) { | ||
| return ( | ||
| <div className={className}> | ||
| {loginModalOpen? | ||
| (<Suspense> | ||
| <LoginModal loggedIn={loggedIn} setLoggedIn={setLoggedIn} setLoginModalOpen={setLoginModalOpen} /> | ||
| </Suspense>) | ||
| : null | ||
| } | ||
| <DesktopHeader loggedIn={loggedIn} setLoginModalOpen={setLoginModalOpen} /> | ||
| <DesktopExpander> | ||
| <div>{children}</div> | ||
| <Footer /> | ||
| </DesktopExpander> | ||
| </div> | ||
| ); | ||
| } else { | ||
| return ( | ||
| <div className={className}> | ||
| {loginModalOpen? | ||
| (<Suspense> | ||
| <LoginModal loggedIn={loggedIn} setLoggedIn={setLoggedIn} setLoginModalOpen={setLoginModalOpen} /> | ||
| </Suspense>) | ||
| : null | ||
| } | ||
| <MobileHeader loggedIn={loggedIn} setLoginModalOpen={setLoginModalOpen} /> | ||
| <MobileExpander> | ||
| <div> {children} </div> | ||
| <MobileHeaderSpacer /> | ||
| </MobileExpander> | ||
| </div> | ||
| ); | ||
| } | ||
| } | ||
|
|
||
| export default StyledHeaderFooterWrapper; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,33 @@ | ||
| import {NavLink} from "react-router-dom"; | ||
| import {Button} from "@mui/material"; | ||
| import styled from "@emotion/styled"; | ||
|
|
||
| import tmeit_logo_nogojan_mono from "../../logos/LogoTMEIT_withoutGojan_monochrome.svg"; | ||
| import { kisel_blue, kisel_blue_dark, secondary_purp, secondary_purp_dark, primary_light, accent_yellow } from "../../palette.js"; | ||
| import MobileHeaderMenu from "./MobileHeaderMenu.js"; | ||
|
|
||
| export const mobile_header_height = "4rem" | ||
|
|
||
| const StyledMobileHeader = styled(MobileHeader)({ | ||
| position: "fixed", | ||
| bottom: 0, | ||
| width: "100%", | ||
| height: mobile_header_height, | ||
| display: "grid", | ||
| background: kisel_blue_dark, | ||
| grid: "1fr auto 1fr / 1fr auto 1fr", | ||
| "#logo": { | ||
| height: "3.5rem", | ||
| } | ||
| }); | ||
|
|
||
| function MobileHeader({className, loggedIn, setLoginModalOpen}) { | ||
| return ( | ||
| <header className={className}> | ||
| <img css={{gridColumn: 2, gridRow: 2}} id="logo" src={tmeit_logo_nogojan_mono} alt="TMEIT Logo" /> | ||
| <MobileHeaderMenu css={{gridColumn: 3, gridRow: 2}} loggedIn={loggedIn} setLoginModalOpen={setLoginModalOpen}/> | ||
| </header> | ||
| ); | ||
| } | ||
|
|
||
| export default StyledMobileHeader; |
Oops, something went wrong.