@openeventkit/event-site 2.0.113 → 2.0.115

package/src/styles/marketing-hero.module.scss

@@ -1,200 +0,0 @@
-@import "colors.scss";
-
-.hero-marketing {
-  .hero-marketing-container {
-    display: flex;
-    flex-direction: row;
-    height: calc(100% + 6rem);
-
-    .hero-buttons {
-      margin-top: 2.5rem;
-    }
-
-    .button {
-      background-color: transparent;
-      color: #fff;
-      height: 5rem;
-      width: 20rem;
-      margin: 0 10px 10px 0;
-
-      i {
-        color: #fff;
-        height: 1em;
-        width: 2.5em;
-        margin-right: auto;
-        font-size: 1.8em;
-      }
-
-      b {
-        display: inline-block;
-        width: 100%;
-        text-align: center;
-      }
-
-      &:hover,
-      &:active {
-        border-color: #fff;
-        text-decoration: none;
-      }
-
-      &:focus {
-        border-color: #fff;
-        box-shadow: none;
-      }
-
-      &.white {
-        background-color: #fff;
-        color: #6d6e71;
-
-        b,
-        i {
-          color: inherit;
-        }
-      }
-    }
-  }
-
-  .link:first-of-type {
-    .button {
-      background-color: #fff;
-      color: #6d6e71;
-
-      i {
-        color: #6d6e71;
-      }
-    }
-  }
-
-  .hero-marketing-columns {
-    .left-column {
-      background-color: var(--color_secondary_contrast);
-      z-index: 3;
-      min-height: 100%;
-      background-size: cover;
-    }
-
-    h1 {
-      font-size: calc(50px + (50 - 42) * (100vw - 250px) / (1080 - 250));
-      font-weight: bold;
-      margin: 6px 0 6px;
-    }
-
-    h2 {
-      font-size: calc(40px + (40 - 36) * (100vw - 250px) / (1080 - 20));
-      font-weight: normal;
-      margin-bottom: 6px;
-    }
-
-    h4 {
-      font-size: calc(22px + (22 - 14) * (100vw - 250px) / (1080 - 250));
-      font-weight: bold;
-      margin-top: 5px;
-    }
-
-    h1,
-    h2,
-    h4 {
-      color: var(--color_text_light);
-    }
-
-    .date {
-      transform: skew(-25deg);
-      width: max-content;
-      padding: 0.5rem 0;
-      margin-left: -3em;
-
-      div {
-        font-size: 3rem;
-        font-weight: bold;
-        color: var(--color_text_light);
-        letter-spacing: 0.1rem;
-      }
-
-      span {
-        margin: 0 -1.5em;
-        display: inline;
-      }
-
-      div:before {
-        content: "";
-        margin-right: 1.4em;
-      }
-
-      div:after {
-        content: "";
-        margin-left: 1.5em;
-      }
-    }
-
-    .right-column {
-      z-index: 1;
-
-      .single-image {
-        height: 100%;
-        background-size: cover;
-        min-height: 350px;
-      }
-
-      .image-slider {
-        background-position: center;
-        background-repeat: no-repeat;
-        background-size: cover;
-        min-height: 100%;
-        overflow: hidden;
-      }
-    }
-  }
-}
-
-@media (max-width: 978px) {
-  .hero-marketing {
-    .hero-marketing-columns {
-      .left-column {
-        .hero-marketing-container {
-          height: 520px;
-          padding: 2rem 1.5rem;
-
-          .hero-buttons {
-            display: flex;
-            flex-direction: column;
-          }
-
-          .link {
-            margin-bottom: 1rem;
-            display: inline-block;
-          }
-        }
-      }
-
-      .right-column {
-        .image-slider {
-          height: 530px;
-        }
-      }
-    }
-  }
-}
-
-@media (max-width: 768px) {
-  .hero-marketing {
-    .hero-marketing-columns {
-      .left-column {
-        transform: none;
-        width: 100%;
-        margin-left: 0;
-
-        .hero-marketing-container {
-          transform: none;
-          margin-left: 0;
-          height: auto;
-        }
-      }
-
-      .right-column {
-        width: 100%;
-        z-index: 1;
-        margin-left: 0;
-      }
-    }
-  }
-}

package/src/templates/marketing-page-template.js

@@ -1,194 +0,0 @@
-import React, { useEffect, useRef, useState } from "react";
-import PropTypes from "prop-types";
-import { navigate } from "gatsby";
-import { GatsbyImage, getImage } from "gatsby-plugin-image";
-import Mdx from "@mdx-js/runtime";
-
-import Layout from "../components/Layout";
-import AttendanceTrackerComponent from "../components/AttendanceTrackerComponent";
-import MarketingHeroComponent from "../components/MarketingHeroComponent";
-import LiteScheduleComponent from "../components/LiteScheduleComponent";
-import DisqusComponent from "../components/DisqusComponent";
-import Countdown from "../components/Countdown";
-import Link from "../components/Link";
-import ResponsiveImage from "../components/ResponsiveImage";
-
-import Masonry from "react-masonry-css";
-import Slider from "react-slick";
-import { formatMasonry } from "../utils/masonry";
-
-import { PHASES } from "../utils/phasesUtils";
-
-import styles from "../styles/marketing.module.scss";
-
-const sliderSettings = {
-  autoplay: true,
-  autoplaySpeed: 5000,
-  infinite: true,
-  dots: false,
-  slidesToShow: 1,
-  slidesToScroll: 1
-};
-
-const shortcodes = {
-  a: Link,
-  img: ResponsiveImage
-};
-
-const MarketingPageTemplate = ({
-  location,
-  data,
-  lastDataSync,
-  summit,
-  summitPhase,
-  isLoggedUser,
-}) => {
-  const rightColumnRef = useRef(null);
-  const [rightColumnHeight, setRightColumnHeight] = useState();
-
-  const onResize = () => {
-    if (rightColumnRef?.current) {
-      setRightColumnHeight(rightColumnRef.current.firstChild.clientHeight);
-    }
-  };
-
-  useEffect(() => {
-    onResize();
-    window.addEventListener("resize", onResize);
-    return () => {
-      window.removeEventListener("resize", onResize);
-    };
-  }, [data, rightColumnRef]);
-
-  const {
-    marketingPageJson: {
-      hero,
-      countdown,
-      widgets,
-      masonry
-    } = {}
-  } = data || {};
-
-  let scheduleProps = {};
-  if (widgets?.schedule && isLoggedUser && summitPhase !== PHASES.BEFORE) {
-    scheduleProps = {
-      ...scheduleProps,
-      onEventClick: (ev) => navigate(`/a/event/${ev.id}`)
-    };
-  }
-
-  const shouldRenderMasonry = masonry?.display;
-
-  return (
-    <Layout marketing={true} location={location}>
-      <AttendanceTrackerComponent />
-      <MarketingHeroComponent
-        location={location}
-        data={hero}
-      />
-      {summit && countdown?.display && <Countdown summit={summit} text={countdown?.text} />}
-      <div className="columns">
-        <div
-          className={`column mt-3 px-6 py-6 ${shouldRenderMasonry ? "is-half" : ""} ${styles.leftColumn || ""}`}
-          style={{ maxHeight: shouldRenderMasonry && rightColumnHeight ? rightColumnHeight : "none" }}
-        >
-          {widgets?.content?.display && widgets?.content?.body &&
-          <Mdx components={shortcodes}>
-            {widgets.content.body}
-          </Mdx>
-          }
-          {widgets?.schedule?.display &&
-          <>
-            <h2><b>{widgets.schedule.title}</b></h2>
-            <LiteScheduleComponent
-              {...scheduleProps}
-              lastDataSync={lastDataSync}
-              id={`marketing_lite_schedule_${lastDataSync}`}
-              page="marketing-site"
-              showAllEvents={true}
-              showSearch={false}
-              showNav={true}
-            />
-          </>
-          }
-          {widgets?.disqus?.display &&
-          <>
-            <h2><b>{widgets.disqus.title}</b></h2>
-            <DisqusComponent page="marketing-site"/>
-          </>
-          }
-          {widgets?.image?.display &&
-          widgets?.image?.image.src &&
-          <>
-            <h2><b>{widgets.image.title}</b></h2>
-            <br />
-            <GatsbyImage image={getImage(widgets.image.image.src)} alt={widgets.image.image.alt ?? ""} />
-          </>
-          }
-        </div>
-        {shouldRenderMasonry &&
-        <div
-          ref={rightColumnRef}
-          className={`column px-0 pb-0 is-half ${styles.rightColumn || ""}`}
-        >
-          <Masonry
-            breakpointCols={2}
-            className="my-masonry-grid"
-            columnClassName="my-masonry-grid_column">
-            {masonry.items && formatMasonry(masonry.items).map((item, index) => {
-              if (item.images && item.images.length === 1) {
-                const image = getImage(item.images[0].src);
-                return (
-                  <div className={"single"} key={index}>
-                    {item.images[0].link ?
-                      <Link to={item.images[0].link}>
-                        <GatsbyImage image={image} alt={item.images[0].alt ?? ""} />
-                      </Link>
-                      :
-                      <GatsbyImage image={image} alt={item.images[0].alt ?? ""} />
-                    }
-                  </div>
-                );
-              } else if (item.images && item.images.length > 1) {
-                return (
-                  <Slider {...sliderSettings} key={index}>
-                    {item.images.map((image, indexSlide) => {
-                      const img = getImage(image.src);
-                      return (
-                        <div className={styles.imageSlider} key={indexSlide}>
-                          {image.link ?
-                            <Link to={image.link}>
-                              <GatsbyImage image={img} alt={image.alt ?? ""} />
-                            </Link>
-                            :
-                            <GatsbyImage image={img} alt={image.alt ?? ""} />
-                          }
-                        </div>
-                      );
-                    })}
-                  </Slider>
-                );
-              } else {
-                return (
-                  <div className="single" key={index} />
-                );
-              }
-            })}
-          </Masonry>
-        </div>
-        }
-      </div>
-    </Layout>
-  );
-};
-
-MarketingPageTemplate.propTypes = {
-  location: PropTypes.object,
-  data: PropTypes.object,
-  lastDataSync: PropTypes.number,
-  summit: PropTypes.object,
-  summitPhase: PropTypes.number,
-  isLoggedUser: PropTypes.bool
-};
-
-export default MarketingPageTemplate;