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
Show whitespace changes
Inline Side-by-side
css/overrides.css
+ 19
− 0
View file @ 8c60278c
......@@ -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;
}
css/portal.css
+ 1
− 0
View file @ 8c60278c
......@@ -4,6 +4,7 @@
left: 0;
right: 0;
bottom: 0;
z-index: 50;
}
#portal > div {
......
index.html
+ 10
− 38
View file @ 8c60278c
......@@ -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">&nbsp;</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 @@
&nbsp;X&nbsp;
</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>
......
js/index.js
+ 27
− 8
View file @ 8c60278c
......@@ -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();
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment

Hosted with :heart: by KSZK