diff --git a/clockIn.html b/clockIn.html index c0d7cd9..0241112 100644 --- a/clockIn.html +++ b/clockIn.html @@ -35,12 +35,12 @@ and open the template in the editor. - +
diff --git a/css/style.css b/css/style.css index 6220860..5f4694b 100644 --- a/css/style.css +++ b/css/style.css @@ -193,17 +193,15 @@ h3 { background-size: cover; background-repeat: no-repeat; } -.footer { - display: none; +footer { position: absolute; bottom: 0; width: 100%; height: 100px; text-align: center; -} -.footer { animation: fadeIn 0.2s ease-in-out; } + .in, .inMiddle { display: inline; position: static; @@ -342,7 +340,7 @@ header { opacity: 1; } .confirm { - display: none; + visibility: hidden; position: fixed; top: 0; left: 0; @@ -373,11 +371,12 @@ header { } .fade-in { - display: block; + visibility: visible; animation: fadeIn 0.2s ease-in-out forwards; } .fade-out { + visibility: hidden; animation: fadeOut 0.2s ease-in-out forwards; } @@ -407,7 +406,6 @@ header { } 100% { opacity: 0; - display: none; } } diff --git a/js/clockIn.js b/js/clockIn.js index d4f87d3..84bbd40 100644 --- a/js/clockIn.js +++ b/js/clockIn.js @@ -1,5 +1,5 @@ let userData = ""; -const footer = document.querySelector(".footer"); +const footer = document.querySelector("footer"); const txtName = document.querySelector("#txtNombre"); const inBtn = document.querySelector(".in"); const inMiddleBtn = document.querySelector(".inMiddle"); @@ -22,7 +22,7 @@ function setEvents() { outMiddleBtn.addEventListener("click", () => clockIn("middle")); outBtn.addEventListener("click", () => clockIn("out")); - // setTimeout(close, 5000); + setTimeout(close, 5000); } async function clockIn(direction) { @@ -50,7 +50,7 @@ async function clockIn(direction) { } function setView() { - footer.style.display = "none"; + footer.style.hidden = true; inBtn.style.display = "none"; inMiddleBtn.style.display = "none"; outMiddleBtn.style.display = "none"; @@ -67,7 +67,7 @@ function setView() { async function getInfo() { const data = await call("WorkerTimeControls/getClockIn", { params: { workerFk: userData["userFk"] } }); - footer.style.display = "block"; + footer.style.hidden = false; printTimetable(data); } @@ -75,17 +75,17 @@ function printTimetable(timetable) { const dated = new Date(); dated.setDate(dated.getDate() - 6); - const fragment = document.createDocumentFragment(); + const table = document.createDocumentFragment(); const totalEl = document.querySelector(".total"); let totalHr = 0; for (let day = 0; day < weekDays.length - 1; day++) { const label = createElement("label", { text: weekDays[dated.getDay()] }); - fragment.append(label); + table.append(label); dated.setDate(dated.getDate() + 1); } - fragment.append(createElement("label", { text: "HOY", classes: ["hoy"] }), createElement("li", { classes: ["hrTop"] })); + table.append(createElement("label", { text: "HOY", classes: ["hoy"] }), createElement("li", { classes: ["hrTop"] })); const liContent = createElement("li", {}); const liTotals = createElement("li", {}); @@ -104,12 +104,12 @@ function printTimetable(timetable) { totalHr += timetable[0][`${day}daysAgoTotal`] || 0; } } - fragment.append(liContent); - if (index === timetable.length - 1) fragment.append(createElement("hr", {}), liTotals); + table.append(liContent); + if (index === timetable.length - 1) table.append(createElement("hr", {}), liTotals); }); totalEl.innerText = `Total: ${totalHr ? secondsToHm(totalHr) : 0} h`; - timetableList.append(fragment); + timetableList.append(table); } const ifIsEmpty = (value) => (value?.trim() ? "show" : "hide"); diff --git a/js/main.js b/js/main.js index 7a605f2..692e381 100644 --- a/js/main.js +++ b/js/main.js @@ -5,7 +5,7 @@ const confirmBtn = document.querySelector(".confirm"); function confirmReset() { confirmBtn.classList.remove("confirmKO", "fade-in", "fade-out"); - confirmBtn.style.display = "none"; + confirmBtn.style.hidden = true; txtConfirm.textContent = ""; } @@ -14,7 +14,7 @@ function printError(msg) { const txtConfirm = document.querySelector(".txtConfirm"); txtConfirm.textContent = msg; confirmBtn.classList.add("confirmKO"); - confirmBtn.style.display = "block"; + confirmBtn.style.hidden = false; confirmBtn.classList.add("fade-in"); setTimeout(() => (confirmBtn.classList.add("fade-out"), confirmReset()), 2300);