ui/ux improvements on time page
All checks were successful
Tests / Run Go Tests (push) Successful in 15s
All checks were successful
Tests / Run Go Tests (push) Successful in 15s
This commit is contained in:
@@ -197,6 +197,9 @@
|
||||
.relative {
|
||||
position: relative;
|
||||
}
|
||||
.top-2 {
|
||||
top: calc(var(--spacing) * 2);
|
||||
}
|
||||
.top-2\.5 {
|
||||
top: calc(var(--spacing) * 2.5);
|
||||
}
|
||||
@@ -206,6 +209,9 @@
|
||||
.right-1 {
|
||||
right: calc(var(--spacing) * 1);
|
||||
}
|
||||
.right-2 {
|
||||
right: calc(var(--spacing) * 2);
|
||||
}
|
||||
.right-2\.5 {
|
||||
right: calc(var(--spacing) * 2.5);
|
||||
}
|
||||
@@ -236,6 +242,19 @@
|
||||
.ml-1 {
|
||||
margin-left: calc(var(--spacing) * 1);
|
||||
}
|
||||
.icon-\[material-symbols-light--cancel-outline\] {
|
||||
display: inline-block;
|
||||
width: 1.25em;
|
||||
height: 1.25em;
|
||||
background-color: currentColor;
|
||||
-webkit-mask-image: var(--svg);
|
||||
mask-image: var(--svg);
|
||||
-webkit-mask-repeat: no-repeat;
|
||||
mask-repeat: no-repeat;
|
||||
-webkit-mask-size: 100% 100%;
|
||||
mask-size: 100% 100%;
|
||||
--svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='black' d='m8.4 16.308l3.6-3.6l3.6 3.6l.708-.708l-3.6-3.6l3.6-3.6l-.708-.708l-3.6 3.6l-3.6-3.6l-.708.708l3.6 3.6l-3.6 3.6zM12.003 21q-1.866 0-3.51-.708q-1.643-.709-2.859-1.924t-1.925-2.856T3 12.003t.709-3.51Q4.417 6.85 5.63 5.634t2.857-1.925T11.997 3t3.51.709q1.643.708 2.859 1.922t1.925 2.857t.709 3.509t-.708 3.51t-1.924 2.859t-2.856 1.925t-3.509.709M12 20q3.35 0 5.675-2.325T20 12t-2.325-5.675T12 4T6.325 6.325T4 12t2.325 5.675T12 20m0-8'/%3E%3C/svg%3E");
|
||||
}
|
||||
.icon-\[material-symbols-light--check-circle-outline\] {
|
||||
display: inline-block;
|
||||
width: 1.25em;
|
||||
@@ -353,6 +372,14 @@
|
||||
width: calc(var(--spacing) * 4);
|
||||
height: calc(var(--spacing) * 4);
|
||||
}
|
||||
.size-5 {
|
||||
width: calc(var(--spacing) * 5);
|
||||
height: calc(var(--spacing) * 5);
|
||||
}
|
||||
.size-6 {
|
||||
width: calc(var(--spacing) * 6);
|
||||
height: calc(var(--spacing) * 6);
|
||||
}
|
||||
.h-2 {
|
||||
height: calc(var(--spacing) * 2);
|
||||
}
|
||||
@@ -380,6 +407,9 @@
|
||||
.w-5 {
|
||||
width: calc(var(--spacing) * 5);
|
||||
}
|
||||
.w-9 {
|
||||
width: calc(var(--spacing) * 9);
|
||||
}
|
||||
.w-9\/10 {
|
||||
width: calc(9/10 * 100%);
|
||||
}
|
||||
@@ -392,6 +422,9 @@
|
||||
.w-full {
|
||||
width: 100%;
|
||||
}
|
||||
.flex-shrink {
|
||||
flex-shrink: 1;
|
||||
}
|
||||
.flex-shrink-0 {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
@@ -407,9 +440,15 @@
|
||||
.basis-\[content\] {
|
||||
flex-basis: content;
|
||||
}
|
||||
.border-collapse {
|
||||
border-collapse: collapse;
|
||||
}
|
||||
.cursor-pointer {
|
||||
cursor: pointer;
|
||||
}
|
||||
.resize {
|
||||
resize: both;
|
||||
}
|
||||
.scroll-m-2 {
|
||||
scroll-margin: calc(var(--spacing) * 2);
|
||||
}
|
||||
@@ -564,6 +603,9 @@
|
||||
.bg-red-600 {
|
||||
background-color: var(--color-red-600);
|
||||
}
|
||||
.mask-repeat {
|
||||
mask-repeat: repeat;
|
||||
}
|
||||
.p-1 {
|
||||
padding: calc(var(--spacing) * 1);
|
||||
}
|
||||
@@ -634,6 +676,13 @@
|
||||
.uppercase {
|
||||
text-transform: uppercase;
|
||||
}
|
||||
.underline {
|
||||
text-decoration-line: underline;
|
||||
}
|
||||
.outline {
|
||||
outline-style: var(--tw-outline-style);
|
||||
outline-width: 1px;
|
||||
}
|
||||
.filter {
|
||||
filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
|
||||
}
|
||||
@@ -702,6 +751,16 @@
|
||||
display: inline;
|
||||
}
|
||||
}
|
||||
.group-\[\.edit\]\/button\:block {
|
||||
&:is(:where(.group\/button):is(.edit) *) {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
.group-\[\.edit\]\/button\:hidden {
|
||||
&:is(:where(.group\/button):is(.edit) *) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
.placeholder\:text-neutral-400 {
|
||||
&::placeholder {
|
||||
color: var(--color-neutral-400);
|
||||
@@ -857,6 +916,13 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
.group-\[\.edit\]\/button\:md\:block {
|
||||
&:is(:where(.group\/button):is(.edit) *) {
|
||||
@media (width >= 48rem) {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
.lg\:hidden {
|
||||
@media (width >= 64rem) {
|
||||
display: none;
|
||||
@@ -942,7 +1008,7 @@
|
||||
border-width: 1px;
|
||||
border-color: var(--color-neutral-800);
|
||||
transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
|
||||
transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
|
||||
transition-timing-function: var( --tw-ease, var(--default-transition-timing-function) );
|
||||
transition-duration: var(--tw-duration, var(--default-transition-duration));
|
||||
}
|
||||
input.btn, select.btn {
|
||||
@@ -985,6 +1051,10 @@
|
||||
.edit-box input:focus {
|
||||
outline: none;
|
||||
}
|
||||
div.edit {
|
||||
border-width: 1px;
|
||||
background-color: var(--color-neutral-300);
|
||||
}
|
||||
@media (width >=48rem) {
|
||||
.grid-main {
|
||||
grid-template-columns: repeat(5, 1fr);
|
||||
@@ -1017,6 +1087,11 @@
|
||||
syntax: "*";
|
||||
inherits: false;
|
||||
}
|
||||
@property --tw-outline-style {
|
||||
syntax: "*";
|
||||
inherits: false;
|
||||
initial-value: solid;
|
||||
}
|
||||
@property --tw-blur {
|
||||
syntax: "*";
|
||||
inherits: false;
|
||||
@@ -1081,6 +1156,7 @@
|
||||
--tw-border-style: solid;
|
||||
--tw-divide-y-reverse: 0;
|
||||
--tw-font-weight: initial;
|
||||
--tw-outline-style: solid;
|
||||
--tw-blur: initial;
|
||||
--tw-brightness: initial;
|
||||
--tw-contrast: initial;
|
||||
|
||||
@@ -1,14 +1,67 @@
|
||||
function editDay(element, event, formId) {
|
||||
var form = element.closest(".grid-sub").querySelector(".all-booking-component > form");
|
||||
form.classList.toggle("edit");
|
||||
element.classList.toggle("edit");
|
||||
if (element.classList.contains("edit")) {
|
||||
event.preventDefault();
|
||||
form.querySelectorAll("input, select").forEach((input) => {
|
||||
input.disabled = false;
|
||||
function clearEditState() {
|
||||
for (e of document.querySelectorAll(".edit")) {
|
||||
e.classList.remove("edit");
|
||||
}
|
||||
toggleAbsenceEdit(false);
|
||||
}
|
||||
|
||||
function editWorkday(element, event, id, isWorkDay) {
|
||||
console.log("editWorkday called", isWorkDay);
|
||||
event.preventDefault();
|
||||
var form = document.getElementById(id);
|
||||
if (form == null) {
|
||||
form = element
|
||||
.closest(".grid-sub")
|
||||
.querySelector(".all-booking-component > form");
|
||||
}
|
||||
|
||||
clearEditState();
|
||||
element.closest(".grid-sub").classList.add("edit");
|
||||
toggleAbsenceEdit(!isWorkDay);
|
||||
|
||||
if (isWorkDay) {
|
||||
element.classList.add("edit");
|
||||
if (element.classList.contains("edit")) {
|
||||
form.querySelectorAll("input, select").forEach((input) => {
|
||||
input.disabled = false;
|
||||
});
|
||||
} else {
|
||||
form.submit();
|
||||
}
|
||||
} else {
|
||||
var absenceForm = document.getElementById("absence_form");
|
||||
|
||||
if (id != 0) {
|
||||
syncFields(form, absenceForm, [
|
||||
"date_from",
|
||||
"date_to",
|
||||
"aw_type",
|
||||
"aw_id",
|
||||
]);
|
||||
} else {
|
||||
absenceForm.querySelector("[name=date_from]").value = form.id.replace(
|
||||
"time-",
|
||||
"",
|
||||
);
|
||||
absenceForm.querySelector("[name=date_to]").value = form.id.replace(
|
||||
"time-",
|
||||
"",
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function toggleAbsenceEdit(state) {
|
||||
var form = document.getElementById("absence_form");
|
||||
if (state) {
|
||||
form.classList.remove("hidden");
|
||||
form.scrollIntoView({
|
||||
behavior: "smooth",
|
||||
block: "start",
|
||||
inline: "nearest",
|
||||
});
|
||||
} else {
|
||||
form.submit();
|
||||
form.classList.add("hidden");
|
||||
}
|
||||
}
|
||||
|
||||
@@ -21,31 +74,6 @@ function syncFields(from, to, fieldsToSync) {
|
||||
});
|
||||
}
|
||||
|
||||
function editAbsence(element, event, absenceId) {
|
||||
event.preventDefault();
|
||||
var form = document.getElementById("absence_form");
|
||||
|
||||
if (absenceId != 0) {
|
||||
var dataForm = document.getElementById(absenceId);
|
||||
syncFields(dataForm, form, ["date_from", "date_to", "aw_type", "aw_id"]);
|
||||
} else {
|
||||
var dataForm = element.closest(".grid-sub").querySelector(".all-booking-component > form");
|
||||
form.querySelector("[name=date_from]").value = dataForm.id.replace("time-", "");
|
||||
form.querySelector("[name=date_to]").value = dataForm.id.replace("time-", "");
|
||||
}
|
||||
form.classList.remove("hidden");
|
||||
form.scrollIntoView({ behavior: "smooth", block: "start", inline: "nearest" });
|
||||
}
|
||||
|
||||
function editAbwesenheit(element, event) {
|
||||
var newBookingComponent = element.closest(".grid-sub").querySelector(".new-booking-component");
|
||||
if (element.value == 0) {
|
||||
newBookingComponent.style.display = "";
|
||||
} else {
|
||||
newBookingComponent.style.display = "none";
|
||||
}
|
||||
}
|
||||
|
||||
function navigateWeek(element, event, direction) {
|
||||
var dateInput = element.closest("form").querySelector("input[type=date]");
|
||||
var date = dateInput.valueAsDate;
|
||||
|
||||
Reference in New Issue
Block a user