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

removed fontawesome, added heroicons, implemented custom navbar-toggler-icons

Browse source
This commit is contained in:
Adam Piontek 2021-02-25 22:34:46 -05:00
parent 015c7fe0a7
commit 0024354118
6 changed files with 39 additions and 30 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

15
assets/css/app.scss
View file

@ -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,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="rgba(0, 0, 0, 0.55)"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" /></svg>');
}
.navbar-light .navbar-toggler .navbar-toggler-icon {
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="rgba(0, 0, 0, 0.55)"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" /></svg>');
}
/* Alerts and form errors */
.alert:empty {
display: none;

4
assets/js/app.js
View file

@ -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

26
assets/package-lock.json generated
View file

@ -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",

2
assets/package.json
View file

@ -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",

14
assets/webpack.config.js
View file

@ -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)}`;
}

8
lib/bones73k_web/templates/layout/_navbar.html.eex
View file

@ -1,12 +1,12 @@
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container">
<%= link to: Routes.page_path(@conn, :index), class: "navbar-brand" do %>
<%= icon_div @conn, "fas-skull-crossbones", [class: "icon baseline"] %>
Bones73k
<%= link to: Routes.page_path(@conn, :index), class: "navbar-brand py-0" do %>
<%= icon_div @conn, "mdi-skull-crossbones", [class: "icon baseline fs-3"] %>
<span>Bones73k</span>
<% end %>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<button class="navbar-toggler collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>