tidying js & scss
This commit is contained in:
parent
ecd4d83e3f
commit
f609a2f836
3 changed files with 137 additions and 171 deletions
132
assets/css/_s73k-calendar.scss
Normal file
132
assets/css/_s73k-calendar.scss
Normal file
|
|
@ -0,0 +1,132 @@
|
|||
/* calendar table rounded */
|
||||
table.table.table-calendar span.badge {
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
overflow: hidden;
|
||||
text-overflow: clip;
|
||||
white-space: nowrap;
|
||||
padding-right: 0.7em;
|
||||
border-right: 0.7em solid transparent;
|
||||
margin-bottom: 0.1em;
|
||||
}
|
||||
table.table.table-calendar thead tr th,
|
||||
table.table.table-calendar tbody tr td {
|
||||
width: 2.5rem;
|
||||
max-width: 2.5rem;
|
||||
white-space: nowrap;
|
||||
}
|
||||
table.table.table-calendar tbody tr td {
|
||||
font-size: $font-size-sm;
|
||||
height: 4.1rem;
|
||||
padding: 0.2rem 0.4rem;
|
||||
@include media-breakpoint-up(sm) {
|
||||
height: 4.3rem;
|
||||
padding: 0.2rem 0.5rem;
|
||||
}
|
||||
@include media-breakpoint-up(md) {
|
||||
height: 4.7rem;
|
||||
padding: 0.2rem 0.5rem;
|
||||
}
|
||||
@include media-breakpoint-up(lg) {
|
||||
font-size: $font-size-base;
|
||||
height: 5.5rem;
|
||||
padding: 0.3rem 0.5rem;
|
||||
}
|
||||
@include media-breakpoint-up(xl) {
|
||||
height: 6.5rem;
|
||||
padding: 0.35rem 0.5rem;
|
||||
}
|
||||
@include media-breakpoint-up(xxl) {
|
||||
height: 7.5rem;
|
||||
padding: 0.4rem 0.75rem;
|
||||
}
|
||||
}
|
||||
|
||||
table.table.table-rounded > :not(:last-child) > :last-child > * {
|
||||
border-bottom-color: $dark;
|
||||
}
|
||||
table.table.table-rounded {
|
||||
border-collapse: separate;
|
||||
border-spacing: 0;
|
||||
border-style: hidden;
|
||||
border-top-left-radius: $border-radius;
|
||||
border-top-right-radius: $border-radius;
|
||||
border-bottom-left-radius: $border-radius;
|
||||
border-bottom-right-radius: $border-radius;
|
||||
thead {
|
||||
tr {
|
||||
th {
|
||||
border-top: 1px solid $table-border-color;
|
||||
border-right: 1px solid $table-border-color;
|
||||
// border-bottom: 2px solid $dark !important;
|
||||
border-left: none;
|
||||
&:first-child {
|
||||
border-top-left-radius: $border-radius;
|
||||
border-left: 1px solid $table-border-color;
|
||||
}
|
||||
&:last-child {
|
||||
border-top-right-radius: $border-radius;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
tbody {
|
||||
tr {
|
||||
td {
|
||||
border-top: none;
|
||||
border-right: 1px solid $table-border-color;
|
||||
border-bottom: 1px solid $table-border-color !important;
|
||||
border-left: none;
|
||||
&:first-child {
|
||||
border-left: 1px solid $table-border-color;
|
||||
}
|
||||
}
|
||||
&:last-child {
|
||||
td:first-child {
|
||||
border-bottom-left-radius: $border-radius;
|
||||
}
|
||||
td:last-child {
|
||||
border-bottom-right-radius: $border-radius;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* selected days background triangle color */
|
||||
.bg-triangle-primary {
|
||||
background: linear-gradient(
|
||||
to bottom right,
|
||||
$primary 0%,
|
||||
$primary 50%,
|
||||
$secondary 50%,
|
||||
$secondary 100%
|
||||
);
|
||||
}
|
||||
.bg-triangle-info {
|
||||
background: linear-gradient(
|
||||
to bottom right,
|
||||
$info 0%,
|
||||
$info 50%,
|
||||
$secondary 50%,
|
||||
$secondary 100%
|
||||
);
|
||||
}
|
||||
.bg-triangle-light {
|
||||
background: linear-gradient(
|
||||
to bottom right,
|
||||
$light 0%,
|
||||
$light 50%,
|
||||
$secondary 50%,
|
||||
$secondary 100%
|
||||
);
|
||||
}
|
||||
.bg-triangle-white {
|
||||
background: linear-gradient(
|
||||
to bottom right,
|
||||
$white 0%,
|
||||
$white 50%,
|
||||
$secondary 50%,
|
||||
$secondary 100%
|
||||
);
|
||||
}
|
||||
|
|
@ -13,6 +13,9 @@
|
|||
/* Navbar toggler icon override */
|
||||
@import "nav-burger";
|
||||
|
||||
/* Shift73k shift-assign calendar styling */
|
||||
@import "s73k-calendar";
|
||||
|
||||
/* extra */
|
||||
.was-validated .no-valid-style .form-check-input:valid,
|
||||
.form-check-input.is-valid {
|
||||
|
|
@ -61,136 +64,3 @@
|
|||
.right-addon select {
|
||||
padding-right: 2rem;
|
||||
}
|
||||
|
||||
/* calendar table rounded */
|
||||
table.table.table-calendar span.badge {
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
overflow: hidden;
|
||||
text-overflow: clip;
|
||||
white-space: nowrap;
|
||||
padding-right: 0.7em;
|
||||
border-right: 0.7em solid transparent;
|
||||
margin-bottom: 0.1em;
|
||||
}
|
||||
table.table.table-calendar thead tr th,
|
||||
table.table.table-calendar tbody tr td {
|
||||
width: 2.5rem;
|
||||
max-width: 2.5rem;
|
||||
white-space: nowrap;
|
||||
}
|
||||
table.table.table-calendar tbody tr td {
|
||||
font-size: $font-size-sm;
|
||||
height: 4.1rem;
|
||||
padding: 0.2rem 0.4rem;
|
||||
@include media-breakpoint-up(sm) {
|
||||
height: 4.3rem;
|
||||
padding: 0.2rem 0.5rem;
|
||||
}
|
||||
@include media-breakpoint-up(md) {
|
||||
height: 4.7rem;
|
||||
padding: 0.2rem 0.5rem;
|
||||
}
|
||||
@include media-breakpoint-up(lg) {
|
||||
font-size: $font-size-base;
|
||||
height: 5.5rem;
|
||||
padding: 0.3rem 0.5rem;
|
||||
}
|
||||
@include media-breakpoint-up(xl) {
|
||||
height: 6.5rem;
|
||||
padding: 0.35rem 0.5rem;
|
||||
}
|
||||
@include media-breakpoint-up(xxl) {
|
||||
height: 7.5rem;
|
||||
padding: 0.4rem 0.75rem;
|
||||
}
|
||||
}
|
||||
|
||||
table.table.table-rounded > :not(:last-child) > :last-child > * {
|
||||
border-bottom-color: $dark;
|
||||
}
|
||||
table.table.table-rounded {
|
||||
border-collapse: separate;
|
||||
border-spacing: 0;
|
||||
border-style: hidden;
|
||||
border-top-left-radius: $border-radius;
|
||||
border-top-right-radius: $border-radius;
|
||||
border-bottom-left-radius: $border-radius;
|
||||
border-bottom-right-radius: $border-radius;
|
||||
thead {
|
||||
tr {
|
||||
th {
|
||||
border-top: 1px solid $table-border-color;
|
||||
border-right: 1px solid $table-border-color;
|
||||
// border-bottom: 2px solid $dark !important;
|
||||
border-left: none;
|
||||
&:first-child {
|
||||
border-top-left-radius: $border-radius;
|
||||
border-left: 1px solid $table-border-color;
|
||||
}
|
||||
&:last-child {
|
||||
border-top-right-radius: $border-radius;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
tbody {
|
||||
tr {
|
||||
td {
|
||||
border-top: none;
|
||||
border-right: 1px solid $table-border-color;
|
||||
border-bottom: 1px solid $table-border-color !important;
|
||||
border-left: none;
|
||||
&:first-child {
|
||||
border-left: 1px solid $table-border-color;
|
||||
}
|
||||
}
|
||||
&:last-child {
|
||||
td:first-child {
|
||||
border-bottom-left-radius: $border-radius;
|
||||
}
|
||||
td:last-child {
|
||||
border-bottom-right-radius: $border-radius;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* selected days background triangle color */
|
||||
.bg-triangle-primary {
|
||||
background: linear-gradient(
|
||||
to bottom right,
|
||||
$primary 0%,
|
||||
$primary 50%,
|
||||
$secondary 50%,
|
||||
$secondary 100%
|
||||
);
|
||||
}
|
||||
.bg-triangle-info {
|
||||
background: linear-gradient(
|
||||
to bottom right,
|
||||
$info 0%,
|
||||
$info 50%,
|
||||
$secondary 50%,
|
||||
$secondary 100%
|
||||
);
|
||||
}
|
||||
.bg-triangle-light {
|
||||
background: linear-gradient(
|
||||
to bottom right,
|
||||
$light 0%,
|
||||
$light 50%,
|
||||
$secondary 50%,
|
||||
$secondary 100%
|
||||
);
|
||||
}
|
||||
.bg-triangle-white {
|
||||
background: linear-gradient(
|
||||
to bottom right,
|
||||
$white 0%,
|
||||
$white 50%,
|
||||
$secondary 50%,
|
||||
$secondary 100%
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -12,50 +12,14 @@ export const BsCollapse = {
|
|||
}
|
||||
});
|
||||
|
||||
// this.el.addEventListener("show.bs.collapse", (event) => {
|
||||
// this.pushEvent("collapse-show", { target_id: event.target.id });
|
||||
// });
|
||||
|
||||
// when showing completes, send event to liveview
|
||||
this.el.addEventListener("shown.bs.collapse", (event) => {
|
||||
this.pushEvent("collapse-shown", { target_id: event.target.id });
|
||||
});
|
||||
|
||||
// this.el.addEventListener("hide.bs.collapse", (event) => {
|
||||
// this.pushEvent("collapse-hide", { target_id: event.target.id });
|
||||
// });
|
||||
|
||||
// when hiding completes, send event to liveview
|
||||
this.el.addEventListener("hidden.bs.collapse", (event) => {
|
||||
this.pushEvent("collapse-hidden", { target_id: event.target.id });
|
||||
});
|
||||
},
|
||||
};
|
||||
|
||||
// export const BsModal = {
|
||||
// mounted() {
|
||||
// // when the liveview mounts, create the BS modal
|
||||
// const modal = new Modal(this.el);
|
||||
// // and trigger BS modal to show
|
||||
// modal.show();
|
||||
|
||||
// // when the BS modal hides, send 'close' to the liveview
|
||||
// this.el.addEventListener("hidden.bs.modal", (event) => {
|
||||
// this.pushEventTo(`#${this.el.getAttribute("id")}`, "close", {});
|
||||
// modal.dispose();
|
||||
// });
|
||||
|
||||
// // liveview can send this event to tell BS modal to close
|
||||
// // ex.: on successful form save, instead of immediate redirect
|
||||
// // this event hides the BS modal, which triggers the above,
|
||||
// // which sends 'close' to liveview and disposes the BS modal
|
||||
// this.handleEvent("modal-please-hide", (payload) => {
|
||||
// modal.hide();
|
||||
// });
|
||||
// },
|
||||
|
||||
// destroyed() {
|
||||
// // when the liveview is destroyed,
|
||||
// // modal-backdrop must be forcibly removed
|
||||
// const backdrop = document.querySelector(".modal-backdrop");
|
||||
// if (backdrop) backdrop.parentElement.removeChild(backdrop);
|
||||
// },
|
||||
// };
|
||||
|
|
|
|||
Loading…
Reference in a new issue