forked from mavropalias/Hero35
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
ecc0423
commit 745fa8a
Showing
18 changed files
with
977 additions
and
115 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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,130 @@ | ||
| import { | ||
| Grid, | ||
| Typography, | ||
| makeStyles, | ||
| Theme, | ||
| createStyles | ||
| } from "@material-ui/core"; | ||
| import { TalkGroup } from "../schema"; | ||
| import TalkCard from "./TalkCard"; | ||
|
|
||
| const useStyles = makeStyles((theme: Theme) => | ||
| createStyles({ | ||
| group: { | ||
| width: "100vw", | ||
| overflow: "auto", | ||
| paddingLeft: theme.spacing(2), | ||
| scrollSnapType: "x mandatory", | ||
| scrollPadding: theme.spacing(0, 0, 0, 2), | ||
| [theme.breakpoints.up("sm")]: { | ||
| scrollPadding: theme.spacing(0, 0, 0, 3), | ||
| paddingLeft: theme.spacing(3) | ||
| }, | ||
| [theme.breakpoints.up("md")]: { | ||
| scrollPadding: theme.spacing(0, 0, 0, 4), | ||
| paddingLeft: theme.spacing(4) | ||
| }, | ||
| [theme.breakpoints.up("lg")]: { | ||
| scrollPadding: theme.spacing(0, 0, 0, 8), | ||
| paddingLeft: theme.spacing(8) | ||
| } | ||
| }, | ||
| groupItem: { | ||
| flexShrink: 0, | ||
| scrollSnapAlign: "start", | ||
| marginBottom: theme.spacing(2), | ||
| width: `calc((100vw - ${theme.spacing(4)}px - ${theme.spacing( | ||
| 2 | ||
| )}px) / 2)`, | ||
| [theme.breakpoints.up("sm")]: { | ||
| width: `calc((100vw - ${theme.spacing(6)}px - ${theme.spacing( | ||
| 3 | ||
| )}px) / 3)` | ||
| }, | ||
| [theme.breakpoints.up("md")]: { | ||
| width: `calc((100vw - ${theme.spacing(8)}px - ${theme.spacing( | ||
| 3 | ||
| )}px) / 4)` | ||
| }, | ||
| [theme.breakpoints.up("lg")]: { | ||
| width: `calc((100vw - ${theme.spacing(16)}px - ${theme.spacing( | ||
| 5 | ||
| )}px) / 5)` | ||
| }, | ||
| [theme.breakpoints.up("xl")]: { | ||
| width: `calc((100vw - ${theme.spacing(16)}px - ${theme.spacing( | ||
| 7 | ||
| )}px) / 7)` | ||
| } | ||
| }, | ||
| groupTitle: { | ||
| margin: theme.spacing(0, 0, 2, 2), | ||
| fontWeight: 700, | ||
| color: theme.palette.text.secondary, | ||
| lineHeight: 1, | ||
| [theme.breakpoints.up("sm")]: { | ||
| margin: theme.spacing(0, 0, 2, 3) | ||
| }, | ||
| [theme.breakpoints.up("md")]: { | ||
| margin: theme.spacing(0, 0, 3, 4) | ||
| }, | ||
| [theme.breakpoints.up("lg")]: { | ||
| margin: theme.spacing(0, 0, 3, 8) | ||
| } | ||
| } | ||
| }) | ||
| ); | ||
|
|
||
| interface Props { | ||
| talkGroup: TalkGroup; | ||
| showCuration?: boolean; | ||
| showTopics?: boolean; | ||
| showVotes?: boolean; | ||
| showSaveButton?: boolean; | ||
| } | ||
|
|
||
| const HubTalkGroup = ({ | ||
| talkGroup, | ||
| showCuration = false, | ||
| showTopics = false, | ||
| showVotes = false, | ||
| showSaveButton = false | ||
| }: Props) => { | ||
| const classes = useStyles({}); | ||
| const isWindows = (): boolean => { | ||
| if (typeof window === "undefined") return false; | ||
| const platform = window.navigator.platform; | ||
| if (["Win32", "Win64", "Windows", "WinCE"].includes(platform)) { | ||
| return true; | ||
| } | ||
| return false; | ||
| }; | ||
|
|
||
| return ( | ||
| <> | ||
| <Typography className={classes.groupTitle} variant="h4"> | ||
| {talkGroup.title} | ||
| </Typography> | ||
| <Grid | ||
| container | ||
| spacing={1} | ||
| className={classes.group} | ||
| wrap={isWindows() ? "wrap" : "nowrap"} | ||
| > | ||
| {talkGroup.talks.map(talk => ( | ||
| <Grid className={classes.groupItem} key={talk.id} item> | ||
| <TalkCard | ||
| talk={talk} | ||
| showCuration={showCuration} | ||
| showTopics={showTopics} | ||
| showVotes={showVotes} | ||
| showSaveButton={showSaveButton} | ||
| ></TalkCard> | ||
| </Grid> | ||
| ))} | ||
| </Grid> | ||
| </> | ||
| ); | ||
| }; | ||
|
|
||
| export default HubTalkGroup; |
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,78 @@ | ||
| import { | ||
| makeStyles, | ||
| createStyles, | ||
| Theme, | ||
| Container, | ||
| Hidden, | ||
| Typography, | ||
| Box | ||
| } from "@material-ui/core"; | ||
| import { TalkPreview, EventEdition, TalkGroup, TalkBasic } from "../../schema"; | ||
| import { useContext } from "react"; | ||
| import { UserContext } from "./../context-providers/UserContextProvider"; | ||
| import { StackContext } from "./../context-providers/StackContextProvider"; | ||
| import HubCover from "./HubCover"; | ||
| import HubTalkGroup from "../HubTalkGroup"; | ||
| import HubInterstitialTalk from "./HubInterstitialTalk"; | ||
|
|
||
| const useStyles = makeStyles((theme: Theme) => createStyles({})); | ||
|
|
||
| interface Props { | ||
| color?: string; | ||
| coverTalks?: TalkBasic[]; | ||
| logo?: string; | ||
| talkGroups: TalkGroup[]; | ||
| title?: string; | ||
| } | ||
|
|
||
| const Hub = ({ coverTalks, talkGroups, logo, title, color }: Props) => { | ||
| return ( | ||
| <> | ||
| {coverTalks.length > 0 && ( | ||
| <HubCover | ||
| talk={coverTalks[0]} | ||
| logo={logo} | ||
| title={title} | ||
| color={color} | ||
| /> | ||
| )} | ||
| <main style={{ position: "relative" }}> | ||
| {talkGroups.slice(0, 3).map(group => ( | ||
| <section key={group.title}> | ||
| {group.talks && group.talks.length > 0 && ( | ||
| <Box marginBottom={8}> | ||
| <HubTalkGroup key={group.title} talkGroup={group} /> | ||
| </Box> | ||
| )} | ||
| </section> | ||
| ))} | ||
| {coverTalks.length > 1 && ( | ||
| <HubInterstitialTalk talk={coverTalks[1]} color={color} /> | ||
| )} | ||
| {talkGroups.slice(3, 6).map(group => ( | ||
| <section key={group.title}> | ||
| {group.talks && group.talks.length > 0 && ( | ||
| <Box marginBottom={6}> | ||
| <HubTalkGroup key={group.title} talkGroup={group} /> | ||
| </Box> | ||
| )} | ||
| </section> | ||
| ))} | ||
| {coverTalks.length > 2 && ( | ||
| <HubInterstitialTalk talk={coverTalks[2]} color={color} /> | ||
| )} | ||
| {talkGroups.slice(6).map(group => ( | ||
| <section key={group.title}> | ||
| {group.talks && group.talks.length > 0 && ( | ||
| <Box marginBottom={6}> | ||
| <HubTalkGroup key={group.title} talkGroup={group} /> | ||
| </Box> | ||
| )} | ||
| </section> | ||
| ))} | ||
| </main> | ||
| </> | ||
| ); | ||
| }; | ||
|
|
||
| export default Hub; |
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,48 @@ | ||
| import { | ||
| makeStyles, | ||
| createStyles, | ||
| Theme, | ||
| Container, | ||
| Hidden, | ||
| Typography | ||
| } from "@material-ui/core"; | ||
| import { TalkPreview, EventEdition, TalkGroup, TalkBasic } from "../../schema"; | ||
| import { useContext } from "react"; | ||
| import { UserContext } from "./../context-providers/UserContextProvider"; | ||
| import { StackContext } from "./../context-providers/StackContextProvider"; | ||
| import HubCoverImage from "./HubCoverImage"; | ||
| import HubCoverText from "./HubCoverText"; | ||
|
|
||
| const useStyles = makeStyles((theme: Theme) => | ||
| createStyles({ | ||
| header: { | ||
| width: "100%", | ||
| position: "relative", | ||
| minHeight: `calc(85vh - 48px)`, | ||
| display: "flex", | ||
| alignItems: "center" | ||
| } | ||
| }) | ||
| ); | ||
|
|
||
| const HubCover = ({ | ||
| color, | ||
| logo, | ||
| talk, | ||
| title | ||
| }: { | ||
| color?: string; | ||
| logo?: string; | ||
| talk: TalkBasic; | ||
| title?: string; | ||
| }) => { | ||
| const classes = useStyles({}); | ||
| return ( | ||
| <header className={classes.header}> | ||
| <HubCoverImage talk={talk} /> | ||
| <HubCoverText talk={talk} logo={logo} title={title} color={color} /> | ||
| </header> | ||
| ); | ||
| }; | ||
|
|
||
| export default HubCover; |
Oops, something went wrong.