diff --git a/frontend/components/ClubPage/EventCarousel.tsx b/frontend/components/ClubPage/EventCarousel.tsx deleted file mode 100644 index 9bb643f58..000000000 --- a/frontend/components/ClubPage/EventCarousel.tsx +++ /dev/null @@ -1,145 +0,0 @@ -import 'react-multi-carousel/lib/styles.css' - -import React, { useState } from 'react' -import Carousel from 'react-multi-carousel' -import styled from 'styled-components' - -import { ClubEvent } from '../../types' -import { Icon, StrongText } from '../common' -import Modal from '../common/Modal' -import EventCard from '../EventPage/EventCard' -import EventModal from '../EventPage/EventModal' - -const LeftArrow = styled.div` - left: -10px; - position: absolute; - top: 50%; - transform: translateY(-50%); - z-index: 100; - opacity: 0.6; - transition-duration: 300ms; - cursor: pointer; - &:hover { - opacity: 1; - } -` -const RightArrow = styled.div` - right: -10px; - position: absolute; - top: 50%; - transform: translateY(-50%); - z-index: 100; - opacity: 0.6; - transition-duration: 300ms; - cursor: pointer; - &:hover { - opacity: 1; - } -` - -const CarouselWrapper = styled.div` - position: absolute; - box-sizing: border-box; - width: 100%; -` -const EventWrapper = styled.div` - @media only screen and (max-width: 580px) { - margin: 25px; - } - @media only screen and (min-width: 580px) and (max-width: 900px) { - margin: 8px; - } - @media only screen and (min-width: 900px) and (max-width: 1400px) { - margin: 12px; - } - @media only screen and (min-width: 1400px) { - margin: 5px; - } -` - -type EventsProps = { - data: ClubEvent[] -} - -const EventCarousel = ({ data }: EventsProps) => { - const [show, setShow] = useState(false) - const [modalData, setModalData] = useState() - - const showModal = (entry: ClubEvent) => { - setModalData(entry) - setShow(true) - } - const hideModal = () => setShow(false) - const responsive = { - superLargeDesktop: { - breakpoint: { max: 4000, min: 1400 }, - items: 3, - }, - tablet: { - breakpoint: { max: 1400, min: 580 }, - items: 2, - }, - mobile: { - breakpoint: { max: 580, min: 0 }, - items: 1, - }, - } - return ( -
-
- Events - Click on an event to get more details. -
-
- -
- - - - } - customRightArrow={ - - - - } - > - {data.map((entry, index) => ( -
- - showModal(entry)} - onLinkClicked={() => hideModal()} - /> - -
- ))} - -
- -
- {show && ( - - {modalData && ( - - )} - - )} -
- ) -} - -export default EventCarousel diff --git a/frontend/components/ClubPage/Events.tsx b/frontend/components/ClubPage/Events.tsx index daff4c790..1c5422c18 100644 --- a/frontend/components/ClubPage/Events.tsx +++ b/frontend/components/ClubPage/Events.tsx @@ -6,6 +6,8 @@ import { DARK_BLUE, HOVER_GRAY, PURPLE, WHITE } from '../../constants/colors' import { M2, M3 } from '../../constants/measurements' import { ClubEvent, ClubEventType } from '../../types' import { Card, Icon, StrongText } from '../common' +import Modal from '../common/Modal' +import EventModal from '../EventPage/EventModal' type EventsProps = { data: ClubEvent[] @@ -29,8 +31,7 @@ const Wrapper = styled.div` margin-bottom: 0.5rem; display: flex; cursor: pointer; - border-radius: 8px; - padding: 2px; + border-radius: 3px; &:hover { background-color: ${HOVER_GRAY}; @@ -69,6 +70,11 @@ const Event = ({ entry }: { entry: ClubEvent }): ReactElement => { + {show && ( + + + + )} ) } diff --git a/frontend/components/EventPage/EventCard.tsx b/frontend/components/EventPage/EventCard.tsx index 13e27e74e..d9aa723bd 100644 --- a/frontend/components/EventPage/EventCard.tsx +++ b/frontend/components/EventPage/EventCard.tsx @@ -92,14 +92,14 @@ const EventCard = (props: { {clipLink(url)} ))} - {(badges?.length > 0 || pinned) && ( + {(badges.length > 0 || pinned) && (
{pinned && ( Pinned )} - {badges?.map(({ id, label }) => ( + {badges.map(({ id, label }) => ( {label} diff --git a/frontend/package.json b/frontend/package.json index b0e4c8312..270f3f9c4 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -44,7 +44,6 @@ "react-ga": "^3.3.1", "react-lazy-load": "^4.0.1", "react-linkify": "^1.0.0-alpha", - "react-multi-carousel": "^2.8.5", "react-places-autocomplete": "^7.3.0", "react-select": "^5.8.0", "react-table": "^7.8.0", diff --git a/frontend/pages/club/[club]/index.tsx b/frontend/pages/club/[club]/index.tsx index c61403844..0c14b3b4b 100644 --- a/frontend/pages/club/[club]/index.tsx +++ b/frontend/pages/club/[club]/index.tsx @@ -3,6 +3,7 @@ import { DesktopActions, MobileActions } from 'components/ClubPage/Actions' import AdvisorList from 'components/ClubPage/AdvisorList' import ClubApprovalDialog from 'components/ClubPage/ClubApprovalDialog' import Description from 'components/ClubPage/Description' +import Events from 'components/ClubPage/Events' import FilesList from 'components/ClubPage/FilesList' import Header from 'components/ClubPage/Header' import InfoBox from 'components/ClubPage/InfoBox' @@ -42,7 +43,6 @@ import { SITE_NAME, } from 'utils/branding' -import EventCarousel from '~/components/ClubPage/EventCarousel' import { CLUB_ALUMNI_ROUTE, CLUB_ORG_ROUTE } from '~/constants' import { CLUBS_RED, SNOW, WHITE } from '~/constants/colors' import { M0, M2, M3 } from '~/constants/measurements' @@ -268,7 +268,6 @@ const ClubPage = ({ )} - {events.length > 0 && }
{userInfo && ( @@ -297,6 +296,7 @@ const ClubPage = ({
)} + {isClubFieldShown('signature_events') && signatureEvents && !!signatureEvents.length && ( diff --git a/frontend/yarn.lock b/frontend/yarn.lock index c1411f1e9..ad2d5ec1a 100644 --- a/frontend/yarn.lock +++ b/frontend/yarn.lock @@ -8949,11 +8949,6 @@ react-motion@^0.5.2: prop-types "^15.5.8" raf "^3.1.0" -react-multi-carousel@^2.8.5: - version "2.8.5" - resolved "https://registry.yarnpkg.com/react-multi-carousel/-/react-multi-carousel-2.8.5.tgz#033e35426ee2d2ddd46a5b3967a654cd901a80d1" - integrity sha512-C5DAvJkfzR2JK9YixZ3oyF9x6R4LW6nzTpIXrl9Oujxi4uqP9SzVVCjl+JLM3tSdqdjAx/oWZK3dTVBSR73Q+w== - react-onclickoutside@^6.10.0: version "6.13.0" resolved "https://registry.yarnpkg.com/react-onclickoutside/-/react-onclickoutside-6.13.0.tgz#e165ea4e5157f3da94f4376a3ab3e22a565f4ffc"