From 2594a72fdb6bb8a40714507b652d5fe64e40c9ba Mon Sep 17 00:00:00 2001 From: Bonnie Peng Date: Wed, 9 Jun 2021 11:16:40 +0000 Subject: [PATCH] Mobile EventDescriptionCard --- components/EventDescriptionCard.module.css | 38 +++++++++++++++++++--- components/EventSetting.module.css | 9 +++++ components/EventSetting.tsx | 12 +++++-- components/NewsCard.module.css | 6 ++-- components/playground.module.css | 8 ++--- content/playground/after-hours.event.mdx | 2 +- content/playground/alt-tab.event.mdx | 2 +- content/playground/ootb-react.event.mdx | 2 +- 8 files changed, 62 insertions(+), 17 deletions(-) create mode 100644 components/EventSetting.module.css diff --git a/components/EventDescriptionCard.module.css b/components/EventDescriptionCard.module.css index f8517e4f..93364b1e 100644 --- a/components/EventDescriptionCard.module.css +++ b/components/EventDescriptionCard.module.css @@ -3,7 +3,7 @@ box-sizing: border-box; max-width: calc(540rem / 16); padding: calc(24rem / 16); - border-radius: calc(4rem / 16); + border-radius: calc(20rem / 16); background-color: white; } @@ -22,7 +22,7 @@ color: var(--purple-2); font-weight: bolder; font-size: calc(18rem / 16); - line-height: calc(27rem / 16); + line-height: calc(27 / 18); margin: 0; } @@ -42,7 +42,7 @@ } .logo { - width: calc(30rem / 16); + width: calc(32rem / 16); position: absolute; bottom: 0; right: 0; @@ -50,7 +50,7 @@ .setting { margin: 0; - color: var(--blue-1); + color: var(--blue-2); font-weight: bolder; font-size: calc(14rem / 16); } @@ -58,6 +58,34 @@ @media only screen and (max-width: calc(768rem / 16)) { .card { padding: 0; - background-color: #e1eefa; + background-color: transparent; + } + + .details { + min-width: calc(150rem / 16); + } + + .name, + .setting { + font-size: calc(14rem / 16); + line-height: calc(21 / 14); + } + + .poster { + width: calc(95rem / 16); + height: calc(95rem / 16); + border: 1px solid var(--purple-2); + box-sizing: border-box; + margin-right: calc(14rem / 16); + } + + .desc { + font-size: calc(12rem / 16); + line-height: calc(18 / 12); + } + + .logo, + .button { + display: none; } } diff --git a/components/EventSetting.module.css b/components/EventSetting.module.css new file mode 100644 index 00000000..f9fbfb01 --- /dev/null +++ b/components/EventSetting.module.css @@ -0,0 +1,9 @@ +@media only screen and (max-width: calc(768rem / 16)) { + .separator { + display: none; + } + + .setting { + display: block; + } +} diff --git a/components/EventSetting.tsx b/components/EventSetting.tsx index 3dec1cde..aa95025c 100644 --- a/components/EventSetting.tsx +++ b/components/EventSetting.tsx @@ -1,4 +1,5 @@ import React from "react"; +import styles from "./EventSetting.module.css"; interface Props { date: Date; @@ -15,13 +16,20 @@ export function EventSetting(props: Props) { const time = props.date.toLocaleTimeString("en-US", { hour: "numeric", minute: "numeric", + timeZoneName: "short", }); const location = props.online ? `Online - ${props.location}` : props.location; + const separator = | ; return (
- - {` | ${location}`} + + {separator} + {time} + {separator} + {location}
); } diff --git a/components/NewsCard.module.css b/components/NewsCard.module.css index bd79bedb..18f75f62 100644 --- a/components/NewsCard.module.css +++ b/components/NewsCard.module.css @@ -8,19 +8,19 @@ color: var(--purple-2); font-size: calc(18rem / 16); font-weight: bold; - line-height: calc(27rem / 16); + line-height: calc(27 / 18); } .author { color: var(--purple-1); font-style: normal; - line-height: calc(21rem / 16); + line-height: calc(21 / 16); font-size: calc(14rem / 16); margin: calc(5rem / 16) 0 calc(7rem / 16) 0; } .content { - line-height: calc(21rem / 16); + line-height: calc(21 / 16); color: var(--purple-2); } diff --git a/components/playground.module.css b/components/playground.module.css index b7938a64..f43d992d 100644 --- a/components/playground.module.css +++ b/components/playground.module.css @@ -13,7 +13,7 @@ font-weight: bold; color: var(--purple-2); font-size: calc(24rem / 16); - line-height: calc(36rem / 16); + line-height: calc(36 / 24); margin-bottom: calc(14rem / 16); } @@ -21,7 +21,7 @@ font-style: normal; font-weight: normal; font-size: calc(14rem / 16); - line-height: calc(21rem / 16); + line-height: calc(21 / 14); white-space: pre-line; color: var(--purple-2); vertical-align: baseline; @@ -62,7 +62,7 @@ color: var(--purple-2); font-weight: 600; font-size: calc(24rem / 16); - line-height: calc(36rem / 16); + line-height: calc(36 / 24); } .teamMemberDemo > hr { @@ -84,7 +84,7 @@ @media only screen and (max-width: calc(768rem / 16)) { .newsDemo, .eventDescriptionCardDemo { - background-color: #e1eefa; + background-color: var(--off-white); } .eventDescriptionCardDemo > * { diff --git a/content/playground/after-hours.event.mdx b/content/playground/after-hours.event.mdx index 7d227d63..5cb3ccec 100644 --- a/content/playground/after-hours.event.mdx +++ b/content/playground/after-hours.event.mdx @@ -1,7 +1,7 @@ export const metadata = { name: "Afterhours: Personal Relationships", short: "Learn how React works and make your own version!", - date: new Date("2021-03-02 2:00 PM"), + date: new Date("2021-03-02 2:00 PM GMT-4"), online: false, location: "MC", registerLink: "http://csclub.uwaterloo.ca/", diff --git a/content/playground/alt-tab.event.mdx b/content/playground/alt-tab.event.mdx index fc3567d6..16aa6a77 100644 --- a/content/playground/alt-tab.event.mdx +++ b/content/playground/alt-tab.event.mdx @@ -1,7 +1,7 @@ export const metadata = { name: "Alt-Tab", short: "CSC is proud to present to you Alt-Tab!", - date: new Date("March 25, 2021 19:00:00"), + date: new Date("March 25, 2021 19:00:00 GMT-4"), online: true, location: "Twitch", poster: "/images/playground/alt-tab.jpg", diff --git a/content/playground/ootb-react.event.mdx b/content/playground/ootb-react.event.mdx index 19c75a73..9b6dcab0 100644 --- a/content/playground/ootb-react.event.mdx +++ b/content/playground/ootb-react.event.mdx @@ -1,7 +1,7 @@ export const metadata = { name: "Out of the Box: React", short: "Out of the Box is a series of code-along projects that explore what's under the hood of modern web frameworks.", - date: new Date("March 23, 2021 19:00:00"), + date: new Date("March 23, 2021 19:00:00 GMT-4"), online: true, location: "Twitch", poster: "/images/playground/intro-ootb.jpg",