Thanks to visit codestin.com
Credit goes to github.com

Skip to content

Commit 8418b1c

Browse files
author
Carms Ng
authored
Merge pull request #46 from coderbunker/fix-avatars
[FIX] Avatar Component overflow
2 parents bfee47e + 2a1063c commit 8418b1c

File tree

8 files changed

+46
-21
lines changed

8 files changed

+46
-21
lines changed

‎src/components/CarouselCard.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -59,7 +59,7 @@ export default function CarouselCard({
5959
</div>
6060
{/* highlights for small screen, show first few */}
6161
<ul className="text-sm py-4 block md:hidden">
62-
{highlights.slice(0, 3).map((hl) => <li key={`xs-${hl}`}>{hl}</li>)}
62+
{highlights.slice(0, 5).map((hl) => <li key={`xs-${hl}`}>{hl}</li>)}
6363
</ul>
6464
{/* Button to navigate prev and next */}
6565
<div className="carousel-btns">

‎src/components/StackedAvatar.js‎

Lines changed: 33 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
1-
import * as React from 'react';
1+
import React from 'react';
22
import { graphql, useStaticQuery } from 'gatsby';
33
import { GatsbyImage } from 'gatsby-plugin-image';
4+
import styled from 'styled-components';
45

56
export default function StackedAvatar({ sectionRefs, setTeamIndex, pausedRef }) {
67
// Query all team name and image sorted by image file name
@@ -47,24 +48,17 @@ export default function StackedAvatar({ sectionRefs, setTeamIndex, pausedRef })
4748
const members = allMembersJson.nodes.map((member) => member.en);
4849

4950
return (
50-
<div className="py-8 flex">
51+
<AvatarsStyles>
5152
{members.map((member, i) => {
5253
const zIndex = members.length - i;
53-
const translateX = i * -30;
5454
return (
5555
<button
56+
type="button"
5657
data-team={i}
5758
onClick={handleClick}
5859
key={`avatar-${member.name}`}
5960
style={{
60-
width: '75px',
61-
height: '75px',
62-
zIndex: `${zIndex}`,
63-
border: '1px solid var(--white)',
64-
borderRadius: '50%',
65-
background: 'var(--white)',
66-
transform: `translateX(${translateX}%)`,
67-
position: 'relative',
61+
zIndex,
6862
}}
6963
>
7064
<GatsbyImage
@@ -75,8 +69,33 @@ export default function StackedAvatar({ sectionRefs, setTeamIndex, pausedRef })
7569
/>
7670
</button>
7771
);
78-
}).slice(0, 7)}
79-
{/* TODO: handle representation for members with count above 7 */}
80-
</div>
72+
})}
73+
</AvatarsStyles>
8174
);
8275
}
76+
77+
const AvatarsStyles = styled.div`
78+
margin: 1rem 0;
79+
max-width: calc(100vw - 40px);
80+
overflow-x: scroll;
81+
white-space: nowrap;
82+
-ms-overflow-style: none;
83+
scrollbar-width: none;
84+
&::-webkit-scrollbar {
85+
display: none;
86+
}
87+
88+
> button {
89+
display: inline-table;
90+
height: 100%;
91+
position: relative;
92+
93+
&:not(:first-child) {
94+
margin-left: -12px;
95+
}
96+
> div {
97+
display: table-cell;
98+
vertical-align: middle;
99+
}
100+
}
101+
`;

‎src/components/sections/Contact.js‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -68,7 +68,12 @@ const ContactStyles = styled.section`
6868
display: flex;
6969
flex-direction: column;
7070
justify-content: space-between;
71+
7172
p, svg {
7273
color: var(--darkgrey);
7374
}
75+
76+
@media (min-width: 640px) {
77+
min-height: unset;
78+
}
7479
`;

‎src/components/sections/Hero.js‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -52,6 +52,8 @@ export default function Hero({ sectionRefs, setTeamIndex, pausedRef }) {
5252
}
5353

5454
const HeroStyles = styled.section`
55+
padding-bottom: 0;
56+
5557
position: relative;
5658
.hero {
5759
height: calc(80vh - 100px);

‎src/components/sections/Service.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ export default function Service() {
1010
<ServiceStyles>
1111
<SiteBorderStyles className="wrapper">
1212
{/* section-header */}
13-
<div className="text-left md:text-center py-4 md:pt-16 lg:pt-24">
13+
<div className="text-left md:text-center py-4 md:pt-16 lg:py-24">
1414
<h2 className="text-2xl lg:text-4xl">
1515
<span className="highlight-red">
1616
<Trans>Customize</Trans>

‎src/components/sections/Steps.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ export default function Steps() {
99
<StepsStyles>
1010
<SiteBorderStyles className="wrapper">
1111
{/* section-header */}
12-
<div className="text-left md:text-center py-4 md:pt-16 lg:pt-24">
12+
<div className="text-left md:text-center py-4 md:py-16 lg:py-24">
1313
<h2 className="text-2xl lg:text-4xl">
1414
{/* eslint-disable-next-line react/no-unescaped-entities */}
1515
<Trans>Let's Get To </Trans>

‎src/components/sections/Team.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ export default function Team({ teamIndex, setTeamIndex, locale }) {
1111
<TeamStyles>
1212
<SiteBorderStyles className="wrapper">
1313
{/* section-header */}
14-
<div className="text-left md:text-center py-4 md:pt-16 lg:pt-24">
14+
<div className="text-left md:text-center py-4 md:py-16 lg:py-24">
1515
<h2 className="text-2xl lg:text-4xl">
1616
<span className="highlight-red">
1717
<Trans>Consult</Trans>

‎src/styles/GlobalStyles.js‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -33,8 +33,8 @@ const GlobalStyles = createGlobalStyle`
3333
width: min-content;
3434
}
3535
section {
36-
padding-top: 100px;
37-
height: 100vh;
36+
padding: 100px 0;
37+
min-height: 100vh;
3838
}
3939
button:focus, button:hover {
4040
outline: none;
@@ -43,7 +43,6 @@ const GlobalStyles = createGlobalStyle`
4343
display: grid;
4444
align-items: flex-start;
4545
height: 100%;
46-
overflow: auto;
4746
}
4847
`;
4948

0 commit comments

Comments
 (0)