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);