New vertical layout
This commit is contained in:
+1
-1
@@ -8,7 +8,7 @@
|
||||
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;700&display=swap" rel="stylesheet">
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
|
||||
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@48,400,0,0" />
|
||||
|
||||
<link rel="stylesheet" href="/src/styles/main.scss">
|
||||
|
||||
+127
-43
@@ -6,7 +6,7 @@ import { differenceInMinutes, format, getWeek, startOfDay } from 'date-fns'
|
||||
import { it } from 'date-fns/locale'
|
||||
|
||||
import _ from 'lodash'
|
||||
import { useEffect, useRef } from 'preact/hooks'
|
||||
import { useEffect, useRef, useState } from 'preact/hooks'
|
||||
import { layoutIntervals } from '../interval-layout.js'
|
||||
|
||||
function hashString(str, seed = 0) {
|
||||
@@ -36,12 +36,10 @@ const WorkWeekView = ({ events }) => {
|
||||
)
|
||||
)
|
||||
|
||||
console.log(rowLayouts)
|
||||
|
||||
const weekDays = ['Lunedì', 'Martedì', 'Mercoledì', 'Giovedì', 'Venerdì']
|
||||
|
||||
return (
|
||||
<div class="workweek-view">
|
||||
<div class="work-week-h-view">
|
||||
<div class="week">
|
||||
{weekDays.map((label, index) => (
|
||||
<div class="day" style={{ '--size': rowLayouts[index + 1]?.length ?? 0 }}>
|
||||
@@ -126,52 +124,136 @@ const WorkWeekView = ({ events }) => {
|
||||
)
|
||||
}
|
||||
|
||||
/*
|
||||
{sortedKeys.map(blockStart => (
|
||||
<div
|
||||
class="stacked"
|
||||
style={{
|
||||
'--start':
|
||||
differenceInMinutes(
|
||||
stacked[blockStart][0].start,
|
||||
startOfDay(stacked[blockStart][0].start)
|
||||
) -
|
||||
60 * 8,
|
||||
}}
|
||||
>
|
||||
{stacked[blockStart].map(event => (
|
||||
<Event {...event} />
|
||||
))}
|
||||
</div>
|
||||
))}
|
||||
const WorkWeekVerticalView = ({ events }) => {
|
||||
const eventsByWeekday = _.groupBy(events, event => event.start.getDay())
|
||||
|
||||
const dayIntervalLayout = _.mapValues(eventsByWeekday, events =>
|
||||
layoutIntervals(
|
||||
events.map(e => ({
|
||||
start: differenceInMinutes(e.start, startOfDay(e.start)),
|
||||
end: differenceInMinutes(e.end, startOfDay(e.start)),
|
||||
data: e,
|
||||
}))
|
||||
)
|
||||
)
|
||||
|
||||
const weekDays = ['Lunedì', 'Martedì', 'Mercoledì', 'Giovedì', 'Venerdì']
|
||||
|
||||
const [currentlyHovered, setCurrentlyHovered] = useState(null)
|
||||
const element = useRef()
|
||||
|
||||
useEffect(() => {
|
||||
if (element.current) {
|
||||
const l = e => {
|
||||
const $event = e.target.closest('.event')
|
||||
if ($event) {
|
||||
setCurrentlyHovered($event.dataset.eventId)
|
||||
} else {
|
||||
setCurrentlyHovered(null)
|
||||
}
|
||||
}
|
||||
|
||||
element.current.addEventListener('mousemove', l)
|
||||
|
||||
return () => {
|
||||
element.current.removeEventListener('mousemove', l)
|
||||
}
|
||||
}
|
||||
}, [element.current])
|
||||
|
||||
{Object.values(eventsByWeekday).map(dayEvents => {
|
||||
return (
|
||||
<div class="day">
|
||||
{dayEvents.map(({ name, start, end }) => {
|
||||
return (
|
||||
<div class="work-week-v-view" ref={element}>
|
||||
<div class="pivot"></div>
|
||||
<div class="left-header">
|
||||
<div class="blocks">
|
||||
<div
|
||||
class="event"
|
||||
class="block skip-border"
|
||||
style={{
|
||||
'--hue':
|
||||
(Math.abs(hashString('seed3' + name)) % 360) +
|
||||
'deg',
|
||||
'--start':
|
||||
differenceInMinutes(start, startOfDay(start)) -
|
||||
60 * 8,
|
||||
'--size': differenceInMinutes(end, start),
|
||||
'--start': 9 - 7,
|
||||
'--size': 2,
|
||||
}}
|
||||
>
|
||||
{_.startCase(_.lowerCase(name))
|
||||
.replaceAll('Ii', 'II')
|
||||
.replaceAll('Iii', 'III')}
|
||||
9:00 – 11:00
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
<div
|
||||
class="block"
|
||||
style={{
|
||||
'--start': 11 - 7,
|
||||
'--size': 2,
|
||||
}}
|
||||
>
|
||||
11:00 – 13:00
|
||||
</div>
|
||||
<div
|
||||
class="block skip-border"
|
||||
style={{
|
||||
'--start': 14 - 7,
|
||||
'--size': 2,
|
||||
}}
|
||||
>
|
||||
14:00 – 16:00
|
||||
</div>
|
||||
<div
|
||||
class="block"
|
||||
style={{
|
||||
'--start': 16 - 7,
|
||||
'--size': 2,
|
||||
}}
|
||||
>
|
||||
16:00 – 18:00
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{Object.values(dayIntervalLayout).map((layout, index) => (
|
||||
<div class="day" style={{ '--size': layout.length }}>
|
||||
<div class="top-header">{weekDays[index]}</div>
|
||||
<div class="events">
|
||||
{layout.map((events, stackIndex) => (
|
||||
<>
|
||||
{events.map(event => (
|
||||
<div
|
||||
class={
|
||||
'event' +
|
||||
(currentlyHovered === event.data.name
|
||||
? ' highlight'
|
||||
: '')
|
||||
}
|
||||
data-event-id={event.data.name}
|
||||
style={{
|
||||
'--start': event.start / 60 - 7,
|
||||
'--stack': stackIndex + 1,
|
||||
'--size': (event.end - event.start) / 60,
|
||||
'--hue':
|
||||
(Math.abs(hashString('seed3' + event.data.name)) %
|
||||
360) +
|
||||
'deg',
|
||||
}}
|
||||
>
|
||||
<div class="title">
|
||||
{_.startCase(_.lowerCase(event.data.name))
|
||||
.replaceAll('Ii', 'II')
|
||||
.replaceAll('Iii', 'III')
|
||||
.replaceAll(/\bE\b/g, 'e')}
|
||||
</div>
|
||||
<div class="aula">{event.data.aula}</div>
|
||||
</div>
|
||||
))}
|
||||
</>
|
||||
))}
|
||||
|
||||
{/* Grid Tracks */}
|
||||
{[1, 3, 5].map(i => (
|
||||
<div class="grid-line-h" style={{ '--track': i }}></div>
|
||||
))}
|
||||
{[6, 8, 10].map(i => (
|
||||
<div class="grid-line-h" style={{ '--track': i }}></div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
*/
|
||||
}
|
||||
|
||||
const CourseView = ({ events }) => {
|
||||
const eventsByCourse = _.groupBy(events, 'name')
|
||||
@@ -183,7 +265,8 @@ const CourseView = ({ events }) => {
|
||||
<div class="title">
|
||||
{_.startCase(_.lowerCase(name))
|
||||
.replaceAll('Ii', 'II')
|
||||
.replaceAll('Iii', 'III')}
|
||||
.replaceAll('Iii', 'III')
|
||||
.replaceAll(/\bE\b/g, 'e')}
|
||||
</div>
|
||||
<div class="docenti">{courseEvents[0].docenti.join(', ')}</div>
|
||||
<div class="events">
|
||||
@@ -207,7 +290,8 @@ const CourseView = ({ events }) => {
|
||||
//
|
||||
|
||||
const viewModeMap = {
|
||||
'work-week': WorkWeekView,
|
||||
'work-week-h': WorkWeekView,
|
||||
'work-week-v': WorkWeekVerticalView,
|
||||
'course': CourseView,
|
||||
}
|
||||
|
||||
|
||||
@@ -1,3 +1,5 @@
|
||||
import { Icon } from './Icon.jsx'
|
||||
|
||||
export const Toolbar = ({ mode, setMode }) => {
|
||||
return (
|
||||
<div class="toolbar">
|
||||
@@ -12,16 +14,29 @@ export const Toolbar = ({ mode, setMode }) => {
|
||||
Corso
|
||||
</button>
|
||||
<button
|
||||
class={'radio' + (mode === 'work-week' ? ' selected' : '')}
|
||||
onClick={() => setMode('work-week')}
|
||||
class={'radio' + (mode === 'work-week-v' ? ' selected' : '')}
|
||||
onClick={() => setMode('work-week-v')}
|
||||
>
|
||||
Settimana
|
||||
</button>
|
||||
<button
|
||||
class={'radio' + (mode === 'work-week-h' ? ' selected' : '')}
|
||||
onClick={() => setMode('work-week-h')}
|
||||
>
|
||||
Settimana<sup>T</sup>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item option">Opzione 2</div>
|
||||
<div class="item option">Opzione 3</div>
|
||||
<div class="item option">Opzione 4</div>
|
||||
<div class="item option">
|
||||
<button class="icon">
|
||||
<Icon name="filter_list" />
|
||||
</button>
|
||||
</div>
|
||||
<div class="item option">
|
||||
<button class="icon">
|
||||
<Icon name="print" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
|
||||
+1
-3
@@ -5,8 +5,6 @@ import { useEffect, useState } from 'preact/hooks'
|
||||
import { EventsView } from './components/EventsView.jsx'
|
||||
import { Toolbar } from './components/Toolbar.jsx'
|
||||
|
||||
window._ = _
|
||||
|
||||
const App = ({}) => {
|
||||
const [eventi, setEventi] = useState([])
|
||||
useEffect(() => {
|
||||
@@ -40,7 +38,7 @@ const App = ({}) => {
|
||||
})
|
||||
}, [])
|
||||
|
||||
const [mode, setMode] = useState('work-week')
|
||||
const [mode, setMode] = useState('work-week-v')
|
||||
|
||||
return (
|
||||
<>
|
||||
|
||||
+198
-13
@@ -15,9 +15,11 @@ html {
|
||||
|
||||
:root {
|
||||
--gray-000: #ffffff;
|
||||
--gray-100: #f8f8f8;
|
||||
--gray-300: #f0f0f0;
|
||||
--gray-350: #e8e8e8;
|
||||
--gray-500: #d8d8d8;
|
||||
--gray-600: #c0c0c0;
|
||||
--gray-900: #282828;
|
||||
|
||||
// --accent-100: #e6ceff;
|
||||
@@ -29,12 +31,18 @@ html {
|
||||
--accent-500: hsl(221, 70%, 75%);
|
||||
}
|
||||
|
||||
$device-s-width: 480px;
|
||||
|
||||
// Elements
|
||||
|
||||
code {
|
||||
font-size: 90%;
|
||||
}
|
||||
|
||||
sup {
|
||||
padding-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
button,
|
||||
.button {
|
||||
display: flex;
|
||||
@@ -61,6 +69,10 @@ button,
|
||||
inset: 0;
|
||||
background: #00000008;
|
||||
}
|
||||
|
||||
&.icon {
|
||||
padding: 0.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
// Components
|
||||
@@ -73,12 +85,18 @@ button,
|
||||
border-radius: 0;
|
||||
border-right: none;
|
||||
|
||||
padding: inherit 0.5rem;
|
||||
|
||||
&:first-child {
|
||||
padding-left: 1rem;
|
||||
|
||||
border-top-left-radius: 0.5rem;
|
||||
border-bottom-left-radius: 0.5rem;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
padding-right: 1rem;
|
||||
|
||||
border-top-right-radius: 0.5rem;
|
||||
border-bottom-right-radius: 0.5rem;
|
||||
border: 2px solid var(--gray-350);
|
||||
@@ -133,10 +151,6 @@ body {
|
||||
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.item {
|
||||
padding: 0.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
.events-view {
|
||||
@@ -185,7 +199,7 @@ body {
|
||||
}
|
||||
}
|
||||
|
||||
.workweek-view {
|
||||
.work-week-h-view {
|
||||
--header-height: 3rem;
|
||||
--event-height: 2rem;
|
||||
|
||||
@@ -234,7 +248,7 @@ body {
|
||||
display: grid;
|
||||
grid-template-rows: auto 1fr;
|
||||
|
||||
--hour-width: 7rem;
|
||||
--hour-width: 7.5rem;
|
||||
|
||||
.header {
|
||||
display: grid;
|
||||
@@ -282,16 +296,20 @@ body {
|
||||
grid-row: var(--row) / span 1;
|
||||
grid-column: var(--start) / span var(--size);
|
||||
|
||||
background: hsl(var(--hue), 90%, 60%);
|
||||
// $color: hsl(var(--hue), 80%, 60%);
|
||||
$color: var(--gray-000);
|
||||
|
||||
background: $color;
|
||||
color: #000;
|
||||
|
||||
border-radius: 0.25rem;
|
||||
|
||||
border: 1px solid var(--gray-600);
|
||||
|
||||
display: flex;
|
||||
padding: 0.4rem;
|
||||
|
||||
font-size: 15px;
|
||||
// font-weight: 500;
|
||||
|
||||
width: 100%;
|
||||
|
||||
@@ -309,11 +327,7 @@ body {
|
||||
|
||||
border-radius: 0.25rem;
|
||||
|
||||
background: linear-gradient(
|
||||
to top,
|
||||
hsl(var(--hue), 90%, 60%) 0%,
|
||||
transparent 25%
|
||||
);
|
||||
background: linear-gradient(to top, $color 0%, transparent 25%);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
@@ -340,6 +354,177 @@ body {
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.work-week-v-view {
|
||||
position: relative;
|
||||
|
||||
display: grid;
|
||||
grid-template-columns: max-content repeat(5, auto);
|
||||
|
||||
height: 100%;
|
||||
|
||||
overflow: scroll;
|
||||
|
||||
.pivot {
|
||||
height: 3rem;
|
||||
|
||||
grid-column: 1 / 2;
|
||||
grid-row: 1 / 2;
|
||||
|
||||
position: sticky;
|
||||
top: 0;
|
||||
left: 0;
|
||||
|
||||
z-index: 2;
|
||||
|
||||
background: var(--gray-000);
|
||||
|
||||
border-bottom: 1px solid var(--gray-500);
|
||||
border-right: 1px solid var(--gray-500);
|
||||
}
|
||||
|
||||
.left-header {
|
||||
grid-column: 1 / 2;
|
||||
grid-row: 1 / 2;
|
||||
|
||||
display: grid;
|
||||
|
||||
position: sticky;
|
||||
left: 0;
|
||||
|
||||
border-right: 1px solid var(--gray-500);
|
||||
|
||||
background: var(--gray-000);
|
||||
|
||||
z-index: 1;
|
||||
|
||||
padding-top: 3rem;
|
||||
|
||||
.blocks {
|
||||
display: grid;
|
||||
|
||||
grid-template-rows: repeat(12, 6rem);
|
||||
|
||||
.block {
|
||||
grid-row: var(--start) / span var(--size);
|
||||
|
||||
display: grid;
|
||||
place-content: center;
|
||||
|
||||
padding: 0.5rem;
|
||||
|
||||
font-size: 16px;
|
||||
font-weight: 400;
|
||||
|
||||
border-top: 1px solid var(--gray-500);
|
||||
|
||||
@media screen and (max-width: $device-s-width) {
|
||||
writing-mode: vertical-lr;
|
||||
}
|
||||
|
||||
&:not(.skip-border) {
|
||||
height: calc(2 * 6rem + 1px);
|
||||
border-bottom: 1px solid var(--gray-500);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.day {
|
||||
position: relative;
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.top-header {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
height: 3rem;
|
||||
|
||||
flex: 0 0 auto;
|
||||
|
||||
z-index: 1;
|
||||
|
||||
grid-column: span var(--size);
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
font-size: 18px;
|
||||
font-weight: 400;
|
||||
|
||||
background: var(--gray-000);
|
||||
border-bottom: 1px solid var(--gray-500);
|
||||
}
|
||||
|
||||
&:not(:last-child) {
|
||||
border-right: 1px solid var(--gray-500);
|
||||
}
|
||||
|
||||
.events {
|
||||
position: relative;
|
||||
|
||||
display: grid;
|
||||
grid-template-columns: repeat(var(--size), auto);
|
||||
grid-template-rows: repeat(12, 5rem);
|
||||
|
||||
padding: 0.5rem;
|
||||
|
||||
gap: 1rem 0.5rem;
|
||||
|
||||
.event {
|
||||
grid-row: var(--start) / span var(--size);
|
||||
grid-column: var(--stack) / span 1;
|
||||
|
||||
background: var(--gray-000);
|
||||
|
||||
border: 1px solid var(--gray-600);
|
||||
// border: 4px solid hsl(var(--hue), 80%, 80%);
|
||||
|
||||
border-radius: 0.5rem;
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
gap: 0.25rem;
|
||||
|
||||
padding: 0.5rem 1rem 0.5rem 0.5rem;
|
||||
|
||||
&.highlight {
|
||||
background: var(--gray-100);
|
||||
border-color: var(--gray-500);
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 18px;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.aula {
|
||||
font-size: 16px;
|
||||
font-weight: 300;
|
||||
}
|
||||
}
|
||||
|
||||
.grid-line-h {
|
||||
grid-column: 1 / span var(--size);
|
||||
grid-row: var(--track) / span 2;
|
||||
|
||||
height: 0px;
|
||||
border-bottom: 1px dashed var(--gray-500);
|
||||
|
||||
align-self: center;
|
||||
|
||||
position: relative;
|
||||
left: -0.5rem;
|
||||
width: calc(100% + 1rem);
|
||||
|
||||
z-index: -1;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Utilities
|
||||
|
||||
Reference in New Issue
Block a user