fernando
/
horarios-v3
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Colocar las horas de la tabla en una mejor posicion

master
Araozu 2021-01-15 08:50:32 -05:00
parent fc48d9cd55
commit 6a80d23f9f
2 changed files with 25 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/ContenedorHorarios/MiHorario.tsx
View File

@ -30,6 +30,7 @@ export function MiHorario() {
)}> )}>
Mi horario Mi horario
</div> </div>
{/*
<div <div
className={css( className={css(
estilosGlobales.inlineBlock, estilosGlobales.inlineBlock,
@ -42,6 +43,7 @@ export function MiHorario() {
<i className={claseBotonMostrarDescansos()}/> <i className={claseBotonMostrarDescansos()}/>
&nbsp;Mostrar descansos &nbsp;Mostrar descansos
</div> </div>
*/}
</div> </div>
<div className={css( <div className={css(

35
src/ContenedorHorarios/Tabla.tsx
View File

@ -24,7 +24,8 @@ const horas = [
"17:40 - 18:30", "17:40 - 18:30",
"18:30 - 19:20", "18:30 - 19:20",
"19:20 - 20:10", "19:20 - 20:10",
"20:10 - 21:00" "20:10 - 21:00",
"21:00 - 21:00"
] ]
const horasDescanso = [ const horasDescanso = [
"08:40 - 08:50", "08:40 - 08:50",
@ -39,6 +40,7 @@ export function Tabla() {
position: "relative", position: "relative",
zIndex: 2, zIndex: 2,
transition: "background-color 250ms", transition: "background-color 250ms",
marginLeft: "4rem",
":hover": { ":hover": {
backgroundColor: "rgba(200, 200, 200, 0.25)" backgroundColor: "rgba(200, 200, 200, 0.25)"
} }
@ -54,7 +56,9 @@ export function Tabla() {
celdaHora: { celdaHora: {
textAlign: "center", textAlign: "center",
width: "4rem", width: "4rem",
padding: "0.25rem 0" padding: "0.25rem 0",
position: "absolute",
top: "-0.75rem"
}, },
celdaComun: { celdaComun: {
width: "calc((100% - 4rem) / 5)", width: "calc((100% - 4rem) / 5)",
@ -67,7 +71,7 @@ export function Tabla() {
return <div> return <div>
<div className={css(e.fila)}> <div className={css(e.fila)}>
<div className={css(e.celdaHora, estilosGlobales.inlineBlock)}> <div className={css(e.celdaHora, estilosGlobales.inlineBlock)}>
Hora
</div> </div>
<For each={dias}> <For each={dias}>
{dia => {dia =>
@ -79,18 +83,25 @@ export function Tabla() {
</div> </div>
<For each={horas}> <For each={horas}>
{hora => {hora =>
<div className={css(e.fila)}> <div style={{position: "relative"}}>
<div className={css(e.celdaHora, estilosGlobales.inlineBlock)}> <div className={css(e.celdaHora, estilosGlobales.inlineBlock)}>
{hora.substring(0, 5)} {hora.substring(0, 5)}
</div> </div>
<For each={dias}> <div className={css(e.fila)}>
{() => <For each={dias}>
<div className={css(e.celdaComun, estilosGlobales.inlineBlock)}> {() =>
:D <div className={css(e.celdaComun, estilosGlobales.inlineBlock)}>
</div> <span>:D</span>
} <span>D:</span>
</For> <span>:)</span>
<div className={css(e.filaBorde)}/> <br/>
<span>(:</span>
<span>:p</span>
</div>
}
</For>
<div className={css(e.filaBorde)}/>
</div>
</div> </div>
} }
</For> </For>