Finalizzazione nuovo layout da mobile

main
Antonio De Lucreziis 2 years ago
parent 5d8fbc9363
commit 142c5e1b67

@ -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`. 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 ```json
...
"prettier.printWidth": 100, "prettier.printWidth": 100,
"prettier.singleQuote": true, "prettier.singleQuote": true,
"prettier.quoteProps": "consistent", "prettier.quoteProps": "consistent",
@ -20,6 +23,7 @@ To start the development server run `npm run dev`.
"prettier.semi": false, "prettier.semi": false,
"prettier.arrowParens": "avoid", "prettier.arrowParens": "avoid",
"editor.formatOnSave": true, "editor.formatOnSave": true,
...
``` ```
### Production ### Production

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

@ -22,32 +22,6 @@ export const HamburgerMenu = ({ onClose, mode, setMode, source, setSource, theme
<img src="logo-circuit-board.svg" alt="logo" /> / <span>Orario</span> <img src="logo-circuit-board.svg" alt="logo" /> / <span>Orario</span>
</div> </div>
</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"> <div class="help">
<h2> <h2>
<Icon name="info" /> <Icon name="info" />

@ -9,31 +9,41 @@ export const Help = ({}) => (
comparirà in basso a destra. comparirà in basso a destra.
</p> </p>
<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>
<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>
<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 una visualizzazione giornaliera della
settimana.
</p> </p>
<h3>Stampa</h3> <h3>Stampa</h3>
<p> <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> </p>
<h3>Bug &amp; Contatti</h3> <h3>Bug &amp; Contatti</h3>
<p> <p>
In caso di bug puoi creare una issue sulla repo git del progetto{' '} In caso di bug puoi creare una issue sulla repo git del progetto{' '}
<a href="https://git.phc.dm.unipi.it/phc/orario"> <a href="https://git.phc.dm.unipi.it/phc/orario">
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> </p>
</> </>
) )

@ -1,41 +1,50 @@
import { CompoundButton } from './CompoundButton.jsx' 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' 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>
)
} }

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

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

Loading…
Cancel
Save