Skip to content

Commit

Permalink
team page
Browse files Browse the repository at this point in the history
  • Loading branch information
@lauralog
lauralog committed Jun 20, 2024
1 parent 09b695e commit 85c1ee5
Show file tree
Hide file tree
Showing 7 changed files with 425 additions and 241 deletions.
1 change: 1 addition & 0 deletions app/sass/lib/_variables.sass
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ $link_hover: #6c707e
$link_header: #9ECBFF
$blue_primary: #1C74D9
$orange_accent: #98CE00
$primary_green-400: #D7F38A
$burgundry_support: #9f226d
$cyan_support: #21e2ed
$lilac_support: #ae9ff2
Expand Down
3 changes: 2 additions & 1 deletion app/sass/partials/_banner.sass
View file
Original file line number Diff line number Diff line change
@@ -1,2 +1,3 @@

.banner
@apply px-4 sm:px-8 md:px-14 md:py-2 lg:px-24 lg:py-4 xl:px-28 xl:py-4 2xl:px-32 2xl:py-6

50 changes: 27 additions & 23 deletions app/sass/partials/_team.sass
View file
Original file line number Diff line number Diff line change
@@ -1,52 +1,56 @@

// *
// // border: 1px solid pink
//Correcciones: mixin de tags
.team
@apply text-white
main
.teammates
// margin: 0 1rem
@apply sm:grid sm:grid-cols-2 md:grid-cols-3 justify-between
@apply sm:mx-2 md:mx-14 lg:mx-36 xl:mx-44 2xl:mx-60 my-2 sm:my-8 md:my-8 lg:my-12 xl:my-16 2xl:my-20

&__title
@apply my-4
@apply w-full flex justify-center

.teammate
display: block
width: 80%
margin-bottom: 1rem
margin-left: auto
margin-right: auto
// @apply bg-yellow-300
@apply max-w-[250px] h-full mx-auto
@apply text-center
@apply bg-slate-950

-webkit-box-shadow: -8px -8px 0px 0px $primary_green-400
-moz-box-shadow: -8px -8px 0px 0px $primary_green-400
box-shadow: -8px -8px 0px 0px $primary_green-400

.mate_img
@apply overflow-hidden
img
height: 100px
width:100px
object-fit: cover
border-radius: 50px
@apply h-full w-full object-cover

.mate_info
@apply py-8 px-6

.mate_name
margin-bottom: 1rem
@apply flex justify-center
// @apply min-h-[68px]
font-size:1.5rem

@apply text-black
margin-top: 0.6rem
.mate_role
margin-bottom: 1em
height: 100%
margin-top: -0.3rem
span
padding: 0.2em 0.65em 0.25em 0.65em
border: 1px solid #333333 // cómo meter variables en team
border-radius: 4px
font-weight: 600
.mate_position
margin: 1.6rem 0 0.6rem 0
margin: 0.6rem 0
.mate_email
margin: 01.6rem 0 0.6rem 0
font-weight: 600
display: inline
word-break: break-all

.mate_coordination
margin: 0.8rem 0 0 0
@apply text-primary-green-400 font-medium
.coordinator
@apply bg-yellow-300
padding: 0.12em 0.65em 0.25em 0.65em
border-radius: 24px
.mate_description
span
Expand Down
151 changes: 74 additions & 77 deletions app/team/page.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,88 +17,85 @@ export default function Team(props) {
window.scrollTo(0, 0);
}, []);

const renderMembers = (members) => {
return members.map(
({
name,
description,
role,
position,
photo,
github,
email,
center,
translationKey,
}) => {
const emailAddress = email ? email.split("@") : null;
const translatedRole = t(`${translationKey}`);
const translatedPosition = t(position);
return (
<div className="teammate" key={name}>
<div className="mate_img">
<a href={github} target="_blank" rel="noopener noreferrer">
<img
alt={"Team member"}
src={process.env.PUBLIC_URL + photo}
className="grayscale"
/>
</a>
</div>
<div className="mate_info">
<div className="mate_name">
<h4>{name}</h4>
</div>
{/* <div className="mate_role">
<span>
<small>{translatedRole}</small>{" "}
</span>
</div> */}
{/* position */}
{/* {position ? (
<div className="mate_position">
<p>{center}</p>
</div>
) : null} */}
{/* mail */}
<div className="mate_email">
<small>{email}</small>
</div>
{/* description */}
<div className="mate_coordination">
<span className={position === "Coordinator" ? "coordinator" : ""}>
{translatedPosition}
</span>
</div>
{/* description */}
{description ? (
<div className="mate_description">
<p>{description}</p>
</div>
) : null}
</div>
</div>
);
}
);
};

return (
<div className={"team page_"+ currentLang}>
<div className={"team page_" + currentLang}>
<Header route={"/team"} />
<div className="banner px-4 sm:px-8 md:px-14 md:py-2 lg:px-24 lg:py-4 xl:px-28 xl:py-4 2xl:px-32 2xl:py-6">
<div className="banner">
<h1>{t("team.title")}</h1>
</div>
<main>
<section className="teammates block place-content-center sm:grid sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-10 sm:mx-2 md:mx-14 lg:mx-36 xl:mx-44 2xl:mx-60 my-2 sm:my-8 md:my-8 lg:my-12 xl:my-16 2xl:my-20">
{Object.values(team).map(({ members }) => {
return members.map(
({
name,
description,
role,
position,
photo,
github,
email,
center,
translationKey,
}) => {
const emailAddress = email ? email.split("@") : null;
const translatedRole = t(`${translationKey}`);
const translatedPosition = t(position);
return (
<div className="teammate text-center sm:text-left" key={name}>
<div className="mate_img">
<a
href={github}
target="_blank"
rel="noopener noreferrer"
>
<img
alt={"Team member"}
src={process.env.PUBLIC_URL + photo}
className="grayscale"
/>
</a>
</div>

<div className="mate_info">
<div className="mate_name">
<h4>{name}</h4>
</div>
<div className="mate_role">
<span>
<small>{translatedRole}</small>{" "}
</span>
</div>
<div className="mate_position">
<p>{center}</p>

</div>
<div className="mate_email">
<small>{email}</small>
</div>
<div className="mate_coordination">
<span
className={
position === "Coordinator" ? "coordinator" : ""
}
>
{translatedPosition}
</span>
</div>
<div className="mate_description">
{/* <p>{description}</p> */}
<p>
<b>
{/*emailAddress ?
(<span>{emailAddress[0]} <img alt="at" className="at" src={process.env.PUBLIC_URL + "/assets/img/arroba-symbol.svg"}/>
{emailAddress[1]}</span>
):""*/}
</b>
</p>
</div>
</div>
</div>
);
}
);
})}
<h2 className="teammates__title">UC3M</h2>
<section className="teammates">
{team["UC3M Team"]?.members ? renderMembers(team["UC3M Team"].members) : <p>No members found.</p>}
</section>
<h2 className="teammates__title">UPM</h2>
<section className="teammates">
{team["UPM Team"]?.members ? renderMembers(team["UPM Team"].members) : <p>No members found.</p>}
</section>
</main>
<Footer />
Expand Down
Loading

0 comments on commit 85c1ee5

Please sign in to comment.