adam/shift73k
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

month & shift navigation progress

Browse source
This commit is contained in:
Adam Piontek 2021-03-15 15:46:59 -04:00
parent b352416366
commit 4276399c20
20 changed files with 597 additions and 98 deletions

2
assets/css/_bs-colors.scss
View file

@ -3,7 +3,7 @@ $primary: #662c91;
$secondary: #ee6c4d;
$success: #3f784c;
$info: #3f84e5;
$warning: #fcca46;
$warning: #ffec51;
$light: $gray-200;
$dark: $gray-800;

2
assets/css/_bs-load.scss
View file

@ -28,7 +28,7 @@
@import "../node_modules/bootstrap/scss/nav";
@import "../node_modules/bootstrap/scss/navbar";
@import "../node_modules/bootstrap/scss/card";
// @import "../node_modules/bootstrap/scss/accordion";
@import "../node_modules/bootstrap/scss/accordion";
// @import "../node_modules/bootstrap/scss/breadcrumb";
@import "../node_modules/bootstrap/scss/pagination";
// @import "../node_modules/bootstrap/scss/badge";

70
assets/css/app.scss
View file

@ -63,12 +63,32 @@
}
/* calendar table rounded */
// table.table.table-rounded,
// table.table.table-rounded thead,
// table.table.table-rounded thead tr,
// table.table.table-rounded thead tr th:first-child {
// border-radius: 10px 0 0 10px;
// }
table.table.table-calendar thead tr th,
table.table.table-calendar tbody tr td {
width: 14%;
}
table.table.table-calendar tbody tr td {
font-size: $font-size-sm;
height: 3.5rem;
padding: 0.2rem 0.4rem;
@include media-breakpoint-up(md) {
height: 4.5rem;
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 {
border-collapse: separate;
@ -117,3 +137,41 @@ table.table.table-rounded {
}
}
}
/* 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%
);
}

61
assets/js/_bs_collapse.js Normal file
View file

@ -0,0 +1,61 @@
// Hook for custom liveview bootstrap collapse handling
import Collapse from "bootstrap/js/dist/collapse";
export const BsCollapse = {
mounted() {
// when the liveview mounts, create the BS collapse object
const collapse = new Collapse(this.el, { toggle: false });
this.handleEvent("toggle-template-details", ({ targetId }) => {
if (this.el.id == targetId) {
collapse.toggle();
}
});
// this.el.addEventListener("show.bs.collapse", (event) => {
// this.pushEvent("collapse-show", { target_id: event.target.id });
// });
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 });
// });
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);
// },
// };

1
assets/js/_bs_modal.js
View file

@ -1,7 +1,6 @@
// Helping bootstrap modals work with liveview
// preserving animations
import Modal from "bootstrap/js/dist/modal";
// import { Modal } from "bootstrap";
export const BsModal = {
mounted() {

16
assets/js/app.js
View file

@ -5,7 +5,7 @@ import "../css/app.scss";
// Import icons for sprite-loader
// navbar brand icon
import "../node_modules/bootstrap-icons/icons/calendar3-week.svg"; // brand
import "../node_modules/bootstrap-icons/icons/calendar2-week.svg"; // brand
// menus etc
import "../node_modules/bootstrap-icons/icons/person-circle.svg"; // accounts menu
import "../node_modules/bootstrap-icons/icons/person-plus.svg"; // new user / register
@ -34,9 +34,10 @@ import "../node_modules/bootstrap-icons/icons/arrow-repeat.svg"; // resend confi
import "../node_modules/@mdi/svg/svg/head-question-outline.svg"; // forgot password
import "../node_modules/bootstrap-icons/icons/people.svg"; // users management
// calendar/event icons
import "../node_modules/bootstrap-icons/icons/calendar3.svg";
import "../node_modules/bootstrap-icons/icons/calendar3-event.svg";
import "../node_modules/bootstrap-icons/icons/calendar3-range.svg";
import "../node_modules/bootstrap-icons/icons/calendar2.svg";
import "../node_modules/bootstrap-icons/icons/calendar2-plus.svg";
import "../node_modules/bootstrap-icons/icons/calendar2-event.svg";
import "../node_modules/bootstrap-icons/icons/calendar2-range.svg";
import "../node_modules/bootstrap-icons/icons/clock-history.svg"; // shift template
import "../node_modules/bootstrap-icons/icons/tag.svg";
import "../node_modules/bootstrap-icons/icons/hourglass.svg";
@ -47,6 +48,11 @@ import "../node_modules/bootstrap-icons/icons/plus-circle-dotted.svg";
import "../node_modules/bootstrap-icons/icons/clipboard-plus.svg";
import "../node_modules/bootstrap-icons/icons/star.svg";
import "../node_modules/bootstrap-icons/icons/star-fill.svg";
import "../node_modules/bootstrap-icons/icons/binoculars.svg";
import "../node_modules/bootstrap-icons/icons/binoculars-fill.svg";
import "../node_modules/bootstrap-icons/icons/eraser.svg";
import "../node_modules/bootstrap-icons/icons/save.svg";
import "../node_modules/bootstrap-icons/icons/asterisk.svg";
// webpack automatically bundles all modules in your
// entry points. Those entry points can be configured
@ -72,11 +78,13 @@ import "./_form-validity";
// Bootstrap-liveview helpers
import { AlertRemover } from "./_alert-remover";
import { BsModal } from "./_bs_modal";
import { BsCollapse } from "./_bs_collapse";
// LiveSocket setup
let Hooks = {};
Hooks.AlertRemover = AlertRemover;
Hooks.BsModal = BsModal;
Hooks.BsCollapse = BsCollapse;
let csrfToken = document
.querySelector("meta[name='csrf-token']")
.getAttribute("content");