Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Develop #771

Merged
merged 4 commits into from
Sep 15, 2023
Merged

Develop #771

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
afa464a
Done
ValDekh Sep 15, 2023
5189381
- fix image duplication on mobile
Oleh-Kril Sep 15, 2023
2386703
Merge pull request #768 from ita-social-projects/Incorrect-aspect-rat…
MementoMorj Sep 15, 2023
8da330f
Merge pull request #769 from ita-social-projects/fix-about-us-slider
MementoMorj Sep 15, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 2 additions & 1 deletion src/assets/sass/mixins/_utils.mixins.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -250,4 +251,4 @@
@keyframes #{$name} {
@content;
}
}
}
80 changes: 41 additions & 39 deletions src/features/AboutUsPage/Founders/Founders.component.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,50 +1,51 @@
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,
name: FounderInna.founderName,
description: FounderInna.founderRole,
image: {
id: -1,
base64: InnaSmall+'',
base64: `${InnaSmall}`,
blobName: 'Inna',
mimeType: 'png',
},
teamMemberLinks: [
{
{
id: -1,
targetUrl: FounderInna.founderFacebook,
logoType: 2,
Expand All @@ -53,26 +54,25 @@ const TeamMemberCardInna: TeamMember =
id: -2,
targetUrl: FounderInna.founderInstagram,
logoType: 1,
}
},
],
positions: [],
}
};

const TeamMemberCardNatalia: TeamMember =
{
const TeamMemberCardNatalia: TeamMember = {
id: -2,
isMain: true,
imageId: -2,
name: FounderNatalia.founderName,
description: FounderNatalia.founderRole,
image: {
id: -2,
base64: NataliaSmall,
base64: NataliaSmall,
blobName: 'Natalia',
mimeType: 'png',
},
teamMemberLinks: [
{
{
id: -1,
targetUrl: FounderInna.founderFacebook,
logoType: 2,
Expand All @@ -81,22 +81,24 @@ const TeamMemberCardNatalia: TeamMember =
id: -2,
targetUrl: FounderInna.founderInstagram,
logoType: 1,
}
},
],
positions: [],
}
};
// Кінець хардкода

const Founders = () => {
return (
<div className='aboutUsBlockContainer'>
<h1><div /><span>Засновниці</span><div /></h1>
<div className='foundersBlock'>
{window.innerWidth > 600 ? <Founder {...FounderInna}/> : <TeamMemberCard {...TeamMemberCardInna}/>}
{window.innerWidth > 600 ? <Founder {...FounderNatalia}/> : <TeamMemberCard {...TeamMemberCardNatalia}/>}
</div>
const Founders = () => (
<div className="aboutUsBlockContainer">
<h1>
<div />
<span>Засновниці</span>
<div />
</h1>
<div className="foundersBlock">
{window.innerWidth > 600 ? <Founder {...FounderInna} /> : <TeamMemberCard person={TeamMemberCardInna} />}
{window.innerWidth > 600 ? <Founder {...FounderNatalia} /> : <TeamMemberCard person={TeamMemberCardNatalia} />}
</div>
);
}
</div>
);

export default Founders;
export default Founders;
45 changes: 30 additions & 15 deletions src/features/AboutUsPage/TeamMemberCard/TeamMemberCard.component.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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) => (
<div className='cardContainer'>
<div className='photoContainer'>
<img src = { member.id > 0 ? base64ToUrl(member.image?.base64, member.image?.mimeType) : member.image?.base64}/>
type Props = {
person: TeamMember,
isSingleCard?: boolean
};

const TeamMemberCard = ({ person, isSingleCard }: Props) => (
<div className={`cardContainer ${isSingleCard && 'cardContainer_single'}`}>
<div className="photoContainer">
<img
src={person.id > 0
? base64ToUrl(person.image?.base64, person.image?.mimeType)
: person.image?.base64}
alt="team person"
/>
</div>
<div className='textContainer'>
<h2>{member.name}</h2>
<p>{member.description}</p>
<div className='linksContainer'>
{member.teamMemberLinks.map(
(link)=>(
<TeamMemberLinks key = {link.id} {...link}/>
)
<div className="content">
<div className="textContainer">
<h2>{person.name}</h2>
<p>{person.description}</p>
</div>

<div className="linksContainer">
{person.teamMemberLinks.map(
(link) => (
<TeamMemberLinks key={link.id} link={link} />
),
)}
</div>
</div>
</div>
);

export default TeamMemberCard
export default TeamMemberCard;
59 changes: 42 additions & 17 deletions src/features/AboutUsPage/TeamMemberCard/TeamMemberCard.styles.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,49 +8,74 @@
{
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%;
}
}
}
}

}
}
14 changes: 8 additions & 6 deletions src/features/AboutUsPage/TeamMemberCard/TeamMemberLinks/TeamMemberLinks.component.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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) => (
<a href={link.targetUrl}>
<img key={link.id}src={LogoType[link.logoType]} />
</a>
type Props = {
link: TeamMemberLinkCreateUpdate
};
const TeamMemberLinks = ({ link }: Props) => (
<a href={link.targetUrl}>
<img key={link.id} src={LogoType[link.logoType]} alt="social media icon" />
</a>
);

export default TeamMemberLinks;
export default TeamMemberLinks;
38 changes: 20 additions & 18 deletions src/features/AboutUsPage/TeamMembers/TeamMembersList/TeamMemberList.component.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 (
<div className="teamMemberListContainer">
{
props.teamMembers.map(
(founder)=>
<div key = {founder.id} className="teamMemberCardContainer">
<TeamMemberCard key = {founder.id} {...founder} />
</div>
)
}
</div>
)
}
const TeamMemberList = ({ teamMembers }: TeamMemberListProps) => (
<div className="teamMemberListContainer">
{
teamMembers.map(
(founder) => (
<div key={founder.id} className="teamMemberCardContainer">
<TeamMemberCard key={founder.id} person={founder} />
</div>
),
)
}
</div>
);

export default TeamMemberList;
export default TeamMemberList;
Loading