diff --git a/css/overrides.css b/css/overrides.css
index 910a97b99dd58d560eca484a86f0f1d0186991a8..a1b127a39799cf627fffd21fee84b094af21ad5f 100644
--- a/css/overrides.css
+++ b/css/overrides.css
@@ -24,6 +24,7 @@ body::before {
.day {
height: 100%;
+ min-width: 120px;
}
.dayEvents {
@@ -35,16 +36,26 @@ body::before {
.dayName {
position: sticky;
top: 0;
+ z-index: 20;
+ margin-bottom: 2px;
+ box-shadow: 0px 3px 4px -2px black;
}
.dayTimes {
grid-template-rows: repeat(24, 60px);
}
+.dayTime {
+ padding-left: 0.5rem;
+ padding-right: 0.5rem;
+}
+
.event {
cursor: pointer;
padding: 0.25rem 0.35rem;
margin-bottom: 6px;
+ position: absolute;
+ width: 100%;
}
.eventTitle {
@@ -61,3 +72,11 @@ body::before {
font-size: x-small;
font-weight: 200;
}
+
+.line {
+ border: none;
+ position: absolute;
+ width: 100%;
+ color: transparent;
+ border-bottom: 1px solid #111;
+}
diff --git a/css/portal.css b/css/portal.css
index 2740a921f3ea6a148b2fa1bef67fbc2fef2aab36..4aa605fda1f5f186c86b3ffbb2c8405e5b0fd118 100644
--- a/css/portal.css
+++ b/css/portal.css
@@ -4,6 +4,7 @@
left: 0;
right: 0;
bottom: 0;
+ z-index: 50;
}
#portal > div {
diff --git a/index.html b/index.html
index cde107bf06642e1d5341cad28c97cda70e086633..d6a011b5cc25f31e81a30f09e1d640f816d953e1 100644
--- a/index.html
+++ b/index.html
@@ -7,7 +7,7 @@
<link rel="stylesheet" href="css/layout.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/overrides.css" />
<link rel="stylesheet" href="css/dark.css" />
@@ -15,7 +15,7 @@
<body class="dark">
<main>
<div class="time">
- <div class="dayName"></div>
+ <div class="dayName"> </div>
<div class="dayTimes">
<div class="dayTime">00:00</div>
<div class="dayTime">01:00</div>
@@ -45,34 +45,7 @@
</div>
<div class="day">
<div class="dayName">Hétfő</div>
- <div class="dayEvents" id="hétfő">
- <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 class="dayEvents" id="hétfő"></div>
</div>
<div class="day">
<div class="dayName">Kedd</div>
@@ -106,7 +79,7 @@
X
</button>
<h3>Esemény hozzáadása</h3>
- <form id="addEventForm">
+ <form id="addEventForm" autocomplete="off">
<label for="addEventName">Esemény:</label>
<input
type="text"
@@ -126,15 +99,14 @@
type="time"
name="addEventStartTime"
id="addEventStartTime"
+ placeholder="HH:MM"
/>
- <label for="addEventLength">Hossza:</label>
+ <label for="addEventEndTime">Vége:</label>
<input
- type="number"
- name="addEventLength"
- id="addEventLength"
- min="1"
- max="12"
- placeholder="óra"
+ type="time"
+ name="addEventEndTime"
+ id="addEventEndTime"
+ placeholder="HH:MM"
/>
<input type="submit" value="Hozzáad" />
</form>
diff --git a/js/index.js b/js/index.js
index 2d6dd806867d7554c80d86d184072445a1985bdb..b44b0f6372d40a011fa49abb5ba32b8b518215d1 100644
--- a/js/index.js
+++ b/js/index.js
@@ -33,17 +33,24 @@ function dayEventListener(e) {
function addEventToDom(event) {
const container = document.createElement("div");
container.classList.add("event");
- container.style.gridRowEnd = `span ${event.length}`;
- container.style.gridRowStart = `${event.startTime - 6}`;
+ const offset =
+ 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");
title.innerHTML = event.name;
title.classList.add("eventTitle");
- title.style.webkitLineClamp = `${event.length == 1 ? 2 : 8}`;
+ title.style.webkitLineClamp = `${parseInt(height / 13)}`;
container.appendChild(title);
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");
container.appendChild(time);
@@ -62,10 +69,8 @@ function submitAddEventForm(e) {
const event = {
name: addEventForm.elements.addEventName.value,
day: addEventForm.elements.addEventDay.value.toLowerCase(),
- startTime: parseInt(
- addEventForm.elements.addEventStartTime.value.split(":")[0]
- ),
- length: parseInt(addEventForm.elements.addEventLength.value),
+ startTime: addEventForm.elements.addEventStartTime.value,
+ endTime: addEventForm.elements.addEventEndTime.value,
};
events.push(event);
window.localStorage.setItem("events", JSON.stringify(events));
@@ -75,6 +80,19 @@ function submitAddEventForm(e) {
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() {
const days = document.getElementsByClassName("dayEvents");
console.log(days);
@@ -96,3 +114,4 @@ function addClickListeners() {
}
addClickListeners();
+addSeparators();