Responsive Design

Ivowainer · Apr 15, 2022 · 6d89559 · 6d89559
1 parent 62043ac
commit 6d89559
Show file tree

Hide file tree

Showing 4 changed files with 48 additions and 5 deletions.
diff --git a/src/App.jsx b/src/App.jsx
@@ -9,7 +9,7 @@ import IconoNuevoGasto from './img/nuevo-gasto.svg';
 
 function App() {
   const [presupuesto, setPresupuesto] = useState(
-    Number(localStorage.getItem('presupuesto')) ?? 0
+    Number(localStorage.getItem('presupuesto')) ?? 'as'
   );
   const [isValidPresupuesto, setIsValidPresupuesto] = useState(false)
 

diff --git a/src/components/Gasto.jsx b/src/components/Gasto.jsx
@@ -62,7 +62,10 @@ const Gasto = ({ gasto, setGastoEditar, eliminarGasto }) => {
                             </p>
                         </div>
                     </div>
-                    <p className="cantidad-gasto">${gasto.cantidad}</p>
+                    <div className="gastos-parr">
+                        <p className="cantidad-gasto">${gasto.cantidad}</p>
+                        <p>Desliza hacía los lados para editar o eliminar</p>
+                    </div>
                 </div>
             </SwipeableListItem>
         </SwipeableList>

diff --git a/src/components/NuevoPresupuesto.jsx b/src/components/NuevoPresupuesto.jsx
@@ -26,7 +26,7 @@ const NuevoPresupuesto = ({ presupuesto, setPresupuesto, setIsValidPresupuesto }
                     <label htmlFor="">Definir presupuesto</label>
 
                     <input 
-                        value={presupuesto}
+                        value={presupuesto === 0 ? '' : presupuesto}
                         className="nuevo-presupuesto"
                         type="number" 
                         placeholder="Añade tu presupuesto"

diff --git a/src/index.css b/src/index.css
@@ -50,10 +50,9 @@ header {
 
 header h1 {
     padding: 3rem 0;
-    margin: 0;
+    margin: 0 10px;
     color: var(--blanco);
     text-align: center;
-
     text-transform: uppercase;
 }
 
@@ -184,6 +183,7 @@ header h1 {
 }
 .formulario input[type="text"].nuevo-presupuesto, 
 .formulario input[type="number"].nuevo-presupuesto {
+    width: 100%;
     font-size: 2.8rem;
     text-align: center;
 }
@@ -268,6 +268,7 @@ main {
 }
 
 .gasto {
+    cursor: pointer;
     display: flex;
     justify-content: space-between;
     align-items: center;
@@ -334,6 +335,11 @@ main {
     cursor: pointer;
 }
 
+.gastos-parr p:last-child{
+    color: #818485;
+    font-size: 1.2rem;
+}
+
 .modal {
     position: absolute;
     background-color: rgb(0 0 0 / 0.92);
@@ -406,3 +412,37 @@ body .modal {
     font-size: 2.4rem;
     text-align: right;
 }
+
+/* Movil */
+@media (max-width: 600px) {
+    .campo label{
+        font-size: 2rem;
+        max-width: 20%;
+    }
+    .campo select{
+        max-width: 80%;
+        font-size: 1.5rem;
+    }
+    .modal .formulario{
+        height: 100%;
+        width: 80vw;
+        margin-top: 30%;
+        padding: 0;
+    }
+    .campo #categoria{
+        width: 100%;
+    }
+    .gasto{
+        padding: 25px 30px;
+        flex-direction: column;
+        justify-content: unset;
+        align-items: flex-start;
+    }
+    .contenido-gasto{
+        flex-direction: column;
+        align-items: flex-start;
+    }
+    .contenido-gasto img{
+        width: 30%;
+    }
+}