Fran314/orario
1
0
Fork 0
forked from phc/orario
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Compare commits

merge into: Fran314/orario:compressed-week-view
Branches Tags
Fran314/orario:main Fran314/orario:mobile-header Fran314/orario:compressed-week-view Fran314/orario:dev phc/orario:main phc/orario:feat/parsing-script phc/orario:dev phc/orario:feat/custom-events phc/orario:feat/schema
...
pull from: Fran314/orario:mobile-header
Branches Tags
Fran314/orario:main Fran314/orario:mobile-header Fran314/orario:compressed-week-view Fran314/orario:dev phc/orario:main phc/orario:feat/parsing-script phc/orario:dev phc/orario:feat/custom-events phc/orario:feat/schema
2 Commits
compressed-week-view ... mobile-header
Author SHA1 Message Date
Fran314 19389dbee2 Added optionbar for mobile 2022-09-13 15:40:52 +02:00
aziis98 66b04ea7be Merge pull request 'Added compact grid view for the week' (#1) from Fran314/orario:compressed-week-view into dev 
Reviewed-on: phc/orario#1
 2022-09-13 12:37:24 +00:00
4 changed files with 427 additions and 350 deletions
Expand all files Collapse all files
src/components/HamburgerMenu.jsx
+52 -52
View File
@@ -4,57 +4,57 @@ import { Help } from './Help.jsx'
import { Icon } from './Icon.jsx' import { Icon } from './Icon.jsx'
export const HamburgerMenu = ({ onClose, mode, setMode, source, setSource, theme, setTheme }) => { export const HamburgerMenu = ({ onClose, mode, setMode, source, setSource, theme, setTheme }) => {
return ( return (
<div class="menu"> <div class="menu">
<div class="header"> <div class="header">
<div class="option-group"> <div class="option-group">
<button class="flat icon" onClick={onClose}> <button class="flat icon" onClick={onClose}>
<Icon name="close" /> <Icon name="close" />
</button> </button>
<button <button
class="icon" class="icon"
onClick={() => setTheme(theme === 'dark' ? 'light' : 'dark')} onClick={() => setTheme(theme === 'dark' ? 'light' : 'dark')}
> >
<Icon name={theme === 'dark' ? 'dark_mode' : 'light_mode'} /> <Icon name={theme === 'dark' ? 'dark_mode' : 'light_mode'} />
</button> </button>
</div> </div>
<div class="item logo"> <div class="item logo">
<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="options">
<div class="label">Gruppo Corsi</div> <div class="label">Gruppo Corsi</div>
<ComboBox <ComboBox
value={source} value={source}
setValue={setSource} setValue={setSource}
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: 'Magistrale' }, { value: 'magistrale', label: 'Magistrale' },
{ value: 'tutti', label: 'Tutti' }, { value: 'tutti', label: 'Tutti' },
]} ]}
/> />
<div class="label">Visualizzazione</div> <div class="label">Visualizzazione</div>
<ComboBox <ComboBox
value={mode} value={mode}
setValue={setMode} setValue={setMode}
options={[ options={[
{ value: MODE_COURSE, label: 'Corsi' }, { value: MODE_COURSE, label: 'Corsi' },
{ value: MODE_SCHEDULE, label: 'Giornaliera' }, { value: MODE_SCHEDULE, label: 'Giornaliera' },
{ value: MODE_WORKWEEK, label: 'Settimana' }, { value: MODE_WORKWEEK, label: 'Settimana' },
{ value: MODE_WORKWEEK_GRID, label: 'Schema' }, { value: MODE_WORKWEEK_GRID, label: 'Schema' },
]} ]}
/> />
</div> </div>
<hr /> <hr /> */}
<div class="help"> <div class="help">
<h2> <h2>
<Icon name="info" /> <Icon name="info" />
Guida Guida
</h2> </h2>
<Help /> <Help />
</div> </div>
</div> </div>
) )
} }
src/components/Optionbar.jsx
+41
View File
@@ -0,0 +1,41 @@
import { CompoundButton } from './CompoundButton.jsx'
import { MODE_COURSE, MODE_SCHEDULE, MODE_WORKWEEK, 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>
)
}
src/main.jsx
+163 -153
View File
@@ -9,186 +9,196 @@ 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'
window._ = _ window._ = _
window.dataBuffer = {} window.dataBuffer = {}
const CALENDAR_IDS = { const CALENDAR_IDS = {
'anno-1': ['6308cfcb1df5cb026699ce32'], 'anno-1': ['6308cfcb1df5cb026699ce32'],
'anno-2': ['6308e2dc09352a0208fefdd9'], 'anno-2': ['6308e2dc09352a0208fefdd9'],
'anno-3': ['6308e42a1df5cb026699ced4'], 'anno-3': ['6308e42a1df5cb026699ced4'],
'magistrale': ['6308e8ea0c34e703bb1f7e85'], 'magistrale': ['6308e8ea0c34e703bb1f7e85'],
'tutti': [ 'tutti': [
'6308cfcb1df5cb026699ce32', '6308cfcb1df5cb026699ce32',
'6308e2dc09352a0208fefdd9', '6308e2dc09352a0208fefdd9',
'6308e42a1df5cb026699ced4', '6308e42a1df5cb026699ced4',
'6308e8ea0c34e703bb1f7e85', '6308e8ea0c34e703bb1f7e85',
], ],
} }
async function loadEventi(ids) { async function loadEventi(ids) {
const calendari = await Promise.all( const calendari = await Promise.all(
ids.map(async id => { ids.map(async id => {
// Almost directly copy-pasted from Chrome Dev Tools // Almost directly copy-pasted from Chrome Dev Tools
const req = await fetch( const req = await fetch(
'https://apache.prod.up.cineca.it/api/Impegni/getImpegniCalendarioPubblico', 'https://apache.prod.up.cineca.it/api/Impegni/getImpegniCalendarioPubblico',
{ {
headers: { headers: {
'content-type': 'application/json;charset=UTF-8', 'content-type': 'application/json;charset=UTF-8',
'sec-fetch-dest': 'empty', 'sec-fetch-dest': 'empty',
'sec-fetch-mode': 'cors', 'sec-fetch-mode': 'cors',
'sec-fetch-site': 'same-site', 'sec-fetch-site': 'same-site',
}, },
body: JSON.stringify({ body: JSON.stringify({
mostraImpegniAnnullati: true, mostraImpegniAnnullati: true,
mostraIndisponibilitaTotali: false, mostraIndisponibilitaTotali: false,
linkCalendarioId: id, linkCalendarioId: id,
clienteId: '628de8b9b63679f193b87046', clienteId: '628de8b9b63679f193b87046',
pianificazioneTemplate: false, pianificazioneTemplate: false,
dataInizio: '2022-10-02T22:00:00.000Z', dataInizio: '2022-10-02T22:00:00.000Z',
dataFine: '2022-10-07T22:00:00.000Z', dataFine: '2022-10-07T22:00:00.000Z',
}), }),
method: 'POST', method: 'POST',
mode: 'cors', mode: 'cors',
credentials: 'omit', credentials: 'omit',
} }
) )
return await req.json() return await req.json()
}) })
) )
// console.log(calendari) // console.log(calendari)
if (ids.length === 1) { if (ids.length === 1) {
return calendari[0] return calendari[0]
} }
return _.uniqBy(_.concat(...calendari), 'id') return _.uniqBy(_.concat(...calendari), 'id')
} }
const App = ({}) => { const App = ({}) => {
// Data Sources // Data Sources
const [source, setSource] = useState('anno-1') const [source, setSource] = useState('anno-1')
const [eventi, setEventi] = useState([]) const [eventi, setEventi] = useState([])
// View Modes // View Modes
const [mode, setMode] = useState(MODE_WORKWEEK_GRID) const [mode, setMode] = useState(MODE_WORKWEEK_GRID)
// Selection // Selection
const [selectedCourses, setSelectedCourses] = useState([]) const [selectedCourses, setSelectedCourses] = useState([])
const [hideOtherCourses, setHideOtherCourses] = useState(false) const [hideOtherCourses, setHideOtherCourses] = useState(false)
// Menus // Menus
const [helpVisible, setHelpVisible] = useState(false) const [helpVisible, setHelpVisible] = useState(false)
const [showMobileMenu, setShowMobileMenu] = useState(false) const [showMobileMenu, setShowMobileMenu] = useState(false)
useEffect(async () => { useEffect(async () => {
console.log('source changed') console.log('source changed')
const eventi = await loadEventi(CALENDAR_IDS[source]) const eventi = await loadEventi(CALENDAR_IDS[source])
window.dataBuffer[source] = eventi window.dataBuffer[source] = eventi
setEventi(eventi) setEventi(eventi)
}, [source]) }, [source])
const groupIds = new Set(eventi.map(e => e.nome)) const groupIds = new Set(eventi.map(e => e.nome))
const toolOverlayVisible = const toolOverlayVisible =
selectedCourses.length > 0 && selectedCourses.filter(id => groupIds.has(id)).length > 0 selectedCourses.length > 0 && selectedCourses.filter(id => groupIds.has(id)).length > 0
useEffect(() => { useEffect(() => {
console.log('course length changed') console.log('course length changed')
const groupIds = new Set(eventi.map(e => e.nome)) const groupIds = new Set(eventi.map(e => e.nome))
if ( if (
selectedCourses.length === 0 || selectedCourses.length === 0 ||
selectedCourses.filter(id => groupIds.has(id)).length === 0 selectedCourses.filter(id => groupIds.has(id)).length === 0
) { ) {
setHideOtherCourses(false) setHideOtherCourses(false)
} }
}, [eventi, selectedCourses.length]) }, [eventi, selectedCourses.length])
const [theme, setTheme] = useState( const [theme, setTheme] = useState(
localStorage.getItem('theme') ?? localStorage.getItem('theme') ??
(window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light') (window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light')
) )
document.body.classList.toggle('dark-mode', theme === 'dark') document.body.classList.toggle('dark-mode', theme === 'dark')
localStorage.setItem('theme', theme) localStorage.setItem('theme', theme)
return ( return (
<> <>
<Toolbar <Toolbar
{...{ {...{
mode, mode,
setMode, setMode,
source, source,
setSource, setSource,
onShowMenu: () => setShowMobileMenu(true), onShowMenu: () => setShowMobileMenu(true),
onHelp: () => setHelpVisible(true), onHelp: () => setHelpVisible(true),
theme, theme,
setTheme, setTheme,
}} }}
/> />
<EventsView <Optionbar
mode={mode} {...{
selection={selectedCourses} mode,
setSelection={setSelectedCourses} setMode,
hideOtherCourses={hideOtherCourses} source,
start={new Date(2022, 10, 3)} setSource,
events={eventi.map(({ nome, dataInizio, dataFine, docenti, aule }) => ({ onHelp: () => setHelpVisible(true),
id: nome, }}
name: _.split(nome, '-', 1)[0].trim(), />
start: new Date(dataInizio), <EventsView
end: new Date(dataFine), mode={mode}
docenti: docenti.map(({ nome, cognome }) => selection={selectedCourses}
_.startCase(_.lowerCase(nome) + ' ' + _.lowerCase(cognome)) setSelection={setSelectedCourses}
), hideOtherCourses={hideOtherCourses}
aula: _.startCase(aule[0].codice.toLowerCase()).replace( start={new Date(2022, 10, 3)}
/([A-Z]) ([1-9])/, events={eventi.map(({ nome, dataInizio, dataFine, docenti, aule }) => ({
'$1$2' id: nome,
), name: _.split(nome, '-', 1)[0].trim(),
}))} start: new Date(dataInizio),
/> end: new Date(dataFine),
{toolOverlayVisible && ( docenti: docenti.map(({ nome, cognome }) =>
<ToolOverlay _.startCase(_.lowerCase(nome) + ' ' + _.lowerCase(cognome))
visibility={hideOtherCourses} ),
toggleVisibility={() => setHideOtherCourses(s => !s)} aula: _.startCase(aule[0].codice.toLowerCase()).replace(
onClose={() => { /([A-Z]) ([1-9])/,
setSelectedCourses([]) '$1$2'
setHideOtherCourses(false) ),
}} }))}
/> />
)} {toolOverlayVisible && (
{showMobileMenu && ( <ToolOverlay
<HamburgerMenu visibility={hideOtherCourses}
{...{ toggleVisibility={() => setHideOtherCourses(s => !s)}
mode, onClose={() => {
setMode, setSelectedCourses([])
source, setHideOtherCourses(false)
setSource, }}
theme, />
setTheme, )}
onClose: () => { {showMobileMenu && (
setShowMobileMenu(false) <HamburgerMenu
}, {...{
}} mode,
/> setMode,
)} source,
{helpVisible && ( setSource,
<Popup theme,
title={ setTheme,
<> onClose: () => {
<Icon name="info" /> Guida setShowMobileMenu(false)
</> },
} }}
onClose={() => setHelpVisible(false)} />
> )}
<Help /> {helpVisible && (
</Popup> <Popup
)} title={
</> <>
) <Icon name="info" /> Guida
</>
}
onClose={() => setHelpVisible(false)}
>
<Help />
</Popup>
)}
</>
)
} }
render(<App />, document.body) render(<App />, document.body)
src/styles/main.scss
+171 -145
View File
@@ -28,35 +28,34 @@ html {
--accent-500: #6cc16c; --accent-500: #6cc16c;
--accent-900: #244624; --accent-900: #244624;
--bubble-red: hsl(359, 100%, 92%);
--bubble-purple: hsl(274, 100%, 92%);
--bubble-blue: hsl(241, 100%, 92%);
--bubble-yellow: hsl(50, 100%, 92%);
--bubble-green: hsl(125, 100%, 92%);
--bubble-orange: hsl(25, 100%, 92%);
--bubble-lightlightblue: hsl(176, 100%, 92%);
--bubble-lightblue: hsl(198, 100%, 92%);
--bubble-red: hsl(359, 100%, 92%); --bubble-highlight-red: hsl(359, 100%, 85%);
--bubble-purple: hsl(274, 100%, 92%); --bubble-highlight-purple: hsl(274, 100%, 85%);
--bubble-blue: hsl(241, 100%, 92%); --bubble-highlight-blue: hsl(241, 100%, 85%);
--bubble-yellow: hsl(50, 100%, 92%); --bubble-highlight-yellow: hsl(50, 100%, 85%);
--bubble-green: hsl(125, 100%, 92%); --bubble-highlight-green: hsl(125, 100%, 85%);
--bubble-orange: hsl(25, 100%, 92%); --bubble-highlight-orange: hsl(25, 100%, 85%);
--bubble-lightlightblue: hsl(176, 100%, 92%); --bubble-highlight-lightlightblue: hsl(176, 100%, 85%);
--bubble-lightblue: hsl(198, 100%, 92%); --bubble-highlight-lightblue: hsl(198, 100%, 85%);
--bubble-highlight-red: hsl(359, 100%, 85%); --bubble-border-red: hsl(359, 75%, 51%);
--bubble-highlight-purple: hsl(274, 100%, 85%); --bubble-border-purple: hsl(274, 75%, 51%);
--bubble-highlight-blue: hsl(241, 100%, 85%); --bubble-border-blue: hsl(241, 75%, 51%);
--bubble-highlight-yellow: hsl(50, 100%, 85%); --bubble-border-yellow: hsl(50, 75%, 51%);
--bubble-highlight-green: hsl(125, 100%, 85%); --bubble-border-green: hsl(125, 75%, 51%);
--bubble-highlight-orange: hsl(25, 100%, 85%); --bubble-border-orange: hsl(25, 75%, 51%);
--bubble-highlight-lightlightblue: hsl(176, 100%, 85%); --bubble-border-lightlightblue: hsl(176, 75%, 51%);
--bubble-highlight-lightblue: hsl(198, 100%, 85%); --bubble-border-lightblue: hsl(198, 75%, 51%);
--bubble-border-red: hsl(359, 75%, 51%); --bold-on-dark: 300;
--bubble-border-purple: hsl(274, 75%, 51%);
--bubble-border-blue: hsl(241, 75%, 51%);
--bubble-border-yellow: hsl(50, 75%, 51%);
--bubble-border-green: hsl(125, 75%, 51%);
--bubble-border-orange: hsl(25, 75%, 51%);
--bubble-border-lightlightblue: hsl(176, 75%, 51%);
--bubble-border-lightblue: hsl(198, 75%, 51%);
--bold-on-dark: 300;
} }
body.dark-mode { body.dark-mode {
@@ -74,32 +73,31 @@ body.dark-mode {
--accent-500: hsl(269, 40%, 70%); --accent-500: hsl(269, 40%, 70%);
--accent-900: hsl(269, 30%, 90%); --accent-900: hsl(269, 30%, 90%);
--bubble-red: hsl(359, 40%, 25%);
--bubble-purple: hsl(274, 40%, 25%);
--bubble-blue: hsl(241, 40%, 25%);
--bubble-yellow: hsl(50, 40%, 25%);
--bubble-green: hsl(125, 40%, 25%);
--bubble-orange: hsl(25, 40%, 25%);
--bubble-lightblue: hsl(176, 40%, 25%);
--bubble-red: hsl(359, 40%, 25%); --bubble-border-red: hsl(359, 75%, 51%);
--bubble-purple: hsl(274, 40%, 25%); --bubble-border-purple: hsl(274, 75%, 51%);
--bubble-blue: hsl(241, 40%, 25%); --bubble-border-blue: hsl(241, 75%, 51%);
--bubble-yellow: hsl(50, 40%, 25%); --bubble-border-yellow: hsl(50, 75%, 51%);
--bubble-green: hsl(125, 40%, 25%); --bubble-border-green: hsl(125, 75%, 51%);
--bubble-orange: hsl(25, 40%, 25%); --bubble-border-orange: hsl(25, 75%, 51%);
--bubble-lightblue: hsl(176, 40%, 25%); --bubble-border-lightblue: hsl(176, 75%, 51%);
--bubble-border-red: hsl(359, 75%, 51%); --bubble-highlight-red: hsl(359, 40%, 31%);
--bubble-border-purple: hsl(274, 75%, 51%); --bubble-highlight-purple: hsl(274, 40%, 31%);
--bubble-border-blue: hsl(241, 75%, 51%); --bubble-highlight-blue: hsl(241, 40%, 31%);
--bubble-border-yellow: hsl(50, 75%, 51%); --bubble-highlight-yellow: hsl(50, 40%, 31%);
--bubble-border-green: hsl(125, 75%, 51%); --bubble-highlight-green: hsl(125, 40%, 31%);
--bubble-border-orange: hsl(25, 75%, 51%); --bubble-highlight-orange: hsl(25, 40%, 31%);
--bubble-border-lightblue: hsl(176, 75%, 51%); --bubble-highlight-lightblue: hsl(176, 40%, 31%);
--bubble-highlight-red: hsl(359, 40%, 31%); --bold-on-dark: 500;
--bubble-highlight-purple: hsl(274, 40%, 31%);
--bubble-highlight-blue: hsl(241, 40%, 31%);
--bubble-highlight-yellow: hsl(50, 40%, 31%);
--bubble-highlight-green: hsl(125, 40%, 31%);
--bubble-highlight-orange: hsl(25, 40%, 31%);
--bubble-highlight-lightblue: hsl(176, 40%, 31%);
--bold-on-dark: 500;
} }
$device-s-width: 600px; $device-s-width: 600px;
@@ -450,9 +448,38 @@ body {
} }
} }
} }
.optionbar {
@extend .panel;
padding: 1rem 0.75rem 1rem 1rem;
border-radius: 0;
border: none;
border-bottom: 1px solid var(--border-500);
height: 4rem;
display: none;
align-items: center;
justify-content: space-between;
@media screen and (max-width: $device-s-width), (pointer: coarse) {
display: flex;
}
.option-group {
display: flex;
align-items: center;
gap: 0.75rem;
}
}
.events-view { .events-view {
height: calc(100vh - 4rem); height: calc(100vh - 4rem);
@media screen and (max-width: $device-s-width), (pointer: coarse) {
height: calc(100vh - 8rem);
}
.course-view { .course-view {
padding: 1rem; padding: 1rem;
@@ -880,109 +907,108 @@ body {
height: 100%; height: 100%;
overflow: scroll; overflow: scroll;
.grid { .grid {
width: 100%; width: 100%;
max-width: 55rem; max-width: 55rem;
display: grid; display: grid;
grid-template-columns: 3rem repeat(var(--time-length), 1fr); grid-template-columns: 3rem repeat(var(--time-length), 1fr);
grid-template-rows: 2rem repeat(var(--days-length), 1fr); grid-template-rows: 2rem repeat(var(--days-length), 1fr);
border: 2px solid var(--border-500); border: 2px solid var(--border-500);
border-radius: 10px 10px 0 0; border-radius: 10px 10px 0 0;
@media screen and (max-width: $device-s-width), (pointer: coarse) {
font-size: 12px;
}
@media screen and (max-width: $device-s-width), (pointer: coarse) { .time {
font-size: 12px; display: flex;
} align-items: center;
justify-content: center;
padding: 0.5rem;
grid-row: 1;
grid-column: var(--offset) / span 2;
}
.day-name {
display: flex;
align-items: center;
justify-content: center;
padding: 0.5rem;
grid-column: 1;
grid-row: var(--line);
}
.time { .event {
display: flex; display: flex;
align-items: center; flex-direction: row;
justify-content: center; @media screen and (max-width: $device-s-width), (pointer: coarse) {
padding: 0.5rem; flex-direction: column;
grid-row: 1; }
grid-column: var(--offset) / span 2; gap: 0.25rem;
} align-items: center;
.day-name { justify-content: center;
display: flex; margin: 0.25rem;
align-items: center; padding: 0.5rem;
justify-content: center; grid-row: var(--line);
padding: 0.5rem; grid-column: var(--offset) / span var(--length);
grid-column: 1; background-color: var(--color);
grid-row: var(--line); border: 3px solid var(--color);
} border-radius: 10px;
font-weight: var(--bold-on-dark);
text-align: center;
.event { &.highlight {
display: flex; background-color: var(--highlight-color);
flex-direction: row; border: 3px solid var(--highlight-color);
@media screen and (max-width: $device-s-width), (pointer: coarse) { }
flex-direction: column; &.selected {
} border: 3px solid var(--border-color);
gap: 0.25rem; }
align-items: center; }
justify-content: center;
margin: 0.25rem;
padding: 0.5rem;
grid-row: var(--line);
grid-column: var(--offset) / span var(--length);
background-color: var(--color);
border: 3px solid var(--color);
border-radius: 10px;
font-weight: var(--bold-on-dark);
text-align: center;
&.highlight { .hline {
background-color: var(--highlight-color); grid-column: 1 / 13;
border: 3px solid var(--highlight-color); grid-row: var(--line);
} height: 0px;
&.selected { border-bottom: 1px solid var(--border-500);
border: 3px solid var(--border-color); }
}
}
.hline {
grid-column: 1 / 13;
grid-row: var(--line);
height: 0px;
border-bottom: 1px solid var(--border-500);
}
.vline {
grid-column: var(--offset);
grid-row: 1 / calc(2 + var(--days-length));
width: 0px;
border-right: 1px dashed var(--border-500);
}
}
.legend {
max-width: 55rem;
display: grid;
grid-template-columns: min-content 1fr;
border: 2px solid var(--border-500);
border-radius: 0 0 10px 10px;
border-top: none;
padding: 1rem;
gap: 0.5rem 1rem;
align-items: center;
justify-content: center;
width: 100%;
.name { .vline {
width: 100%; grid-column: var(--offset);
} grid-row: 1 / calc(2 + var(--days-length));
width: 0px;
border-right: 1px dashed var(--border-500);
}
}
.legend {
max-width: 55rem;
display: grid;
grid-template-columns: min-content 1fr;
border: 2px solid var(--border-500);
border-radius: 0 0 10px 10px;
border-top: none;
padding: 1rem;
gap: 0.5rem 1rem;
align-items: center;
justify-content: center;
width: 100%;
.color { .name {
display: flex; width: 100%;
justify-content: center; }
align-items: center;
font-weight: 500; .color {
width: 2rem; display: flex;
height: 1.5rem; justify-content: center;
background-color: var(--color); align-items: center;
border: 2px solid var(--border-color); font-weight: 500;
border-radius: 10px; width: 2rem;
font-weight: var(--bold-on-dark); height: 1.5rem;
} background-color: var(--color);
} border: 2px solid var(--border-color);
border-radius: 10px;
font-weight: var(--bold-on-dark);
}
}
} }
.schedule-view { .schedule-view {