Merge pull request #46 from coderbunker/fix-avatars

[FIX] Avatar Component overflow

Author: Carms Ng

src/components/CarouselCard.js

@@ -59,7 +59,7 @@ export default function CarouselCard({
       </div>
       {/* highlights for small screen, show first few */}
       <ul className="text-sm py-4 block md:hidden">
-        {highlights.slice(0, 3).map((hl) => <li key={`xs-${hl}`}>{hl}</li>)}
+        {highlights.slice(0, 5).map((hl) => <li key={`xs-${hl}`}>{hl}</li>)}
       </ul>
       {/* Button to navigate prev and next */}
       <div className="carousel-btns">

src/components/StackedAvatar.js

@@ -1,6 +1,7 @@
-import * as React from 'react';
+import React from 'react';
 import { graphql, useStaticQuery } from 'gatsby';
 import { GatsbyImage } from 'gatsby-plugin-image';
+import styled from 'styled-components';
 
 export default function StackedAvatar({ sectionRefs, setTeamIndex, pausedRef }) {
   // Query all team name and image sorted by image file name
@@ -47,24 +48,17 @@ export default function StackedAvatar({ sectionRefs, setTeamIndex, pausedRef })
   const members = allMembersJson.nodes.map((member) => member.en);
 
   return (
-    <div className="py-8 flex">
+    <AvatarsStyles>
       {members.map((member, i) => {
         const zIndex = members.length - i;
-        const translateX = i * -30;
         return (
           <button
+            type="button"
             data-team={i}
             onClick={handleClick}
             key={`avatar-${member.name}`}
             style={{
-              width: '75px',
-              height: '75px',
-              zIndex: `${zIndex}`,
-              border: '1px solid var(--white)',
-              borderRadius: '50%',
-              background: 'var(--white)',
-              transform: `translateX(${translateX}%)`,
-              position: 'relative',
+              zIndex,
             }}
           >
             <GatsbyImage
@@ -75,8 +69,33 @@ export default function StackedAvatar({ sectionRefs, setTeamIndex, pausedRef })
             />
           </button>
         );
-      }).slice(0, 7)}
-      {/* TODO: handle representation for members with count above 7 */}
-    </div>
+      })}
+    </AvatarsStyles>
   );
 }
+
+const AvatarsStyles = styled.div`
+  margin: 1rem 0;
+  max-width: calc(100vw - 40px);
+  overflow-x: scroll;
+  white-space: nowrap;
+  -ms-overflow-style: none;
+  scrollbar-width: none;
+  &::-webkit-scrollbar {
+    display: none;
+  }
+
+  > button {
+    display: inline-table;
+    height: 100%;
+    position: relative;
+
+    &:not(:first-child) {
+      margin-left: -12px;
+    }
+    > div {
+      display: table-cell;
+      vertical-align: middle;
+    }
+  }
+`;

src/components/sections/Contact.js

@@ -68,7 +68,12 @@ const ContactStyles = styled.section`
   display: flex;
   flex-direction: column;
   justify-content: space-between;
+
   p, svg {
     color: var(--darkgrey);
   }
+
+  @media (min-width: 640px) {
+    min-height: unset;
+  }
 `;

src/components/sections/Hero.js

@@ -52,6 +52,8 @@ export default function Hero({ sectionRefs, setTeamIndex, pausedRef }) {
 }
 
 const HeroStyles = styled.section`
+  padding-bottom: 0;
+
   position: relative;
   .hero {
     height: calc(80vh - 100px);

src/components/sections/Service.js

@@ -10,7 +10,7 @@ export default function Service() {
     <ServiceStyles>
       <SiteBorderStyles className="wrapper">
         {/* section-header */}
-        <div className="text-left md:text-center py-4 md:pt-16 lg:pt-24">
+        <div className="text-left md:text-center py-4 md:pt-16 lg:py-24">
           <h2 className="text-2xl lg:text-4xl">
             <span className="highlight-red">
               <Trans>Customize</Trans>

src/components/sections/Steps.js

@@ -9,7 +9,7 @@ export default function Steps() {
     <StepsStyles>
       <SiteBorderStyles className="wrapper">
         {/* section-header */}
-        <div className="text-left md:text-center py-4 md:pt-16 lg:pt-24">
+        <div className="text-left md:text-center py-4 md:py-16 lg:py-24">
           <h2 className="text-2xl lg:text-4xl">
             {/* eslint-disable-next-line react/no-unescaped-entities */}
             <Trans>Let's Get To </Trans>

src/components/sections/Team.js

@@ -11,7 +11,7 @@ export default function Team({ teamIndex, setTeamIndex, locale }) {
     <TeamStyles>
       <SiteBorderStyles className="wrapper">
         {/* section-header */}
-        <div className="text-left md:text-center py-4 md:pt-16 lg:pt-24">
+        <div className="text-left md:text-center py-4 md:py-16 lg:py-24">
           <h2 className="text-2xl lg:text-4xl">
             <span className="highlight-red">
               <Trans>Consult</Trans>

src/styles/GlobalStyles.js

@@ -33,8 +33,8 @@ const GlobalStyles = createGlobalStyle`
     width: min-content;
   }
   section {
-    padding-top: 100px;
-    height: 100vh;
+    padding: 100px 0;
+    min-height: 100vh;
   }
   button:focus, button:hover {
     outline: none;
@@ -43,7 +43,6 @@ const GlobalStyles = createGlobalStyle`
     display: grid;
     align-items: flex-start;
     height: 100%;
-    overflow: auto;
   }
 `;