Finalizzazione nuovo layout da mobile

README.md

@@ -10,9 +10,12 @@ You need to have installed `node` and `npm` (or `pnpm`). To setup the project ju
 
 To start the development server run `npm run dev`.
 
-#### Prettier Options
+### Editor
+
+È meglio se prima di fare commit il codice sia formattato con Prettier, nel caso di VSCode c'è un'estensione omonima e le opzioni da aggiungere al proprio JSON di impostazioni sono
 
 ```json
+...
 "prettier.printWidth": 100,
 "prettier.singleQuote": true,
 "prettier.quoteProps": "consistent",
@@ -20,6 +23,7 @@ To start the development server run `npm run dev`.
 "prettier.semi": false,
 "prettier.arrowParens": "avoid",
 "editor.formatOnSave": true,
+...
 ```
 
 ### Production

src/components/CompoundButton.jsx

@@ -5,7 +5,11 @@ export const CompoundButton = ({ options, value, setValue }) => {
         <div class="compound">
             {options.map(option => (
                 <button
-                    class={withClasses(['radio', option.value === value && 'selected'])}
+                    class={withClasses([
+                        'radio',
+                        option.value === value && 'selected',
+                        option.icon && 'icon',
+                    ])}
                     onClick={() => setValue(option.value)}
                 >
                     {option.label}

src/components/HamburgerMenu.jsx

@@ -22,32 +22,6 @@ export const HamburgerMenu = ({ onClose, mode, setMode, source, setSource, theme
                     <img src="logo-circuit-board.svg" alt="logo" /> / <span>Orario</span>
                 </div>
             </div>
-            {/* <div class="options">
-				<div class="label">Gruppo Corsi</div>
-				<ComboBox
-					value={source}
-					setValue={setSource}
-					options={[
-						{ value: 'anno-1', label: 'I' },
-						{ value: 'anno-2', label: 'II' },
-						{ value: 'anno-3', label: 'III' },
-						{ value: 'magistrale', label: 'Magistrale' },
-						{ value: 'tutti', label: 'Tutti' },
-					]}
-				/>
-				<div class="label">Visualizzazione</div>
-				<ComboBox
-					value={mode}
-					setValue={setMode}
-					options={[
-						{ value: MODE_COURSE, label: 'Corsi' },
-						{ value: MODE_SCHEDULE, label: 'Giornaliera' },
-						{ value: MODE_WORKWEEK, label: 'Settimana' },
-						{ value: MODE_WORKWEEK_GRID, label: 'Schema' },
-					]}
-				/>
-			</div>
-			<hr /> */}
             <div class="help">
                 <h2>
                     <Icon name="info" />

src/components/Help.jsx

@@ -9,31 +9,41 @@ export const Help = ({}) => (
             comparirà in basso a destra.
         </p>
         <p>
-            Per vedere l'orario settimanale, clicca su <b>Settimana</b>, che mostrerà un calendario
+            Da desktop si può visualizzare l'orario settimanale cliccando su <b>Settimana</b> che
-            con i corsi attualmente selezionati.
+            mostrerà un calendario con i corsi attualmente selezionati.
         </p>
         <p>
-            La selezione effettuata verrà preservata dalla visualizzazione <b>Corsi</b> a quella
+            La selezione effettuata verrà preservata dalla visualizzazione <b>Corsi</b> a quella{' '}
-            Settimana, permettendo di individuare eventuali sovrapposizioni di orari.
+            <b>Settimana</b>, 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>)
+            I corsi sono raggruppati per: primo, secondo, terzo anno (rispettivamente <b>I</b>,{' '}
-            e magistrale. Alternativamente, puoi scegliere fra tutti i corsi disponibili cliccando
+            <b>II</b> e <b>III</b>) e magistrale (su mobile indicata con <b>M</b>).
-            su <b>Tutti</b>.
+            Alternativamente, puoi scegliere fra tutti i corsi disponibili cliccando su <b>Tutti</b>{' '}
+            (equivalente al tasto su <Icon name="apps" /> mobile).
+        </p>
+        <p>
+            Da mobile ci sono tre visualizzazioni possibili dei corsi, la modalità <b>Corsi</b>{' '}
+            <Icon name="list" /> mostra una lista dei corsi in ordine alfabetico con ogni lezione
+            per corso; <b>Schema</b> <Icon name="calendar_view_month" /> mostra uno schema compatto
+            dei corsi selezionati. <b>Giorno</b> invece dà una visualizzazione giornaliera della
+            settimana.
         </p>
         <h3>Stampa</h3>
         <p>
-            Da desktop puoi stampare l'orario attualmente visibile con il bottone <Icon name="print" /> (è
+            Da desktop puoi stampare l'orario attualmente visibile con il bottone{' '}
-            consigliato controllare le opzioni di stampa per un risultato soddisfacente).
+            <Icon name="print" /> (è consigliato controllare le opzioni di stampa per ottenere 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>{' '}
+            </a>
-            oppure puoi contattarci direttamente all'indirizzo{' '}
+            , contattarci all'indirizzo{' '}
-            <a href="mailto:macchinisti@lists.dm.unipi.it">macchinisti@lists.dm.unipi.it</a>.
+            <a href="mailto:macchinisti@lists.dm.unipi.it">macchinisti@lists.dm.unipi.it</a> oppure
+            passare direttamente in PHC.
         </p>
     </>
 )

src/components/Optionbar.jsx

@@ -1,41 +1,50 @@
 import { CompoundButton } from './CompoundButton.jsx'
-import { MODE_COURSE, MODE_SCHEDULE, MODE_WORKWEEK, MODE_WORKWEEK_GRID } from './EventsView.jsx'
+import { MODE_COURSE, MODE_SCHEDULE, MODE_WORKWEEK_GRID } from './EventsView.jsx'
 import { Icon } from './Icon.jsx'
 
-export const Optionbar = ({ mode, setMode, source, setSource, onHelp }) => {
+export const OptionBar = ({ mode, setMode, source, setSource, onHelp }) => {
-	return (
+    return (
-		<div class="optionbar">
+        <div class="option-bar">
-			<div class="option-group">
+            <div class="option-group">
-				<div class="item option">
+                <div class="item option">
-					<CompoundButton
+                    <CompoundButton
-						options={[
+                        options={[
-							{ value: 'anno-1', label: 'I' },
+                            { value: 'anno-1', label: 'I' },
-							{ value: 'anno-2', label: 'II' },
+                            { value: 'anno-2', label: 'II' },
-							{ value: 'anno-3', label: 'III' },
+                            { value: 'anno-3', label: 'III' },
-							{ value: 'magistrale', label: 'M' },
+                            { value: 'magistrale', label: 'M' },
-							{ value: 'tutti', label: <Icon name="apps" /> },
+                            { value: 'tutti', label: <Icon name="apps" />, icon: true },
-						]}
+                        ]}
-						value={source}
+                        value={source}
-						setValue={setSource}
+                        setValue={setSource}
-					/>
+                    />
-				</div>
+                </div>
-			</div>
+            </div>
-			<div class="option-group">
+            <div class="option-group">
-				<div class="item option">
+                <div class="item option">
-					<CompoundButton
+                    <CompoundButton
-						options={[
+                        options={[
-							{ value: MODE_COURSE, label: <Icon name="list" /> },
+                            {
-							{
+                                value: MODE_COURSE,
-								value: MODE_WORKWEEK_GRID,
+                                label: <Icon name="list" />,
-								label: <Icon name="calendar_view_month" />,
+                                icon: true,
-							},
+                            },
-							{ value: MODE_SCHEDULE, label: <Icon name="calendar_view_day" /> },
+                            {
-						]}
+                                value: MODE_WORKWEEK_GRID,
-						value={mode}
+                                label: <Icon name="calendar_view_month" />,
-						setValue={setMode}
+                                icon: true,
-					/>
+                            },
-				</div>
+                            {
-			</div>
+                                value: MODE_SCHEDULE,
-		</div>
+                                label: <Icon name="calendar_view_day" />,
-	)
+                                icon: true,
+                            },
+                        ]}
+                        value={mode}
+                        setValue={setMode}
+                    />
+                </div>
+            </div>
+        </div>
+    )
 }

src/main.jsx

@@ -9,7 +9,7 @@ import { Help } from './components/Help.jsx'
 import { Icon } from './components/Icon.jsx'
 import { Popup } from './components/Popup.jsx'
 import { Toolbar } from './components/Toolbar.jsx'
-import { Optionbar } from './components/Optionbar.jsx'
+import { OptionBar } from './components/Optionbar.jsx'
 
 window._ = _
 window.dataBuffer = {}
@@ -127,7 +127,7 @@ const App = ({}) => {
                     setTheme,
                 }}
             />
-            <Optionbar
+            <OptionBar
                 {...{
                     mode,
                     setMode,

src/styles/main.scss

@@ -382,6 +382,10 @@ button,
                     background: #00000018;
                 }
             }
+
+            &.icon {
+                padding: 0 0.5rem;
+            }
         }
     }
 }
@@ -448,10 +452,11 @@ body {
         }
     }
 }
-.optionbar {
+
+.option-bar {
     @extend .panel;
 
-    padding: 1rem 0.75rem 1rem 1rem;
+    padding: 0.5rem;
 
     border-radius: 0;
     border: none;
@@ -463,6 +468,12 @@ body {
     align-items: center;
     justify-content: space-between;
 
+    overflow-y: hidden;
+    overflow-x: auto;
+    max-width: 100%;
+
+    gap: 0.5rem;
+
     @media screen and (max-width: $device-s-width), (pointer: coarse) {
         display: flex;
     }