Aggiunti conttatti nell'help + Help anche su mobile

src/components/HamburgerMenu.jsx

@@ -1,4 +1,5 @@
 import { ComboBox } from './ComboBox.jsx'
+import { Help } from './Help.jsx'
 import { Icon } from './Icon.jsx'
 
 export const HamburgerMenu = ({ onClose, mode, setMode, source, setSource }) => {
@@ -39,6 +40,14 @@ export const HamburgerMenu = ({ onClose, mode, setMode, source, setSource }) =>
                     ]}
                 />
             </div>
+            <hr />
+            <div class="help">
+                <h2>
+                    <Icon name="info" />
+                    Guida
+                </h2>
+                <Help />
+            </div>
         </div>
     )
 }

src/components/Help.jsx

@@ -0,0 +1,39 @@
+import { Icon } from './Icon.jsx'
+
+export const Help = ({}) => (
+    <>
+        <h3>Selezione Corsi</h3>
+        <p>
+            Per visualizzare solo una selezione dei corsi disponibili, clicca su quelli che ti
+            interessano e poi nascondi gli altri con il tasto <Icon name="visibility" /> che
+            comparirà in basso a destra.
+        </p>
+        <p>
+            Per vedere l'orario settimanale, clicca su <b>Settimana</b>, che mostrerà un calendario
+            con i corsi attualmente selezionati.
+        </p>
+        <p>
+            La selezione effettuata verrà preservata dalla visualizzazione <b>Corsi</b> a quella
+            Settimana, permettendo di individuare eventuali sovrapposizioni di orari.
+        </p>
+        <p>
+            I corsi sono raggruppati per: primo, secondo, terzo anno (<b>I</b>,<b>II</b>,<b>III</b>)
+            e magistrale. Alternativamente, puoi scegliere fra tutti i corsi disponibili cliccando
+            su <b>Tutti</b>.
+        </p>
+        <h3>Stampa</h3>
+        <p>
+            Puoi stampare l'orario attualmente visibile con il bottone <Icon name="print" /> (è
+            consigliato controllare le opzioni di stampa per un risultato soddisfacente).
+        </p>
+        <h3>Bug &amp; Contatti</h3>
+        <p>
+            In caso di bug puoi creare una issue sulla repo git del progetto{' '}
+            <a href="https://git.phc.dm.unipi.it/phc/orario">
+                https://git.phc.dm.unipi.it/phc/orario
+            </a>{' '}
+            oppure puoi contattarci direttamente all'indirizzo{' '}
+            <a href="mailto:macchinisti@lists.dm.unipi.it">macchinisti@lists.dm.unipi.it</a>.
+        </p>
+    </>
+)

src/components/Popup.jsx

@@ -1,8 +1,17 @@
+import { useRef } from 'preact/hooks'
 import { Icon } from './Icon.jsx'
 
 export const Popup = ({ title, children, onClose }) => {
+    const popupLeaveRegionRef = useRef()
+
     return (
-        <div class="popup-container">
+        <div
+            class="popup-container"
+            ref={popupLeaveRegionRef}
+            onClick={e =>
+                popupLeaveRegionRef.current && popupLeaveRegionRef.current === e.target && onClose()
+            }
+        >
             <div class="popup">
                 <div class="header">
                     <div class="title">{title}</div>

src/main.jsx

@@ -5,6 +5,7 @@ import { ToolOverlay } from './components/CourseVisibility.jsx'
 
 import { EventsView } from './components/EventsView.jsx'
 import { HamburgerMenu } from './components/HamburgerMenu.jsx'
+import { Help } from './components/Help.jsx'
 import { Icon } from './components/Icon.jsx'
 import { Popup } from './components/Popup.jsx'
 import { Toolbar } from './components/Toolbar.jsx'
@@ -57,7 +58,7 @@ async function loadEventi(ids) {
         })
     )
 
-    console.log(calendari)
+    // console.log(calendari)
 
     if (ids.length === 1) {
         return calendari[0]
@@ -157,23 +158,7 @@ const App = ({}) => {
                     }
                     onClose={() => setHelpVisible(false)}
                 >
-                    <h2>Selezione Corsi</h2>
+                    <Help />
-                    <p>
-                        Per visualizzare solo una selezione dei corsi disponibili, clicca su quelli che ti interessano e poi nascondi gli altri con il tasto <Icon name="visibility"/> che comparirà in basso a destra.
-                    </p>
-                    <p>
-                        Per vedere l'orario settimanale, clicca su <b>Settimana</b>, che mostrerà un calendario con i corsi attualmente selezionati.
-                    </p>
-                    <p>
-                        La selezione effettuata verrà preservata dalla visualizzazione <b>Corsi</b> a quella Settimana, permettendo di individuare eventuali sovrapposizioni di orari.
-                    </p>
-                    <p>
-                        I corsi sono raggruppati per: primo, secondo, terzo anno (<b>I</b>,<b>II</b>,<b>III</b>) e magistrale. Alternativamente, puoi scegliere fra tutti i corsi disponibili cliccando su <b>Tutti</b>.
-                    </p>
-                    <h2>Stampa</h2>
-                    <p>
-                        Puoi stampare l'orario attualmente visibile con il bottone <Icon name="print"/> (è consigliato controllare le opzioni di stampa per un risultato soddisfacente).
-                    </p>
                 </Popup>
             )}
         </>

src/styles/main.scss

@@ -76,7 +76,16 @@ $heading-scale: 1.25;
         font-size: $base-font-size * $factor;
         font-weight: 500;
 
-        line-height: 1.5;
+        &:not(:first-child) {
+            padding-top: 0.5rem * $factor;
+        }
+
+        line-height: 1;
+
+        display: flex;
+        align-items: center;
+
+        gap: 0.5rem;
     }
 }
 
@@ -88,6 +97,8 @@ button,
 
     gap: 0.25rem;
 
+    color: var(--gray-900);
+
     background: var(--gray-000);
     border: 2px solid var(--gray-350);
     border-radius: 0.5rem;
@@ -124,6 +135,9 @@ button,
 
     &.icon {
         padding: 0.5rem;
+
+        width: 2.5rem;
+        height: 2.5rem;
     }
 
     &.flat {
@@ -254,7 +268,7 @@ button,
         padding-left: 0.75rem;
         padding-right: 0.75rem;
 
-        height: 2.5;
+        height: 2.5rem;
 
         &:first-child {
             padding-left: 1rem;
@@ -301,12 +315,14 @@ button,
     display: flex;
     flex-direction: column;
     gap: 0.5rem;
-    .material-symbols-outlined {
+
-        font-size: 18px;
-        vertical-align: text-top;
-    }
     p {
         line-height: 1.5;
+
+        .material-symbols-outlined {
+            font-size: 18px;
+            vertical-align: text-top;
+        }
     }
 }
 
@@ -325,7 +341,7 @@ body {
 .toolbar {
     @extend .panel;
 
-    padding: 1rem 0.5rem 1rem 1rem;
+    padding: 1rem 0.75rem 1rem 1rem;
 
     border-radius: 0;
     border: none;
@@ -341,7 +357,7 @@ body {
         display: flex;
         align-items: center;
 
-        gap: 1rem;
+        gap: 0.75rem;
 
         @media screen and (max-width: $device-s-width) and (orientation: portrait),
             screen and (max-height: $device-s-width) and (orientation: landscape) {
@@ -807,74 +823,91 @@ body {
     animation: fade-in 150ms ease-in forwards;
 }
 
-// not on mobile
+.menu {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100vw;
+    height: 100vh;
 
-@media screen and (min-width: $device-s-width) and (orientation: portrait),
+    background: var(--gray-000);
-    screen and (min-height: $device-s-width) and (orientation: landscape) {
-    .mobile {
-        display: none;
-    }
 
-    .menu {
+    z-index: 10;
-        display: none;
-    }
-}
 
-// on mobile
+    .header {
+        height: 4rem;
 
-@media screen and (max-width: $device-s-width) and (orientation: portrait),
-    screen and (max-height: $device-s-width) and (orientation: landscape) {
-    .toolbar {
         padding: 0.75rem 1rem 0.75rem 0.75rem;
-    }
 
-    .menu {
+        display: flex;
-        position: absolute;
+        align-items: center;
-        top: 0;
+        justify-content: space-between;
-        left: 0;
-        width: 100vw;
-        height: 100vh;
 
-        background: var(--gray-000);
+        border-bottom: 1px solid var(--gray-500);
+        .logo {
+            display: flex;
+            align-items: center;
 
-        z-index: 10;
+            img {
+                max-height: 2.5rem;
+            }
 
-        .header {
+            gap: 0.25rem;
-            height: 4rem;
+        }
+    }
 
-            padding: 0.75rem 1rem 0.75rem 0.75rem;
+    .options {
+        padding: 1rem;
 
-            display: flex;
+        display: grid;
-            align-items: center;
+        grid-template-columns: auto 1fr;
-            justify-content: space-between;
 
-            border-bottom: 1px solid var(--gray-500);
+        gap: 1rem;
-            .logo {
-                display: flex;
-                align-items: center;
 
-                img {
+        align-items: center;
-                    max-height: 2.5rem;
-                }
 
-                gap: 0.25rem;
+        .label {
-            }
+            font-weight: 400;
         }
+    }
 
-        .options {
+    hr {
-            padding: 1rem;
+        position: relative;
 
-            display: grid;
+        width: calc(100% - 2rem);
-            grid-template-columns: auto 1fr;
+        height: 1px;
+        left: 1rem;
 
-            gap: 1rem;
+        background: var(--gray-500);
+        border: none;
+    }
 
-            align-items: center;
+    .help {
+        @extend .text-block;
 
-            .label {
+        padding: 1rem 1rem 2.5rem;
-                font-weight: 400;
+    }
-            }
+}
-        }
+
+// not on mobile
+
+@media screen and (min-width: $device-s-width) and (orientation: portrait),
+    screen and (min-height: $device-s-width) and (orientation: landscape) {
+    .mobile {
+        display: none;
+    }
+
+    .menu {
+        display: none;
+    }
+}
+
+// on mobile
+
+@media screen and (max-width: $device-s-width) and (orientation: portrait),
+    screen and (max-height: $device-s-width) and (orientation: landscape) {
+    .toolbar {
+        padding: 0.75rem 1rem 0.75rem 0.75rem;
     }
 }