From 951249be931ec360b511f47b28facf76d5f74471 Mon Sep 17 00:00:00 2001 From: Adam Piontek Date: Fri, 26 Feb 2021 12:07:33 -0500 Subject: [PATCH] styling improvements, including implementing alerts with phx hook to clear flash after bootstrap alert close event --- assets/css/_bs-custom.scss | 2 ++ assets/css/_fonts.scss | 2 +- assets/css/app.scss | 5 +-- assets/js/_alert-remover.js | 10 ++++++ .../{_hamburger.js => _hamburger-helper.js} | 0 assets/js/app.js | 9 ++++- .../templates/layout/_navbar.html.eex | 9 +++-- .../templates/layout/app.html.eex | 16 +++++++-- .../templates/layout/live.html.leex | 18 ++++++---- .../layout/navbar/_user_menu.html.eex | 2 +- .../templates/user_registration/new.html.eex | 34 +++++++++++++++++++ lib/bones73k_web/views/layout_view.ex | 11 ++++++ 12 files changed, 100 insertions(+), 18 deletions(-) create mode 100644 assets/js/_alert-remover.js rename assets/js/{_hamburger.js => _hamburger-helper.js} (100%) diff --git a/assets/css/_bs-custom.scss b/assets/css/_bs-custom.scss index 53335e0..df27c88 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 da4dd13..9f08ad7 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 1b4dd44..18bc004 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 0000000..b4b9a52 --- /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 212cfb2..423b439 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 0a0b5a9..c3852ca 100644 --- a/lib/bones73k_web/templates/layout/_navbar.html.eex +++ b/lib/bones73k_web/templates/layout/_navbar.html.eex @@ -1,4 +1,4 @@ -