Finalizzazione nuovo layout da mobile
This commit is contained in:
@@ -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
|
||||
|
||||
@@ -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}
|
||||
|
||||
@@ -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" />
|
||||
|
||||
+22
-12
@@ -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
|
||||
con i corsi attualmente selezionati.
|
||||
Da desktop si può visualizzare l'orario settimanale cliccando 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.
|
||||
La selezione effettuata verrà preservata dalla visualizzazione <b>Corsi</b> a quella{' '}
|
||||
<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>)
|
||||
e magistrale. Alternativamente, puoi scegliere fra tutti i corsi disponibili cliccando
|
||||
su <b>Tutti</b>.
|
||||
I corsi sono raggruppati per: primo, secondo, terzo anno (rispettivamente <b>I</b>,{' '}
|
||||
<b>II</b> e <b>III</b>) e magistrale (su mobile indicata con <b>M</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" /> (è
|
||||
consigliato controllare le opzioni di stampa per un risultato soddisfacente).
|
||||
Da desktop puoi stampare l'orario attualmente visibile con il bottone{' '}
|
||||
<Icon name="print" /> (è consigliato controllare le opzioni di stampa per ottenere un
|
||||
risultato soddisfacente).
|
||||
</p>
|
||||
<h3>Bug & 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>.
|
||||
</a>
|
||||
, contattarci all'indirizzo{' '}
|
||||
<a href="mailto:macchinisti@lists.dm.unipi.it">macchinisti@lists.dm.unipi.it</a> oppure
|
||||
passare direttamente in PHC.
|
||||
</p>
|
||||
</>
|
||||
)
|
||||
|
||||
@@ -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 }) => {
|
||||
return (
|
||||
<div class="optionbar">
|
||||
<div class="option-group">
|
||||
<div class="item option">
|
||||
<CompoundButton
|
||||
options={[
|
||||
{ value: 'anno-1', label: 'I' },
|
||||
{ value: 'anno-2', label: 'II' },
|
||||
{ value: 'anno-3', label: 'III' },
|
||||
{ value: 'magistrale', label: 'M' },
|
||||
{ value: 'tutti', label: <Icon name="apps" /> },
|
||||
]}
|
||||
value={source}
|
||||
setValue={setSource}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="option-group">
|
||||
<div class="item option">
|
||||
<CompoundButton
|
||||
options={[
|
||||
{ value: MODE_COURSE, label: <Icon name="list" /> },
|
||||
{
|
||||
value: MODE_WORKWEEK_GRID,
|
||||
label: <Icon name="calendar_view_month" />,
|
||||
},
|
||||
{ value: MODE_SCHEDULE, label: <Icon name="calendar_view_day" /> },
|
||||
]}
|
||||
value={mode}
|
||||
setValue={setMode}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
export const OptionBar = ({ mode, setMode, source, setSource, onHelp }) => {
|
||||
return (
|
||||
<div class="option-bar">
|
||||
<div class="option-group">
|
||||
<div class="item option">
|
||||
<CompoundButton
|
||||
options={[
|
||||
{ value: 'anno-1', label: 'I' },
|
||||
{ value: 'anno-2', label: 'II' },
|
||||
{ value: 'anno-3', label: 'III' },
|
||||
{ value: 'magistrale', label: 'M' },
|
||||
{ value: 'tutti', label: <Icon name="apps" />, icon: true },
|
||||
]}
|
||||
value={source}
|
||||
setValue={setSource}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="option-group">
|
||||
<div class="item option">
|
||||
<CompoundButton
|
||||
options={[
|
||||
{
|
||||
value: MODE_COURSE,
|
||||
label: <Icon name="list" />,
|
||||
icon: true,
|
||||
},
|
||||
{
|
||||
value: MODE_WORKWEEK_GRID,
|
||||
label: <Icon name="calendar_view_month" />,
|
||||
icon: true,
|
||||
},
|
||||
{
|
||||
value: MODE_SCHEDULE,
|
||||
label: <Icon name="calendar_view_day" />,
|
||||
icon: true,
|
||||
},
|
||||
]}
|
||||
value={mode}
|
||||
setValue={setMode}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
+2
-2
@@ -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,
|
||||
|
||||
+13
-2
@@ -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;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user