FEAT: mobile responsive Award moment & ID badge updates

src/components/Moments/AwardsMoment/AwardsMoment.styles.ts

@@ -1,6 +1,20 @@
 const styles = {
   container: {
     backgroundImage: 'url(https://stories-api-public.s3.amazonaws.com/award-moment-background.jpg)',
+    backgroundPosition: 'center',
+    backgroundSize: 'cover',
+    minHeight: 600,
+
+    '@media (max-width: 768px)': {
+      minHeight: 420,
+      paddingBottom: 16,
+      paddingTop: 16,
+    },
+
+    '@media (max-width: 320px)': {
+      paddingBottom: 4,
+      paddingTop: 4,
+    },
   },
   divider: {
     background: 'rgba(255, 255, 255, 0.45)',

src/components/UI/AwardCertificate/AwardCertificate.styles.ts

@@ -12,11 +12,17 @@ const styles = {
     flexDirection: 'column',
     height: '250px',
     justifyContent: 'center',
+    maxWidth: '100%',
+    minHeight: 250,
     position: 'relative',
     textAlign: 'center',
-    width: '400px',
+    width: { xs: '100%', sm: 360, md: 400 },
   } as SxProps<Theme>,
 
+  content: {
+    maxWidth: '90%',
+  },
+
   corner: {
     topLeft: (color: string) => ({
       borderRight: `${cornerSize}px solid transparent`,
@@ -61,15 +67,15 @@ const styles = {
     mb: 1,
   }),
   recipient: {
-    fontSize: '1.5rem',
+    fontSize: { xs: '1.2rem', sm: '1.5rem' },
     fontWeight: 700,
   },
   subtitle: {
-    fontSize: '1.2rem',
+    fontSize: { xs: '1rem', sm: '1.2rem' },
     fontWeight: 500,
   },
   description: {
-    fontSize: '1rem',
+    fontSize: { xs: '0.9rem', sm: '1rem' },
     mt: 0.5,
   },
   title: {

src/components/UI/AwardCertificate/AwardCertificate.tsx

@@ -37,24 +37,26 @@ const AwardCertificate = observer(({ award, moment, sx }: AwardCertificateProps)
         <EmojiEvents fontSize="large" />
       </Box>
 
-      {title ? <Typography sx={styles.title}>{title}</Typography> : null}
+      <Box sx={styles.content}>
+        {title ? <Typography sx={styles.title}>{title}</Typography> : null}
 
-      {subtitle ? <Typography sx={styles.subtitle}>{subtitle}</Typography> : null}
+        {subtitle ? <Typography sx={styles.subtitle}>{subtitle}</Typography> : null}
 
-      {description ? <Typography sx={styles.description}>{description}</Typography> : null}
+        {description ? <Typography sx={styles.description}>{description}</Typography> : null}
 
-      {recipient ? <Typography sx={styles.recipient}>{recipient}</Typography> : null}
+        {recipient ? <Typography sx={styles.recipient}>{recipient}</Typography> : null}
 
-      {conferredBy ? (
-        <Typography sx={styles.conferredBy}>
-          Conferred by
-          {' '}
+        {conferredBy ? (
+          <Typography sx={styles.conferredBy}>
+            Conferred by
+            {' '}
 
-          {conferredBy.title || conferredBy.label}
-        </Typography>
-      ) : null}
+            {conferredBy.title || conferredBy.label}
+          </Typography>
+        ) : null}
 
-      {year ? <Typography sx={styles.year}>{year}</Typography> : null}
+        {year ? <Typography sx={styles.year}>{year}</Typography> : null}
+      </Box>
     </Box>
   );
 });

src/components/UI/Cards/Cards.styles.ts

@@ -11,20 +11,27 @@ const styles = {
       width: '100%',
 
       '& .cards-carousel-layout-swiper-slide': {
-        maxWidth: '80%',
-        width: 'auto',
+        width: '100%',
+        maxWidth: {
+          xs: '100%',
+          md: '80%',
+        },
 
         '& .swiper-slide-shadow': {
           display: 'none',
         },
       },
+      '& .swiper-pagination': {
+        position: 'relative',
+        marginTop: '16px',
+      },
     },
   },
   gridLayoutRoot: {
     m: 0,
   },
   item: {
-    flexShrink: 0,
+    width: '100%',
   },
   orbitLayoutRoot: {
     alignItems: 'center',

src/components/UI/Cards/CardsCarouselLayout.tsx

@@ -1,3 +1,6 @@
+import 'swiper/css';
+import 'swiper/css/pagination';
+
 import Box from '@mui/material/Box';
 import { observer } from 'mobx-react-lite';
 import type { Swiper as SwiperClass } from 'swiper';
@@ -26,26 +29,24 @@ const CardsCarouselLayout = observer(({
     delay: 4000, // ms between auto swipes
     disableOnInteraction: false, // keeps autoplay after user swipes
   }) : undefined;
-
-  const slidesPerView = layoutOptions?.slides_per_view ?? 'auto';
-  const slideGap = layoutOptions?.slide_gap;
+  const slidesPerView = layoutOptions?.slides_per_view ?? 3;
+  const slideGap = layoutOptions?.slide_gap ?? 16;
 
   return (
     <Box sx={deepMerge(styles.carouselLayoutRoot, sx)}>
       <Swiper
         autoplay={autoPlay}
-        centerInsufficientSlides
+        centeredSlides={slidesPerView === 1}
         className="cards-carousel-layout-swiper"
         grabCursor
-        loop={!!layoutOptions?.loop}
+        loop
         modules={[Autoplay, Pagination]}
-        nested
         onSlideChange={handleSlideChange}
         pagination={{
           clickable: true,
         }}
-        slidesOffsetAfter={24}
-        slidesOffsetBefore={24}
+        slidesOffsetAfter={0}
+        slidesOffsetBefore={0}
         slidesPerView={slidesPerView}
         spaceBetween={slideGap}
       >

src/components/UI/Cards/CardsOrbitLayout.styles.ts

@@ -1,7 +1,7 @@
 const styles = {
   orbitLayoutRoot: {
     height: '600px',
-    overflow: 'visible',
+    padding: '0 64px',
     perspective: '1200px',
     position: 'relative',
     width: '100%',
@@ -15,28 +15,29 @@ const styles = {
     transformOrigin: 'center center',
     transformStyle: 'preserve-3d',
     transition: 'transform 0.8s ease-in-out',
+    width: 0,
+    height: 0,
   }),
 
   orbitItem: (
     angle: number,
     radius: number,
-    scale: number,
   ) => ({
     alignItems: 'center',
     display: 'flex',
     height: '100%',
     justifyContent: 'center',
-    left: 0,
+    left: '50%',
     position: 'absolute',
-    top: 0,
+    top: '50%',
     transform: `
+      translate(-50%, -50%)
       rotateY(${angle}deg)
       translateZ(${radius}px)
-      scale(${scale})
+      scale(1)
     `,
     transformOrigin: 'center center',
     transition: 'transform 0.8s ease-in-out',
-    width: '100%',
   }),
 
   navLeft: {

src/components/UI/Cards/CardsOrbitLayout.tsx

@@ -9,45 +9,45 @@ import type { CardsLayoutProps } from './Cards.types';
 import CardsItem from './CardsItem';
 import styles from './CardsOrbitLayout.styles';
 
-const radius = 500;
-
 const CardsOrbitLayout = observer(({
   children,
-  itemSx,
   keyFn,
   onChange,
 }: CardsLayoutProps) => {
+  const radius = 500;
   const [activeIndex, setActiveIndex] = useState(0);
   const count = children.length;
   const step = 360 / count;
-  const [rotation, setRotation] = useState(0);
 
   const handleNextCard = () => {
     const newIndex = (activeIndex + 1) % count;
     setActiveIndex(newIndex);
-    setRotation((prev) => prev - step);
     onChange?.(newIndex);
   };
 
   const handlePrevCard = () => {
     const newIndex = (activeIndex - 1 + count) % count;
     setActiveIndex(newIndex);
-    setRotation((prev) => prev + step);
     onChange?.(newIndex);
   };
 
   return (
     <Box sx={styles.orbitLayoutRoot}>
-      <Box sx={styles.orbitInner(rotation)}>
+      <Box sx={styles.orbitInner(-(activeIndex * step))}>
         {children.map((child, index) => {
-          const angle = (360 / count) * index;
-          const relativeAngle = ((index - activeIndex + count) % count) * (360 / count);
-          const normalizedAngle = ((relativeAngle + 180) % 360) - 180;
-          const scale = 1 - 0.5 * (Math.abs(normalizedAngle) / 180);
+          const angle = index * step;
 
           return (
-            <Box key={keyFn(index)} sx={styles.orbitItem(angle, radius, scale)}>
-              <CardsItem disableAnimation={false} sx={itemSx}>
+            <Box
+              key={keyFn(index)}
+              sx={styles.orbitItem(
+                angle,
+                radius,
+              )}
+            >
+              <CardsItem
+                disableAnimation={false}
+              >
                 {child}
               </CardsItem>
             </Box>

src/components/UI/Cards/CardsZigZagLayout.styles.ts

@@ -51,22 +51,28 @@ const styles = {
   },
 
   zigZagGrid: {
-    marginTop: '-25px',
+    flexDirection: { xs: 'column', md: 'row' },
+    maxWidth: '1200px',
+    marginLeft: 'auto',
+    marginRight: 'auto',
     position: 'relative',
+    textAlign: { xs: 'center', md: 'inherit' },
     zIndex: 1,
   },
 
   zigZagCard: {
     alignItems: 'center',
     display: 'flex',
     justifyContent: 'center',
-    maxWidth: 400,
+    marginBottom: { xs: 2, md: 0 },
+    maxWidth: { xs: '100%', md: 400 },
     transformStyle: 'preserve-3d',
     transition: 'transform 0.4s ease, box-shadow 0.4s ease',
   },
 
   zigZagCaption: {
     container: {
+      overflowWrap: 'break-word',
       textAlign: 'center',
       width: '100%',
       marginBottom: '12px',
@@ -104,6 +110,7 @@ const styles = {
       '&:hover': {
         backgroundColor: 'primary.dark',
       },
+      wordBreak: 'break-word',
     },
   },
 };

src/components/UI/Cards/CardsZigZagLayout.tsx

@@ -1,3 +1,4 @@
+import { useMediaQuery, useTheme } from '@mui/material';
 import Box from '@mui/material/Box';
 import Grid from '@mui/material/Grid2';
 import React, { isValidElement } from 'react';
@@ -12,6 +13,8 @@ export default function CardsZigZagLayout({
   keyFn,
   sx,
 }: CardsLayoutProps) {
+  const theme = useTheme();
+  const isMobile = useMediaQuery(theme.breakpoints.down('md'));
   const cards = React.Children.toArray(children);
 
   type CaptionBlock =
@@ -82,31 +85,32 @@ export default function CardsZigZagLayout({
             <Grid
               alignItems="center"
               container
-              justifyContent={isEven ? 'flex-start' : 'flex-end'}
-              spacing={4}
-              sx={styles.zigZagGrid}
+              justifyContent={{ xs: 'center', md: 'space-between' }}
+              spacing={isMobile ? 2 : 4}
+              sx={{
+                ...styles.zigZagGrid,
+                flexDirection: {
+                  xs: 'column',
+                  md: isEven ? 'row' : 'row-reverse',
+                },
+              }}
             >
-              {isEven ? (
-                <>
-                  <Grid size={{ xs: 12, md: 5 }}>{renderCaption}</Grid>
 
-                  <Grid size={{ xs: 12, md: 7 }}>
-                    <CardsItem disableAnimation sx={styles.zigZagCard}>
-                      {card}
-                    </CardsItem>
-                  </Grid>
-                </>
-              ) : (
-                <>
-                  <Grid size={{ xs: 12, md: 7 }}>
-                    <CardsItem disableAnimation sx={styles.zigZagCard}>
-                      {card}
-                    </CardsItem>
-                  </Grid>
+              <Grid size={{ xs: 12, md: isEven ? 7 : 5 }}>
+                <CardsItem disableAnimation sx={styles.zigZagCard}>
+                  {card}
+                </CardsItem>
+              </Grid>
 
-                  <Grid size={{ xs: 12, md: 5 }}>{renderCaption}</Grid>
-                </>
-              )}
+              <Grid
+                size={{ xs: 12, md: isEven ? 5 : 7 }}
+                sx={{
+                  mt: { xs: 2, md: 0 },
+                  minWidth: 0,
+                }}
+              >
+                {renderCaption}
+              </Grid>
             </Grid>
           </Box>
         );