CMS changes, styles (#74)

2022-05-30 14:58:09 +02:00 · 2022-05-30 14:58:09 +02:00 · 38e068417a
commit 38e068417a
parent 41762363e2
9 changed files with 117 additions and 69 deletions
--- a/src/components/common/card/card.module.scss
+++ b/src/components/common/card/card.module.scss
@ -209,6 +209,7 @@
      display: flex;
      align-items: center;
      gap: tovw(10px, 'default', 6px);
+      text-transform: uppercase;

      svg {
        margin-bottom: tovw(1px, 'default', 1px);
@ -225,6 +226,7 @@
    &.horizontal {
      flex-direction: row;
      gap: tovw(44px, 'default', 44px);
+      min-height: tovw(380px, 'default', 380px);

      > .image__container {
        margin: 0;
@ -284,6 +286,10 @@
  width: 100%;
  height: tovw(232px, 'default', 200px);

+  @supports (aspect-ratio: 16 / 9) {
+    aspect-ratio: 16 / 9;
+  }
+
  img {
    width: 100%;
    height: 100%;
--- a/src/components/common/card/index.tsx
+++ b/src/components/common/card/index.tsx
@ -3,7 +3,7 @@ import NextLink from 'next/link'
 import { useRouter } from 'next/router'
 import { useCallback, useEffect, useState } from 'react'

-import { Calendar, Clock } from '~/components/icons/events'
+import { Calendar } from '~/components/icons/events'
 import Heading from '~/components/primitives/heading'
 import Link from '~/components/primitives/link'
 import { BlogPostFragment } from '~/lib/cms/generated'
@ -17,6 +17,7 @@ interface CardProps {
  className?: string
  data?: any
  isNews?: boolean
+  isPress?: boolean
  reduced?: boolean
 }

@ -24,29 +25,32 @@ const Card = ({
  className,
  data,
  isNews = false,
+  isPress = false,
  reduced = false
 }: CardProps) => {
  const [eventDate, setEventDate] = useState<string>()
-  const [eventTime, setEventTime] = useState<string>()
+  const [eventEndDate, setEventEndDate] = useState<string>()

  useEffect(() => {
    setEventDate(
-      new Date(data?.eventDatetime).toLocaleDateString('default', {
-        year: '2-digit',
-        month: '2-digit',
+      new Date(data?.eventStartdate).toLocaleDateString('en-US', {
+        // year: '2-digit',
+        month: 'long',
        day: '2-digit'
      })
    )
-    setEventTime(
-      new Date(data?.eventDatetime).toLocaleTimeString('default', {
-        hour: '2-digit',
-        minute: '2-digit'
+
+    setEventEndDate(
+      new Date(data?.eventEnddate).toLocaleDateString('en-US', {
+        // year: '2-digit',
+        month: 'long',
+        day: '2-digit'
      })
    )
-  }, [data?.eventDatetime])
+  }, [data?.eventStartdate, data?.eventEnddate])

  const [title, setTitle] = useState<string>()
-  const [eventTitle, setEventTitle] = useState<string>()
+  // const [eventTitle, setEventTitle] = useState<string>()

  useEffect(() => {
    if (data?.title?.length > 60) {
@ -55,17 +59,10 @@ const Card = ({
    }

    setTitle(data?.title)
-
-    if (data?.eventTitle?.length > 60) {
-      setEventTitle(data?.eventTitle.slice(0, 60) + '...')
-      return
-    }
-
-    setEventTitle(data?.eventTitle)
-  }, [data?.eventTitle, data?.title])
+  }, [data?.title])

  return (
-    <NextLink href={isNews ? `/blog/${data?.slug}` : data?.eventLink}>
+    <NextLink href={isNews ? `/blog/${data?.slug}` : data?.link}>
      <div className={clsx(s['card'], className)}>
        <div className={s['card__header']}>
          {!isNews && (
@ -80,30 +77,24 @@ const Card = ({
              </span>
            )}
            <span className={s.date}>
-              {!isNews && <Calendar />}
-              {isNews ? data?.date : eventDate}
+              {(isNews || isPress) && formatDate(data?.date)}
+              {!isNews && !isPress && <Calendar />}
+              {!isNews && !isPress && eventDate}
+              {!isNews && !isPress && eventEndDate !== eventDate
+                ? ` - ${eventEndDate} `
+                : ''}
            </span>
-            {!isNews && (
-              <span className={s.hour}>
-                <Clock />
-                {eventTime} HS
-              </span>
-            )}
          </div>
        </div>
        <div className={s['image__container']}>
-          <img
-            alt={data?.title}
-            loading="lazy"
-            src={isNews ? data?.image.url : data?.eventImage?.url}
-          />
+          <img alt={data?.title} loading="lazy" src={data?.image?.url} />
        </div>
        <div className={s['content']}>
          <Heading as="h2" variant="sm" font="tthoves">
-            {isNews ? title : eventTitle}
+            {title}
          </Heading>
          {!reduced && <p>{isNews ? getDescription(data) : data?.eventDesc}</p>}
-          <Link href={isNews ? `/blog/${data?.slug}` : data?.eventLink}>
+          <Link href={isNews ? `/blog/${data?.slug}` : data?.link}>
            {isNews ? 'READ ARTICLE' : 'LEARN MORE'}
          </Link>
        </div>
--- a/src/components/common/footer/footer.module.scss
+++ b/src/components/common/footer/footer.module.scss
@ -99,6 +99,10 @@
      font-size: tovw(14px, 'default', 12px);
      text-transform: uppercase;
      font-family: var(--font-dm-mono);
+
+      &:first-child {
+        top: tovw(60px, 'default', 50px);
+      }
    }
  }

@ -191,6 +195,12 @@
        gap: tovw(70px, 'default', 15px);
      }

+      a {
+        @include respond-to('mobile') {
+          font-size: tovw(15px, 'default', 15px);
+        }
+      }
+
      display: flex;
      gap: tovw(105px, 'default', 65px);
    }
--- a/src/components/sections/blog/hero/hero.module.scss
+++ b/src/components/sections/blog/hero/hero.module.scss
@ -41,18 +41,17 @@

      &__mobile {
        @include respond-to('mobile') {
-          display: none;
-
-          // display: flex;
-          // margin: tovw(50px, 'mobile', 130px) 0 tovw(50px, 'mobile', 70px) 0;
-          // width: 130%;
-          // mix-blend-mode: screen;
-          // place-self: center;
-          // mask-image: linear-gradient(
-          //   0deg,
-          //   rgb(255 255 255 / 0) 0%,
-          //   rgb(0 0 0) 25%
-          // );
+          display: flex;
+          margin: tovw(-70px, 'mobile', -160px) 0;
+          width: 280%;
+          transform: translateX(31.5%);
+          mix-blend-mode: screen;
+          place-self: center;
+          mask-image: linear-gradient(
+            0deg,
+            rgb(255 255 255 / 0) 0%,
+            rgb(0 0 0) 25%
+          );
        }

        display: none;
@ -63,6 +62,7 @@
  .container {
    @include respond-to('mobile') {
      margin-top: unset;
+      padding-top: tovw(80px, 'tablet');
    }

    z-index: 10;
@ -70,6 +70,10 @@
    margin-top: tovw(-300px, 'default', -1450px);

    h1 {
+      @include respond-to('mobile') {
+        font-size: tovw(50px, 'mobile');
+      }
+
      padding-bottom: tovw(120px, 'default', 80px);
    }

--- a/src/components/sections/newsroom/press/index.tsx
+++ b/src/components/sections/newsroom/press/index.tsx
@ -3,7 +3,7 @@ import 'keen-slider/keen-slider.min.css'
 import { useKeenSlider } from 'keen-slider/react'
 import { Key, useState } from 'react'

-import { BlogCard } from '~/components/common/card'
+import Card from '~/components/common/card'
 import { ArrowSlider } from '~/components/icons/arrow'
 import { Container } from '~/components/layout/container'
 import Section from '~/components/layout/section'
@ -17,7 +17,14 @@ export interface Props {
    pressHeading: string
    pressHeadingNumber: string
  }
-  blogData: any
+  blogData: {
+    pressreleaseLink: string
+    pressreleaseTitle: string
+    pressreleaseDatetime: string
+    pressreleaseImage: {
+      url: string
+    }
+  }[]
 }

 const Press = ({ data, blogData }: Props) => {
@ -55,7 +62,12 @@ const Press = ({ data, blogData }: Props) => {
      <div className={s['slider__container']}>
        <div className={`${s.events__container} keen-slider`} ref={sliderRef}>
          {blogData.map((item: any, i: Key) => (
-            <BlogCard key={i} data={item} className={`keen-slider__slide`} />
+            <Card
+              isPress={true}
+              key={i}
+              data={item}
+              className={`keen-slider__slide`}
+            />
          ))}
        </div>
      </div>
--- a/src/components/sections/partners/opportunities/opportunities.module.scss
+++ b/src/components/sections/partners/opportunities/opportunities.module.scss
@ -23,6 +23,7 @@
      @include respond-to('mobile') {
        display: flex;
        flex-direction: column;
+        padding-top: tovw(60px, 'tablet', 60px);
      }

      display: grid;
@ -33,7 +34,7 @@

      &:not(:first-child) {
        @include respond-to('mobile') {
-          margin-top: tovw(86px, 'mobile');
+          margin-top: tovw(86px, 'tablet', 86px);
        }

        margin-top: tovw(86px, 'default', 30px);
--- a/src/lib/cms/queries/community.js
+++ b/src/lib/cms/queries/community.js
@ -16,16 +16,17 @@ const CommunityHero = {
 const Events = {
  query: `
        {
-            allEvents(orderBy: [eventDatetime_ASC]) {
-                eventDatetime
+            allEvents(orderBy: [eventStartdate_ASC]) {
                eventDesc
-                eventImage {
-                    url
-                }
-                eventLink
+                eventEnddate
+                eventStartdate
                eventLocation
-                eventTitle
                id
+                image {
+                  url
+                }
+                link
+                title
            }
        }
        `
--- a/src/lib/cms/queries/press.js
+++ b/src/lib/cms/queries/press.js
@ -10,6 +10,20 @@ const PressHero = {
          }
          `
 }
+const PressReleases = {
+  query: `
+          {
+              allPressReleases(orderBy: date_DESC) {
+                image {
+                  url
+                }
+                link
+                title
+                date
+          }
+        }
+          `
+}

 const PressMedia = {
  query: `
@ -80,5 +94,6 @@ export {
  PressFeaturedSection,
  PressHero,
  PressMedia,
-  PressPress
+  PressPress,
+  PressReleases
 }
--- a/src/pages/press.tsx
+++ b/src/pages/press.tsx
@ -15,7 +15,8 @@ import {
  PressFeaturedSection,
  PressHero,
  PressMedia,
-  PressPress
+  PressPress,
+  PressReleases
 } from '~/lib/cms/queries/press'

 import { request } from '../lib/datocms'
@ -28,21 +29,28 @@ export const getStaticProps = async () => {

  const heroBlogPost = allBlogPosts.data[0]

-  const [pressHero, pressFeatured, pressFeaturedData, pressMedia, pressPress] =
-    await Promise.all([
-      request(PressHero),
-      request(PressFeaturedSection),
-      request(PressFeatured),
-      request(PressMedia),
-      request(PressPress)
-    ])
+  const [
+    pressHero,
+    pressFeatured,
+    pressFeaturedData,
+    pressReleases,
+    pressMedia,
+    pressPress
+  ] = await Promise.all([
+    request(PressHero),
+    request(PressFeaturedSection),
+    request(PressFeatured),
+    request(PressReleases),
+    request(PressMedia),
+    request(PressPress)
+  ])

  return {
    props: {
      heroData: pressHero?.pressPage,
      featuredData: pressFeatured?.pressPage,
      featuredPostsData: pressFeaturedData?.allBlogPosts?.slice(0, 3),
-      pressPostsData: allBlogPosts?.data,
+      pressPostsData: pressReleases?.allPressReleases,
      mediaData: pressMedia?.pressPage,
      pressData: pressPress?.pressPage,
      initialBlogPosts: {