diff --git a/src/BarraSuperior.tsx b/src/BarraSuperior.tsx index 8c6450a..337431d 100755 --- a/src/BarraSuperior.tsx +++ b/src/BarraSuperior.tsx @@ -1,6 +1,7 @@ import { estilosGlobales } from "./Estilos" import { StyleSheet, css } from "aphrodite" import { numWallpaper, setNumWallpaper } from "./Store" +import { TamanoLetra } from "./BarraSuperior/TamanoLetra" const ultimoIndiceWallpaper = 2 @@ -100,6 +101,7 @@ export function BarraSuperior() { + 2021-A Ingeniería de Sistemas diff --git a/src/BarraSuperior/TamanoLetra.tsx b/src/BarraSuperior/TamanoLetra.tsx new file mode 100644 index 0000000..0a99267 --- /dev/null +++ b/src/BarraSuperior/TamanoLetra.tsx @@ -0,0 +1,70 @@ +import { css, StyleSheet } from "aphrodite" +import { estilosGlobales } from "../Estilos" +import { tamanoLetra, setTamanoLetra } from "../Store" +import { createEffect } from "solid-js" + +const e = StyleSheet.create({ + boton: { + cursor: "pointer", + textDecoration: "underline", + "::before": { + fontSize: "1rem", + transform: "translateY(0.2rem)", + }, + }, + botonDesactivado: { + cursor: "not-allowed", + textDecoration: "none", + }, + botonLeft: { + paddingRight: "0.5rem", + marginRight: "0.25rem", + }, + botonRight: { + paddingLeft: "0.5rem", + marginRight: "0.25rem", + }, +}) + +function reducirLetra() { + const v = tamanoLetra() + if (v > 10) { + setTamanoLetra(v - 2) + localStorage.setItem("tamano-letra", (v - 2).toString()) + } +} + +function aumentarLetra() { + const v = tamanoLetra() + if (v < 20) { + setTamanoLetra(v + 2) + localStorage.setItem("tamano-letra", (v + 2).toString()) + } +} + +export function TamanoLetra() { + createEffect(() => { + const v = tamanoLetra() + console.log("Letra:", v) + document.documentElement.style.fontSize = v + "px" + // document.body.style.fontSize = v + "px" + }) + + return ( +
+ + + Tamaño: {tamanoLetra()} + + +
+ ) +} diff --git a/src/ContenedorHorarios/Tabla/FilaTabla.tsx b/src/ContenedorHorarios/Tabla/FilaTabla.tsx index 4489f9a..b1ff866 100755 --- a/src/ContenedorHorarios/Tabla/FilaTabla.tsx +++ b/src/ContenedorHorarios/Tabla/FilaTabla.tsx @@ -10,7 +10,7 @@ import { TablaObserver } from "../TablaObserver" const e = StyleSheet.create({ celdaHora: { textAlign: "center", - width: "2.5rem", + width: "3.3rem", padding: "0.25rem 0", position: "absolute", top: "-0.75rem", @@ -19,13 +19,13 @@ const e = StyleSheet.create({ position: "absolute", zIndex: -1, height: "100%", - transform: "translateX(-15px)", + transform: "translateX(-1rem)", }, fila: { position: "relative", zIndex: 2, transition: "background-color 250ms, border 100ms", - marginLeft: "calc(2.5rem + 20px)", + marginLeft: "4.3rem", display: "flex", alignItems: "center", minHeight: "1.1rem", @@ -43,7 +43,7 @@ const e = StyleSheet.create({ }, celdaResaltado: { height: "101%", - width: "4px", + width: "0.2rem", display: "inline-block", }, celdaResaltadoTransparente: { diff --git a/src/Store.ts b/src/Store.ts index 80316e5..cfafd46 100755 --- a/src/Store.ts +++ b/src/Store.ts @@ -40,7 +40,9 @@ export const horasDescanso = [ ] const numImgGuardado = Number(localStorage.getItem("num-img") ?? "1") +const tamanoLetraGuardado = Number(localStorage.getItem("tamano-letra") ?? "16") export const [modoColor, setModoColor] = createSignal(ModoColor.Oscuro) export const [numWallpaper, setNumWallpaper] = createSignal(numImgGuardado) export const [mostrarDescansos, setMostrarDescansos] = createSignal(true) +export const [tamanoLetra, setTamanoLetra] = createSignal(tamanoLetraGuardado); diff --git a/src/Wallpaper.tsx b/src/Wallpaper.tsx index 6614e34..92e48db 100755 --- a/src/Wallpaper.tsx +++ b/src/Wallpaper.tsx @@ -26,7 +26,7 @@ export function Wallpaper() { zIndex: -1, transition: `opacity ${duracionTransicion}ms`, filter: soportaBackdropFilter ? "" : "blur(40px)", - opacity: soportaBackdropFilter ? 1 : 0.75, + opacity: 0.75, }, coverTransicion: { opacity: 0, diff --git a/src/styles/global.css b/src/styles/global.css index 6f1956c..e695d18 100755 --- a/src/styles/global.css +++ b/src/styles/global.css @@ -1,5 +1,4 @@ body { - font-size: 16px; font-family: Inter, sans-serif; }