IO/front-Censo
2
0
Fork 0
Code Issues Pull Requests Actions Releases Wiki Activity

modified toggle

Browse Source
This commit is contained in:
Lino
2025-11-27 15:28:59 -06:00
parent ec5de65adb
commit be978b1879
7 changed files with 98 additions and 59 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/Equipo_Computo/Pregunta7.tsx
+22 -11
View File
@@ -17,10 +17,11 @@ type RespuestaAntiguedad = {
export default function Pregunta7() {
const [datos, setDatos] = useState([
{ nombre: "Impresión", valores: ["0.00", "0.00", "0.00", "0.00", "0.00"] },
{ nombre: "Impresión", valores: ["0.00", "0.00", "0.00", "0.00"] },
{
nombre: "Digitalización",
valores: ["0.00", "0.00", "0.00", "0.00", "0.00"],
valores: ["0.00", "0.00", "0.00", "0.00"
],
},
]);
@@ -40,7 +41,9 @@ export default function Pregunta7() {
for (const item of items) {
const total = Number(item.total) || 0;
const antig = item.antiguedad ? item.antiguedad.toUpperCase().trim() : null;
const antig = item.antiguedad
? item.antiguedad.toUpperCase().trim()
: null;
switch (antig) {
case "MENORES DE 2":
@@ -62,7 +65,7 @@ export default function Pregunta7() {
const total = menores2 + entre2_3 + entre4_5 + mayores6 + notfound;
if (total === 0) return ["0.00", "0.00", "0.00", "0.00", "0.00"];
if (total === 0) return ["0.00", "0.00", "0.00", "0.00"];
const pct = (v: number) => ((v / total) * 100).toFixed(2);
@@ -71,7 +74,6 @@ export default function Pregunta7() {
pct(entre2_3),
pct(entre4_5),
pct(mayores6),
pct(notfound),
];
};
@@ -93,7 +95,10 @@ export default function Pregunta7() {
setDatos([
{ nombre: "Impresión", valores: transformarDatos(impresion) },
{ nombre: "Digitalización", valores: transformarDatos(digitalizacion) },
{
nombre: "Digitalización",
valores: transformarDatos(digitalizacion),
},
]);
})
.catch((err) => console.error("Error cargando datos:", err))
@@ -103,11 +108,13 @@ export default function Pregunta7() {
const calcularTotalFila = (valores: string[]) =>
valores.reduce((t, v) => t + Number(v), 0);
if (loading) return <div className="contenedor-pregunta">Cargando datos...</div>;
return (
<div className="contenedor-pregunta">
<div className="pregunta-cuadro" style={{ marginTop: "30px" }}>
<div className="contenedor-censo">
Censo de equipos periféricos - Equipo de digitalización
</div>
<div className="pregunta-cuadro">
Antigüedad que tienen los equipos periféricos del área universitaria.
</div>
@@ -120,7 +127,7 @@ export default function Pregunta7() {
<th className="rosa-fuerte">Entre 2 y 3 años</th>
<th className="rosa-fuerte">Entre 4 y 5 años</th>
<th className="rosa-fuerte">Mayor a 6 años</th>
<th className="rosa-fuerte">No registrados</th>
<th className="azul-marino">Total</th>
</tr>
</thead>
@@ -142,7 +149,11 @@ export default function Pregunta7() {
</td>
))}
<td className={`total-celda ${total > 100.1 ? "total-error" : ""}`}>
<td
className={`total-celda ${
total > 100.1 ? "total-error" : ""
}`}
>
{total.toFixed(2)}%
</td>
</tr>
src/components/Equipo_Computo/pregunta7.css
+3 -2
View File
@@ -1,5 +1,7 @@
.contenedor-pregunta {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
display: flex;
flex-direction: column;
gap: 10px;
}
.contenedor-censo{
@@ -7,7 +9,6 @@
color: white;
padding: 15px;
font-size: 16px;
margin-bottom: 25px;
border-radius: 4px;
}
src/components/Perifericos/Pregunta1EP.tsx
+1 -1
View File
@@ -3,7 +3,7 @@ import React, { useState, useEffect } from "react";
import style from "./pregunta1EP.module.scss";
import axios from "axios";
import Cookies from "js-cookie";
import ToggleButton from "../ToggleButton";
import ToggleButton from "../Toggle/ToggleButton";
interface EquiposImpresion {
inyeccionTinta: string;
src/components/Perifericos/pregunta2EP.module.scss
+3
View File
@@ -1,4 +1,7 @@
.container_P2 {
display: flex;
flex-direction: column;
gap: 10px;
max-width: 1200px;
label {
src/components/Perifericos/pregunta5EP.scss
+1 -2
View File
@@ -1,7 +1,7 @@
.container {
display: flex;
flex-direction: column;
justify-content: space-between;
gap: 10px;
width: 100%;
}
@@ -31,7 +31,6 @@
.item {
flex: 1;
min-width: 150px;
}
label {
src/components/ToggleButton.module.scss → src/components/Toggle/ToggleButton.module.scss
+49 -25
View File
@@ -4,14 +4,20 @@
--thumb-off: #015cb8;
--thumb-on: #fff;
--shadow: 0 6px 18px rgba(99, 102, 241, 0.18);
--curve: cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.containerToggle{
display: flex;
justify-content: end;
}
.toggle {
--padding: 6px;
--padding: 4px;
display: inline-flex;
align-items: center;
gap: 12px;
padding: 6px 12px;
border: none;
background: transparent;
cursor: pointer;
@@ -21,8 +27,8 @@
outline: none;
}
.toggle:active {
transform: scale(0.98);
.toggle:active .track {
box-shadow: inset 0 0 0 2em rgba(0, 0, 0, 0.06);
}
.track {
@@ -34,59 +40,77 @@
padding: var(--padding);
box-sizing: border-box;
position: relative;
transition: background 220ms cubic-bezier(.2,.9,.2,1), box-shadow 220ms ease;
box-shadow: none;
transition: background 280ms var(--curve), box-shadow 220ms ease;
border: 1px solid #e8eae9;
}
/* When the component has the `on` class, style the inner track and thumb accordingly. */
.on .track {
background: var(--bg-on);
box-shadow: var(--shadow);
border-color: transparent;
}
.thumb {
width: 22px;
height: 22px;
width: 23px;
height: 23px;
background: var(--thumb-off);
border-radius: 50%;
display: block;
transform: translateX(0);
transition: transform 220ms cubic-bezier(.2,.9,.2,1), box-shadow 220ms ease;
box-shadow: 0 4px 10px rgba(16,24,40,0.12);
transition: transform 260ms var(--curve), background 240ms ease,
padding 260ms ease, margin 260ms ease, box-shadow 240ms ease;
box-shadow: 0 3px 8px rgba(0, 0, 0, 0.12);
}
/* Rebote estilo iOS */
.toggle:active .thumb {
padding-right: 4px;
}
.on:active .thumb {
margin-left: -4px;
}
.on .thumb {
background: var(--thumb-on);
transform: translateX(38px);
transform: translateX(36px);
box-shadow: 0 6px 16px rgba(91, 90, 255, 0.18);
}
.label {
position: absolute;
right: 10px;
top: 8px;
font-family: Inter, ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
position: absolute;
right: 10px;
top: 8px;
font-size: 14px;
font-weight: 600;
color: #0f172a;
letter-spacing: 0.2px;
transition: color 240ms ease, right 260ms var(--curve);
}
.on .label {
right: 45%;
right: 45%;
color: #fff;
text-shadow: 0 1px 0 rgba(0,0,0,0.12);
text-shadow: 0 1px 0 rgba(0, 0, 0, 0.12);
}
/* Focus visible for accessibility */
.toggle:focus-visible .track {
box-shadow: 0 0 0 4px rgba(99,102,241,0.12);
box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.12);
}
/* Small responsive tweak */
@media (max-width: 420px) {
.track { width: 52px; height: 30px; }
.thumb { width: 20px; height: 20px; }
.on .thumb { transform: translateX(24px); }
.label { font-size: 13px; }
.track {
width: 52px;
height: 30px;
}
.thumb {
width: 22px;
height: 22px;
}
.on .thumb {
transform: translateX(24px);
}
.label {
font-size: 13px;
}
}
src/components/ToggleButton.tsx → src/components/Toggle/ToggleButton.tsx
+19 -18
View File
@@ -1,8 +1,8 @@
// ToggleButton.tsx
// Usa este archivo como `ToggleButton.tsx`
import React, { useState } from 'react';
import styles from './ToggleButton.module.scss';
import React, { useState } from "react";
import styles from "./ToggleButton.module.scss";
export type ToggleButtonProps = {
/** estado inicial: true -> presionado ("desuso") */
@@ -19,9 +19,9 @@ export type ToggleButtonProps = {
const ToggleButton: React.FC<ToggleButtonProps> = ({
defaultOn = false,
onChange,
offLabel = 'Uso',
onLabel = 'Baja',
className = '',
offLabel = "Uso",
onLabel = "Baja",
className = "",
}) => {
const [on, setOn] = useState<boolean>(defaultOn);
@@ -32,19 +32,20 @@ const ToggleButton: React.FC<ToggleButtonProps> = ({
}
return (
<button
type="button"
aria-pressed={on}
className={`${styles.toggle} ${on ? styles.on : ''} ${className}`}
onClick={toggle}
title={on ? onLabel : offLabel}
>
<span className={styles.track}>
<span className={styles.thumb} />
<span className={styles.label}>{on ? onLabel : offLabel}</span>
</span>
</button>
<section className={styles.containerToggle}>
<button
type="button"
aria-pressed={on}
className={`${styles.toggle} ${on ? styles.on : ""} ${className}`}
onClick={toggle}
title={on ? onLabel : offLabel}
>
<span className={styles.track}>
<span className={styles.thumb} />
<span className={styles.label}>{on ? onLabel : offLabel}</span>
</span>
</button>
</section>
);
};