From 85c1ee5e455fd47d41ba9770a0a2d3ea42757754 Mon Sep 17 00:00:00 2001 From: lauralog Date: Thu, 20 Jun 2024 15:06:32 +0200 Subject: [PATCH 1/2] team page --- app/sass/lib/_variables.sass | 1 + app/sass/partials/_banner.sass | 3 +- app/sass/partials/_team.sass | 50 +- app/team/page.js | 151 +++--- constants/team.js | 452 ++++++++++++------ public/assets/img/team/avatar_placeholder.jpg | Bin 0 -> 7660 bytes tailwind.config.js | 9 +- 7 files changed, 425 insertions(+), 241 deletions(-) create mode 100644 public/assets/img/team/avatar_placeholder.jpg diff --git a/app/sass/lib/_variables.sass b/app/sass/lib/_variables.sass index 80bdece..61e02b6 100644 --- a/app/sass/lib/_variables.sass +++ b/app/sass/lib/_variables.sass @@ -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 diff --git a/app/sass/partials/_banner.sass b/app/sass/partials/_banner.sass index 139597f..5bafc66 100644 --- a/app/sass/partials/_banner.sass +++ b/app/sass/partials/_banner.sass @@ -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 diff --git a/app/sass/partials/_team.sass b/app/sass/partials/_team.sass index 0241fb3..701aaab 100644 --- a/app/sass/partials/_team.sass +++ b/app/sass/partials/_team.sass @@ -1,41 +1,47 @@ - +// * +// // 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 @@ -43,10 +49,8 @@ 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 diff --git a/app/team/page.js b/app/team/page.js index 03ca2d4..03c92a3 100644 --- a/app/team/page.js +++ b/app/team/page.js @@ -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 ( +
+
+ + {"Team + +
+
+
+

{name}

+
+ {/*
+ + {translatedRole}{" "} + +
*/} + {/* position */} + {/* {position ? ( +
+

{center}

+
+ ) : null} */} + {/* mail */} +
+ {email} +
+ {/* description */} +
+ + {translatedPosition} + +
+ {/* description */} + {description ? ( +
+

{description}

+
+ ) : null} +
+
+ ); + } + ); + }; + return ( -
+
-
+

{t("team.title")}

-
- {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 ( -
-
- - {"Team - -
- -
-
-

{name}

-
-
- - {translatedRole}{" "} - -
-
-

{center}

- -
-
- {email} -
-
- - {translatedPosition} - -
-
- {/*

{description}

*/} -

- - {/*emailAddress ? - ({emailAddress[0]} at - {emailAddress[1]} - ):""*/} - -

-
-
-
- ); - } - ); - })} +

UC3M

+
+ {team["UC3M Team"]?.members ? renderMembers(team["UC3M Team"].members) :

No members found.

} +
+

UPM

+
+ {team["UPM Team"]?.members ? renderMembers(team["UPM Team"].members) :

No members found.

}