diff --git a/assets/css/_bs-custom.scss b/assets/css/_bs-custom.scss index 53335e0e..df27c880 100644 --- a/assets/css/_bs-custom.scss +++ b/assets/css/_bs-custom.scss @@ -10,3 +10,5 @@ $font-family-sans-serif: Lato, system-ui, -apple-system, "Segoe UI", Roboto, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !important; // $font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, // "Liberation Mono", "Courier New", monospace !important; + +$enable-shadows: true; diff --git a/assets/css/_fonts.scss b/assets/css/_fonts.scss index da4dd13c..9f08ad7c 100644 --- a/assets/css/_fonts.scss +++ b/assets/css/_fonts.scss @@ -5,7 +5,7 @@ // @import "../node_modules/@fontsource/lato/300-italic.css"; /* light | italic */ @import "../node_modules/@fontsource/lato/400.css"; /* normal | normal */ // @import "../node_modules/@fontsource/lato/400-italic.css"; /* normal | italic */ -// @import "../node_modules/@fontsource/lato/700.css"; /* bold | normal */ +@import "../node_modules/@fontsource/lato/700.css"; /* bold | normal */ // @import "../node_modules/@fontsource/lato/700-italic.css"; /* bold | italic */ // @import "../node_modules/@fontsource/lato/900.css"; /* black | normal */ // @import "../node_modules/@fontsource/lato/900-italic.css"; /* black | italic */ diff --git a/assets/css/app.scss b/assets/css/app.scss index 1b4dd448..18bc0044 100644 --- a/assets/css/app.scss +++ b/assets/css/app.scss @@ -16,10 +16,7 @@ /* Navbar toggler icon override */ @import "nav-burger"; -/* Alerts and form errors */ -.alert:empty { - display: none; -} +/* Form errors */ .invalid-feedback { color: #a94442; display: block; diff --git a/assets/js/_alert-remover.js b/assets/js/_alert-remover.js new file mode 100644 index 00000000..b4b9a52d --- /dev/null +++ b/assets/js/_alert-remover.js @@ -0,0 +1,10 @@ +// This will tell liveview to clear a flash key +// after a bootstrap alert close event +export const AlertRemover = { + mounted() { + this.el.addEventListener("closed.bs.alert", () => { + // Bootstrap finished removing the alert element + this.pushEvent("lv:clear-flash", this.el.dataset); + }); + }, +}; diff --git a/assets/js/_hamburger.js b/assets/js/_hamburger-helper.js similarity index 100% rename from assets/js/_hamburger.js rename to assets/js/_hamburger-helper.js diff --git a/assets/js/app.js b/assets/js/app.js index 212cfb21..423b4391 100644 --- a/assets/js/app.js +++ b/assets/js/app.js @@ -6,6 +6,8 @@ import "../css/app.scss"; // Import icons for sprite-loader // navbar brand icon import "../node_modules/@mdi/svg/svg/skull-crossbones.svg"; +// x/close for alerts etc +import "../node_modules/bootstrap-icons/icons/x.svg"; // webpack automatically bundles all modules in your // entry points. Those entry points can be configured @@ -24,15 +26,20 @@ import { LiveSocket } from "phoenix_live_view"; // Bootstrap v5 js imports import "bootstrap/js/dist/collapse"; import "bootstrap/js/dist/dropdown"; +import "bootstrap/js/dist/alert"; // Boostrap helpers -import "./_hamburger"; +import "./_hamburger-helper"; +import { AlertRemover } from "./_alert-remover"; // LiveSocket setup +let Hooks = {}; +Hooks.AlertRemover = AlertRemover; let csrfToken = document .querySelector("meta[name='csrf-token']") .getAttribute("content"); let liveSocket = new LiveSocket("/live", Socket, { params: { _csrf_token: csrfToken }, + hooks: Hooks, }); // Show progress bar on live navigation and form submits diff --git a/lib/bones73k_web/templates/layout/_navbar.html.eex b/lib/bones73k_web/templates/layout/_navbar.html.eex index 0a0b5a9a..c3852ca3 100644 --- a/lib/bones73k_web/templates/layout/_navbar.html.eex +++ b/lib/bones73k_web/templates/layout/_navbar.html.eex @@ -1,4 +1,4 @@ -