Skip to content

Commit

Permalink
Merge pull request fxhash#824 from fxhash/dev
Browse files Browse the repository at this point in the history 
Dev -> Staging
  • Loading branch information
@maerzhase
maerzhase authored Jul 14, 2023
2 parents c8475da + dea8343 commit 748f34f
Show file tree
Hide file tree
Showing 15 changed files with 241 additions and 367 deletions.
165 changes: 25 additions & 140 deletions src/components/Card/CardEvent.module.scss
View file
Original file line number Diff line number Diff line change
@@ -1,160 +1,45 @@
@import "../../styles/Variables";

.card {
border: 3px solid var(--color-border);
width: 100%;
aspect-ratio: 293 / 286;
border-radius: 4px;
padding: 12px 20px;
position: relative;
overflow: hidden;
display: flex;
flex-direction: column;
justify-content: space-between;
color: white;
background-size: cover;
background-position: center center;
.card_body {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
gap: 0 16px;
}
.card_verso {
position: absolute;
z-index: 2;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: var(--color-gray-vvvvlight);
color: var(--color-black);
text-decoration: none !important;
.cardHeader {
aspect-ratio: 293 / 286;
height: 150px;
width: 100%;
background-size: cover;
background-position: center center;
}
.cardBody {
padding: var(--spacing);
display: flex;
flex-direction: column;
background: var(--color-white);
color: var(--color-black);
transform: translateY(101%);
will-change: transform;
transition: transform 0.2s $timing-cubic;
}
&:hover {
.card_verso {
transform: translateY(0);
}
justify-content: space-between;
flex-grow: 1;
}
}
.card_title {
font-size: 24px;
.title {
font-size: 16px;
font-weight: 700;
line-height: 20px;
margin-bottom: var(--spacing-xl);
}
.card_date {
font-size: 19px;
font-weight: 600;
line-height: 1.26;
}
.card_text {
opacity: 0.8;
font-size: var(--font-size-small);
}
.card_artists {
flex: 1;
background-color: var(--color-gray-vvvlight);
padding: 8px 20px;
overflow: auto;

& > div > a {
display: block;
}
& > div + div {
margin-top: 8px;
}
}
.cta_view_event {
font-size: 19px;
line-height: 1.3;
color: var(--color-black);
font-weight: 600;
padding: 12px 20px;
}
.card_header {
padding: 12px 20px 8px;
display: flex;
flex-direction: row;
align-items: center;
.card_infos {
flex: 1;
}
.cta_calendar {
display: flex;
flex-direction: row;
align-items: center;
justify-content: flex-end;
width: 40px;
height: 40px;
font-size: 26px;
color: currentColor;
border: none;
background: none;
box-shadow: none;
cursor: pointer;
padding: 0;
transition: 0.2s color ease-out;
&:hover {
color: var(--color-secondary);
}
}
}
.artists {
display: flex;
flex-direction: row;
align-items: center;
& > span {
font-weight: 600;
font-size: 20px;
}
& > i {
display: flex;
font-size: 32px;
}
.date, .location {
font-size: 14px;
font-weight: 400;
line-height: 18px;
}
.timer {
display: flex;
flex-direction: row;
align-items: center;
font-size: var(--font-size-small);
.label {
opacity: 0.8;
}
}
.dot {
height: 10px;
width: 10px;
background-color: var(--color-error);
border-radius: 50%;
margin-right: 8px;
position: relative;
&.dot_active {
background-color: var(--color-success);
&::before {
content: "";
animation: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite;
position: absolute;
height: 100%;
width: 100%;
border-radius: 50%;
background-color: var(--color-success);
}
}
.location {
color: var(--color-gray);
}

@media (max-width: $breakpoint-sm) {
.card, .card_artists, .cta_view_event {
padding-left: 16px;
padding-right: 16px;
}
.card_title {
font-size: 22px;
}
.card_date {
font-size: 17px;
.card {
}
}
114 changes: 20 additions & 94 deletions src/components/Card/CardEvent.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,20 +34,7 @@ const _CardEvent = ({ event }: CardEventProps) => {
} = event
const [now, setNow] = useState(new Date())
const dateStartAt = useMemo(() => new Date(startsAt), [startsAt])
const handleEndTimer = useCallback(() => setNow(new Date()), [])
const handleClickCalendar = useCallback(async () => {
const icsCreateEvent = (await import("ics")).createEvent
icsCreateEvent(generateCalendarDataForEvent(event), (error, value) => {
if (error) {
console.error(error)
return
}
downloadTextAsGeneratedFile(
`${format(dateStartAt, "yyyy-M-d")}-${id}.ics`,
value
)
})
}, [dateStartAt, event, id])
const dateEndsAt = useMemo(() => new Date(endsAt), [endsAt])
const eventTimeStatus = useMemo<"upcoming" | "ongoing" | "past">(() => {
const isLive = now > dateStartAt
if (!isLive) return "upcoming"
Expand All @@ -58,89 +45,28 @@ const _CardEvent = ({ event }: CardEventProps) => {
const styleBackground = {
backgroundImage: `linear-gradient(rgba(0, 0, 0, 0.54), rgba(0, 0, 0, 0.54)), url(${imageUrl})`,
}
const availabilitiesStr = useMemo(() => {
return availabilities
.map((availability) => availabilityLabels[availability])
.join(" and ")
}, [availabilities])
return (
<div className={style.card} style={styleBackground}>
<div>
<h4 className={style.card_title}>{name}</h4>
<Spacing size="2x-small" />
<div className={style.card_text}>{location}</div>
</div>
<div className={style.card_body}>
<div>
<div className={style.card_text}>Scheduled</div>
<Spacing size="2x-small" />
<div className={style.card_date}>
{format(dateStartAt, "do MMMM yyyy")} at&nbsp;
{format(dateStartAt, "H:mm")}
</div>
<Spacing size="x-small" />
<div className={style.timer}>
<span
className={cs(style.dot, {
[style.dot_active]: eventTimeStatus === "ongoing",
})}
/>
{eventTimeStatus === "upcoming" && (
<span className={style.label}>
<span>Starts in </span>
<Countdown until={dateStartAt} onEnd={handleEndTimer} />
</span>
)}
{eventTimeStatus === "ongoing" && (
<span className={style.label}>Ongoing</span>
)}
{eventTimeStatus === "past" && (
<span className={style.label}>Finished</span>
)}
</div>
</div>
{artists.length > 0 && (
<div className={style.artists}>
<span>{artists.length}</span>
<i aria-hidden="true" aria-label="artists">
{iconArtist}
</i>
</div>
)}
</div>
<div className={style.card_verso}>
<div className={style.card_header}>
<div className={style.card_infos}>
<div className={style.card_title}>Exhibiting</div>
{availabilities.length > 0 && (
<>
<Spacing size="2x-small" />
<div className={style.card_text}>
Available {availabilitiesStr}
</div>
</>
)}
</div>
<button
className={style.cta_calendar}
onClick={handleClickCalendar}
title="Save to your calendar"
>
<i className="fa-regular fa-calendar-circle-plus" />
</button>
</div>
<div className={style.card_artists}>
{artists.map((artist) => (
<div key={artist.id}>
<EntityBadge user={artist} size="small" hasLink />
<Link href={`/events/${id}/onboarding`}>
<a className={style.card}>
<div className={style.cardHeader} style={styleBackground} />
<div className={style.cardBody}>
<h4 className={style.title}>{name}</h4>
<div>
<div className={style.date}>
{format(dateStartAt, "do MMMM yyyy")}
{eventTimeStatus === "upcoming" && (
<> @ {format(dateStartAt, "Haaa")}</>
)}
{startsAt !== endsAt && eventTimeStatus !== "upcoming" && (
<> — {format(dateEndsAt, "do MMM yyyy")}</>
)}
</div>
))}
<Spacing size="x-small" />
<div className={style.location}>{location || "Online"}</div>
</div>
</div>
<Link href={`/events/${id}/onboarding`}>
<a className={style.cta_view_event}>View event</a>
</Link>
</div>
</div>
</a>
</Link>
)
}

Expand Down
11 changes: 10 additions & 1 deletion src/components/Testing/ContextTest.module.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,16 @@
small {
font-weight: bold;
}
.buttons {
margin-top: var(--spacing);
display: flex;
justify-content: space-between;
gap: var(--spacing);
}
.button {
flex-grow: 1;
}
.select {
width: 100%;
}
}
}
40 changes: 29 additions & 11 deletions src/components/Testing/ContextTest.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,16 +1,18 @@
import styles from "./ContextTest.module.scss"
import { TExecutionContext } from "hooks/useRuntime"
import { Select } from "components/Input/Select"
import { Button } from "components/Button"

interface Props {
value: TExecutionContext | null | undefined
onChange: (value: TExecutionContext) => void
asButtons?: boolean
}

const contexts = ["minting", "standalone", "capture"]
const contexts: TExecutionContext[] = ["minting", "standalone", "capture"]

export function ContextTest(props: Props) {
const { onChange, value } = props
const { onChange, value, asButtons = false } = props

const handleChange = (context: TExecutionContext) => {
onChange(context)
Expand All @@ -19,15 +21,31 @@ export function ContextTest(props: Props) {
return (
<div className={styles.contexttest}>
<small>Context</small>
<Select
className={styles.select}
value={value}
onChange={handleChange}
options={contexts.map((c) => ({
value: c,
label: c,
}))}
/>
{asButtons ? (
<div className={styles.buttons}>
{contexts.map((context) => (
<Button
className={styles.button}
size="small"
key={context}
onClick={() => handleChange(context)}
color={value === context ? "primary" : "black"}
>
{context}
</Button>
))}
</div>
) : (
<Select
className={styles.select}
value={value}
onChange={handleChange}
options={contexts.map((c) => ({
value: c,
label: c,
}))}
/>
)}
</div>
)
}
Loading

0 comments on commit 748f34f

Please sign in to comment.