Mobile EventDescriptionCard
This commit is contained in:
parent
2b733ade44
commit
2594a72fdb
|
@ -3,7 +3,7 @@
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
max-width: calc(540rem / 16);
|
max-width: calc(540rem / 16);
|
||||||
padding: calc(24rem / 16);
|
padding: calc(24rem / 16);
|
||||||
border-radius: calc(4rem / 16);
|
border-radius: calc(20rem / 16);
|
||||||
background-color: white;
|
background-color: white;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -22,7 +22,7 @@
|
||||||
color: var(--purple-2);
|
color: var(--purple-2);
|
||||||
font-weight: bolder;
|
font-weight: bolder;
|
||||||
font-size: calc(18rem / 16);
|
font-size: calc(18rem / 16);
|
||||||
line-height: calc(27rem / 16);
|
line-height: calc(27 / 18);
|
||||||
margin: 0;
|
margin: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -42,7 +42,7 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.logo {
|
.logo {
|
||||||
width: calc(30rem / 16);
|
width: calc(32rem / 16);
|
||||||
position: absolute;
|
position: absolute;
|
||||||
bottom: 0;
|
bottom: 0;
|
||||||
right: 0;
|
right: 0;
|
||||||
|
@ -50,7 +50,7 @@
|
||||||
|
|
||||||
.setting {
|
.setting {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
color: var(--blue-1);
|
color: var(--blue-2);
|
||||||
font-weight: bolder;
|
font-weight: bolder;
|
||||||
font-size: calc(14rem / 16);
|
font-size: calc(14rem / 16);
|
||||||
}
|
}
|
||||||
|
@ -58,6 +58,34 @@
|
||||||
@media only screen and (max-width: calc(768rem / 16)) {
|
@media only screen and (max-width: calc(768rem / 16)) {
|
||||||
.card {
|
.card {
|
||||||
padding: 0;
|
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;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -0,0 +1,9 @@
|
||||||
|
@media only screen and (max-width: calc(768rem / 16)) {
|
||||||
|
.separator {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.setting {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
}
|
|
@ -1,4 +1,5 @@
|
||||||
import React from "react";
|
import React from "react";
|
||||||
|
import styles from "./EventSetting.module.css";
|
||||||
|
|
||||||
interface Props {
|
interface Props {
|
||||||
date: Date;
|
date: Date;
|
||||||
|
@ -15,13 +16,20 @@ export function EventSetting(props: Props) {
|
||||||
const time = props.date.toLocaleTimeString("en-US", {
|
const time = props.date.toLocaleTimeString("en-US", {
|
||||||
hour: "numeric",
|
hour: "numeric",
|
||||||
minute: "numeric",
|
minute: "numeric",
|
||||||
|
timeZoneName: "short",
|
||||||
});
|
});
|
||||||
const location = props.online ? `Online - ${props.location}` : props.location;
|
const location = props.online ? `Online - ${props.location}` : props.location;
|
||||||
|
const separator = <span className={styles.separator}> | </span>;
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div>
|
<div>
|
||||||
<time dateTime={props.date.toISOString()}>{`${date} | ${time}`}</time>
|
<time className={styles.setting} dateTime={props.date.toISOString()}>
|
||||||
{` | ${location}`}
|
{date}
|
||||||
|
</time>
|
||||||
|
{separator}
|
||||||
|
<span className={styles.setting}>{time}</span>
|
||||||
|
{separator}
|
||||||
|
{location}
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
|
@ -8,19 +8,19 @@
|
||||||
color: var(--purple-2);
|
color: var(--purple-2);
|
||||||
font-size: calc(18rem / 16);
|
font-size: calc(18rem / 16);
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
line-height: calc(27rem / 16);
|
line-height: calc(27 / 18);
|
||||||
}
|
}
|
||||||
|
|
||||||
.author {
|
.author {
|
||||||
color: var(--purple-1);
|
color: var(--purple-1);
|
||||||
font-style: normal;
|
font-style: normal;
|
||||||
line-height: calc(21rem / 16);
|
line-height: calc(21 / 16);
|
||||||
font-size: calc(14rem / 16);
|
font-size: calc(14rem / 16);
|
||||||
margin: calc(5rem / 16) 0 calc(7rem / 16) 0;
|
margin: calc(5rem / 16) 0 calc(7rem / 16) 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.content {
|
.content {
|
||||||
line-height: calc(21rem / 16);
|
line-height: calc(21 / 16);
|
||||||
color: var(--purple-2);
|
color: var(--purple-2);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -13,7 +13,7 @@
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
color: var(--purple-2);
|
color: var(--purple-2);
|
||||||
font-size: calc(24rem / 16);
|
font-size: calc(24rem / 16);
|
||||||
line-height: calc(36rem / 16);
|
line-height: calc(36 / 24);
|
||||||
margin-bottom: calc(14rem / 16);
|
margin-bottom: calc(14rem / 16);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -21,7 +21,7 @@
|
||||||
font-style: normal;
|
font-style: normal;
|
||||||
font-weight: normal;
|
font-weight: normal;
|
||||||
font-size: calc(14rem / 16);
|
font-size: calc(14rem / 16);
|
||||||
line-height: calc(21rem / 16);
|
line-height: calc(21 / 14);
|
||||||
white-space: pre-line;
|
white-space: pre-line;
|
||||||
color: var(--purple-2);
|
color: var(--purple-2);
|
||||||
vertical-align: baseline;
|
vertical-align: baseline;
|
||||||
|
@ -62,7 +62,7 @@
|
||||||
color: var(--purple-2);
|
color: var(--purple-2);
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
font-size: calc(24rem / 16);
|
font-size: calc(24rem / 16);
|
||||||
line-height: calc(36rem / 16);
|
line-height: calc(36 / 24);
|
||||||
}
|
}
|
||||||
|
|
||||||
.teamMemberDemo > hr {
|
.teamMemberDemo > hr {
|
||||||
|
@ -84,7 +84,7 @@
|
||||||
@media only screen and (max-width: calc(768rem / 16)) {
|
@media only screen and (max-width: calc(768rem / 16)) {
|
||||||
.newsDemo,
|
.newsDemo,
|
||||||
.eventDescriptionCardDemo {
|
.eventDescriptionCardDemo {
|
||||||
background-color: #e1eefa;
|
background-color: var(--off-white);
|
||||||
}
|
}
|
||||||
|
|
||||||
.eventDescriptionCardDemo > * {
|
.eventDescriptionCardDemo > * {
|
||||||
|
|
|
@ -1,7 +1,7 @@
|
||||||
export const metadata = {
|
export const metadata = {
|
||||||
name: "Afterhours: Personal Relationships",
|
name: "Afterhours: Personal Relationships",
|
||||||
short: "Learn how React works and make your own version!",
|
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,
|
online: false,
|
||||||
location: "MC",
|
location: "MC",
|
||||||
registerLink: "http://csclub.uwaterloo.ca/",
|
registerLink: "http://csclub.uwaterloo.ca/",
|
||||||
|
|
|
@ -1,7 +1,7 @@
|
||||||
export const metadata = {
|
export const metadata = {
|
||||||
name: "Alt-Tab",
|
name: "Alt-Tab",
|
||||||
short: "CSC is proud to present to you 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,
|
online: true,
|
||||||
location: "Twitch",
|
location: "Twitch",
|
||||||
poster: "/images/playground/alt-tab.jpg",
|
poster: "/images/playground/alt-tab.jpg",
|
||||||
|
|
|
@ -1,7 +1,7 @@
|
||||||
export const metadata = {
|
export const metadata = {
|
||||||
name: "Out of the Box: React",
|
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.",
|
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,
|
online: true,
|
||||||
location: "Twitch",
|
location: "Twitch",
|
||||||
poster: "/images/playground/intro-ootb.jpg",
|
poster: "/images/playground/intro-ootb.jpg",
|
||||||
|
|
Loading…
Reference in New Issue