From f609a2f8366019e1a192921aa08138a13b3667f7 Mon Sep 17 00:00:00 2001
From: Adam Piontek <adam@73k.us>
Date: Tue, 16 Mar 2021 11:03:44 -0400
Subject: [PATCH] tidying js & scss

---
 assets/css/_s73k-calendar.scss | 132 ++++++++++++++++++++++++++++++++
 assets/css/app.scss            | 136 +--------------------------------
 assets/js/_bs_collapse.js      |  40 +---------
 3 files changed, 137 insertions(+), 171 deletions(-)
 create mode 100644 assets/css/_s73k-calendar.scss

diff --git a/assets/css/_s73k-calendar.scss b/assets/css/_s73k-calendar.scss
new file mode 100644
index 00000000..451d4264
--- /dev/null
+++ b/assets/css/_s73k-calendar.scss
@@ -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%
+  );
+}
diff --git a/assets/css/app.scss b/assets/css/app.scss
index 6bed80f0..5b3e9cfd 100644
--- a/assets/css/app.scss
+++ b/assets/css/app.scss
@@ -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%
-  );
-}
diff --git a/assets/js/_bs_collapse.js b/assets/js/_bs_collapse.js
index c3c04074..2b7843b7 100644
--- a/assets/js/_bs_collapse.js
+++ b/assets/js/_bs_collapse.js
@@ -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);
-//   },
-// };