diff --git a/uniEmpleos/src/components/Chat/Chat.module.css b/uniEmpleos/src/components/Chat/Chat.module.css index 217ba3db..809e871e 100644 --- a/uniEmpleos/src/components/Chat/Chat.module.css +++ b/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; + } + } \ No newline at end of file diff --git a/uniEmpleos/src/components/Header/header.css b/uniEmpleos/src/components/Header/header.css index b0391071..21ceb006 100644 --- a/uniEmpleos/src/components/Header/header.css +++ b/uniEmpleos/src/components/Header/header.css @@ -177,6 +177,7 @@ button.buttonlogo:focus{ .nav-elements.active { width: 100%; + z-index: 999; } .nav-elements ul { diff --git a/uniEmpleos/src/components/ImageDirectUploader/ImageDirectUploader.module.css b/uniEmpleos/src/components/ImageDirectUploader/ImageDirectUploader.module.css index 9ae44a6f..0f243589 100644 --- a/uniEmpleos/src/components/ImageDirectUploader/ImageDirectUploader.module.css +++ b/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; + } +} diff --git a/uniEmpleos/src/components/Input/Input.module.css b/uniEmpleos/src/components/Input/Input.module.css index 4741c29d..84a7e6a1 100644 --- a/uniEmpleos/src/components/Input/Input.module.css +++ b/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{ diff --git a/uniEmpleos/src/pages/ChatPage/ChatPage.jsx b/uniEmpleos/src/pages/ChatPage/ChatPage.jsx index 01ca0e8e..dc2d2ac6 100644 --- a/uniEmpleos/src/pages/ChatPage/ChatPage.jsx +++ b/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 (
@@ -114,8 +124,15 @@ const ChatPage = () => { style={typePopUp} close={() => setWarning(false)} /> +
-
+
{apiLastChats.data && apiLastChats.data.messages.length > 0 ? ( apiLastChats.data.messages.map((chat) => chat.last_message.length === 0 ? null : ( @@ -139,7 +156,12 @@ const ChatPage = () => {
No hay chats recientes.
)}
-
+
{apiMessages.data && apiMessages.data.messages.length > 0 ? ( apiMessages.data.messages.map((message, number) => { const side = message.id_emisor === user.id_user ? "right" : "left" diff --git a/uniEmpleos/src/pages/ChatPage/ChatPage.module.css b/uniEmpleos/src/pages/ChatPage/ChatPage.module.css index bbadb091..50bea9ce 100644 --- a/uniEmpleos/src/pages/ChatPage/ChatPage.module.css +++ b/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%; -} \ No newline at end of file +} + +.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; + } + +} diff --git a/uniEmpleos/src/pages/EditProfileEmpresas/EditProfileEmpresa.module.css b/uniEmpleos/src/pages/EditProfileEmpresas/EditProfileEmpresa.module.css index 5e2bd2f5..18335107 100644 --- a/uniEmpleos/src/pages/EditProfileEmpresas/EditProfileEmpresa.module.css +++ b/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; + } + +} diff --git a/uniEmpleos/src/pages/EditProfileEstudiantes/EditProfileEstudiante.module.css b/uniEmpleos/src/pages/EditProfileEstudiantes/EditProfileEstudiante.module.css index da1e6de8..caf8f1a9 100644 --- a/uniEmpleos/src/pages/EditProfileEstudiantes/EditProfileEstudiante.module.css +++ b/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%; + } + +} diff --git a/uniEmpleos/src/pages/Login/Login.jsx b/uniEmpleos/src/pages/Login/Login.jsx index c454a04f..59883e4d 100644 --- a/uniEmpleos/src/pages/Login/Login.jsx +++ b/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") }