Mobile login

.eslintrc.yml

@@ -26,7 +26,7 @@ rules:
     - double
   semi:
     - error
-    - never
+    - always
   react/jsx-pascal-case: error
   react/jsx-closing-bracket-location: error
   react/jsx-closing-tag-location: error

index.html

@@ -9,7 +9,6 @@
     <title>Horarios Unsa 2</title>
 
     <link rel="stylesheet" href="/css/phosphor.min.css">
-    <link rel="stylesheet" href="/css/global.css">
 
     <link rel="preconnect" href="https://fonts.gstatic.com">
     <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">

package.json

@@ -20,7 +20,7 @@
         "vite-plugin-solid": "^2.2.6"
     },
     "scripts": {
-        "start": "vite",
+        "start": "vite --host",
         "dev": "vite",
         "build": "vite build",
         "serve": "vite preview"

public/css/global.css

@@ -1,11 +0,0 @@
-:root {
-    --color-texto: white;
-}
-
-body {
-    color: var(--color-texto);
-}
-
-[class^="ph-"], [class*=" ph-"] ::before {
-    font-size: 0.8rem;
-}

public/horarios/2022_2_fps_ingenieriadesistemas.yaml

@@ -13,93 +13,128 @@ años:
       abreviado: TAIS
       Teoria:
         A:
-          Docente: "?"
+          Docente: Robert Arisaca
           Horas:
             - Ma0940
             - Ma1040
             - Ma1130
         B:
-          Docente: "?"
+          Docente: Robert Arisaca
           Horas:
             - Vi1450
             - Vi1550
             - Vi1640
       Laboratorio:
         A:
-          Docente: "?"
+          Docente: Robert Arisaca
           Horas:
             - Mi0700
             - Mi0750
         B:
-          Docente: "?"
+          Docente: Robert Arisaca
           Horas:
             - Mi1400
             - Mi1450
+        C:
+          Docente: Lazo Dely
+          Horas:
+            - Mi1830
+            - Mi1920
     Plataformas:
       nombre: Plataformas Emergentes
       abreviado: PE
       Teoria:
         A:
-          Docente: "?"
+          Docente: Diego Iquira
           Horas:
             - Lu0750
             - Lu0850
       Laboratorio:
         A:
-          Docente: "?"
+          Docente: Diego Iquira
           Horas:
             - Ju0850
             - Ju0940
+        B:
+          Docente: Diego Iquira
+          Horas:
+            - Ma1740
+            - Ma1830
     Proyecto de Sw:
       nombre: Proyecto de Ingeniería de Software 2
       abreviado: PIS2
       Teoria:
         A:
-          Docente: "?"
+          Docente: Freddy Saji
           Horas:
             - Lu0940
             - Lu1040
         C:
-          Docente: "?"
+          Docente: Freddy Saji
           Horas:
             - Lu1130
             - Lu1220
         B:
-          Docente: "?"
+          Docente: Freddy Saji
           Horas:
             - Lu1550
             - Lu1640
         D:
-          Docente: "?"
+          Docente: Freddy Saji
           Horas:
             - Lu1740
             - Lu1830
         E:
-          Docente: "?"
+          Docente: Freddy Saji
           Horas:
             - Ju0940
             - Ju1040
       Laboratorio:
+        A:
+          Docente: William Bornas
+          Horas:
+            - Ma0700
+            - Ma0750
         B:
-          Docente: "?"
+          Docente: Giovanni Martinez
           Horas:
             - Mi1830
             - Mi1920
+        C:
+          Docente: José Sulla
+          Horas:
+            - Ju1740
+            - Ju1830
+        D:
+          Docente: William Bornas
+          Horas:
+            - Vi1550
+            - Vi1730
+        E:
+          Docente: William Bornas
+          Horas:
+            - Ma0850
+            - Ma0940
     Sw de Juegos:
       nombre: Desarrollo de Software para Juegos
       abreviado: DSJ
       Teoria:
         A:
-          Docente: "?"
+          Docente: José Sulla
           Horas:
             - Lu1920
             - Lu2010
       Laboratorio:
         A:
-          Docente: "?"
+          Docente: José Sulla
           Horas:
             - Mi1220
             - Mi1310
+        B:
+          Docente: José Sulla
+          Horas:
+            - Mi1550
+            - Mi1640
     Tesis 2:
       nombre: Seminario de Tesis 2
       abreviado: ST2
@@ -163,23 +198,34 @@ años:
       abreviado: GSTI
       Teoria:
         A:
-          Docente: "?"
+          Docente: Fabricio Calienes
           Horas:
             - Ma1740
             - Ma1830
+      Laboratorio:
+        A:
+          Docente: Luis Rocha
+          Horas:
+            - Ju1830
+            - Ju1920
+        B:
+          Docente: Luis Rocha
+          Horas:
+            - Vi1830
+            - Vi1920
     Practicas:
       nombre: Prácticas Pre Profesionales
       abreviado: PPP
       Teoria:
         A:
-          Docente: "?"
+          Docente: Juan Zuñiga
           Horas:
             - Mi1740
             - Mi1830
             - Vi1740
             - Vi1830
         B:
-          Docente: "?"
+          Docente: Juan Zuñiga
           Horas:
             - Mi1920
             - Mi2010

src/App.tsx

@@ -1,16 +1,19 @@
-import { Main } from "./Views/Main"
+import { Main } from "./Views/Main";
-import { Index } from "./Views/Index"
+import { Index } from "./Views/Index";
-import { Editor } from "./Views/Editor"
+import { Editor } from "./Views/Editor";
-import { useRouter } from "./Router"
+import { useRouter } from "./Router";
-import { Switch, Match } from "solid-js"
+import { Switch, Match, Show } from "solid-js";
-import { Wallpaper } from "./Wallpaper"
+import { Wallpaper } from "./Wallpaper";
 
 function App() {
-    const route = useRouter()
+    const route = useRouter();
+    const isMobile = screen.width <= 500;
 
     return (
-        <div className="App">
+        <div className="App" style={isMobile ? "--color-texto: #202020;" : ""}>
-            <Wallpaper />
+            <Show when={!isMobile}>
+                <Wallpaper />
+            </Show>
             <Switch fallback={<p>404!</p>}>
                 <Match when={route() === "/"}>
                     <Index />
@@ -23,7 +26,7 @@ function App() {
                 </Match>
             </Switch>
         </div>
-    )
+    );
 }
 
-export default App
+export default App;

src/BarraSuperior.tsx

@@ -1,10 +1,10 @@
-import { estilosGlobales } from "./Estilos"
+import { estilosGlobales } from "./Estilos";
-import { StyleSheet, css } from "aphrodite"
+import { StyleSheet, css } from "aphrodite";
-import { numWallpaper, setNumWallpaper } from "./Store"
+import { numWallpaper, setNumWallpaper } from "./Store";
-import { TamanoLetra } from "./BarraSuperior/TamanoLetra"
+import { TamanoLetra } from "./BarraSuperior/TamanoLetra";
-import { RouterLink } from "./Router"
+import { RouterLink } from "./Router";
 
-const ultimoIndiceWallpaper = 2
+const ultimoIndiceWallpaper = 1;
 
 const e = StyleSheet.create({
     contCambiador: {
@@ -30,29 +30,29 @@ const e = StyleSheet.create({
         paddingLeft: "0.5rem",
         marginRight: "0.25rem",
     },
-})
+});
 
 const retrocederWallpaper = () => {
-    const num = numWallpaper()
+    const num = numWallpaper();
     if (num > 0) {
-        setNumWallpaper(num - 1)
+        setNumWallpaper(num - 1);
-        localStorage.setItem("num-img", (num - 1).toString())
+        localStorage.setItem("num-img", (num - 1).toString());
     } else {
-        setNumWallpaper(ultimoIndiceWallpaper)
+        setNumWallpaper(ultimoIndiceWallpaper);
-        localStorage.setItem("num-img", (ultimoIndiceWallpaper).toString())
+        localStorage.setItem("num-img", (ultimoIndiceWallpaper).toString());
     }
-}
+};
 
 const avanzarWallpaper = () => {
-    const num = numWallpaper()
+    const num = numWallpaper();
     if (num < ultimoIndiceWallpaper) {
-        setNumWallpaper(num + 1)
+        setNumWallpaper(num + 1);
-        localStorage.setItem("num-img", (num + 1).toString())
+        localStorage.setItem("num-img", (num + 1).toString());
     } else {
-        setNumWallpaper(0)
+        setNumWallpaper(0);
-        localStorage.setItem("num-img", (0).toString())
+        localStorage.setItem("num-img", (0).toString());
     }
-}
+};
 
 function CambiadorImg() {
     return (
@@ -71,14 +71,14 @@ function CambiadorImg() {
                 />
             </span>
         </div>
-    )
+    );
 }
 
 const estilos = StyleSheet.create({
     tituloPrincipal: {
         fontWeight: "bold",
     },
-})
+});
 
 export function BarraSuperior() {
     return (
@@ -107,5 +107,5 @@ export function BarraSuperior() {
             <span className={css(estilosGlobales.contenedor, estilosGlobales.inlineBlock)}>Ingeniería de Sistemas</span>
             <span className={css(estilosGlobales.contenedor, estilosGlobales.inlineBlock)}>2022-B</span>
         </header>
-    )
+    );
 }

src/Creditos.tsx

@@ -1,4 +1,4 @@
-import { StyleSheet, css } from "aphrodite"
+import { StyleSheet, css } from "aphrodite";
 
 const e = StyleSheet.create({
     creditos: {
@@ -6,16 +6,10 @@ const e = StyleSheet.create({
         paddingTop: "7.5rem",
         paddingBottom: "1rem",
     },
-})
+});
 
 export function Creditos() {
     return (
-        <div className={css(e.creditos)}>
+        <div className={css(e.creditos)} />
-            Desarrollado por Fernando Araoz con TypeScript, JSX y Solid.js.
+    );
-            <br/>
-            <a href="https://horarios1.araozu.dev/" style={{color: "white"}}>
-                Ir a la versión anterior.
-            </a>
-        </div>
-    )
 }

src/Store.ts

@@ -1,48 +1,37 @@
-import { createSignal } from "solid-js"
+import { createSignal } from "solid-js";
-
-enum ModoColor {
-    Claro,
-    Oscuro,
-    Auto
-}
 
 export type Dia = "Lunes" | "Martes" | "Miercoles" | "Jueves" | "Viernes";
 
-export const dias: Dia[] = ["Lunes", "Martes", "Miercoles", "Jueves", "Viernes"]
+export const dias: Dia[] = ["Lunes", "Martes", "Miercoles", "Jueves", "Viernes"];
 export const horas = [
     "07:00 - 07:50",
     "07:50 - 08:40",
-    "08:40 - 08:50",
     "08:50 - 09:40",
     "09:40 - 10:30",
-    "10:30 - 10:40",
     "10:40 - 11:30",
     "11:30 - 12:20",
     "12:20 - 13:10",
     "13:10 - 14:00",
     "14:00 - 14:50",
     "14:50 - 15:40",
-    "15:40 - 15:50",
     "15:50 - 16:40",
     "16:40 - 17:30",
-    "17:30 - 17:40",
     "17:40 - 18:30",
     "18:30 - 19:20",
     "19:20 - 20:10",
     "20:10 - 21:00",
     "21:00 - 21:00",
-]
+];
 export const horasDescanso = [
     "08:40 - 08:50",
     "10:30 - 10:40",
     "15:40 - 15:50",
     "17:30 - 17:40",
-]
+];
 
-const numImgGuardado = Number(localStorage.getItem("num-img") ?? "1")
+const numImgGuardado = Number(localStorage.getItem("num-img") ?? "0");
-const tamanoLetraGuardado = Number(localStorage.getItem("tamano-letra") ?? "16")
+const tamanoLetraGuardado = Number(/* localStorage.getItem("tamano-letra") ?? */ "16");
 
-export const [modoColor, setModoColor] = createSignal(ModoColor.Oscuro)
+export const [numWallpaper, setNumWallpaper] = createSignal(numImgGuardado);
-export const [numWallpaper, setNumWallpaper] = createSignal(numImgGuardado)
+export const [tamanoLetra, setTamanoLetra] = createSignal(tamanoLetraGuardado);
-export const [mostrarDescansos, setMostrarDescansos] = createSignal(true)
+export const [isMobile, setIsMobile] = createSignal(screen.width < 500);
-export const [tamanoLetra, setTamanoLetra] = createSignal(tamanoLetraGuardado)

src/Views/Editor.tsx

@@ -1,15 +1,13 @@
-import { BarraSuperior } from "../BarraSuperior"
+import { BarraSuperior } from "../BarraSuperior";
-import { estilosGlobales } from "../Estilos"
+import { estilosGlobales } from "../Estilos";
-import { StyleSheet, css } from "aphrodite"
+import { StyleSheet, css } from "aphrodite";
-import { Separador } from "../Separador"
+import { Separador } from "../Separador";
-import { Tabla } from "../ContenedorHorarios/Tabla"
+import { Tabla } from "../ContenedorHorarios/Tabla";
-import YAML from "yaml"
+import { TablaObserver } from "../ContenedorHorarios/TablaObserver";
-import { TablaObserver } from "../ContenedorHorarios/TablaObserver"
+import { Curso, Cursos } from "../types/DatosHorario";
-import { Curso, Cursos } from "../types/DatosHorario"
+import { For, createMemo } from "solid-js";
-import { CursosElem } from "../ContenedorHorarios/CursosElem"
+import {createStore} from "solid-js/store";
-import { For, createMemo } from "solid-js"
+import { CursoEditor } from "./Editor/CursoEditor";
-import {createStore} from "solid-js/store"
-import { CursoEditor } from "./Editor/CursoEditor"
 
 const e = StyleSheet.create({
     contenedorGlobal: {
@@ -19,7 +17,7 @@ const e = StyleSheet.create({
         alignItems: "center",
         justifyContent: "center",
     },
-})
+});
 
 interface Data {
     indice: number,
@@ -40,39 +38,39 @@ const [nuevaData, setNuevaData] = createStore<Data>({
             },
         },
     }],
-})
+});
 
 type FormEvent = Event & { submitter: HTMLElement; } & { currentTarget: HTMLFormElement; target: HTMLFormElement; }
 export function Editor() {
-    const tablaObserver = new TablaObserver()
+    const tablaObserver = new TablaObserver();
-    const dataWrapper = createMemo(() => nuevaData)
+    const dataWrapper = createMemo(() => nuevaData);
 
     const agregarCurso = (ev: FormEvent) => {
-        ev.preventDefault()
+        ev.preventDefault();
 
         /// @ts-ignore
-        const nombreCurso: string = ev.target.elements.nombre_curso.value
+        const nombreCurso: string = ev.target.elements.nombre_curso.value;
         /// @ts-ignore
-        const nombreAbreviado: string = ev.target.elements.nombre_abreviado.value
+        const nombreAbreviado: string = ev.target.elements.nombre_abreviado.value;
 
         const curso: Curso = {
             nombre: nombreCurso,
             abreviado: nombreAbreviado,
             oculto: false,
             Teoria: {},
-        }
+        };
 
-        setNuevaData("cursos", nuevaData.indice, curso)
+        setNuevaData("cursos", nuevaData.indice, curso);
-        setNuevaData("indice", (i) => i + 1)
+        setNuevaData("indice", (i) => i + 1);
-    }
+    };
 
     const data = createMemo<Cursos>(() => {
-        const o: Cursos = {}
+        const o: Cursos = {};
         nuevaData.cursos.forEach((c) => {
-            o[c.nombre] = c
+            o[c.nombre] = c;
-        })
+        });
-        return o
+        return o;
-    })
+    });
 
     return (
         <div>
@@ -127,5 +125,5 @@ export function Editor() {
             </div>
 
         </div>
-    )
+    );
 }

src/Views/Index.tsx

@@ -1,6 +1,8 @@
-import { estilosGlobales } from "../Estilos"
+import { estilosGlobales } from "../Estilos";
-import { StyleSheet, css } from "aphrodite"
+import { StyleSheet, css } from "aphrodite/no-important";
-import { RouterLink } from "../Router"
+import { RouterLink } from "../Router";
+import { Show } from "solid-js";
+import { isMobile } from "../Store";
 
 const e = StyleSheet.create({
     contenedorGlobal: {
@@ -27,60 +29,107 @@ const e = StyleSheet.create({
         verticalAlign: "bottom",
         marginRight: "0.5rem",
     },
-})
+});
+
+function MobileIndex() {
+    const s = StyleSheet.create({
+        boton: {
+            backgroundColor: "var(--color-primario)",
+            color: "white",
+            padding: "1rem 5rem",
+            borderRadius: "25px",
+            margin: "1.5rem 0",
+            boxShadow: "2px 2px 2px 0 gray",
+            cursor: "pointer",
+        },
+        entrada: {
+            borderTop: "none",
+            borderRight: "none",
+            borderLeft: "none",
+            borderBottom: "solid 2px gray",
+            padding: "0.75rem 1rem",
+        },
+    });
+
+    const inputElement = <input type="email" placeholder="Correo electronico" className={css(s.entrada)} />;
+
+    const login = () => {
+        console.log((inputElement as HTMLInputElement).value);
+    };
+
+    return (
+        <div className={css(e.contenedorGlobal)}>
+            <div style="text-align: center;">
+                <h1>Iniciar sesión</h1>
+                <br />
+                <br />
+                {inputElement}
+                <br />
+                <button className={css(s.boton)} onClick={login}>Iniciar Sesion</button>
+            </div>
+        </div>
+    );
+}
 
 export function Index() {
     return (
-        <div className={css(e.contenedorGlobal)}>
+        <>
-            <div className={css(e.cont)}>
+            <Show when={!isMobile()}>
-                <div className={css(estilosGlobales.contenedor, estilosGlobales.inlineBlock, e.cont)}>
+                <div className={css(e.contenedorGlobal)}>
-                    <h1 style={{
+                    <div className={css(e.cont)}>
-                        "text-align": "center",
+                        <div className={css(estilosGlobales.contenedor, estilosGlobales.inlineBlock, e.cont)}>
-                        "font-size": "1.75rem",
+                            <h1 style={{
-                    }}
+                                "text-align": "center",
-                    >
+                                "font-size": "1.75rem",
-                        Horarios UNSA
+                            }}
-                    </h1>
+                            >
-                    <p className={css(e.parrafo)}>
+                                Horarios UNSA
-                        Esta página te permite crear tu horario fácilmente, sin importar de que
+                            </h1>
-                        año son los cursos.
+                            <p className={css(e.parrafo)}>
-                    </p>
+                                Esta página te permite crear tu horario fácilmente, sin importar de que
-                    <p className={css(e.parrafo)}>
+                                año son los cursos.
-                        Por ahora solo está disponible para ing. de sistemas. Proximamente se habilitarán
+                            </p>
-                        otras carreras.
+                            <p className={css(e.parrafo)}>
-                    </p>
+                                Por ahora solo está disponible para ing. de sistemas. Proximamente se habilitarán
-                    <p className={css(e.parrafo)}>
+                                otras carreras.
-                        Se recomienda usar un computador/laptop y un navegador actualizado (Firefox, Chrome,
+                            </p>
-                        Qutebrowser).
+                            <p className={css(e.parrafo)}>
-                    </p>
+                                Se recomienda usar un computador/laptop y un navegador actualizado (Firefox, Chrome,
-                </div>
+                                Qutebrowser).
-                <RouterLink
+                            </p>
-                    to={"/sistemas/"}
+                        </div>
-                    className={css(estilosGlobales.contenedor, estilosGlobales.contenedorCursor, e.botonAccion)}
+                        <RouterLink
-                >
+                            to={"/sistemas/"}
-                    Ing. de Sistemas
+                            className={css(estilosGlobales.contenedor, estilosGlobales.contenedorCursor, e.botonAccion)}
-                </RouterLink>
+                        >
-                {/*
+                            Ing. de Sistemas
+                        </RouterLink>
+                        {/*
                 <button disabled className={css(estilosGlobales.contenedor, estilosGlobales.contenedorCursor, e.botonAccion)}>
                     Otras carreras
                 </button>
                 */}
-                <RouterLink
+                        <RouterLink
-                    to={"/editor/"}
+                            to={"/editor/"}
-                    className={css(estilosGlobales.contenedor, estilosGlobales.contenedorCursor, e.botonAccion)}
+                            className={css(estilosGlobales.contenedor, estilosGlobales.contenedorCursor, e.botonAccion)}
-                >
+                        >
-                    <i className={`${css(e.iconoGitHub)} ph-pencil`} />
+                            <i className={`${css(e.iconoGitHub)} ph-pencil`} />
-                    Editor
+                            Editor
-                </RouterLink>
+                        </RouterLink>
-                <a
+                        <a
-                    className={css(estilosGlobales.contenedor, estilosGlobales.contenedorCursor, e.botonAccion)}
+                            className={css(estilosGlobales.contenedor, estilosGlobales.contenedorCursor, e.botonAccion)}
-                    href="https://github.com/Araozu/horarios-unsa-2/"
+                            href="https://github.com/Araozu/horarios-unsa-2/"
-                    target="_blank"
+                            target="_blank"
-                >
+                        >
-                    <i className={`${css(e.iconoGitHub)} ph-code`} />
+                            <i className={`${css(e.iconoGitHub)} ph-code`} />
-                    Código fuente en GitHub
+                            Código fuente en GitHub
-                </a>
+                        </a>
-            </div>
+                    </div>
-        </div>
+                </div>
-    )
+            </Show>
+            <Show when={isMobile()}>
+                <MobileIndex />
+            </Show>
+        </>
+    );
 }

src/Wallpaper.tsx

@@ -1,13 +1,13 @@
-import { StyleSheet, css } from "aphrodite"
+import { StyleSheet, css } from "aphrodite";
-import { numWallpaper } from "./Store"
+import { numWallpaper } from "./Store";
-import { createEffect } from "solid-js"
+import { createEffect } from "solid-js";
-import {createStore} from "solid-js/store"
+import {createStore} from "solid-js/store";
 
-const duracionTransicion = 250
+const duracionTransicion = 250;
 
 export function Wallpaper() {
     /// @ts-ignore
-    const soportaBackdropFilter = document.body.style.backdropFilter !== undefined
+    const soportaBackdropFilter = document.body.style.backdropFilter !== undefined;
 
     const estilos = StyleSheet.create({
         contenedorCover: {
@@ -32,32 +32,32 @@ export function Wallpaper() {
         coverTransicion: {
             opacity: 0,
         },
-    })
+    });
 
     const [estilosRaw, setEstilosRaw] = createStore({
         "background-image": "none",
         opacity: 1,
-    })
+    });
 
     createEffect(() => {
-        const numImg = numWallpaper()
+        const numImg = numWallpaper();
-        setEstilosRaw("opacity", 0)
+        setEstilosRaw("opacity", 0);
 
         const promesa250ms = new Promise((resolve) => {
-            setTimeout(resolve, duracionTransicion)
+            setTimeout(resolve, duracionTransicion);
-        })
+        });
 
-        const url = `/img/wall${numImg}.webp`
+        const url = `/img/wall${numImg}.webp`;
-        const img = new Image()
+        const img = new Image();
         img.addEventListener("load", async() => {
-            await promesa250ms
+            await promesa250ms;
             setEstilosRaw({
                 "background-image": `url('${url}')`,
                 opacity: 1,
-            })
+            });
-        })
+        });
-        img.src = url
+        img.src = url;
-    })
+    });
 
     return (
         <div className={css(estilos.contenedorCover)}>
@@ -66,6 +66,6 @@ export function Wallpaper() {
                 style={{"background-image": estilosRaw["background-image"], opacity: estilosRaw.opacity}}
             />
         </div>
-    )
+    );
 
 }

src/index.tsx

@@ -1,7 +1,7 @@
-import "solid-js"
+import "solid-js";
-import { render } from "solid-js/web"
+import { render } from "solid-js/web";
-import App from "./App"
+import App from "./App";
-import "normalize.css"
+import "normalize.css";
-import "./styles/global.css"
+import "./styles/global.css";
 
-render(App, document.getElementById("root") as Node)
+render(App, document.getElementById("root") as Node);

src/styles/global.css

@@ -1,9 +1,47 @@
+:root {
+    --color-texto: white;
+    --color-primario: #531925;
+}
+
+body {
+    color: var(--color-texto);
+}
+
+[class^="ph-"], [class*=" ph-"] ::before {
+    font-size: 0.8rem;
+}
+
+* {
+    color: var(--color-texto);
+}
+
 body {
     font-family: Inter, sans-serif;
+    color: var(--color-texto);
 }
 
 button {
     background-color: transparent;
-    color: var(--color);
+    color: var(--color-texto);
     border: none;
 }
+
+h1 {
+    font-weight: 600;
+}
+
+h2 {
+    font-weight: 500;
+}
+
+@media screen and (max-width: 500px) {
+    .hide-on-small {
+        display: none !important;
+    }
+}
+
+@media screen and (min-width: 501px) {
+    .hide-on-big {
+
+    }
+}