From 0024354118679a0c85b534d94c932e3b8fbd7fb7 Mon Sep 17 00:00:00 2001 From: Adam Piontek Date: Thu, 25 Feb 2021 22:34:46 -0500 Subject: [PATCH] removed fontawesome, added heroicons, implemented custom navbar-toggler-icons --- assets/css/app.scss | 15 +++++++++++ assets/js/app.js | 4 +-- assets/package-lock.json | 26 ++++++++----------- assets/package.json | 2 +- assets/webpack.config.js | 14 +++++----- .../templates/layout/_navbar.html.eex | 8 +++--- 6 files changed, 39 insertions(+), 30 deletions(-) diff --git a/assets/css/app.scss b/assets/css/app.scss index 05224e8c..60414dde 100644 --- a/assets/css/app.scss +++ b/assets/css/app.scss @@ -13,6 +13,21 @@ /* LiveView specific CSS */ @import "phx-liveview"; +/* Navbar toggler icon override */ +.navbar-toggler-icon { + -webkit-transition: background 150ms ease; + -moz-transition: background 150ms ease; + -o-transition: background 150ms ease; + -ms-transition: background 150ms ease; + transition: background 150ms ease; +} +.navbar-light .navbar-toggler.collapsed .navbar-toggler-icon { + background-image: url('data:image/svg+xml;utf8,'); +} +.navbar-light .navbar-toggler .navbar-toggler-icon { + background-image: url('data:image/svg+xml;utf8,'); +} + /* Alerts and form errors */ .alert:empty { display: none; diff --git a/assets/js/app.js b/assets/js/app.js index d382cbcb..ffd04151 100644 --- a/assets/js/app.js +++ b/assets/js/app.js @@ -4,8 +4,8 @@ import "../css/app.scss"; // Import icons for sprite-loader -// brand icon -import "../node_modules/@fortawesome/fontawesome-free/svgs/solid/skull-crossbones.svg"; +// navbar brand icon +import "../node_modules/@mdi/svg/svg/skull-crossbones.svg"; // webpack automatically bundles all modules in your // entry points. Those entry points can be configured diff --git a/assets/package-lock.json b/assets/package-lock.json index be8971df..e8273216 100644 --- a/assets/package-lock.json +++ b/assets/package-lock.json @@ -7,11 +7,11 @@ "license": "MIT", "dependencies": { "@fontsource/lato": "^4.2.1", - "@fortawesome/fontawesome-free": "^5.15.2", "@mdi/svg": "^5.9.55", "@popperjs/core": "^2.8.4", "bootstrap": "^5.0.0-beta2", "bootstrap-icons": "^1.4.0", + "heroicons": "^0.4.2", "phoenix": "file:../deps/phoenix", "phoenix_html": "file:../deps/phoenix_html", "phoenix_live_view": "file:../deps/phoenix_live_view", @@ -1279,15 +1279,6 @@ "resolved": "https://registry.npmjs.org/@fontsource/lato/-/lato-4.2.1.tgz", "integrity": "sha512-prsPmSttIWKF52AK6fNbe1a/wT3Rm5ho2qwegXlU0Qu72dksQIjGrttDtuvs3OlXdlmYXFTmLKOWQKwBMAsMmQ==" }, - "node_modules/@fortawesome/fontawesome-free": { - "version": "5.15.2", - "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-free/-/fontawesome-free-5.15.2.tgz", - "integrity": "sha512-7l/AX41m609L/EXI9EKH3Vs3v0iA8tKlIOGtw+kgcoanI7p+e4I4GYLqW3UXWiTnjSFymKSmTTPKYrivzbxxqA==", - "hasInstallScript": true, - "engines": { - "node": ">=6" - } - }, "node_modules/@mdi/svg": { "version": "5.9.55", "resolved": "https://registry.npmjs.org/@mdi/svg/-/svg-5.9.55.tgz", @@ -4042,6 +4033,11 @@ "he": "bin/he" } }, + "node_modules/heroicons": { + "version": "0.4.2", + "resolved": "https://registry.npmjs.org/heroicons/-/heroicons-0.4.2.tgz", + "integrity": "sha512-24Bc6LKmamKHzGiNC80/r9v/7pQrma2V5KlaLUHGoarqm+hggmxnngU+RjHQT8sANWPa5FWKLftn4fpmvry/7w==" + }, "node_modules/hex-color-regex": { "version": "1.1.0", "resolved": "https://registry.npmjs.org/hex-color-regex/-/hex-color-regex-1.1.0.tgz", @@ -10806,11 +10802,6 @@ "resolved": "https://registry.npmjs.org/@fontsource/lato/-/lato-4.2.1.tgz", "integrity": "sha512-prsPmSttIWKF52AK6fNbe1a/wT3Rm5ho2qwegXlU0Qu72dksQIjGrttDtuvs3OlXdlmYXFTmLKOWQKwBMAsMmQ==" }, - "@fortawesome/fontawesome-free": { - "version": "5.15.2", - "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-free/-/fontawesome-free-5.15.2.tgz", - "integrity": "sha512-7l/AX41m609L/EXI9EKH3Vs3v0iA8tKlIOGtw+kgcoanI7p+e4I4GYLqW3UXWiTnjSFymKSmTTPKYrivzbxxqA==" - }, "@mdi/svg": { "version": "5.9.55", "resolved": "https://registry.npmjs.org/@mdi/svg/-/svg-5.9.55.tgz", @@ -12945,6 +12936,11 @@ "integrity": "sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==", "dev": true }, + "heroicons": { + "version": "0.4.2", + "resolved": "https://registry.npmjs.org/heroicons/-/heroicons-0.4.2.tgz", + "integrity": "sha512-24Bc6LKmamKHzGiNC80/r9v/7pQrma2V5KlaLUHGoarqm+hggmxnngU+RjHQT8sANWPa5FWKLftn4fpmvry/7w==" + }, "hex-color-regex": { "version": "1.1.0", "resolved": "https://registry.npmjs.org/hex-color-regex/-/hex-color-regex-1.1.0.tgz", diff --git a/assets/package.json b/assets/package.json index 34995eaa..ae7164e7 100644 --- a/assets/package.json +++ b/assets/package.json @@ -8,11 +8,11 @@ }, "dependencies": { "@fontsource/lato": "^4.2.1", - "@fortawesome/fontawesome-free": "^5.15.2", "@mdi/svg": "^5.9.55", "@popperjs/core": "^2.8.4", "bootstrap": "^5.0.0-beta2", "bootstrap-icons": "^1.4.0", + "heroicons": "^0.4.2", "phoenix": "file:../deps/phoenix", "phoenix_html": "file:../deps/phoenix_html", "phoenix_live_view": "file:../deps/phoenix_live_view", diff --git a/assets/webpack.config.js b/assets/webpack.config.js index 710ceafb..65d8d8a4 100644 --- a/assets/webpack.config.js +++ b/assets/webpack.config.js @@ -59,16 +59,14 @@ module.exports = (env, options) => { symbolId: (filePath) => { if (filePath.includes("bootstrap-icons")) { return `bi-${path.basename(filePath).slice(0, -4)}`; - } else if (filePath.includes("@fortawesome")) { - if (filePath.includes("brands")) { - return `fab-${path.basename(filePath).slice(0, -4)}`; - } else if (filePath.includes("solid")) { - return `fas-${path.basename(filePath).slice(0, -4)}`; - } else { - return `far-${path.basename(filePath).slice(0, -4)}`; - } } else if (filePath.includes("@mdi")) { return `mdi-${path.basename(filePath).slice(0, -4)}`; + } else if (filePath.includes("heroicons")) { + if (filePath.includes("outline")) { + return `hio-${path.basename(filePath).slice(0, -4)}`; + } else { + return `his-${path.basename(filePath).slice(0, -4)}`; + } } else { return `${path.basename(filePath).slice(0, -4)}`; } diff --git a/lib/bones73k_web/templates/layout/_navbar.html.eex b/lib/bones73k_web/templates/layout/_navbar.html.eex index ade773de..605284d3 100644 --- a/lib/bones73k_web/templates/layout/_navbar.html.eex +++ b/lib/bones73k_web/templates/layout/_navbar.html.eex @@ -1,12 +1,12 @@