From afa464a2c4fa0c4ee6377e1d3726c84a9f30f16a Mon Sep 17 00:00:00 2001 From: ValDekh Date: Fri, 15 Sep 2023 11:09:23 +0300 Subject: [PATCH 1/2] Done --- src/features/MainPage/TopCarousel/TopCarousel.styles.scss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/features/MainPage/TopCarousel/TopCarousel.styles.scss b/src/features/MainPage/TopCarousel/TopCarousel.styles.scss index b04654bdf..80b28eeb5 100644 --- a/src/features/MainPage/TopCarousel/TopCarousel.styles.scss +++ b/src/features/MainPage/TopCarousel/TopCarousel.styles.scss @@ -19,7 +19,7 @@ .carousel-image { width: 100%; - height: f.pxToRem(737px); + height: 100%; } .slick-dots li button { @@ -63,7 +63,7 @@ @media screen and (min-width: 1800px) { .carousel-image { - height: f.pxToRem(830px); + height: auto; } } } From 5189381a167563ed99cce226d28b149edfc8735d Mon Sep 17 00:00:00 2001 From: Oleh-Kril Date: Fri, 15 Sep 2023 13:08:56 +0300 Subject: [PATCH 2/2] - fix image duplication on mobile - fix text overflowing and different card sizes --- src/assets/sass/mixins/_utils.mixins.scss | 3 +- .../Founders/Founders.component.tsx | 80 ++++++++++--------- .../TeamMemberCard.component.tsx | 45 +++++++---- .../TeamMemberCard/TeamMemberCard.styles.scss | 59 ++++++++++---- .../TeamMemberLinks.component.tsx | 14 ++-- .../TeamMemberList.component.tsx | 38 ++++----- .../TeamMembersSlider.component.tsx | 34 ++++---- 7 files changed, 162 insertions(+), 111 deletions(-) diff --git a/src/assets/sass/mixins/_utils.mixins.scss b/src/assets/sass/mixins/_utils.mixins.scss index 8032dee65..3e0094802 100644 --- a/src/assets/sass/mixins/_utils.mixins.scss +++ b/src/assets/sass/mixins/_utils.mixins.scss @@ -181,6 +181,7 @@ overflow: hidden; white-space: nowrap; text-overflow: $text-overflow; + word-break: break-word; @supports (-webkit-line-clamp: $line-num) { overflow: hidden; @@ -250,4 +251,4 @@ @keyframes #{$name} { @content; } -} \ No newline at end of file +} diff --git a/src/features/AboutUsPage/Founders/Founders.component.tsx b/src/features/AboutUsPage/Founders/Founders.component.tsx index 000fc0c6b..7e73012a2 100644 --- a/src/features/AboutUsPage/Founders/Founders.component.tsx +++ b/src/features/AboutUsPage/Founders/Founders.component.tsx @@ -1,37 +1,38 @@ -import './Founders.styles.scss' -import Founder from './Founder/Founder.component' -import TeamMemberCard from '../TeamMemberCard/TeamMemberCard.component' -import TeamMember from '@/models/team/team.model' -import Inna from '@assets/images/about-us/Inna.png' -import Natalia from '@assets/images/about-us/Nata.png' -import InnaSmall from '@assets/images/about-us/InnaWithBG.png' -import NataliaSmall from '@assets/images/about-us/NataliaWithBG.png' +import './Founders.styles.scss'; + +import Inna from '@assets/images/about-us/Inna.png'; +import InnaSmall from '@assets/images/about-us/InnaWithBG.png'; +import Natalia from '@assets/images/about-us/Nata.png'; +import NataliaSmall from '@assets/images/about-us/NataliaWithBG.png'; + +import TeamMember from '@/models/team/team.model'; + +import TeamMemberCard from '../TeamMemberCard/TeamMemberCard.component'; + +import Founder from './Founder/Founder.component'; // тут лежить хардкод -const FounderInna: FounderProps = -{ +const FounderInna: FounderProps = { founderName: 'Інна Крупник', founderRole: 'Голова і співзасновниця ГО', founderImage: Inna, founderInstagram: 'https://www.instagram.com/krupnyk_inna/', founderFacebook: 'https://www.facebook.com/krupnyk.inna', founderText: '«На участь, до того ж найактивнішу, в проєкті «Стріткод: історія на кожному кроці» мене надихає розуміння того, наскільки українське суспільство та нація проапгрейдили власне розуміння себе та своєї історії за останні роки, наскільки відкриті вони до вивчення історії та спростування історичних міфів, наскільки хочуть бачити цю історію близькою до себе, пережитою та бути дотичною до неї. Це все наштовхує на необхідність важливих історичних проєктів, як просвітницьких, так і розважальних. Для широких верств та найширшого залучення в історію. Занурюймося!»', - order: true -} + order: true, +}; -const FounderNatalia: FounderProps = -{ +const FounderNatalia: FounderProps = { founderName: 'Наталя Демідова', founderRole: 'Авторка ідеї, співзасновниця проєкту', founderImage: Natalia, founderInstagram: 'https://www.instagram.com/notatka8/', founderFacebook: 'https://www.facebook.com/NatalyaDemydiv', founderText: '«Я хочу, щоб українські діти, які зростатимуть після Перемоги, знали, хто в цьому світі на що здатний. Хочу, щоби розуміли причинно-наслідкові зв’язки і були захищені цим знанням. Для того маємо відновлювати історичну пам’ять вже зараз. Це водночас і просто, і складно. Просто – бо є проєкт «Стріткод», бачення, як його втілити, і команда, яка вже це робить. Складно, бо масштаби – вся Україна. Але це той проєкт, який має бути реалізований, тут без варіантів. Тому несемось!) Приєднуйтеся ;)»', - order: false -} + order: false, +}; -const TeamMemberCardInna: TeamMember = -{ +const TeamMemberCardInna: TeamMember = { id: -1, isMain: true, imageId: -1, @@ -39,12 +40,12 @@ const TeamMemberCardInna: TeamMember = description: FounderInna.founderRole, image: { id: -1, - base64: InnaSmall+'', + base64: `${InnaSmall}`, blobName: 'Inna', mimeType: 'png', }, teamMemberLinks: [ - { + { id: -1, targetUrl: FounderInna.founderFacebook, logoType: 2, @@ -53,13 +54,12 @@ const TeamMemberCardInna: TeamMember = id: -2, targetUrl: FounderInna.founderInstagram, logoType: 1, - } + }, ], positions: [], -} +}; -const TeamMemberCardNatalia: TeamMember = -{ +const TeamMemberCardNatalia: TeamMember = { id: -2, isMain: true, imageId: -2, @@ -67,12 +67,12 @@ const TeamMemberCardNatalia: TeamMember = description: FounderNatalia.founderRole, image: { id: -2, - base64: NataliaSmall, + base64: NataliaSmall, blobName: 'Natalia', mimeType: 'png', }, teamMemberLinks: [ - { + { id: -1, targetUrl: FounderInna.founderFacebook, logoType: 2, @@ -81,22 +81,24 @@ const TeamMemberCardNatalia: TeamMember = id: -2, targetUrl: FounderInna.founderInstagram, logoType: 1, - } + }, ], positions: [], -} +}; // Кінець хардкода -const Founders = () => { - return ( -
-

Засновниці

-
- {window.innerWidth > 600 ? : } - {window.innerWidth > 600 ? : } -
+const Founders = () => ( +
+

+
+ Засновниці +
+

+
+ {window.innerWidth > 600 ? : } + {window.innerWidth > 600 ? : }
- ); -} +
+); -export default Founders; \ No newline at end of file +export default Founders; diff --git a/src/features/AboutUsPage/TeamMemberCard/TeamMemberCard.component.tsx b/src/features/AboutUsPage/TeamMemberCard/TeamMemberCard.component.tsx index f0f5b04db..c5f21e429 100644 --- a/src/features/AboutUsPage/TeamMemberCard/TeamMemberCard.component.tsx +++ b/src/features/AboutUsPage/TeamMemberCard/TeamMemberCard.component.tsx @@ -1,25 +1,40 @@ -import './TeamMemberCard.styles.scss' +import './TeamMemberCard.styles.scss'; + +import base64ToUrl from '@/app/common/utils/base64ToUrl.utility'; import TeamMember from '@/models/team/team.model'; + import TeamMemberLinks from './TeamMemberLinks/TeamMemberLinks.component'; -import base64ToUrl from '@/app/common/utils/base64ToUrl.utility'; -const TeamMemberCard = (member : TeamMember) => ( -
-
- 0 ? base64ToUrl(member.image?.base64, member.image?.mimeType) : member.image?.base64}/> +type Props = { + person: TeamMember, + isSingleCard?: boolean +}; + +const TeamMemberCard = ({ person, isSingleCard }: Props) => ( +
+
+ 0 + ? base64ToUrl(person.image?.base64, person.image?.mimeType) + : person.image?.base64} + alt="team person" + />
-
-

{member.name}

-

{member.description}

-
- {member.teamMemberLinks.map( - (link)=>( - - ) +
+
+

{person.name}

+

{person.description}

+
+ +
+ {person.teamMemberLinks.map( + (link) => ( + + ), )}
); -export default TeamMemberCard \ No newline at end of file +export default TeamMemberCard; diff --git a/src/features/AboutUsPage/TeamMemberCard/TeamMemberCard.styles.scss b/src/features/AboutUsPage/TeamMemberCard/TeamMemberCard.styles.scss index a4dfba294..64b8b2720 100644 --- a/src/features/AboutUsPage/TeamMemberCard/TeamMemberCard.styles.scss +++ b/src/features/AboutUsPage/TeamMemberCard/TeamMemberCard.styles.scss @@ -8,43 +8,69 @@ { display: flex; flex-direction: column; - gap: f.pxToRem(30px); + justify-content: space-between; + gap: 5%; border-radius: 50px; box-shadow: 0px 7px 17px 2px #5b5b5b40; + max-width: f.pxToRem(310px); min-width: f.pxToRem(310px); - height: 100%; - + height: f.pxToRem(479px); padding: f.pxToRem(20px); + position: relative; + + &_single{ + margin: f.pxToRem(30px) auto; + } + .photoContainer{ + height: 65%; + img{ border-radius: 50px; width: 100%; + height: 100%; + object-fit: cover; } } - - .textContainer { + + .content{ + height: 30%; display: flex; + justify-content: space-between; flex-direction: column; - gap: f.pxToRem(10px); - padding: 0 f.pxToRem(8px); - text-align: center; - word-break: break-all; - h2 { - @include mut.with-font($font-family: ft.$closer-text-font, $font-weight: 500, $font-size: 23px); - } - p { - @include mut.with-font($font-family: ft.$roboto-font, $font-weight: 300, $font-size: 19px); - color: c.$sliders-text-grey-color; + + .textContainer { + display: flex; + flex-direction: column; + gap: f.pxToRem(10px); + padding: 0 f.pxToRem(8px); + text-align: center; + word-break: break-all; + + h2 { + @include mut.with-font($font-family: ft.$closer-text-font, $font-weight: 500, $font-size: 23px); + @include mut.truncated($line-num: 1); + } + + p { + @include mut.with-font($font-family: ft.$roboto-font, $font-weight: 300, $font-size: 19px); + color: c.$sliders-text-grey-color; + @include mut.truncated($line-num: 2); + } } + .linksContainer { display: flex; justify-content: center; gap: f.pxToRem(10px); + margin-bottom: f.pxToRem(5px); + a { min-width: f.pxToRem(25px); min-height: f.pxToRem(25px); + img{ width: 100%; height: 100%; @@ -52,5 +78,4 @@ } } } - -} \ No newline at end of file +} diff --git a/src/features/AboutUsPage/TeamMemberCard/TeamMemberLinks/TeamMemberLinks.component.tsx b/src/features/AboutUsPage/TeamMemberCard/TeamMemberLinks/TeamMemberLinks.component.tsx index e5006be64..0f1eb4aae 100644 --- a/src/features/AboutUsPage/TeamMemberCard/TeamMemberLinks/TeamMemberLinks.component.tsx +++ b/src/features/AboutUsPage/TeamMemberCard/TeamMemberLinks/TeamMemberLinks.component.tsx @@ -6,11 +6,13 @@ import youtube from '@assets/images/partners/youtube.webp'; import { TeamMemberLinkCreateUpdate } from '@/models/team/team.model'; const LogoType = [twitter, instagram, facebook, youtube]; - -const TeamMemberLinks = (link: TeamMemberLinkCreateUpdate) => ( - - - +type Props = { + link: TeamMemberLinkCreateUpdate +}; +const TeamMemberLinks = ({ link }: Props) => ( + + social media icon + ); -export default TeamMemberLinks; \ No newline at end of file +export default TeamMemberLinks; diff --git a/src/features/AboutUsPage/TeamMembers/TeamMembersList/TeamMemberList.component.tsx b/src/features/AboutUsPage/TeamMembers/TeamMembersList/TeamMemberList.component.tsx index 83804ea66..7d4854b0e 100644 --- a/src/features/AboutUsPage/TeamMembers/TeamMembersList/TeamMemberList.component.tsx +++ b/src/features/AboutUsPage/TeamMembers/TeamMembersList/TeamMemberList.component.tsx @@ -1,23 +1,25 @@ -import TeamMember from "@/models/team/team.model"; -import TeamMemberCard from "../../TeamMemberCard/TeamMemberCard.component"; -import './TeamMemberList.styles.scss' +import './TeamMemberList.styles.scss'; + +import TeamMember from '@/models/team/team.model'; + +import TeamMemberCard from '../../TeamMemberCard/TeamMemberCard.component'; + interface TeamMemberListProps { teamMembers: TeamMember[]; } -const TeamMemberList = (props: TeamMemberListProps) => { - return ( -
- { - props.teamMembers.map( - (founder)=> -
- -
- ) - } -
- ) -} +const TeamMemberList = ({ teamMembers }: TeamMemberListProps) => ( +
+ { + teamMembers.map( + (founder) => ( +
+ +
+ ), + ) + } +
+); -export default TeamMemberList; \ No newline at end of file +export default TeamMemberList; diff --git a/src/features/AboutUsPage/TeamMembers/TeamPositionsSlider/TeamMembersSlider.component.tsx b/src/features/AboutUsPage/TeamMembers/TeamPositionsSlider/TeamMembersSlider.component.tsx index 7f8bf4fec..d3f18abed 100644 --- a/src/features/AboutUsPage/TeamMembers/TeamPositionsSlider/TeamMembersSlider.component.tsx +++ b/src/features/AboutUsPage/TeamMembers/TeamPositionsSlider/TeamMembersSlider.component.tsx @@ -14,21 +14,25 @@ const TeamMemberSlider: React.FC = ({ team }) => { const getSliderData = () => { if (team.length > 0) { return ( - - { - team.map((member) => ( - - - - ))} - + team.length === 1 + ? + : ( + + { + team.map((member) => ( + + + + )) + } + + ) ); } return <>;