Merge pull request #34 from Karen17Mendoza/prueba-hito3

Prueba desplegable

Author: Karen17Mendoza

src/style.css

@@ -18,17 +18,15 @@
   margin: 0;
   padding: 0;
   box-sizing: border-box;
-  
 }
 
 .maincontainer{
   display: flex;
 }
-
 .chatIndividual-container{
   display: flex;
   width: 100%;
-  height: 100%;
+  height: 100vh;
 }
 
 

src/styles/Card.css

@@ -225,38 +225,3 @@ transform: scale(1.05); /* Agranda toda la carta */
   }
 }
 
-=======
-/* Pantallas medianas (tablets y móviles grandes) */
-@media (min-width: 481px) and (max-width: 768px) {
-.card-container ul {
-  display: grid;
-  grid-template-columns: repeat(2, 1fr);
-  margin-left: 0; /* Asegura que las cartas estén centradas */
-}
-
-.cardli {
-  width: auto;
-  height: auto;
-  transition: all 0.5s ease; /* Aplicar transición a todas las propiedades */
-}
-}
-
-/* Pantallas grandes (tablets grandes y laptops pequeñas) */
-@media (min-width: 769px) and (max-width: 1024px) {
-.header{
-  margin-left: 285px; /* Asegura que las cartas no sean tapadas por la barra lateral */
-
-}
-.card-container ul {
-  display: grid;
-  grid-template-columns: repeat(3, 1fr);
-  margin-left: 285px; /* Asegura que las cartas no sean tapadas por la barra lateral */
-}
-
-.cardli {
-  width: 270px;
-  height: auto;
-  transition: all 0.5s ease; /* Aplicar transición a todas las propiedades */
-}
-}
-

src/styles/Chat-Content.css

@@ -47,72 +47,27 @@
         flex-direction: column;
         align-items: center;
     }
- 
-/* Para pantallas pequeñas (Teléfonos móviles pequeños, max-width: 320px a 480px) */
-@media (max-width: 480px) {
-    .content-container {
-        flex-direction: column;
-        margin-left: 0; /* Elimina el margen izquierdo para pantallas pequeñas */
-    }
-
+  
     .image-description {
-        width: 100%; /* Ocupa el ancho completo de la pantalla */
-        padding: 20px;
+        display: none;
     }
-
+  
     .item-image {
-        width: 200px; /* Reduce el tamaño de la imagen */
-    }
-
-    .chat-content {
-        width: 100%; /* El chat ocupa todo el ancho disponible */
-        margin-left: 0; /* Elimina el margen para pantallas pequeñas */
-        padding: 15px; /* Reduce el padding para ajustarse a pantallas pequeñas */
+        width: 200px; /* Ajusta el tamaño de la imagen */
     }
-
+  
     .card__title__chat {
-        font-size: 24px; /* Reduce el tamaño del texto */
-        padding: 15px;
+        font-size: 24px; /* Ajusta el tamaño de la fuente */
     }
-
+  
     .card__description__chat {
-        font-size: 14px;
-        padding: 15px;
+        font-size: 16px; /* Ajusta el tamaño de la fuente */
     }
 }
 
-/* Para pantallas medianas (Teléfonos móviles medianos y grandes, max-width: 481px a 768px) */
-@media (min-width: 481px) and (max-width: 768px) {
+/* Estilos para pantallas pequeñas (móviles) */
+@media screen and (max-width: 768px) {
     .content-container {
-        flex-direction: column;
-        margin-left: 0; /* Elimina el margen izquierdo para pantallas medianas */
-    }
-
-    .image-description {
-        width: 100%; /* Ocupa el ancho completo de la pantalla */
-        padding: 30px;
-    }
-
-    .item-image {
-        width: 250px; /* Ajusta el tamaño de la imagen */
-    }
-
-    .chat-content {
-        width: 100%; /* El chat ocupa todo el ancho disponible */
-        margin-left: 0; /* Elimina el margen para pantallas medianas */
-        padding: 25px; /* Ajusta el padding para pantallas medianas */
-    }
-
-    .card__title__chat {
-        font-size: 26px; /* Ajusta el tamaño del texto */
-        padding: 20px;
-    }
-
-    .card__description__chat {
-        font-size: 16px;
-        padding: 20px;
-    }
-  .content-container {
         margin-left: 0; /* Elimina el margen lateral */
         flex-direction: column;
         align-items: center;
@@ -134,53 +89,4 @@
     .card__description__chat {
         font-size: 14px; /* Fuente más pequeña */
     }
-}
-
-/* Para pantallas grandes (Tablets y laptops pequeñas, max-width: 769px a 1024px) */
-@media (min-width: 769px) and (max-width: 1024px) {
-    .content-container {
-        flex-direction: row;
-        margin-left: 200px; /* Ajusta el margen izquierdo para pantallas grandes */
-    }
-
-    .image-description {
-        width: 300px; /* Ajusta el ancho según el tamaño de pantalla */
-        padding: 40px;
-    }
-
-    .item-image {
-        width: 280px; /* Ajusta el tamaño de la imagen */
-    }
-
-    .chat-content {
-        width: 100%; /* El chat ocupa todo el ancho disponible */
-        margin-left: 30px; /* Ajusta el margen para pantallas grandes */
-        padding: 40px; /* Ajusta el padding para pantallas grandes */
-    }
-
-    .card__title__chat {
-        font-size: 28px; /* Ajusta el tamaño del texto */
-        padding: 20px;
-    }
-
-    .card__description__chat {
-        font-size: 18px;
-        padding: 20px;
-    }
-  
-    .image-description {
-        display: none;
-    }
-  
-    .item-image {
-        width: 200px; /* Ajusta el tamaño de la imagen */
-    }
-  
-    .card__title__chat {
-        font-size: 24px; /* Ajusta el tamaño de la fuente */
-    }
-  
-    .card__description__chat {
-        font-size: 16px; /* Ajusta el tamaño de la fuente */
-    }
-}
+}

src/styles/ChatGrupal.css

@@ -140,9 +140,7 @@ gap: 15px; /* Mayor espacio entre mensajes */
 }
 
 .dorama-list-container {
-    width: 100%;
-    margin-bottom: 20px;
-}
+display: none;}
 
 .chat-content {
     margin-left: 0;
@@ -160,10 +158,7 @@ gap: 15px; /* Mayor espacio entre mensajes */
   }
 
   .dorama-list-container {
-    width: 100%;
-    order: 2;
-    flex-direction: row;
-    overflow-x: auto;
+display: none;
   }
 
   .dorama-item {
@@ -180,47 +175,8 @@ gap: 15px; /* Mayor espacio entre mensajes */
   }
 }
 
-/* Estilo para pantallas muy pequeñas (hasta 500px) */
-@media (max-width: 500px) {
-  .chatGrupal-container {
-      flex-direction: column;
-      height: auto;
-  }
-
-  .dorama-list-container {
-      width: 100%;
-      margin-bottom: 20px;
-      padding: 10px;
-      box-shadow: none; /* Eliminar sombra para simplificar en pantallas pequeñas */
-  }
-
-  .chat-content {
-      margin-left: 0;
-      padding: 20px;
-      border-radius: 8px;
-      box-shadow: none; /* Eliminar sombra para simplificar en pantallas pequeñas */
-  }
-
-  .chat-header, .chat-input {
-      padding: 8px;
-  }
-
-  .chat-input input {
-      padding: 8px;
-  }
-
-  .send-button {
-      padding: 8px 16px;
-  }
-
-  .dorama-image {
-      width: 50px;
-      height: 50px;
-  }
-
-  .dorama-title {
-      font-size: 1rem;
-  }
+/* Estilos para pantallas muy pequeñas (ej. móviles en vertical) */
+@media screen and (max-width: 480px) {
   .chatGrupal-container {
     padding: 5px;
   }
@@ -237,45 +193,8 @@ gap: 15px; /* Mayor espacio entre mensajes */
   .send-button {
     font-size: 14px;
   }
-}
-
-/* Estilo para pantallas pequeñas y medianas (501px a 768px) */
-@media (min-width: 501px) and (max-width: 768px) {
-  .chatGrupal-container {
-      flex-direction: column;
-      height: auto;
-  }
-
   .dorama-list-container {
-      width: 100%;
-      margin-bottom: 20px;
-      padding: 15px;
-  }
-
-  .chat-content {
-      margin-left: 0;
-      padding: 30px;
-      border-radius: 8px;
-  }
-
-  .chat-header, .chat-input {
-      padding: 10px;
-  }
-
-  .chat-input input {
-      padding: 10px;
+    display: none;
   }
 
-  .send-button {
-      padding: 10px 18px;
-  }
-
-  .dorama-image {
-      width: 55px;
-      height: 55px;
-  }
-
-  .dorama-title {
-      font-size: 1.1rem;
-  }
 }