Skip to content
This repository has been archived by the owner on Apr 28, 2023. It is now read-only.

Commit

Permalink
Updated Event card to show all information at once
Browse files Browse the repository at this point in the history
  • Loading branch information
@JosephCurley
JosephCurley committed Dec 27, 2021
1 parent 11d3042 commit 4eefcd2
Show file tree
Hide file tree
Showing 4 changed files with 54 additions and 215 deletions.
2 changes: 1 addition & 1 deletion package-lock.json
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

25 changes: 0 additions & 25 deletions src/components/card/event-card/event-card.js
View file

This file was deleted.

139 changes: 22 additions & 117 deletions src/components/card/event-card/event-card.scss
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,3 @@
$event-card-slide-up-distance: -66%;

.events-by-day {
display: flex;
flex-wrap: nowrap;
Expand Down Expand Up @@ -29,18 +27,20 @@ $event-card-slide-up-distance: -66%;
.event-card {
border-radius: $form-radius;
box-shadow: $shadow-passive;
display: flex;
flex-basis: 270px;
flex-direction: column;
flex-shrink: 0;
margin-bottom: $spacing-xxs;
margin-right: $spacing-xxs;
overflow: hidden;
transition: all 0.2s;

@media screen and (min-width: $attendables-bp) {
flex-basis: auto;
margin: 0;
}


&:hover,
&:focus-within {
box-shadow: $shadow-active;
Expand Down Expand Up @@ -75,57 +75,13 @@ $event-card-slide-up-distance: -66%;
width: 100%;
}

.event-card__content {
@include three-by-two-image-crop-wrapper;
transform: translateY(0);
transition: all 0.2s;

.is-open & {
transform: translateY($event-card-slide-up-distance);
@media screen and (min-width: 1280px) {
transform: none;
}
}

@media screen and (min-width: 1280px) {
padding-bottom: 75%;
}
}

.event-card__body,
.event-card__expanded-info {
.event-card__body {
background: $color-white;
display: flex;
flex-basis: 100%;
flex-direction: column;
justify-content: space-between;
left: 0;
padding: calc(14px + 0.3vw);
position: absolute;
right: 0;
}

.event-card__body {
backdrop-filter: blur(4px);
background: linear-gradient(360deg,
$color-white 35%,
rgba($color-white, (2 / 3)) 100%);
bottom: 0;
top: 0;

@media screen and (min-width: 1280px) {
bottom: 40%;
}
}

.event-card__expanded-info {
bottom: $event-card-slide-up-distance;
top: 100%;

@media screen and (min-width: 1280px) {
bottom: 0;
top: 60%;
}
}

.event-card__row {
Expand All @@ -134,20 +90,19 @@ $event-card-slide-up-distance: -66%;
font-size: $textsize-xs;
font-weight: 500;
justify-content: space-between;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}

.event-card__row--top {
font-size: $textsize-xs;
font-weight: 600;
padding-bottom: $spacing-xxs;
line-height: 1;
padding-bottom: $spacing-micro;
text-transform: uppercase;
}

.event-card__subprogram,
.event-card__view-toggle {
padding: 0;
}

.event-card__subprogram {
text-decoration: none;

Expand All @@ -157,42 +112,10 @@ $event-card-slide-up-distance: -66%;
}
}

.event-card__view-toggle {
background: transparent;
border: 0;
cursor: pointer;
height: 1em;
margin-left: $spacing-micro;
width: 1em;

&:focus,
&:hover {
color: $color-focus-state;
outline: 0;
}
@media screen and (min-width: 1280px) {
display: none;
}
}

.view-toggle__icon {
fill: currentColor;
transition: transform 0.4s;

.is-open & {
transform: rotateZ(180deg);
}
}

.event-card__heading {
@include typography-h5;
@include typography-h4;
margin-bottom: auto;
min-height: 4em;

@media screen and (min-width: 1280px) {
@include typography-h4;
min-height: 2.4em;
}
}

.event-card__heading-link {
Expand All @@ -210,50 +133,32 @@ $event-card-slide-up-distance: -66%;
}
}

.event-card__pricing {
background: inherit;
cursor: default;
.event-card__time-and-location {
flex-basis: 50%;
flex-grow: 0;
flex-shrink: 1;
overflow: hidden;
}

.event-card__pricing,
.event-card__event-time,
.event-card__building {
line-height: 1;
overflow: hidden;
padding-right: $spacing-xxs;
text-overflow: ellipsis;
white-space: nowrap;

.is-open &,
&:hover {
overflow: visible;
white-space: normal;
}
}

.event-card__building {
text-align: right;
.event-card__pricing {
padding-bottom: $spacing-xs;
}

.event-card__event-time {
align-self: flex-start;
flex: 1 0 auto;
font-size: $textsize-s;
font-weight: 600;
text-align: right;
text-transform: lowercase;
}

.event-card__program {
padding: 0;
text-decoration: none;

&:focus,
&:hover {
text-decoration: underline;
}
}

.event-card__info {
line-height: 48px; //button height
}

//TODO: Revisit button--small (Do we need an extra small?)
.event-card__tickets-button {
padding-left: 20px;
padding-right: 20px;
Expand Down
103 changes: 31 additions & 72 deletions src/components/card/event-card/event-card.stories.js
View file
Original file line number Diff line number Diff line change
@@ -1,10 +1,7 @@
import html from "../../../../.storybook/helpers/html";
import { useEffect } from "@storybook/client-api";

import EventCard from "./event-card.js";
import { defaultData } from "./event-card-story-helpers.js";
import { withKnobs } from "@storybook/addon-knobs";
import SVGs from "../../../../.storybook/assets/svg";

export default {
title: "Cards/Event Card",
Expand Down Expand Up @@ -36,72 +33,43 @@ const markup = (eventCardData) => html`
/>
</a>
</div>
<div class="event-card__content">
<section class="event-card__body">
<div class="event-card__row event-card__row--top">
<a
class="event-card__subprogram"
href="${eventCardData.attendable.subProgramUrl}"
>
${eventCardData.attendable.subProgramTitle}
</a>
<button
class="event-card__view-toggle js-marble-event-card-toggle-open"
aria-expanded="${eventCardData.isOpened}"
>
${SVGs.viewToggleIcon}
</button>
</div>
<h4 class="event-card__heading">
<a
class="event-card__heading-link"
href="${eventCardData.attendable.url}"
>${eventCardData.attendable.title}</a>
</h4>
<section class="event-card__body">
<div class="event-card__row event-card__row--top">
<a
class="event-card__subprogram"
href="${eventCardData.attendable.subProgramUrl}"
>
${eventCardData.attendable.subProgramTitle}
</a>
</div>
<h4 class="event-card__heading">
<a
class="event-card__heading-link"
href="${eventCardData.attendable.url}"
>${eventCardData.attendable.title}</a>
</h4>
<div class="event-card__row event-card__pricing">
${eventCardData.attendable.ticketPricing}
</div>
<div class="event-card__row">
<div class="event-card__pricing">
${eventCardData.attendable.ticketPricing}
</div>
<div class="event-card__row">
<div class="event-card__time-and-location">
<div class="event-card__event-time">${eventCardData.displayTime}</div>
<div class="event-card__building">${eventCardData.attendable.building}</div>
</div>
</section>
<section class="event-card__expanded-info">
<div class="event-card__row">
<div class="event-card__tickets">
<a
class="event-card__program js-marble-event-card-tabindex-toggle"
tabindex="${eventCardData.isOpened ? "0" : "-1"}"
href="${eventCardData.attendable.programUrl}"
href="${eventCardData.attendable.url}"
class="button primary-button primary-button--x-small primary-button--filled event-card__tickets-button js-marble-event-card-tabindex-toggle"
>
${eventCardData.attendable.programTitle}
${eventCardData.attendable.cta}
</a>
<div class="event-card__building">
${eventCardData.attendable.building}
</div>
</div>
<div class="event-card__row">
<div class="event-card__info">
<a
href="${eventCardData.attendable.url}"
tabindex="${eventCardData.isOpened ? "0" : "-1"}"
class="button tertiary-button js-marble-event-card-tabindex-toggle"
>
More info
</a>
</div>
<div class="event-card__tickets">
<a
href="${eventCardData.attendable.url}"
tabindex="${eventCardData.isOpened ? "0" : "-1"}"
class="button primary-button primary-button--small primary-button--filled event-card__tickets-button js-marble-event-card-tabindex-toggle"
>
${eventCardData.attendable.cta}
</a>
</div>
</div>
</section>
</div>
</div>
</section>
</li>
${eventCardData.inSitu ? html`</ol>`: ""}
`;
Expand All @@ -112,18 +80,9 @@ const chromticParams = {
};

const eventCard = () => {
useEffect(eventCardEffect);
return markup(defaultData({}));
};

eventCard.parameters = chromticParams;


const eventCardOpened = () => {
useEffect(eventCardEffect);
return markup(defaultData({opened: true}));
};

eventCardOpened.parameters = chromticParams;

export { eventCard, eventCardOpened };
export { eventCard};

0 comments on commit 4eefcd2

Please sign in to comment.