diff --git a/public/index.html b/public/index.html
index 95ecd35..31c499b 100644
--- a/public/index.html
+++ b/public/index.html
@@ -7,7 +7,7 @@
Horarios UNSA
-
+
diff --git a/src/App.vue b/src/App.vue
index 3715e35..41f86c6 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -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)
diff --git a/src/assets/jetbrains-mono/JetBrainsMono-Bold.ttf b/src/assets/jetbrains-mono/JetBrainsMono-Bold.ttf
new file mode 100644
index 0000000..5dc6ec2
Binary files /dev/null and b/src/assets/jetbrains-mono/JetBrainsMono-Bold.ttf differ
diff --git a/src/assets/jetbrains-mono/JetBrainsMono-Regular.ttf b/src/assets/jetbrains-mono/JetBrainsMono-Regular.ttf
new file mode 100644
index 0000000..7db854f
Binary files /dev/null and b/src/assets/jetbrains-mono/JetBrainsMono-Regular.ttf differ
diff --git a/src/components/App/barra-lateral.vue b/src/components/App/barra-lateral.vue
index 16971b4..cb7cde0 100644
--- a/src/components/App/barra-lateral.vue
+++ b/src/components/App/barra-lateral.vue
@@ -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 @@
-
-
\ No newline at end of file
diff --git a/src/components/v-checkbox.vue b/src/components/v-checkbox.vue
index c10058e..cad8ec6 100644
--- a/src/components/v-checkbox.vue
+++ b/src/components/v-checkbox.vue
@@ -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
diff --git a/src/main.js b/src/main.js
index 6b9c0b3..d3b9c95 100644
--- a/src/main.js
+++ b/src/main.js
@@ -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;
diff --git a/src/sass/Global.sass b/src/sass/Global.sass
index 3dfde9a..2fc23f8 100644
--- a/src/sass/Global.sass
+++ b/src/sass/Global.sass
@@ -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
diff --git a/src/sass/colores.sass b/src/sass/colores.sass
new file mode 100644
index 0000000..cd77fc8
--- /dev/null
+++ b/src/sass/colores.sass
@@ -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
diff --git a/src/store/index.js b/src/store/index.js
index 8228746..270966d 100644
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -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: {
diff --git a/src/views/Inicio.vue b/src/views/Inicio.vue
index f005073..6ae8ae5 100644
--- a/src/views/Inicio.vue
+++ b/src/views/Inicio.vue
@@ -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
+