phc/orario
6
2
Fork 1
Code Issues 2 Pull Requests Packages Projects Releases Wiki Activity

Aggiunti conttatti nell'help + Help anche su mobile

Browse Source
This commit is contained in:
aziis98
2022-09-09 21:58:06 +02:00
parent 47723fda17
commit 646815ee83
5 changed files with 151 additions and 76 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/HamburgerMenu.jsx
+9
View File
@@ -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
+39
View File
@@ -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
+10 -1
View File
@@ -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
+3 -18
View File
@@ -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>
<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>
<Help />
</Popup>
)}
</>
src/styles/main.scss
+90 -57
View File
@@ -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,6 +823,72 @@ body {
animation: fade-in 150ms ease-in forwards;
}
.menu {
position: absolute;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background: var(--gray-000);
z-index: 10;
.header {
height: 4rem;
padding: 0.75rem 1rem 0.75rem 0.75rem;
display: flex;
align-items: center;
justify-content: space-between;
border-bottom: 1px solid var(--gray-500);
.logo {
display: flex;
align-items: center;
img {
max-height: 2.5rem;
}
gap: 0.25rem;
}
}
.options {
padding: 1rem;
display: grid;
grid-template-columns: auto 1fr;
gap: 1rem;
align-items: center;
.label {
font-weight: 400;
}
}
hr {
position: relative;
width: calc(100% - 2rem);
height: 1px;
left: 1rem;
background: var(--gray-500);
border: none;
}
.help {
@extend .text-block;
padding: 1rem 1rem 2.5rem;
}
}
// not on mobile
@media screen and (min-width: $device-s-width) and (orientation: portrait),
@@ -827,55 +909,6 @@ body {
.toolbar {
padding: 0.75rem 1rem 0.75rem 0.75rem;
}
.menu {
position: absolute;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background: var(--gray-000);
z-index: 10;
.header {
height: 4rem;
padding: 0.75rem 1rem 0.75rem 0.75rem;
display: flex;
align-items: center;
justify-content: space-between;
border-bottom: 1px solid var(--gray-500);
.logo {
display: flex;
align-items: center;
img {
max-height: 2.5rem;
}
gap: 0.25rem;
}
}
.options {
padding: 1rem;
display: grid;
grid-template-columns: auto 1fr;
gap: 1rem;
align-items: center;
.label {
font-weight: 400;
}
}
}
}
@media print {