klmp200/Sith
1
0
Fork 0
mirror of https://github.com/ae-utbm/sith.git synced 2025-01-07 23:51:14 +00:00
Code Issues Packages Projects Releases Wiki Activity

nice looking popup with well aligned icon

Browse Source
This commit is contained in:
Antoine Bartuccio 2024-12-31 15:43:18 +01:00
parent eac2709e86
commit fd2295119d
2 changed files with 18 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
com/static/bundled/com/components/ics-calendar-index.ts
View File

@ -64,7 +64,6 @@ export class IcsCalendar extends inheritHtmlElement("div") {
const popup = document.createElement("div"); const popup = document.createElement("div");
const popupContainer = document.createElement("div"); const popupContainer = document.createElement("div");
const popupFirstRow = document.createElement("div"); const popupFirstRow = document.createElement("div");
const popupSecondRow = document.createElement("div");
const popupTitleTimeIcon = document.createElement("i"); const popupTitleTimeIcon = document.createElement("i");
const popupTitleTime = document.createElement("div"); const popupTitleTime = document.createElement("div");
const popupTitle = document.createElement("h4"); const popupTitle = document.createElement("h4");
@ -73,24 +72,25 @@ export class IcsCalendar extends inheritHtmlElement("div") {
popup.setAttribute("id", "event-details"); popup.setAttribute("id", "event-details");
popupContainer.setAttribute("class", "event-details-container"); popupContainer.setAttribute("class", "event-details-container");
popupFirstRow.setAttribute("class", "event-details-row"); popupFirstRow.setAttribute("class", "event-details-row");
popupSecondRow.setAttribute("class", "event-details-row");
popupTitleTimeIcon.setAttribute("class", "fa-solid fa-calendar-days fa-xl"); popupTitleTimeIcon.setAttribute(
"class",
"fa-solid fa-calendar-days fa-xl event-detail-row-icon",
);
popupTitle.setAttribute("class", "event-details-title"); popupTitle.setAttribute("class", "event-details-row-content");
popupTitle.textContent = event.event.title; popupTitle.textContent = event.event.title;
popupTime.setAttribute("class", "event-details-time"); popupTime.setAttribute("class", "event-details-row-content");
popupTime.textContent = `${this.formatDate(event.event.start)} - ${this.formatDate(event.event.end)}`; popupTime.textContent = `${this.formatDate(event.event.start)} - ${this.formatDate(event.event.end)}`;
popupTitleTime.appendChild(popupTitle); popupTitleTime.appendChild(popupTitle);
popupTitleTime.appendChild(popupTime); popupTitleTime.appendChild(popupTime);
popupFirstRow.appendChild(popupTitleTimeIcon); popupFirstRow.appendChild(popupTitleTimeIcon);
popupSecondRow.appendChild(popupTitleTime); popupFirstRow.appendChild(popupTitleTime);
popupContainer.appendChild(popupFirstRow); popupContainer.appendChild(popupFirstRow);
popupContainer.appendChild(popupSecondRow);
popup.appendChild(popupContainer); popup.appendChild(popupContainer);

13
com/static/com/components/ics-calendar.scss
View File

@ -41,13 +41,22 @@ ics-calendar {
box-shadow: var(--event-details-box-shadow); box-shadow: var(--event-details-box-shadow);
} }
.event-detail-row-icon {
margin-left: 10px;
margin-right: 20px;
align-content: center;
align-self: center;
}
.event-details-row { .event-details-row {
display: flex; display: flex;
flex-direction: row;
align-items: start; align-items: start;
} }
.event-details-title { .event-details-row-content {
display: flex;
align-items: start;
flex-direction: row;
background-color: var(--event-details-background-color); background-color: var(--event-details-background-color);
margin-top: 0px; margin-top: 0px;
margin-bottom: 4px; margin-bottom: 4px;