chatResponsive

uniEmpleos/src/components/Chat/Chat.module.css

@@ -6,7 +6,7 @@
   width: auto;
   border-radius: 10px;
   /* Sombras más pronunciadas */
-  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+  box-shadow: 0 4px 8px #94bd0f;
   animation: chatAnimation 0.5s ease-in-out;
 }
 
@@ -24,7 +24,7 @@
 }
 
 .button {
-  background-color: #e1dede;
+  background-color: #fff;
   border: none;
   border-radius: 5px;
   padding: 5px;
@@ -39,11 +39,11 @@
 
 .button:focus {
   outline: none;
-  background-color: #d1cece;
+  background-color: #94bd0f75;
 }
 
 .button:hover {
-  background-color: #d1cece;
+  background-color: #94bd0f75;
 }
 
 .pfp {
@@ -83,4 +83,17 @@
   color: #252525;
   font-weight: normal;
   text-align: start;
+}
+
+
+@media (max-width: 768px) {
+  .lastChat {
+    display: none;
+  }
+
+  .pfp {
+    width: 40%;
+    height: 60px;
+  }
+
 }

uniEmpleos/src/components/Header/header.css

@@ -177,6 +177,7 @@ button.buttonlogo:focus{
 
   .nav-elements.active {
     width: 100%;
+    z-index: 999;
   }
 
   .nav-elements ul {

uniEmpleos/src/components/ImageDirectUploader/ImageDirectUploader.module.css

@@ -37,3 +37,19 @@
 .UploaderButton {
     width: min(30%, 200px);
 }
+
+@media (max-width: 768px) {
+    .UploaderContainer {
+        width: 100%;
+        flex-direction: column;
+        padding: 0;
+    }
+
+    .UploaderForm {
+        width: 100%;
+        flex-direction: column;
+        align-items: center;
+        gap: 10px;
+        padding: 0;
+    }
+}

uniEmpleos/src/components/Input/Input.module.css

@@ -65,7 +65,8 @@
   .inputContainer input {
     width: 100%;
     margin: 0;
-    padding-left: 0;
+    padding-left: 0 !important;
+    padding-right: 0 !important;
   }
 
   .inputContainer{

uniEmpleos/src/pages/ChatPage/ChatPage.jsx

@@ -1,6 +1,7 @@
 /* eslint-disable camelcase */
 /* eslint-disable react/prop-types */
 import React, { useEffect, useState, useRef } from "react"
+import { FaUserFriends } from "react-icons/fa"
 import { useStoreon } from "storeon/react"
 import style from "./ChatPage.module.css"
 import { Header } from "../../components/Header/Header"
@@ -79,11 +80,6 @@ const ChatPage = () => {
     scrollDown()
     obtainMessages()
   }
-
-  const handleChat = (receptor, id) => {
-    setCurrentChat(receptor)
-    setIdCurrentChat(id)
-  }
 
   const handleInputChange = (e) => {
     setTextMessage(e.target.value)
@@ -105,6 +101,20 @@ const ChatPage = () => {
     return () => clearInterval(intervalListadeChats)
   }, [])
 
+  // Estado para controlar la visibilidad del contenedor de chats
+  const [showChats, setShowChats] = useState(false)
+
+  // Función para alternar la visibilidad del contenedor de chats
+  const toggleChats = () => {
+    setShowChats(!showChats)
+  }
+
+  const handleChat = (receptor, id) => {
+    setCurrentChat(receptor)
+    setIdCurrentChat(id)
+    setShowChats(false)
+  }
+
   return (
     <div className={style.container}>
       <Header userperson="student" />
@@ -114,8 +124,15 @@ const ChatPage = () => {
         style={typePopUp}
         close={() => setWarning(false)}
       />
+      <button type="button" className={style.menuButton} onClick={toggleChats}>
+        <FaUserFriends size={30} color="#000" />
+      </button>
       <div className={style.generalChatContainer}>
-        <div className={style.chatsContainer}>
+        <div
+          className={`${style.chatsContainer} ${
+            showChats ? style.showChat : style.hideChat
+          }`}
+        >
           {apiLastChats.data && apiLastChats.data.messages.length > 0 ? (
             apiLastChats.data.messages.map((chat) =>
               chat.last_message.length === 0 ? null : (
@@ -139,7 +156,12 @@ const ChatPage = () => {
             <div className={style.noUsersMessage}>No hay chats recientes.</div>
           )}
         </div>
-        <div className={style.currentChatContainer} ref={chatContainerRef}>
+        <div
+          className={`${style.currentChatContainer} ${
+            showChats ? style.hide : style.show
+          }`}
+          ref={chatContainerRef}
+        >
           {apiMessages.data && apiMessages.data.messages.length > 0 ? (
             apiMessages.data.messages.map((message, number) => {
               const side = message.id_emisor === user.id_user ? "right" : "left"

uniEmpleos/src/pages/ChatPage/ChatPage.module.css

@@ -16,9 +16,10 @@
 .chatsContainer {
   display: flex;
   flex-direction: column;
-  background-color: #f5f5f5;
+  background-color: #fff;
   color: #fff;
   width: 30%;
+  padding: 10px;
   overflow: hidden;
   overflow-y: auto;
   scrollbar-width: none;
@@ -140,4 +141,55 @@
   color: #000;
   width: 100%;
   height: 100%;
-}
+}
+
+.show {
+  display: block;
+}
+
+.hide {
+  display: none;
+}
+
+/* Estilos para el botón de menú, solo visible en móviles */
+.menuButton {
+  display: none;
+}
+
+/* Usa media queries para hacer que el botón de menú solo se muestre en dispositivos móviles */
+@media (max-width: 768px) {
+  .menuButton {
+    display: flex;
+    background-color: transparent;
+    border: none;
+    cursor: pointer;
+  }
+
+  .currentChatContainer {
+    width: calc(100% - 20px);
+    overflow: hidden;
+    padding: 10px;
+    box-shadow: none;
+    background-color: #fff;
+  }
+
+  .showChat {
+    display: flex;
+    gap: 20px;
+  }
+
+  .hideChat {
+    display: none;
+  }
+
+  .chatsContainer {
+    width: 100%;
+    padding: 10px;
+  }
+
+  .inputContainer {
+    width: 90%;
+    padding: 10px;
+  }
+
+}

uniEmpleos/src/pages/EditProfileEmpresas/EditProfileEmpresa.module.css

@@ -130,3 +130,46 @@
 .inputTextArea {
   width: 480px;
 }
+
+@media (max-width: 768px) {
+  .editProfileContainer{
+    padding: 0;
+    width: 90%;
+  }
+
+  .inputsContainer {
+    width: 100%;
+    padding: 0;
+  }
+
+  .editProfileContainer>div {
+    padding: 20px 0px;
+    margin: 20px 0;
+  }
+
+  .inputSubContainer {
+    width: 90%;
+    padding: 10px;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+  }
+
+  .inputSubContainerDataGroup1 {
+    width: 90%;
+  }
+
+  .grupoDatos1 {
+    flex-direction: column;
+    gap: 10px;
+    width: 100%;
+    flex-wrap: nowrap;
+  }
+
+  .inputTextArea {
+    width: 90%;
+    padding-left: 0 !important;
+    padding-right: 0 !important;
+  }
+
+}

uniEmpleos/src/pages/EditProfileEstudiantes/EditProfileEstudiante.module.css

@@ -2,7 +2,7 @@
   display: flex;
   justify-content: flex-start;
   align-items: center;
-  background-color: #f1f1f1;
+  background-color: #fff;
   flex-direction: column;
   height: 100%;
   width: 100%;
@@ -126,3 +126,33 @@
   align-items: center;
   padding: 0 10px 0 10px;
 }
+
+@media (max-width: 768px) {
+  .editProfileContainer{
+    padding: 0;
+    width: 90%;
+  }
+
+  .inputsContainer {
+    width: 100%;
+    padding: 0;
+  }
+
+  .editProfileContainer>div {
+    padding: 20px 0px;
+    margin: 20px 0;
+  }
+
+  .inputSubContainer {
+    width: 90%;
+    padding: 10px;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+  }
+
+  .inputSubContainerDataGroup1 {
+    width: 90%;
+  }
+
+}

uniEmpleos/src/pages/Login/Login.jsx

@@ -44,7 +44,7 @@ const LogIn = () => {
       if (role === "student") {
         navigate("/profile")
       } else if (role === "enterprise") {
-        navigate("/profilecompany")
+        navigate("/postulacionempresa")
       } else if (role === "admin") {
         navigate("/profileadmin")
       }