Mobile TeamMemberCard fixes #368
|
@ -75,36 +75,50 @@
|
|||
|
||||
.popupBackground {
|
||||
position: fixed;
|
||||
z-index: 11;
|
||||
background-color: var(--navbar-page-overlay);
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 11;
|
||||
|
||||
background-color: var(--navbar-page-overlay);
|
||||
animation: revealBg 0.2s forwards;
|
||||
}
|
||||
|
||||
.popupContainer {
|
||||
position: fixed;
|
||||
display: flex;
|
||||
z-index: 12;
|
||||
flex-direction: column;
|
||||
background-color: var(--secondary-background);
|
||||
padding: calc(20rem / 16) calc(40rem / 16);
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 50%;
|
||||
z-index: 12;
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
|
||||
box-sizing: border-box;
|
||||
padding: calc(40rem / 16);
|
||||
max-height: 75vh;
|
||||
overflow: auto;
|
||||
|
||||
background-color: var(--secondary-background);
|
||||
animation: popup 0.7s forwards;
|
||||
}
|
||||
|
||||
.closeBtn {
|
||||
position: absolute;
|
||||
align-self: flex-end;
|
||||
cursor: pointer;
|
||||
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
/* reset default button styling */
|
||||
|
||||
width: min-content;
|
||||
background: transparent;
|
||||
border: 0px solid transparent;
|
||||
background: none;
|
||||
border: none;
|
||||
padding: 0;
|
||||
font-family: inherit;
|
||||
line-height: inherit;
|
||||
}
|
||||
|
||||
.popupContent {
|
||||
|
@ -113,25 +127,27 @@
|
|||
align-items: center;
|
||||
}
|
||||
|
||||
.popupName {
|
||||
color: var(--primary-accent);
|
||||
margin: calc(24rem / 16) 0 0 0;
|
||||
.popupContent .name {
|
||||
margin-top: calc(24rem / 16);
|
||||
font-size: calc(18rem / 16);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.popupRole {
|
||||
color: var(--primary-heading);
|
||||
margin: 0 0 1rem 0;
|
||||
text-align: center;
|
||||
.popupContent .role {
|
||||
margin-bottom: calc(16rem / 16);
|
||||
font-size: calc(18rem / 16);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.popupDescription {
|
||||
.popupContent .description {
|
||||
display: block;
|
||||
font-size: calc(14rem / 16);
|
||||
}
|
||||
|
||||
.popupContent .description > *:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: calc(768rem / 16)) {
|
||||
.card {
|
||||
display: flex;
|
||||
|
|
|
@ -13,35 +13,6 @@ export interface TeamMemberCardProps {
|
|||
children: React.ReactNode;
|
||||
}
|
||||
|
||||
interface TeamMemberInfoProps extends TeamMemberCardProps {
|
||||
isPopup?: boolean;
|
||||
}
|
||||
|
||||
function TeamMemberInfo({
|
||||
name,
|
||||
role,
|
||||
image,
|
||||
children,
|
||||
isPopup = false,
|
||||
}: TeamMemberInfoProps) {
|
||||
return (
|
||||
<>
|
||||
<div className={styles.picture}>
|
||||
<Image
|
||||
className={styles.image}
|
||||
src={image}
|
||||
alt={`Picture of ${name}`}
|
||||
/>
|
||||
</div>
|
||||
<h1 className={isPopup ? styles.popupName : styles.name}>{name}</h1>
|
||||
<h2 className={isPopup ? styles.popupRole : styles.role}>{role}</h2>
|
||||
<div className={isPopup ? styles.popupDescription : styles.description}>
|
||||
{children}
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
export function TeamMemberCard({
|
||||
name,
|
||||
role,
|
||||
|
@ -50,11 +21,13 @@ export function TeamMemberCard({
|
|||
}: TeamMemberCardProps) {
|
||||
const { width } = useWindowDimension();
|
||||
const [isOpen, setIsOpen] = useState(false);
|
||||
|
||||
const handleClick = () => {
|
||||
if (isOpen || width <= 768) {
|
||||
setIsOpen(!isOpen);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<article className={styles.card} onClick={handleClick}>
|
||||
|
@ -75,11 +48,28 @@ export function TeamMemberCard({
|
|||
);
|
||||
}
|
||||
|
||||
interface Propup extends TeamMemberCardProps {
|
||||
function TeamMemberInfo({ name, role, image, children }: TeamMemberCardProps) {
|
||||
return (
|
||||
<>
|
||||
<div className={styles.picture}>
|
||||
<Image
|
||||
className={styles.image}
|
||||
src={image}
|
||||
alt={`Picture of ${name}`}
|
||||
/>
|
||||
</div>
|
||||
<h1 className={styles.name}>{name}</h1>
|
||||
<h2 className={styles.role}>{role}</h2>
|
||||
<div className={styles.description}>{children}</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
interface PopupProps extends TeamMemberCardProps {
|
||||
handleClick: () => void;
|
||||
}
|
||||
|
||||
function ExecPopup({ name, role, image, children, handleClick }: Propup) {
|
||||
function ExecPopup({ name, role, image, children, handleClick }: PopupProps) {
|
||||
return (
|
||||
<>
|
||||
<div className={styles.popupBackground} onClick={handleClick} />
|
||||
|
@ -88,9 +78,7 @@ function ExecPopup({ name, role, image, children, handleClick }: Propup) {
|
|||
<Image src="images/team/popup-close.svg" />
|
||||
</button>
|
||||
<div className={styles.popupContent}>
|
||||
<TeamMemberInfo {...{ name, role, image }} isPopup={true}>
|
||||
{children}
|
||||
</TeamMemberInfo>
|
||||
<TeamMemberInfo {...{ name, role, image }}>{children}</TeamMemberInfo>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
|
|
Loading…
Reference in New Issue
Is inheriting the font-family necessary?
Hmm I tried commenting it out and nothing seems to have changed visually, so I guess it's probably not needed. 🤷