From 37d0b103886fc59f89323d69da0a7f4ad1d83b41 Mon Sep 17 00:00:00 2001
From: Stefano Pigozzi <me@steffo.eu>
Date: Fri, 4 Feb 2022 18:41:40 +0100
Subject: [PATCH] Add screen width warnings

---
 components/compat-old.tsx            | 28 ++++----
 components/warn.module.css           | 11 ++++
 components/warn.tsx                  | 21 ++++++
 pages/_app.tsx                       | 22 +++----
 pages/index.tsx                      |  2 +
 pages/year2/calcolo/index.tsx        |  2 +
 pages/year2/database/index.tsx       |  2 +
 pages/year2/fisica/index.tsx         |  2 +
 pages/year2/ottimizzazione/index.tsx |  2 +
 pages/year2/statistica/index.tsx     |  2 +
 pages/year3/gestione/index.tsx       |  2 +
 pages/year3/gestione/teoria.tsx      | 95 ++++++++++------------------
 12 files changed, 107 insertions(+), 84 deletions(-)
 create mode 100644 components/warn.module.css
 create mode 100644 components/warn.tsx

diff --git a/components/compat-old.tsx b/components/compat-old.tsx
index 57de84e..2e1c0fe 100644
--- a/components/compat-old.tsx
+++ b/components/compat-old.tsx
@@ -5,7 +5,7 @@ import 'katex/dist/katex.min.css';
 
 
 export const Split = ({title = undefined, children}: any) => {
-    return (
+    return <>
         <Bluelib.Chapter>
             {title ?
                 <Bluelib.Heading level={3}>
@@ -14,9 +14,8 @@ export const Split = ({title = undefined, children}: any) => {
             : null}
             {children}
         </Bluelib.Chapter>
-    )
+    </>
 }
-export const Section = Split
 
 export const Box = ({title = undefined, children, color = undefined}: any) => {
     return (
@@ -31,12 +30,6 @@ export const Box = ({title = undefined, children, color = undefined}: any) => {
     )
 }
 
-export const Example = (props: any) => {
-    return (
-        <Bluelib.Panel builtinColor="magenta" style={{minWidth: "auto"}} {...props}/>
-    )
-}
-
 export const Plus = (props: any) => {
     return (
         <Bluelib.BaseElement builtinColor={"red"} kind="span" {...props}/>
@@ -123,14 +116,27 @@ export const Image = (props: any) => {
     )
 }
 
-export const Latex = LatexMath
+
+export const Aside = (props: any) => {
+    return (
+        <Bluelib.Parenthesis {...props}/>
+    )
+}
+
+export const Example = (props: any) => {
+    return (
+        <Aside builtinColor="magenta" {...props}/>
+    )
+}
+
+export const Section = Split
 export const Panel = Box
+export const Latex = LatexMath
 export const B = Bluelib.BringAttention
 export const I = Bluelib.Idiomatic
 export const LI = Bluelib.ListUnordered.Item
 export const Anchor = Bluelib.Anchor
 export const Link = Bluelib.Anchor
 export const BaseLink = Bluelib.Anchor
-export const Aside = Bluelib.Parenthesis
 
 export const r = String.raw
diff --git a/components/warn.module.css b/components/warn.module.css
new file mode 100644
index 0000000..25ee082
--- /dev/null
+++ b/components/warn.module.css
@@ -0,0 +1,11 @@
+@media screen and (min-width: 420px) {
+    .warn420 {
+        display: none;
+    }
+}
+
+@media screen and (min-width: 1024px) {
+    .warn1024 {
+        display: none;
+    }
+}
diff --git a/components/warn.tsx b/components/warn.tsx
new file mode 100644
index 0000000..bd75d22
--- /dev/null
+++ b/components/warn.tsx
@@ -0,0 +1,21 @@
+import * as React from "react"
+import * as Bluelib from "@steffo/bluelib-react"
+import style from "./warn.module.css"
+
+
+export const Warn420 = () => {
+    return (
+        <Bluelib.Panel builtinColor="yellow" className={style.warn420}>
+            ⚠️ Unisteffo richiede uno schermo largo almeno 420px.
+        </Bluelib.Panel>
+    )
+}
+
+
+export const Warn1024 = () => {
+    return (
+        <Bluelib.Panel builtinColor="yellow" className={style.warn1024}>
+            ⚠️ Appuntiweb richiede uno schermo largo almeno 1024px.
+        </Bluelib.Panel>
+    )
+}
diff --git a/pages/_app.tsx b/pages/_app.tsx
index fd0aebf..15dc114 100644
--- a/pages/_app.tsx
+++ b/pages/_app.tsx
@@ -20,19 +20,19 @@ function MyApp({ Component, pageProps }: AppProps) {
                             </Link>
                         </Heading>
                         <Component {...pageProps} />
+                        <Footer>
+                            <p>
+                                © {new Date().getFullYear()} <A href="https://steffo.eu/">Stefano Pigozzi</A> - Tutto il contenuto del sito è reso disponibile con la licenza <A href="https://creativecommons.org/licenses/by-sa/3.0/it/">CC-BY-SA 3.0 IT</A>.
+                            </p>
+                            <p>
+                                Sito web <A href="https://github.com/Steffo99/appuntiweb-omega">open source</A> basato su <A href="https://github.com/Steffo99/bluelib">Bluelib</A> e <A href="https://github.com/Steffo99/bluelib-react">Bluelib React</A>
+                            </p>
+                            <p>
+                                Se il contenuto di questo sito ti è utile, <A href="https://ko-fi.com/steffo">offrimi un caffè</A>!
+                            </p>
+                        </Footer>
                     </LayoutThreeCol.Center>
                 </LayoutThreeCol>
-                <Footer>
-                    <p>
-                        © {new Date().getFullYear()} <A href="https://steffo.eu/">Stefano Pigozzi</A> - Tutto il contenuto del sito è reso disponibile con la licenza <A href="https://creativecommons.org/licenses/by-sa/3.0/it/">CC-BY-SA 3.0 IT</A>.
-                    </p>
-                    <p>
-                        Sito web <A href="https://github.com/Steffo99/appuntiweb-omega">open source</A> basato su <A href="https://github.com/Steffo99/bluelib">Bluelib</A> e <A href="https://github.com/Steffo99/bluelib-react">Bluelib React</A>
-                    </p>
-                    <p>
-                        Se il contenuto di questo sito ti è utile, <A href="https://ko-fi.com/steffo">offrimi un caffè</A>!
-                    </p>
-                </Footer>
             </Bluelib>
         </Theme.Provider>
 	)
diff --git a/pages/index.tsx b/pages/index.tsx
index 5eb1112..34e3e72 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -2,6 +2,7 @@ import { Heading, Chapter, Box, Idiomatic as I, Anchor as A, ListUnordered, List
 import type { NextPage } from 'next'
 import { Link } from "../components/link"
 import { ThemeSwitcher } from '../components/theme-switcher'
+import { Warn420 } from '../components/warn'
 
 
 const Home: NextPage = () => {
@@ -14,6 +15,7 @@ const Home: NextPage = () => {
                 <Heading level={3}>
                     Dove sono?
                 </Heading>
+                <Warn420/>
                 <p>
                     Ciao! Benvenuto a <I>Unisteffo</I>, il sito su cui è caricato tutto il materiale per lo studio che ho utilizzato durante il mio percorso universitario!
                 </p>
diff --git a/pages/year2/calcolo/index.tsx b/pages/year2/calcolo/index.tsx
index aa3d882..b90062e 100644
--- a/pages/year2/calcolo/index.tsx
+++ b/pages/year2/calcolo/index.tsx
@@ -1,6 +1,7 @@
 import { Heading, Chapter, Box, Idiomatic as I, Panel, ListUnordered } from "@steffo/bluelib-react";
 import { NextPage } from "next";
 import { Link } from "../../../components/link";
+import { Warn1024 } from "../../../components/warn";
 
 
 const Page: NextPage = () => {
@@ -34,6 +35,7 @@ const Page: NextPage = () => {
                         <Heading level={4}>
                             Appuntiweb
                         </Heading>
+                        <Warn1024/>
                         <ListUnordered>
                             <ListUnordered.Item>
                                 <Link href="/year2/calcolo/teoria">
diff --git a/pages/year2/database/index.tsx b/pages/year2/database/index.tsx
index 3eff8c7..343f246 100644
--- a/pages/year2/database/index.tsx
+++ b/pages/year2/database/index.tsx
@@ -1,6 +1,7 @@
 import { Heading, Chapter, Box, Panel, Idiomatic as I, ListUnordered } from "@steffo/bluelib-react";
 import { NextPage } from "next";
 import { Link } from "../../../components/link";
+import { Warn1024 } from "../../../components/warn";
 
 
 const Page: NextPage = () => {
@@ -43,6 +44,7 @@ const Page: NextPage = () => {
                         <Heading level={4}>
                             Appuntiweb
                         </Heading>
+                        <Warn1024/>
                         <ListUnordered>
                             <ListUnordered.Item>
                                 <Link href="/year2/database/teoria">
diff --git a/pages/year2/fisica/index.tsx b/pages/year2/fisica/index.tsx
index 5787e29..8ccb403 100644
--- a/pages/year2/fisica/index.tsx
+++ b/pages/year2/fisica/index.tsx
@@ -1,6 +1,7 @@
 import { ListUnordered } from "@steffo/bluelib-react"
 import {Heading, Chapter, Box, Panel, Idiomatic as I} from "@steffo/bluelib-react"
 import { Link } from "../../../components/link"
+import { Warn1024 } from "../../../components/warn"
 
 
 export default function Fisica() {
@@ -28,6 +29,7 @@ export default function Fisica() {
                         <Heading level={4}>
                             Appuntiweb
                         </Heading>
+                        <Warn1024/>
                         <ListUnordered>
                             <ListUnordered.Item>
                                 <Link href="/year2/fisica/teoria">
diff --git a/pages/year2/ottimizzazione/index.tsx b/pages/year2/ottimizzazione/index.tsx
index dfcc537..8b71107 100644
--- a/pages/year2/ottimizzazione/index.tsx
+++ b/pages/year2/ottimizzazione/index.tsx
@@ -1,6 +1,7 @@
 import { Heading, Chapter, Box, Panel, Idiomatic as I, ListUnordered, Emphasis } from '@steffo/bluelib-react'
 import { Link } from '../../../components/link'
 import type { NextPage } from 'next'
+import { Warn1024 } from '../../../components/warn'
 
 
 const Page: NextPage = () => {
@@ -34,6 +35,7 @@ const Page: NextPage = () => {
                         <Heading level={4}>
                             Appuntiweb
                         </Heading>
+                        <Warn1024/>
                         <ListUnordered>
                             <ListUnordered.Item>
                                 <Link href="/year2/ottimizzazione/teoria">
diff --git a/pages/year2/statistica/index.tsx b/pages/year2/statistica/index.tsx
index b65ade0..351c30f 100644
--- a/pages/year2/statistica/index.tsx
+++ b/pages/year2/statistica/index.tsx
@@ -1,5 +1,6 @@
 import {Heading, Chapter, Panel, Idiomatic as I, Box, ListUnordered} from "@steffo/bluelib-react"
 import { Link } from "../../../components/link"
+import { Warn1024 } from "../../../components/warn"
 
 
 export default function Statistica() {
@@ -30,6 +31,7 @@ export default function Statistica() {
                         <Heading level={4}>
                             Appuntiweb
                         </Heading>
+                        <Warn1024/>
                         <ListUnordered>
                             <ListUnordered.Item>
                                 <Link href="/year2/statistica/teoria">
diff --git a/pages/year3/gestione/index.tsx b/pages/year3/gestione/index.tsx
index 7ee98e8..d0c27e9 100644
--- a/pages/year3/gestione/index.tsx
+++ b/pages/year3/gestione/index.tsx
@@ -1,6 +1,7 @@
 import { Heading, Chapter, Box, Idiomatic as I, Panel, ListUnordered } from '@steffo/bluelib-react'
 import type { NextPage } from 'next'
 import { Link } from '../../../components/link'
+import { Warn1024 } from '../../../components/warn'
 
 const Page: NextPage = () => {
     return <>
@@ -33,6 +34,7 @@ const Page: NextPage = () => {
                         <Heading level={4}>
                             Appuntiweb
                         </Heading>
+                        <Warn1024/>
                         <ListUnordered>
                             <ListUnordered.Item>
                                 <Link href="/year3/gestione/teoria">Appunti di teoria</Link>
diff --git a/pages/year3/gestione/teoria.tsx b/pages/year3/gestione/teoria.tsx
index 8358974..4f58abe 100644
--- a/pages/year3/gestione/teoria.tsx
+++ b/pages/year3/gestione/teoria.tsx
@@ -42,41 +42,10 @@ const UIN = () => <Help text={`User Information Need, una descrizione in linguag
 const Page: NextPage = () => {
     return <>
         <Heading level={2}>
-            <Link href="/year2/ottimizzazione">
-                Ottimizzazione lineare intera
+            <Link href="/year3/gestione">
+                Gestione dell'informazione
             </Link>
         </Heading>
-        <Split title={"Gestione dell'informazione"}>
-            <Box title={"Di cosa si tratta?"}>
-                <P>
-                    Si parla di <B>come processare enormi quantità di testo</B> al fine di <B>effettuarvi
-                                                                                                ricerche</B>.
-                </P>
-                <Aside>
-                    Praticamente, si parla di come funzionano i motori di ricerca!
-                </Aside>
-            </Box>
-            <Box title={"Il corso all'Unimore"}>
-                <P>
-                    🎓 Il corso è stato tenuto dalla <Anchor href={"mailto:federica.mandreoli@unimore.it"}>Prof.ssa Federica Mandreoli</Anchor>.
-                </P>
-                <P>
-                    📘 Le dispense sono disponibili su <Anchor href={"https://dolly.fim.unimore.it/2020/course/view.php?id=69"}>Dolly (FIM)</Anchor>.
-                </P>
-                <P>
-                    🎥 Le videolezioni <Color builtin={"red"}><abbr title={"Per via di una stupidissima politica di Unimore che prevede la cancellazione due settimane dopo la pubblicazione."}>sono state eliminate</abbr></Color>.
-                </P>
-            </Box>
-            <Box title={"Materiale utilizzato"}>
-                <ul>
-                    <LI><Anchor href={"https://dolly.fim.unimore.it/2020/course/view.php?id=69"}>📄 Dispense su Dolly</Anchor></LI>
-                    <LI><Anchor href={"https://www.wikipedia.org/"}>📰 Wikipedia</Anchor></LI>
-                    <LI><Anchor href={"https://gitlab.com/2429571/gestione-informazione"}>🗒️ Appunti open-source di Sharon Guerzoni</Anchor></LI>
-                    <LI><Anchor href={"https://www.pearson.com/uk/educators/higher-education-educators/program/Baeza-Yates-Modern-Information-Retrieval-The-Concepts-and-Technology-behind-Search-2nd-Edition/PGM804983.html"}>📘 Libro di testo consigliato</Anchor></LI>
-                    <LI><Anchor href={"https://nlp.stanford.edu/IR-book/"}>🌐 Introduction to Information Retrieval</Anchor></LI>
-                </ul>
-            </Box>
-        </Split>
         <Split title={"Information Retrieval"}>
             <Box title={"Cos'è?"}>
                 <P>
@@ -96,8 +65,10 @@ const Page: NextPage = () => {
                     Possono essere di vario tipo: <B>pagine web</B>, <B>metadati di file</B>, <B>paper accademici</B>...
                 </P>
                 <Aside>
-                    Ad esempio, i documenti di <Anchor href={"https://google.com"}>Google Search</Anchor> sono le <B>pagine web</B>.
-                    <Image src={"/images/year3/gestione/documents.png"} alt={"I documenti di Google per il dominio steffo.eu"}/>
+                    <p>
+                        Ad esempio, i documenti di <Anchor href={"https://google.com"}>Google Search</Anchor> sono le <B>pagine web</B>.
+                    </p>
+                    <Image src={"/images/year3/gestione/documents.png"} alt={"I documenti di Google per il dominio steffo.eu"} width={297} height={112}/>
                 </Aside>
                 <P>
                     Vengono raccolti in svariati modi: possono provenire da <B><API/></B>, essere forniti manualmente e poi processati con un <B>parser</B>, essere scoperti tramite <B>web crawling</B> e processati tramite <B>web scraping</B>...
@@ -114,8 +85,10 @@ const Page: NextPage = () => {
                     La <B>richiesta di informazioni</B> effettuata da un utente, in un <B>linguaggio</B> che il motore di ricerca è <B>in grado di capire</B>.
                 </P>
                 <Aside>
-                    In pratica, è quello che scrivi sulla casella di ricerca di Google!
-                    <Image src={"/images/year3/gestione/query.png"} alt={"Un esempio di query su Google"}/>
+                    <p>
+                        In pratica, è quello che scrivi sulla casella di ricerca di Google!
+                    </p>
+                    <Image src={"/images/year3/gestione/query.png"} alt={"Un esempio di query su Google"} width={297} height={143}/>
                 </Aside>
                 <P>
                     Solitamente vi è possibile inserire <B>parole chiave</B> e <B>operatori</B> per specificare cosa
@@ -137,9 +110,11 @@ const Page: NextPage = () => {
                     sezione del documento più rilevante.
                 </P>
                 <Aside>
-                    Google Search mostra <B>URL</B>, <B>titolo</B> e <B>descrizione</B> della pagina (o un
-                    suo <B>estratto</B> se una descrizione non è disponibile).
-                    <Image src={"/images/year3/gestione/result.png"} alt={"Una risposta di Google"}/>
+                    <p>
+                        Google Search mostra <B>URL</B>, <B>titolo</B> e <B>descrizione</B> della pagina (o un
+                        suo <B>estratto</B> se una descrizione non è disponibile).
+                    </p>
+                    <Image src={"/images/year3/gestione/result.png"} alt={"Una risposta di Google"} width={297} height={80}/>
                 </Aside>
             </Box>
         </Split>
@@ -644,7 +619,7 @@ const Page: NextPage = () => {
                             <P>
                                 È quello che fa di default Google:
                             </P>
-                            <Image src={"/images/year3/gestione/replacement.png"} alt={"Google ha corretto il token errato per me."}/>
+                            <Image src={"/images/year3/gestione/replacement.png"} alt={"Google ha corretto il token errato per me."} width={284} height={98}/>
                         </Aside>
                     </Box>
                     <Box title={"Visualizzazione"}>
@@ -658,7 +633,7 @@ const Page: NextPage = () => {
                             <P>
                                 È quello che fa Google quando non è sicuro della correzione proposta:
                             </P>
-                            <Image src={"/images/year3/gestione/suggestion.png"} alt={"Google suggerisce di correggere il token errato."}/>
+                            <Image src={"/images/year3/gestione/suggestion.png"} alt={"Google suggerisce di correggere il token errato."} width={238} height={80}/>
                         </Aside>
                     </Box>
                     <Box title={"Aggiunta"}>
@@ -1173,26 +1148,22 @@ const Page: NextPage = () => {
                         \\log \\frac{1 - P(k_i\\ |\\ \\overline{R}, \\vec{q})}{P(k_i\\ |\\ \\overline{R}, \\vec{q})}
                     `}</LatexMath></B>
                     <Split>
-                        <Color builtin={"lime"}>
-                            <Aside>
-                                <B><LatexMath block={true}>{`
-                                    \\log \\frac{P(k_i\\ |\\ R, \\vec{q})}{1 - P(k_i\\ |\\ R, \\vec{q})}
-                                `}</LatexMath></B>
-                                <P>
-                                    Il valore del primo &quot;blocco&quot; dipende dalla presenza del token <LatexMath>{`k_i`}</LatexMath> nei documenti <B>rilevanti</B>: più il token vi appare, più il valore sarà <B>alto</B>.
-                                </P>
-                            </Aside>
-                        </Color>
-                        <Color builtin={"red"}>
-                            <Aside>
-                                <B><LatexMath block={true}>{`
-                                    \\log \\frac{1 - P(k_i\\ |\\ \\overline{R}, \\vec{q})}{P(k_i\\ |\\ \\overline{R}, \\vec{q})}
-                                `}</LatexMath></B>
-                                <P>
-                                    Il valore del primo &quot;blocco&quot; dipende dalla presenza del token <LatexMath>{`k_i`}</LatexMath> nei documenti <B>non rilevanti</B>: più il token vi appare, più il valore sarà <B>basso</B>.
-                                </P>
-                            </Aside>
-                        </Color>
+                        <Aside builtinColor="lime">
+                            <B><LatexMath block={true}>{`
+                                \\log \\frac{P(k_i\\ |\\ R, \\vec{q})}{1 - P(k_i\\ |\\ R, \\vec{q})}
+                            `}</LatexMath></B>
+                            <P>
+                                Il valore del primo &quot;blocco&quot; dipende dalla presenza del token <LatexMath>{`k_i`}</LatexMath> nei documenti <B>rilevanti</B>: più il token vi appare, più il valore sarà <B>alto</B>.
+                            </P>
+                        </Aside>
+                        <Aside builtinColor="red">
+                            <B><LatexMath block={true}>{`
+                                \\log \\frac{1 - P(k_i\\ |\\ \\overline{R}, \\vec{q})}{P(k_i\\ |\\ \\overline{R}, \\vec{q})}
+                            `}</LatexMath></B>
+                            <P>
+                                Il valore del primo &quot;blocco&quot; dipende dalla presenza del token <LatexMath>{`k_i`}</LatexMath> nei documenti <B>non rilevanti</B>: più il token vi appare, più il valore sarà <B>basso</B>.
+                            </P>
+                        </Aside>
                     </Split>
                     <Aside>
                         In generale, <LatexMath>{`c_i`}</LatexMath> avrà un valore <Color builtin={"lime"}>positivo</Color> se è più probabile che il termine appaia in documenti rilevanti e non in quelli irrilevanti; in caso contrario, esso avrà valore <Color builtin={"red"}>negativo</Color>.