From eff70ef9d56b030f05b1d90ab92551caeb00f9b5 Mon Sep 17 00:00:00 2001
From: Araozu <faraoz@unsa.edu.pe>
Date: Mon, 22 Feb 2021 21:05:01 -0500
Subject: [PATCH] Agregar mensaje que se muestra a navegadores que no soportan
 backdrop-filter

---
 src/App.tsx                          | 13 +++++++++++++
 src/ContenedorHorarios/MiHorario.tsx |  3 +++
 src/Wallpaper.tsx                    | 10 ++++++++--
 src/index.tsx                        |  1 +
 src/styles/global.css                |  3 +++
 5 files changed, 28 insertions(+), 2 deletions(-)
 create mode 100644 src/styles/global.css

diff --git a/src/App.tsx b/src/App.tsx
index 06ec806..0c04cce 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,12 +1,25 @@
 import { BarraSuperior } from "./BarraSuperior";
 import { ContenedorHorarios } from "./ContenedorHorarios/";
 import { Wallpaper } from "./Wallpaper";
+import { Show } from "solid-js";
+import { css } from "aphrodite";
+import { estilosGlobales } from "./Estilos";
 
 function App() {
+    /// @ts-ignore
+    const soportaBackdropFilter = document.body.style.backdropFilter !== undefined;
+
     return (
         <div class="App">
             <Wallpaper/>
             <BarraSuperior/>
+            <Show when={!soportaBackdropFilter}>
+                <div className={css(estilosGlobales.contenedor)}>
+                    Tu navegador no soporta "backdrop-filter". Este es solo un efecto
+                    visual, no afecta la funcionalidad de la página.&nbsp;
+                    <span>No volver a mostrar.</span>
+                </div>
+            </Show>
             <br/>
             <ContenedorHorarios/>
         </div>
diff --git a/src/ContenedorHorarios/MiHorario.tsx b/src/ContenedorHorarios/MiHorario.tsx
index f73246a..6ee5e6d 100644
--- a/src/ContenedorHorarios/MiHorario.tsx
+++ b/src/ContenedorHorarios/MiHorario.tsx
@@ -46,11 +46,14 @@ export function MiHorario() {
             */}
         </div>
 
+
         <div className={css(
             e.horario,
             estilosGlobales.contenedor
         )}>
             <Tabla data={{}} anio={"Mi horario"} version={1}/>
         </div>
+
+
     </div>;
 }
diff --git a/src/Wallpaper.tsx b/src/Wallpaper.tsx
index 5528423..b50c106 100644
--- a/src/Wallpaper.tsx
+++ b/src/Wallpaper.tsx
@@ -5,6 +5,10 @@ import { createSignal, createMemo, createEffect, createState } from "solid-js";
 const duracionTransicion = 250;
 
 export function Wallpaper() {
+    /// @ts-ignore
+    const soportaBackdropFilter = document.body.style.backdropFilter !== undefined;
+    console.log("Soporta backdrop-filter?:", soportaBackdropFilter);
+
     const estilos = StyleSheet.create({
         contenedorCover: {
             position: "fixed",
@@ -12,7 +16,8 @@ export function Wallpaper() {
             height: "100vh",
             top: "0",
             left: "0",
-            backgroundColor: "#212121"
+            backgroundColor: "#212121",
+            zIndex: -1
         },
         cover: {
             width: "100vw",
@@ -20,7 +25,8 @@ export function Wallpaper() {
             backgroundPosition: "center",
             backgroundSize: "cover",
             zIndex: -1,
-            transition: `opacity ${duracionTransicion}ms`
+            transition: `opacity ${duracionTransicion}ms`,
+            filter: soportaBackdropFilter? "": "blur(40px)"
         },
         coverTransicion: {
             opacity: 0
diff --git a/src/index.tsx b/src/index.tsx
index efdd7d0..d545069 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -2,5 +2,6 @@ import "solid-js";
 import { render } from 'solid-js/web';
 import App from './App';
 import "normalize.css";
+import "./styles/global.css";
 
 render(App, document.getElementById('root') as Node);
diff --git a/src/styles/global.css b/src/styles/global.css
new file mode 100644
index 0000000..0ef6959
--- /dev/null
+++ b/src/styles/global.css
@@ -0,0 +1,3 @@
+body {
+    font-family: Inter, sans-serif;
+}