Merge pull request #204 from markalbrand56/jime

updates profile
markalbrand56 · Oct 11, 2023 · cc68c86 · cc68c86
2 parents 66cfbea + f1f8f16
commit cc68c86
Show file tree

Hide file tree

Showing 4 changed files with 140 additions and 61 deletions.
diff --git a/uniEmpleos/src/components/InfoStudent/InfoStudent.module.css b/uniEmpleos/src/components/InfoStudent/InfoStudent.module.css
@@ -22,7 +22,7 @@
   display: flex;
   width: 100%;
   height: 100%;
-  justify-content: center;
+  justify-content: start;
   align-items: center;
   flex-direction: row;
   color: #333333;
@@ -52,7 +52,7 @@
 }
 
 .pfp {
-  border-radius: 50%;
+  border-radius: 10%;
   background-color: transparent;
   width: 100%;
   height: 100%;

diff --git a/uniEmpleos/src/pages/PostulantesPage/PostulantesPage.jsx b/uniEmpleos/src/pages/PostulantesPage/PostulantesPage.jsx
@@ -6,6 +6,7 @@ import style from "./PostulantesPage.module.css"
 import Popup from "../../components/Popup/Popup"
 import { Header } from "../../components/Header/Header"
 import { navigate } from "../../store"
+import API_URL from "../../api"
 import fotoPFP from "/images/pfp.svg"
 
 const PostulantesPage = ({ id }) => {
@@ -53,7 +54,7 @@ console.log(response)
               nombre={postulante.nombre}
               apellido={postulante.apellido}
               universidad={postulante.universidad}
-              pfp={postulante.foto === "" ? fotoPFP : postulante.foto}
+              pfp={postulante.foto === "" ? fotoPFP : `${API_URL}/api/uploads/${postulante.foto}`}
               onClick={() => handleClickUsuario(postulante.id_estudiante)}
             />
           ))

diff --git a/uniEmpleos/src/pages/PublicProfile/PublicProfile.jsx b/uniEmpleos/src/pages/PublicProfile/PublicProfile.jsx
@@ -11,6 +11,7 @@ import useApi from "../../Hooks/useApi"
 import Popup from "../../components/Popup/Popup"
 import { navigate } from "../../store"
 import style from "./PublicProfile.module.css"
+import API_URL from "../../api"
 
 const PublicProfile = ({ correo }) => {
   const api = useApi()
@@ -85,69 +86,73 @@ const PublicProfile = ({ correo }) => {
         style={{
           color: "#000",
           position: "absolute",
-          top: "10px",
+          top: "40px",
           left: "20px",
           cursor: "pointer",
         }}
         onClick={() => navigate("/postulacionempresa")}
       />
       {usuario ? (
         <div className={style.infoContainer}>
-          {usuario.foto && (
-            <div className={style.pfpContainer}>
-              <img
-                className={style.pfp}
-                src={usuario.foto}
-                alt={`${usuario.nombre} ${usuario.apellido}`}
-              />
-            </div>
-          )}
-          <div className={style.subInfoContainer}>
-            <div className={style.nombreContainer}>
-              <BiUser size={30} />
-              <span className={style.nombre}>
-                Nombre: {`${usuario.nombre} ${usuario.apellido}`}
-              </span>
-            </div>
-
-            <div className={style.emailContainer}>
-              <HiOutlineMailOpen size={30} />
-              <span className={style.email}>Correo: {usuario.correo}</span>
-            </div>
-            <div className={style.telefonoContainer}>
-              <BsPhone size={30} />
-              <span className={style.telefono}>
-                Telefono: {usuario.telefono}
-              </span>
-            </div>
-            {usuario.universidad && (
-              <div className={style.universityContainer}>
-                <LiaUniversitySolid size={30} />
-                <span className={style.university}>
-                  Universidad: {usuario.universidad}
-                </span>
+          <h1 className={style.title}>
+            Perfil de {usuario.nombre} {usuario.apellido}
+          </h1>
+          <div className={style.tipoContainer}>
+            {usuario.foto && (
+              <div className={style.pfpContainer}>
+                <img
+                  className={style.pfp}
+                  src={`${API_URL}/api/uploads/${usuario.foto}`}
+                  alt={`${usuario.nombre} ${usuario.apellido}`}
+                />
               </div>
             )}
-            {usuario.carrera && (
-              <div className={style.carreraContainer}>
-                <PiBooksLight size={30} />
-                <span className={style.carrera}>Carrera: {carrera}</span>
+            <div className={style.subInfoContainer}>
+              <div className={style.profileli}>
+                <BiUser size={30} />
+                <span className={style.profileSpan}>
+                  Nombre: {`${usuario.nombre} ${usuario.apellido}`}
+                </span>
               </div>
-            )}
-            {usuario.nacimiento && (
-              <div className={style.edadContainer}>
-                <LiaBirthdayCakeSolid size={30} />
-                <span className={style.edad}>Edad: {edad}</span>
+              <div className={style.profileli}>
+                <HiOutlineMailOpen size={30} />
+                <span className={style.correo}>Correo: {usuario.correo}</span>
               </div>
-            )}
-            {usuario.semestre && (
-              <div className={style.semestreContainer}>
-                <AiTwotoneCalendar size={30} />
-                <span className={style.semestre}>
-                  Semestre: {usuario.semestre}
+              <div className={style.profileli}>
+                <BsPhone size={30} />
+                <span className={style.profileSpan}>
+                  Telefono: {usuario.telefono}
                 </span>
               </div>
-            )}
+              {usuario.universidad && (
+                <div className={style.profileli}>
+                  <LiaUniversitySolid size={30} />
+                  <span className={style.profileSpan}>
+                    Universidad: {usuario.universidad}
+                  </span>
+                </div>
+              )}
+              {usuario.carrera && (
+                <div className={style.profileli}>
+                  <PiBooksLight size={30} />
+                  <span className={style.profileSpan}>Carrera: {carrera}</span>
+                </div>
+              )}
+              {usuario.nacimiento && (
+                <div className={style.profileli}>
+                  <LiaBirthdayCakeSolid size={30} />
+                  <span className={style.profileSpan}>Edad: {edad}</span>
+                </div>
+              )}
+              {usuario.semestre && (
+                <div className={style.profileli}>
+                  <AiTwotoneCalendar size={30} />
+                  <span className={style.profileSpan}>
+                    Semestre: {usuario.semestre}
+                  </span>
+                </div>
+              )}
+            </div>
           </div>
         </div>
       ) : (

diff --git a/uniEmpleos/src/pages/PublicProfile/PublicProfile.module.css b/uniEmpleos/src/pages/PublicProfile/PublicProfile.module.css
@@ -8,37 +8,110 @@
     gap: 20px;
     padding: 25px;
 }
+.title{
+    font-size: 30px;
+    font-weight: 700;
+    color: #333333;
+    text-align: center;
+    margin-bottom: 20px;
+    text-transform: capitalize;
+}
 
 .pfpContainer {
+    display: flex;
+    justify-content: end;
+    align-items: end;
+    width: 50%;
+    height: 50%;
+}
+
+.tipoContainer{
     display: flex;
     justify-content: center;
     align-items: center;
-    width: 10%;
-    height: 10%;
+    width: 100%;
+    gap:10%;
 }
 
 .pfp {
     display: flex;
-    width: 100%;
-    height: 100%;
-    border-radius: 50%;
+    width: 60%;
+    height: 60%;
+    border-radius: 10%;
+    box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px;
+
+}
+
+.profileSpan{
+    font-size: 20px;
+    color: #333333;
+    text-align: center;
+    text-transform: capitalize;
 }
 
 .subInfoContainer {
     width: calc(100%/2);
     gap: 20px;
     display: flex;
     flex-wrap: wrap;
-    flex-direction: row;
+    flex-direction: column;
+    align-items: start;
+}
+
+.profileli{
     justify-content: center;
     align-items: center;
+    display: flex;
 }
 
 .subInfoContainer > * {
     display: flex;
     align-items: center;
+    justify-content: center;
+    gap:10px;
 }
 
-.subInfoContainer > div{
-    gap: 10px;
+
+@media screen and (max-width: 768px){
+    .pfpContainer {
+        width: 100%;
+        height: 100%;
+        justify-content: center;
+        align-items: center;
+    }
+
+    .pfp {
+        width: 100%;
+        height: 100%;
+    }
+
+    .profileSpan{
+        font-size: 16px;
+        color: #333333;
+        text-align: center;
+        text-transform: capitalize;
+    }
+
+    .correo{
+        font-size: 16px;
+        color: #333333;
+        text-align: center;
+    }
+
+
+    .tipoContainer{
+        flex-direction: column;
+        gap: 10%;
+    }
+
+    .subInfoContainer {
+        width: 100%;
+        gap: 0;
+        align-items: start;
+        margin-top: 10%;
+    }
+
+    .subInfoContainer > * {
+        gap: 10px;
+    }
 }