Skip to content

Added modern styling and file organization #3350

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

Open
wants to merge 4 commits into
base: master
Choose a base branch
from
Open

Added modern styling and file organization #3350

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
a6a885c
updated
arian-fallahpour Dec 18, 2024
0728cd9
Merge branch 'master' of https://github.com/arian-fallahpour/ZtM-Job-…
arian-fallahpour Dec 18, 2024
ca839b8
changed CardList import name
arian-fallahpour Dec 18, 2024
46a2664
Added better styling
arian-fallahpour Dec 18, 2024
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
129 changes: 50 additions & 79 deletions package-lock.json
View file
Open in desktop

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion src/components/BatchCards.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import React, { useState } from 'react'
import CountUp from 'react-countup'

import CardList from './CardList'
import CardList from './CardList/CardList'
import BasicButton from './BasicButton'
import { countriesWithNumOfDevsObj } from '../util/UsersDataCleanup'
const countryNamesAndNumOfDevsArr = Object.entries(countriesWithNumOfDevsObj)
Expand Down
71 changes: 71 additions & 0 deletions src/components/Card/Card.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,71 @@
.Card {
background-color: white;
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

nitpick: for the consistency of the css colors, use same color formats

border-radius: 1rem;
margin-top: 4rem;

.dark-mode & {
background-color: rgb(61, 61, 61);
}

&Header {
display: grid;
margin-top: -25%;
}

&Image {
background-color: #eeeeee;
border-radius: 100%;
border: 0.5rem solid #eeeeee;
height: 7rem;
width: 7rem;
overflow: hidden;

.dark-mode & {
background-color: rgb(51, 51, 51);
border: 0.5rem solid rgb(51, 51, 51);
}
}

&Main {
display: grid;
padding: 0 1rem;

.dark-mode & {
color: rgb(201, 201, 201);
}
}

&Links {
display: flex;
gap: 0.4rem;
justify-content: center;
align-items: center;
}

&Link {
background-color: black;
color: inherit;
width: 2rem;
height: 2rem;
display: block;
border-radius: 100%;
padding: 0.5rem;

& > svg {
fill: white;
width: 100%;
height: 100%;
}

.dark-mode & {
background-color: rgb(129, 129, 129);

& > svg {
fill: rgb(33, 33, 33);
}
}
}

&Footer {
}
}
71 changes: 32 additions & 39 deletions src/components/Card.tsx → src/components/Card/Card.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import React from 'react'
import LazyLoad from 'react-lazyload'
import './Card.scss'

const defaultImageDataURI =
"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='000000' fill-opacity='0.25' viewBox='0 0 24 24'%3E %3Cpath d='M9,11.75A1.25,1.25 0 0,0 7.75,13A1.25,1.25 0 0,0 9,14.25A1.25,1.25 0 0,0 10.25,13A1.25,1.25 0 0,0 9,11.75M15,11.75A1.25,1.25 0 0,0 13.75,13A1.25,1.25 0 0,0 15,14.25A1.25,1.25 0 0,0 16.25,13A1.25,1.25 0 0,0 15,11.75M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M12,20C7.59,20 4,16.41 4,12C4,11.71 4,11.42 4.05,11.14C6.41,10.09 8.28,8.16 9.26,5.77C11.07,8.33 14.05,10 17.42,10C18.2,10 18.95,9.91 19.67,9.74C19.88,10.45 20,11.21 20,12C20,16.41 16.41,20 12,20Z' /%3E %3C/svg%3E"
Expand All @@ -10,44 +11,38 @@ const addDefaultImg = (e: any) => {
e.target.src = defaultImageDataURI
}
const Card = ({ user }: any) => {
let { id, img, name, email, jobTitle, location, links } = user
const { id, img, name, email, jobTitle, location, links } = user
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

nitpick: we should avoid variable name "img". It should be descriptive. What image it is?


if (id) {
return (
<div
id={`person-${id}`}
className="card ma3 w5 tc bg-white br3 custom--shadow-2 custom--shadow-hover-8 custom--o-95 z-1"
>
<div className="header relative pt3 br2 br--top z-0">
<LazyLoad
throttle={200}
height={128}
offset={100}
once={true}
>
<img
className="photo relative br-100 bw2 b--solid custom--b--primary bg-center object-fit-cover"
height="128px"
width="128px"
src={img || defaultImageDataURI}
alt={name}
loading="lazy"
onError={(e) => addDefaultImg(e)}
/>
</LazyLoad>
<h2 className="name mt3 mb1 ph3 w-100 flex items-center justify-center">
{name}
</h2>
<p className="title text-center">{jobTitle}</p>
</div>
<div className="main pv2 ph3 flex items-center justify-center">
if (!id) {
return <div></div>
}

return (
<div id={`person-${id}`} className="Card">
<div className="CardHeader">
<LazyLoad throttle={200} height={128} offset={100} once={true}>
<img
className="CardImage"
height="128px"
width="128px"
src={img || defaultImageDataURI}
alt={name}
loading="lazy"
onError={(e) => addDefaultImg(e)}
/>
</LazyLoad>
</div>
<div className="CardMain">
<h2 className="CardName">{name}</h2>
<p className="CardJob">{jobTitle}</p>
<div className="CardLinks">
{/* adding email button */}
{email === '' ? (
''
) : (
<a
href={'mailto:' + email}
className="w2 h2 ma2"
className="CardLink"
title="email"
target="_blank"
rel="noopener noreferrer"
Expand All @@ -62,7 +57,7 @@ const Card = ({ user }: any) => {
) : (
<a
href={links.website}
className="w2 h2 ma2"
className="CardLink"
title="Website/Portfolio"
target="_blank"
rel="noopener noreferrer"
Expand All @@ -77,7 +72,7 @@ const Card = ({ user }: any) => {
) : (
<a
href={links.github}
className="w2 h2 ma2"
className="CardLink"
title="GitHub profile"
target="_blank"
rel="noopener noreferrer"
Expand All @@ -92,7 +87,7 @@ const Card = ({ user }: any) => {
) : (
<a
href={links.linkedin}
className="w2 h2 ma2"
className="CardLink"
title="LinkedIn profile"
target="_blank"
rel="noopener noreferrer"
Expand All @@ -104,7 +99,7 @@ const Card = ({ user }: any) => {
)}
</div>
<div style={{ margin: 0, padding: 0 }}>
<p className="footer items-center justify-center br2 br--bottom">
<p className="CardFooter">
{location.city === '' ? '' : location.city}
{(location.city !== '' && location.state !== '') ||
(location.city !== '' && location.country !== '')
Expand All @@ -119,10 +114,8 @@ const Card = ({ user }: any) => {
</p>
</div>
</div>
)
} else {
return <div></div>
}
</div>
)
}

export default Card
7 changes: 7 additions & 0 deletions src/components/CardList/CardList.module.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
.CardList {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
gap: 1rem;
padding: 3rem 0;
width: 100%;
}
9 changes: 5 additions & 4 deletions src/components/CardList.tsx → src/components/CardList/CardList.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,15 +1,16 @@
import React from 'react'
import Card from './Card'
import Card from '../Card/Card'
import styles from './CardList.module.scss'

import Person from '../interfaces/person'
import Person from '../../interfaces/person'

const CardList = ({ persons }: any) => {
return (
<>
<div className={styles.CardList}>
{persons.map((user: Person) => (
<Card key={user.id} user={user} />
))}
</>
</div>
)
}

Expand Down
Loading