centrado de botones

iic2154-uc-cl · Oct 9, 2024 · e313dcb · e313dcb
1 parent 8a29b5f
commit e313dcb
Show file tree

Hide file tree

Showing 4 changed files with 49 additions and 44 deletions.
diff --git a/geomapp/src/components/CenterMapButton.jsx b/geomapp/src/components/CenterMapButton.jsx
@@ -2,7 +2,7 @@ import React from 'react';
 
 const CenterMapButton = ({ onClick }) => {
     return (
-        <button onClick={onClick} className="center-map-btn">
+        <button className="update-location-btnn" onClick={onClick}>
         Centrar Mapa
         </button>
     );

diff --git a/geomapp/src/components/MapsButton.jsx b/geomapp/src/components/MapsButton.jsx
@@ -3,7 +3,7 @@ import React from 'react';
 
 const UpdateLocationButton = ({ onClick }) => {
   return (
-    <button onClick={onClick} className="update-location-btnn">
+    <button className="update-location-btnn" onClick={onClick}>
       Actualizar ubicación
     </button>
   );

diff --git a/geomapp/src/pages/mapa.jsx b/geomapp/src/pages/mapa.jsx
@@ -50,27 +50,37 @@ return (
             <Navbar />
 
             <div className="content">
-
-                <h1>Mapa</h1>
+              <br></br>
+              <br></br>
+              <br></br>
+                <div className="buttons-container">
+                <UpdateLocationButton onClick={updateLocation} />
+                <CenterMapButton onClick={centerMap} /> {/* Añadimos el nuevo botón para centrar el mapa */}
                 <div className="filter-container">
-                    <label htmlFor="filterSelect">Filtrar por tipo:</label>
+
                     <select
                         id="filterSelect"
                         onChange={(e) => setFilterType(e.target.value)}
                         value={filterType}
-                    >
+                        className="update-location-btnn">
+                        <option value="">Filtrar por tipo</option>
                         <option value="">Todos</option>
                         <option value="alojamientos">Alojamientos</option>
                         <option value="restaurantes">Restaurantes</option>
                         <option value="tiendas">Tiendas</option>
                     </select>
+
                 </div>
-                <GoogleMapComponent onMapLoad={setMapInstance} filterType={filterType} /> {/* Pasamos la función para establecer el map */}
-                <br />
-                <UpdateLocationButton className="update-location-btnn" onClick={updateLocation} />
-
-                <CenterMapButton onClick={centerMap} /> {/* Añadimos el nuevo botón para centrar el mapa */}
+
 
+
+                </div>
+                <br></br>
+
+
+                <GoogleMapComponent onMapLoad={setMapInstance} filterType={filterType} /> {/* Pasamos la función para establecer el map */}
+                <br/>
+
                 <br></br>
                 <br></br>
                 <br></br>

diff --git a/geomapp/src/styles/mapa.css b/geomapp/src/styles/mapa.css
@@ -6,22 +6,25 @@
 
   /* Botón de actualización de ubicación */
   .update-location-btnn {
-    background-color: #714dc9;  /* Un tono específico */
+    background-color: #714dc9;
     color: white;
-    font-weight: bold;  /* Texto en negrita */
-    padding: 15px 20px;  /* Espaciado interno para hacer el botón más grande */
-    border: none;  /* Sin bordes */
-    border-radius: 5px;  /* Bordes redondeados */
-    cursor: pointer;  /* Cursor en forma de mano al pasar el mouse */
-    text-transform: uppercase;  /* Texto en mayúsculas */
-    transition: background-color 0.3s, box-shadow 0.3s;  /* Transición suave para hover */
-    outline: none;  /* Elimina el contorno que aparece al hacer clic */
+    font-weight: bold;
+    padding: 15px 20px;
+    border: none;
+    border-radius: 5px;
+    cursor: pointer;
+    text-transform: uppercase;
+    transition: background-color 0.3s, box-shadow 0.3s;
+    outline: none;
     font-size: 15px;
-    font-family: 'Montserrat', sans-serif;  /* Usa la fuente Montserrat */
-    left: 0;
-    position: absolute; 
-    margin-left: 19px;
-  }
+    font-family: 'Montserrat', sans-serif;
+    margin-right: 10px; /* Añade espacio entre los botones */
+    /* Elimina las siguientes propiedades que causan problemas */
+    /* left: 0; */
+    /* position: absolute; */
+    /* margin-left: 19px; */
+}
+
 
   .update-location-btnn:hover {
     background-color: #e67e22;  /* Un tono más oscuro de naranja para el hover */
@@ -106,28 +109,20 @@
 
 /* Botón "Centrar Mapa" (actualizado) */
 .center-map-btn {
-    background-color: #714dc9;  /* Color de fondo igual al botón "Actualizar Ubicación" */
-    color: white;
-    font-weight: bold;  /* Texto en negrita */
-    padding: 15px 20px;  /* Espaciado interno para hacer el botón más grande */
-    border: none;  /* Sin bordes */
-    border-radius: 5px;  /* Bordes redondeados */
-    cursor: pointer;  /* Cursor en forma de mano al pasar el mouse */
-    text-transform: uppercase;  /* Texto en mayúsculas */
-    transition: background-color 0.3s, box-shadow 0.3s;  /* Transición suave para hover */
-    outline: none;  /* Elimina el contorno que aparece al hacer clic */
-    font-size: 15px;
-    font-family: 'Montserrat', sans-serif;  /* Usa la fuente Montserrat */
-    position: absolute;  /* Posición absoluta para controlar la ubicación */
-    right: 19px;  /* Alineado a la derecha */
-    margin-top: 10px; /* Espaciado superior para separarlo del resto */
+
 }
 
-/* Hover para el botón "Centrar Mapa" */
-.center-map-btn:hover {
-    background-color: #e67e22;  /* Color de fondo en hover igual al botón "Actualizar Ubicación" */
-    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);  /* Sombra ligera para resaltar el botón */
+
+.buttons-container {
+  display: flex;
+  gap: 20px; /* Añade espacio entre los botones */
+  justify-content: center; /* Alinea los botones horizontalmente en el centro */
+  align-items: center; /* Alinea los botones verticalmente */
+
 }
 
+
+
+