From 771af0400a7b81aef51fc5fd21f568663e83e627 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jimena=20Hern=C3=A1ndez?= Date: Sun, 5 Nov 2023 15:25:23 -0600 Subject: [PATCH 1/4] chatResponsive --- .../src/components/Chat/Chat.module.css | 15 +++-- uniEmpleos/src/pages/ChatPage/ChatPage.jsx | 36 +++++++++--- .../src/pages/ChatPage/ChatPage.module.css | 55 ++++++++++++++++++- 3 files changed, 93 insertions(+), 13 deletions(-) diff --git a/uniEmpleos/src/components/Chat/Chat.module.css b/uniEmpleos/src/components/Chat/Chat.module.css index 217ba3db..baa8761d 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,11 @@ color: #252525; font-weight: normal; text-align: start; +} + + +@media (max-width: 768px) { + .lastChat { + display: none; + } } \ No newline at end of file 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..9f6418be 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,54 @@ 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; + } +} From 5406c94821b2f9378fb9e8dd12837acd2d6d3e44 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jimena=20Hern=C3=A1ndez?= Date: Sun, 5 Nov 2023 15:46:52 -0600 Subject: [PATCH 2/4] responsive profile student --- .../ImageDirectUploader.module.css | 16 ++++++++++ .../src/components/Input/Input.module.css | 1 + .../EditProfileEstudiante.module.css | 32 ++++++++++++++++++- 3 files changed, 48 insertions(+), 1 deletion(-) 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..a52fe58f 100644 --- a/uniEmpleos/src/components/Input/Input.module.css +++ b/uniEmpleos/src/components/Input/Input.module.css @@ -66,6 +66,7 @@ width: 100%; margin: 0; padding-left: 0; + padding-right: 0; } .inputContainer{ 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%; + } + +} From 8005f1bfb2010dd0a64194117589ab34ed10451a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jimena=20Hern=C3=A1ndez?= Date: Sun, 5 Nov 2023 15:48:17 -0600 Subject: [PATCH 3/4] Update Input.module.css --- uniEmpleos/src/components/Input/Input.module.css | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/uniEmpleos/src/components/Input/Input.module.css b/uniEmpleos/src/components/Input/Input.module.css index a52fe58f..84a7e6a1 100644 --- a/uniEmpleos/src/components/Input/Input.module.css +++ b/uniEmpleos/src/components/Input/Input.module.css @@ -65,8 +65,8 @@ .inputContainer input { width: 100%; margin: 0; - padding-left: 0; - padding-right: 0; + padding-left: 0 !important; + padding-right: 0 !important; } .inputContainer{ From 4d51e127a72c3ff7951448d82cd8e5b80c4c07db Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jimena=20Hern=C3=A1ndez?= Date: Sun, 5 Nov 2023 16:01:49 -0600 Subject: [PATCH 4/4] responsive profile enterprise --- .../src/components/Chat/Chat.module.css | 6 +++ uniEmpleos/src/components/Header/header.css | 1 + .../src/pages/ChatPage/ChatPage.module.css | 1 + .../EditProfileEmpresa.module.css | 43 +++++++++++++++++++ uniEmpleos/src/pages/Login/Login.jsx | 2 +- 5 files changed, 52 insertions(+), 1 deletion(-) diff --git a/uniEmpleos/src/components/Chat/Chat.module.css b/uniEmpleos/src/components/Chat/Chat.module.css index baa8761d..809e871e 100644 --- a/uniEmpleos/src/components/Chat/Chat.module.css +++ b/uniEmpleos/src/components/Chat/Chat.module.css @@ -90,4 +90,10 @@ .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/pages/ChatPage/ChatPage.module.css b/uniEmpleos/src/pages/ChatPage/ChatPage.module.css index 9f6418be..50bea9ce 100644 --- a/uniEmpleos/src/pages/ChatPage/ChatPage.module.css +++ b/uniEmpleos/src/pages/ChatPage/ChatPage.module.css @@ -191,4 +191,5 @@ 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/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") }