Skip to content
Snippets Groups Projects
Commit 8c60278c authored by Andris Borbás's avatar Andris Borbás
Browse files

Events can be placed anywhere

parent f9b8ae5d
No related branches found
No related tags found
No related merge requests found
...@@ -24,6 +24,7 @@ body::before { ...@@ -24,6 +24,7 @@ body::before {
.day { .day {
height: 100%; height: 100%;
min-width: 120px;
} }
.dayEvents { .dayEvents {
...@@ -35,16 +36,26 @@ body::before { ...@@ -35,16 +36,26 @@ body::before {
.dayName { .dayName {
position: sticky; position: sticky;
top: 0; top: 0;
z-index: 20;
margin-bottom: 2px;
box-shadow: 0px 3px 4px -2px black;
} }
.dayTimes { .dayTimes {
grid-template-rows: repeat(24, 60px); grid-template-rows: repeat(24, 60px);
} }
.dayTime {
padding-left: 0.5rem;
padding-right: 0.5rem;
}
.event { .event {
cursor: pointer; cursor: pointer;
padding: 0.25rem 0.35rem; padding: 0.25rem 0.35rem;
margin-bottom: 6px; margin-bottom: 6px;
position: absolute;
width: 100%;
} }
.eventTitle { .eventTitle {
...@@ -61,3 +72,11 @@ body::before { ...@@ -61,3 +72,11 @@ body::before {
font-size: x-small; font-size: x-small;
font-weight: 200; font-weight: 200;
} }
.line {
border: none;
position: absolute;
width: 100%;
color: transparent;
border-bottom: 1px solid #111;
}
...@@ -4,6 +4,7 @@ ...@@ -4,6 +4,7 @@
left: 0; left: 0;
right: 0; right: 0;
bottom: 0; bottom: 0;
z-index: 50;
} }
#portal > div { #portal > div {
......
...@@ -7,7 +7,7 @@ ...@@ -7,7 +7,7 @@
<link rel="stylesheet" href="css/layout.css" /> <link rel="stylesheet" href="css/layout.css" />
<link rel="stylesheet" href="css/style.css" /> <link rel="stylesheet" href="css/style.css" />
<link rel="stylesheet" href="css/responsive.css" />
<link rel="stylesheet" href="css/portal.css" /> <link rel="stylesheet" href="css/portal.css" />
<link rel="stylesheet" href="css/overrides.css" /> <link rel="stylesheet" href="css/overrides.css" />
<link rel="stylesheet" href="css/dark.css" /> <link rel="stylesheet" href="css/dark.css" />
...@@ -15,7 +15,7 @@ ...@@ -15,7 +15,7 @@
<body class="dark"> <body class="dark">
<main> <main>
<div class="time"> <div class="time">
<div class="dayName"></div> <div class="dayName">&nbsp;</div>
<div class="dayTimes"> <div class="dayTimes">
<div class="dayTime">00:00</div> <div class="dayTime">00:00</div>
<div class="dayTime">01:00</div> <div class="dayTime">01:00</div>
...@@ -45,34 +45,7 @@ ...@@ -45,34 +45,7 @@
</div> </div>
<div class="day"> <div class="day">
<div class="dayName">Hétfő</div> <div class="dayName">Hétfő</div>
<div class="dayEvents" id="hétfő"> <div class="dayEvents" id="hétfő"></div>
<div class="event length--4" style="grid-row-start: 4; display: none">
<div class="eventTitle">Kommunikációs hálózatok 2</div>
<div class="eventDetails">
<div class="eventTime">10:00-14:00</div>
</div>
</div>
<div
class="eventSubdivide length--2"
style="grid-row-start: 8; display: none"
>
<div class="event length--2" style="grid-row-start: 1">
<div class="eventTitle">Algoritmus elmélet</div>
<div class="eventDetails">
<div class="eventTime">12:00-14:00</div>
</div>
</div>
<div
class="event length--2"
style="grid-row-start: 1; display: none"
>
<div class="eventTitle">Kotlin alapú szoftverfejlesztés</div>
<div class="eventDetails">
<div class="eventTime">12:00-14:00</div>
</div>
</div>
</div>
</div>
</div> </div>
<div class="day"> <div class="day">
<div class="dayName">Kedd</div> <div class="dayName">Kedd</div>
...@@ -106,7 +79,7 @@ ...@@ -106,7 +79,7 @@
&nbsp;X&nbsp; &nbsp;X&nbsp;
</button> </button>
<h3>Esemény hozzáadása</h3> <h3>Esemény hozzáadása</h3>
<form id="addEventForm"> <form id="addEventForm" autocomplete="off">
<label for="addEventName">Esemény:</label> <label for="addEventName">Esemény:</label>
<input <input
type="text" type="text"
...@@ -126,15 +99,14 @@ ...@@ -126,15 +99,14 @@
type="time" type="time"
name="addEventStartTime" name="addEventStartTime"
id="addEventStartTime" id="addEventStartTime"
placeholder="HH:MM"
/> />
<label for="addEventLength">Hossza:</label> <label for="addEventEndTime">Vége:</label>
<input <input
type="number" type="time"
name="addEventLength" name="addEventEndTime"
id="addEventLength" id="addEventEndTime"
min="1" placeholder="HH:MM"
max="12"
placeholder="óra"
/> />
<input type="submit" value="Hozzáad" /> <input type="submit" value="Hozzáad" />
</form> </form>
......
...@@ -33,17 +33,24 @@ function dayEventListener(e) { ...@@ -33,17 +33,24 @@ function dayEventListener(e) {
function addEventToDom(event) { function addEventToDom(event) {
const container = document.createElement("div"); const container = document.createElement("div");
container.classList.add("event"); container.classList.add("event");
container.style.gridRowEnd = `span ${event.length}`; const offset =
container.style.gridRowStart = `${event.startTime - 6}`; parseInt(event.startTime.split(":")[0]) * 60 +
parseInt(event.startTime.split(":")[1]);
const height =
parseInt(event.endTime.split(":")[0]) * 60 +
parseInt(event.endTime.split(":")[1]) -
offset;
container.style.top = `${offset}px`;
container.style.height = `${height < 36 ? 36 : height}px`;
const title = document.createElement("h4"); const title = document.createElement("h4");
title.innerHTML = event.name; title.innerHTML = event.name;
title.classList.add("eventTitle"); title.classList.add("eventTitle");
title.style.webkitLineClamp = `${event.length == 1 ? 2 : 8}`; title.style.webkitLineClamp = `${parseInt(height / 13)}`;
container.appendChild(title); container.appendChild(title);
const time = document.createElement("p"); const time = document.createElement("p");
time.innerHTML = `${event.startTime}:00-${event.startTime + event.length}:00`; time.innerHTML = `${event.startTime}-${event.endTime}`;
time.classList.add("eventTime"); time.classList.add("eventTime");
container.appendChild(time); container.appendChild(time);
...@@ -62,10 +69,8 @@ function submitAddEventForm(e) { ...@@ -62,10 +69,8 @@ function submitAddEventForm(e) {
const event = { const event = {
name: addEventForm.elements.addEventName.value, name: addEventForm.elements.addEventName.value,
day: addEventForm.elements.addEventDay.value.toLowerCase(), day: addEventForm.elements.addEventDay.value.toLowerCase(),
startTime: parseInt( startTime: addEventForm.elements.addEventStartTime.value,
addEventForm.elements.addEventStartTime.value.split(":")[0] endTime: addEventForm.elements.addEventEndTime.value,
),
length: parseInt(addEventForm.elements.addEventLength.value),
}; };
events.push(event); events.push(event);
window.localStorage.setItem("events", JSON.stringify(events)); window.localStorage.setItem("events", JSON.stringify(events));
...@@ -75,6 +80,19 @@ function submitAddEventForm(e) { ...@@ -75,6 +80,19 @@ function submitAddEventForm(e) {
closePortal(); closePortal();
} }
function addSeparators() {
const dayTimes = document.getElementsByClassName("dayTimes")[0];
const container = document.createElement("div");
for (let i = 0; i < 23; i++) {
const line = document.createElement("hr");
line.classList.add("line");
line.style.top = `${60 * i + 120}px`;
container.appendChild(line);
}
dayTimes.appendChild(container);
}
function addClickListeners() { function addClickListeners() {
const days = document.getElementsByClassName("dayEvents"); const days = document.getElementsByClassName("dayEvents");
console.log(days); console.log(days);
...@@ -96,3 +114,4 @@ function addClickListeners() { ...@@ -96,3 +114,4 @@ function addClickListeners() {
} }
addClickListeners(); addClickListeners();
addSeparators();
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment