Agregado tema claro. Cambiado algunos estilos.
Araozu
parent
7cd4a1747d
commit
16a30f9e64
|
|
@ -7,7 +7,7 @@
|
|||
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
|
||||
<title>Horarios UNSA</title>
|
||||
|
||||
<link href="https://fonts.googleapis.com/css?family=Roboto&display=swap" rel="stylesheet">
|
||||
<link href="https://fonts.googleapis.com/css?family=Roboto|Sen&display=swap" rel="stylesheet">
|
||||
|
||||
</head>
|
||||
<body>
|
||||
|
|
|
|||
|
|
@ -45,7 +45,10 @@
|
|||
|
||||
.contenedor
|
||||
display: grid
|
||||
grid-template-columns: 400px auto
|
||||
grid-template-columns: 20rem auto
|
||||
background-color: var(--colorFondo)
|
||||
color: var(--colorTexto)
|
||||
transition: background-color 250ms
|
||||
|
||||
.der
|
||||
position: relative
|
||||
|
|
@ -57,7 +60,7 @@
|
|||
|
||||
@media only screen and (max-width: 1370px)
|
||||
.contenedor
|
||||
grid-template-columns: 200px auto
|
||||
grid-template-columns: 16rem auto
|
||||
|
||||
|
||||
@media only screen and (max-width: 1000px)
|
||||
|
|
|
|||
Binary file not shown.
Binary file not shown.
|
|
@ -6,8 +6,11 @@
|
|||
h1 Horarios UNSA
|
||||
br
|
||||
br
|
||||
p Ultima actualización: 09/03/20 00:19, con los datos del sistema académico oficial.
|
||||
p Laboratorios aún no disponibles.
|
||||
p RIP laboratorios
|
||||
br
|
||||
v-check-box(txt="Mostrar descansos de 10m" v-model="mostrarDescansos")
|
||||
br
|
||||
v-check-box(txt="Tema oscuro" v-model="temaOscuro")
|
||||
// div.info
|
||||
p
|
||||
i Solo algunos horarios están implementados*
|
||||
|
|
@ -40,7 +43,7 @@
|
|||
// p {{ datos.escuela? datos.escuela.nombre: escuela }}
|
||||
br
|
||||
br
|
||||
a(href="https://github.com/Araozu/horarios-unsa" target="_blank" style="color: white;").
|
||||
a.link_github(href="https://github.com/Araozu/horarios-unsa" target="_blank").
|
||||
Código fuente en GitHub
|
||||
// modo-color
|
||||
// h2 Inicio
|
||||
|
|
@ -50,12 +53,12 @@
|
|||
</template>
|
||||
|
||||
<script lang="coffee">
|
||||
import modoColor from "./modo-color.vue"
|
||||
import vCheckBox from "../v-checkbox.vue"
|
||||
escuelas = require "json-loader!yaml-loader!../../assets/escuelas.yaml"
|
||||
|
||||
export default
|
||||
name: "barra-lateral"
|
||||
components: { modoColor }
|
||||
components: { vCheckBox }
|
||||
data: ->
|
||||
escuelas: escuelas
|
||||
añoSeleccionado: 2018
|
||||
|
|
@ -72,6 +75,16 @@
|
|||
datos: -> @$store.state.datos
|
||||
urlEscuela: ->
|
||||
"http://" + @facultadSeleccionada + ".unsa.edu.pe/" + @escuelaSeleccionada + "/"
|
||||
mostrarDescansos:
|
||||
get: -> @$store.state.mostrarDescansos
|
||||
set: (value) -> @$store.commit "cambiarMostrarDescansos", value
|
||||
temaOscuro:
|
||||
get: -> @$store.state.color == "oscuro"
|
||||
set: (value) ->
|
||||
@$store.commit "cambiarColor",
|
||||
if value == true then "oscuro"
|
||||
else "claro"
|
||||
|
||||
watch:
|
||||
escuelaSeleccionada: (n) ->
|
||||
console.log "Cambiado a #{n}"
|
||||
|
|
@ -81,6 +94,10 @@
|
|||
|
||||
<style scoped lang="sass">
|
||||
|
||||
.link_github
|
||||
color: var(--colorTexto)
|
||||
|
||||
|
||||
.boton-lateral
|
||||
position: absolute
|
||||
left: 0
|
||||
|
|
@ -102,6 +119,9 @@
|
|||
box-shadow: 2px 0 5px 0 rgb(122, 122, 122)
|
||||
z-index: 1
|
||||
margin-right: 0.5rem
|
||||
background-color: var(--colorFondo)
|
||||
color: var(--colorTexto)
|
||||
transition: background-color 250ms
|
||||
|
||||
|
||||
h1
|
||||
|
|
|
|||
|
|
@ -1,29 +0,0 @@
|
|||
<template lang="pug">
|
||||
form(@submit.prevent)
|
||||
label(for="selector_modo_color") Modo de color:
|
||||
br
|
||||
select#selector_modo_color(v-model="opcion")
|
||||
option(selected) Claro
|
||||
option Oscuro
|
||||
|
||||
//
|
||||
</template>
|
||||
|
||||
<script lang="coffee">
|
||||
|
||||
export default
|
||||
name: "modo-color"
|
||||
data: ->
|
||||
opcion: "Claro"
|
||||
watch:
|
||||
opcion: (nuevo) ->
|
||||
console.log "Cambiado a #{nuevo}"
|
||||
|
||||
#
|
||||
</script>
|
||||
|
||||
<style scoped lang="sass">
|
||||
|
||||
|
||||
//
|
||||
</style>
|
||||
|
|
@ -33,11 +33,12 @@
|
|||
position: relative
|
||||
padding-left: 35px
|
||||
cursor: pointer
|
||||
font-size: 22px
|
||||
font-size: 1rem
|
||||
-webkit-user-select: none
|
||||
-moz-user-select: none
|
||||
-ms-user-select: none
|
||||
user-select: none
|
||||
color: var(--colorTexto)
|
||||
|
||||
|
||||
/* Hide the browser's default checkbox */
|
||||
|
|
@ -56,13 +57,13 @@
|
|||
left: 0
|
||||
height: 25px
|
||||
width: 25px
|
||||
background-color: #eee
|
||||
background-color: var(--colorTexto)
|
||||
transition: background-color 150ms
|
||||
border-radius: 50%
|
||||
|
||||
|
||||
/* On mouse-over, add a grey background color */
|
||||
.container:hover input ~ .checkmark
|
||||
// .container:hover input ~ .checkmark
|
||||
background-color: #ccc
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -6,6 +6,7 @@ import store from './store'
|
|||
import './registerServiceWorker'
|
||||
import "normalize-css"
|
||||
import "./sass/Global.sass"
|
||||
import "./sass/colores.sass"
|
||||
|
||||
Vue.config.productionTip = false;
|
||||
|
||||
|
|
|
|||
|
|
@ -1,3 +1,19 @@
|
|||
@font-face
|
||||
font-family: "JetBrains Mono"
|
||||
src: url(../assets/jetbrains-mono/JetBrainsMono-Regular.ttf) format("truetype")
|
||||
font-weight: 400
|
||||
font-style: normal
|
||||
font-display: swap
|
||||
|
||||
|
||||
@font-face
|
||||
font-family: "JetBrains Mono"
|
||||
src: url(../assets/jetbrains-mono/JetBrainsMono-Bold.ttf) format("truetype")
|
||||
font-weight: bold
|
||||
font-style: normal
|
||||
font-display: swap
|
||||
|
||||
|
||||
\:root
|
||||
--colorTexto: #d7d7d7
|
||||
--colorFondo: #0E1419
|
||||
|
|
@ -26,7 +42,7 @@ $duracionTransicion: 100ms
|
|||
|
||||
.celda
|
||||
white-space: pre
|
||||
font-family: "Fira Code", monospace
|
||||
font-family: "JetBrains Mono", monospace
|
||||
cursor: pointer
|
||||
user-select: none
|
||||
transition: background-color $duracionTransicion linear, color $duracionTransicion linear
|
||||
|
|
|
|||
|
|
@ -0,0 +1,14 @@
|
|||
.tema-oscuro
|
||||
--colorTexto: #d7d7d7
|
||||
--colorFondo: #0E1419
|
||||
--colorTeoria: #3f77f3
|
||||
--colorLab: #e4564a
|
||||
|
||||
|
||||
.tema-claro
|
||||
--colorTexto: #303030
|
||||
--colorFondo: #EEECEC
|
||||
--colorTeoria: #2e57b1
|
||||
--colorLab: #bb2d21
|
||||
.celda
|
||||
font-weight: bold
|
||||
|
|
@ -3,6 +3,29 @@ import Vuex from 'vuex';
|
|||
|
||||
Vue.use(Vuex);
|
||||
|
||||
|
||||
const cambiarModoColor = modo => {
|
||||
const clases = document.body.classList;
|
||||
|
||||
bucle: for (const pos in clases) {
|
||||
if (clases.hasOwnProperty(pos)) {
|
||||
const clase = clases[pos];
|
||||
|
||||
switch (clase) {
|
||||
case "tema-claro":
|
||||
case "tema-oscuro": {
|
||||
clases.remove(clase);
|
||||
break bucle;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
clases.add(modo);
|
||||
};
|
||||
|
||||
|
||||
const store = new Vuex.Store({
|
||||
state: {
|
||||
celdas: {},
|
||||
|
|
@ -17,7 +40,12 @@ const store = new Vuex.Store({
|
|||
titulo: "Cargando...",
|
||||
años: {}
|
||||
},
|
||||
mostrarDescansos: true
|
||||
mostrarDescansos: true,
|
||||
color: (() => {
|
||||
const modo = localStorage.getItem("color") || "oscuro";
|
||||
cambiarModoColor(`tema-${ modo }`);
|
||||
return modo
|
||||
})()
|
||||
},
|
||||
mutations: {
|
||||
registrarCelda(state, idCelda) {
|
||||
|
|
@ -51,6 +79,11 @@ const store = new Vuex.Store({
|
|||
},
|
||||
cambiarMostrarDescansos(state, dato) {
|
||||
state.mostrarDescansos = !!dato
|
||||
},
|
||||
cambiarColor (state, valor) {
|
||||
state.color = valor;
|
||||
cambiarModoColor(`tema-${valor}`);
|
||||
localStorage.setItem("color", valor);
|
||||
}
|
||||
},
|
||||
actions: {
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
h2.titulo {{ datos.titulo }}
|
||||
p Puedes agregar cursos de diferentes años a tu horario.
|
||||
|
||||
v-check-box(txt="Mostrar descansos de 10m" v-model="mostrarDescansos")
|
||||
|
||||
|
||||
// label.container Mostrar descansos de 10m
|
||||
input(type="checkbox" v-model="$store.state.mostrarDescansos")
|
||||
|
|
@ -34,9 +34,7 @@
|
|||
computed:
|
||||
horarioUsuario: -> @$store.state.horarioUsuario
|
||||
datos: -> @$store.state.datos
|
||||
mostrarDescansos:
|
||||
get: -> @$store.state.mostrarDescansos
|
||||
set: (value) -> @$store.commit "cambiarMostrarDescansos", value
|
||||
|
||||
|
||||
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue