From aca0d7ff231323289fc22e1fc005dae91e8b0ab7 Mon Sep 17 00:00:00 2001 From: Andy Tudhope <13001517+andytudhope@users.noreply.github.com> Date: Tue, 26 Aug 2025 09:23:36 +0200 Subject: [PATCH] fix requested --- src/modules/ui/FlipCard.js | 96 ++++++++++++++++------- static/images/fellows/Maceagon_Voyce.jpg | Bin 23467 -> 421607 bytes 2 files changed, 68 insertions(+), 28 deletions(-) diff --git a/src/modules/ui/FlipCard.js b/src/modules/ui/FlipCard.js index 1b245bb00..fef8dddb2 100644 --- a/src/modules/ui/FlipCard.js +++ b/src/modules/ui/FlipCard.js @@ -1,42 +1,59 @@ import React from 'react' +const RotateIcon = (props) => ( + +) + const styles = { flipCard: { perspective: '1000px', width: '100%', }, + cardHeight: { + height: 345, + }, flipCardInner: { position: 'relative', + width: '100%', + height: '100%', transition: 'transform 0.6s', transformStyle: 'preserve-3d', }, - flipCardInnerHover: { + flipped: { transform: 'rotateY(180deg)', }, - flipCardFront: { - backgroundColor: 'white', + faceBase: { + backfaceVisibility: 'hidden', + transformStyle: 'preserve-3d', borderRadius: '0.375rem', boxShadow: '0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)', border: '2px solid rgba(229, 231, 235, 0.5)', - backfaceVisibility: 'hidden', - transformStyle: 'preserve-3d', + position: 'absolute', + inset: 0, + }, + flipCardFront: { + backgroundColor: 'white', }, flipCardBack: { backgroundColor: 'rgb(243, 244, 246)', - borderRadius: '0.375rem', - boxShadow: - '0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)', - border: '2px solid rgba(229, 231, 235, 0.5)', - padding: '1rem 0.2rem ', - backfaceVisibility: 'hidden', - transformStyle: 'preserve-3d', transform: 'rotateY(180deg)', + padding: '1rem 0.2rem', + }, + flipBtn: { position: 'absolute', - top: 0, - left: 0, - right: 0, - bottom: 0, + top: 8, + right: 8, + padding: 6, + borderRadius: '9999px', + background: 'transparent', + border: 'none', + cursor: 'pointer', }, title: { textAlign: 'center', @@ -44,12 +61,12 @@ const styles = { fontSize: '1.5rem', padding: '2rem', borderBottom: '2px solid rgb(229, 231, 235)', - height: '175px', + height: 175, }, gridContainer: { display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', - height: '170px', + height: 170, borderRight: '1px solid rgb(229, 231, 235)', }, inquirySection: { @@ -69,11 +86,13 @@ const styles = { textAlign: 'center', fontWeight: 900, fontSize: '1.5rem', + marginTop: 8, marginBottom: '1rem', }, linksList: { listStyleType: 'disc', listStylePosition: 'inside', + paddingInline: 16, }, listItem: { margin: '0.5rem 0', @@ -98,26 +117,34 @@ const FlipCard = ({ webInquiryLink = '', backLinks = [], }) => { - const [isHovered, setIsHovered] = React.useState(false) + const [isFlipped, setIsFlipped] = React.useState(false) return ( -
setIsHovered(true)} - onMouseLeave={() => setIsHovered(false)} - onFocus={() => setIsHovered(true)} - onBlur={() => setIsHovered(false)}> +
-
+ {/* FRONT */} +
+ + +
{personalInquiry && (
@@ -137,7 +164,20 @@ const FlipCard = ({ )}
-
+ + {/* BACK */} +
+ +
Extended Reading