progress on migrating to heex templates and font-icons
This commit is contained in:
parent
d43daafdb7
commit
3eff955672
21793 changed files with 2161968 additions and 16895 deletions
|
|
@ -1,5 +0,0 @@
|
|||
{
|
||||
"presets": [
|
||||
"@babel/preset-env"
|
||||
]
|
||||
}
|
||||
|
|
@ -9,6 +9,7 @@
|
|||
@import "bs-colors";
|
||||
|
||||
// Required || Configuration -- CONTINUED
|
||||
@import "../node_modules/bootstrap/scss/maps";
|
||||
@import "../node_modules/bootstrap/scss/mixins";
|
||||
@import "../node_modules/bootstrap/scss/utilities";
|
||||
|
||||
|
|
|
|||
|
|
@ -9,3 +9,6 @@
|
|||
// @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 */
|
||||
|
||||
/* Bootstrap Icons Font */
|
||||
@import "../node_modules/bootstrap-icons/font/bootstrap-icons.css";
|
||||
|
|
|
|||
|
|
@ -32,6 +32,10 @@ $hamburger-active-hover-opacity: $hamburger-hover-opacity !default;
|
|||
background-color: $navbar-light-color;
|
||||
}
|
||||
}
|
||||
&:focus {
|
||||
box-shadow: $navbar-light-toggler-border-color 0 0 0 $navbar-toggler-focus-width;
|
||||
// var(--bs-navbar-toggler-focus-width);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -51,6 +55,9 @@ $hamburger-active-hover-opacity: $hamburger-hover-opacity !default;
|
|||
background-color: $navbar-dark-color;
|
||||
}
|
||||
}
|
||||
&:focus {
|
||||
box-shadow: $navbar-dark-toggler-border-color 0 0 0 $navbar-toggler-focus-width;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,21 +0,0 @@
|
|||
/*
|
||||
SVG ICON SYSTEM
|
||||
per https://blog.prototypr.io/align-svg-icons-to-text-and-say-goodbye-to-font-icons-d44b3d7b26b4
|
||||
*/
|
||||
.icon {
|
||||
display: inline-flex;
|
||||
align-self: center;
|
||||
}
|
||||
|
||||
.icon svg,
|
||||
.icon img {
|
||||
height: 1em;
|
||||
width: 1em;
|
||||
fill: currentColor;
|
||||
}
|
||||
|
||||
.icon.baseline svg,
|
||||
.icon img {
|
||||
top: 0.125em;
|
||||
position: relative;
|
||||
}
|
||||
|
|
@ -4,9 +4,6 @@
|
|||
/* Load Bootstrap v5 and customizations */
|
||||
@import "bs-load";
|
||||
|
||||
/*SVG ICON SYSTEM*/
|
||||
@import "svg-icons";
|
||||
|
||||
/* LiveView specific CSS */
|
||||
@import "phx-liveview";
|
||||
|
||||
|
|
@ -43,7 +40,7 @@
|
|||
/* style icon */
|
||||
.inner-addon > .icon {
|
||||
position: absolute;
|
||||
padding: 0.5625rem 0.5rem;
|
||||
padding: 0.25rem 0.5rem;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
|
|
@ -68,3 +65,11 @@
|
|||
.shift-description p:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
fix readonly form background
|
||||
*/
|
||||
.form-control[readonly] {
|
||||
background-color: $input-disabled-bg;
|
||||
}
|
||||
|
|
@ -1,12 +1,12 @@
|
|||
const togglerBtn = document.getElementById("navbarSupportedContentToggler");
|
||||
const navbarContent = document.getElementById("navbarSupportedContent");
|
||||
const togglerBtn = document.getElementById('navbarSupportedContentToggler');
|
||||
const navbarContent = document.getElementById('navbarSupportedContent');
|
||||
|
||||
navbarContent.addEventListener("show.bs.collapse", () => {
|
||||
console.log("opening navbar content");
|
||||
togglerBtn.classList.toggle("is-active");
|
||||
navbarContent.addEventListener('show.bs.collapse', () => {
|
||||
console.log('opening navbar content');
|
||||
togglerBtn.classList.toggle('is-active');
|
||||
});
|
||||
|
||||
navbarContent.addEventListener("hide.bs.collapse", () => {
|
||||
console.log("closing navbar content");
|
||||
togglerBtn.classList.toggle("is-active");
|
||||
navbarContent.addEventListener('hide.bs.collapse', () => {
|
||||
console.log('closing navbar content');
|
||||
togglerBtn.classList.toggle('is-active');
|
||||
});
|
||||
|
|
|
|||
|
|
@ -1,84 +1,24 @@
|
|||
// We need to import the CSS so that webpack will load it.
|
||||
// The MiniCssExtractPlugin is used to separate it out into
|
||||
// its own CSS file.
|
||||
import "../css/app.scss";
|
||||
// We import the main SCSS file, which performs all other SCSS imports,
|
||||
// and which vite.js will preprocess with sass.
|
||||
import '../css/app.scss'
|
||||
|
||||
// Import icons for sprite-loader
|
||||
// navbar brand icon
|
||||
import "../node_modules/bootstrap-icons/icons/calendar2-week.svg"; // brand
|
||||
// menus etc
|
||||
import "../node_modules/bootstrap-icons/icons/person-circle.svg"; // accounts menu
|
||||
import "../node_modules/bootstrap-icons/icons/person-plus.svg"; // new user / register
|
||||
import "../node_modules/bootstrap-icons/icons/door-open.svg"; // log in
|
||||
import "../node_modules/bootstrap-icons/icons/door-closed.svg"; // log out
|
||||
import "../node_modules/bootstrap-icons/icons/sliders.svg"; // new user / register
|
||||
// forms etc
|
||||
import "../node_modules/bootstrap-icons/icons/at.svg"; // email field
|
||||
import "../node_modules/bootstrap-icons/icons/key.svg"; // new password field
|
||||
import "../node_modules/bootstrap-icons/icons/key-fill.svg"; // pw confirm field
|
||||
import "../node_modules/bootstrap-icons/icons/lock.svg"; // current pw field
|
||||
import "../node_modules/bootstrap-icons/icons/shield.svg"; // role
|
||||
// live tables
|
||||
import "../node_modules/bootstrap-icons/icons/arrow-down-up.svg"; // sort
|
||||
import "../node_modules/bootstrap-icons/icons/funnel.svg"; // filter
|
||||
import "../node_modules/bootstrap-icons/icons/x-circle-fill.svg"; // clear filter
|
||||
import "../node_modules/bootstrap-icons/icons/sort-down-alt.svg";
|
||||
import "../node_modules/bootstrap-icons/icons/sort-up-alt.svg";
|
||||
import "../node_modules/bootstrap-icons/icons/chevron-left.svg";
|
||||
import "../node_modules/bootstrap-icons/icons/chevron-right.svg";
|
||||
import "../node_modules/bootstrap-icons/icons/pencil.svg";
|
||||
import "../node_modules/bootstrap-icons/icons/trash.svg";
|
||||
// page headers
|
||||
import "../node_modules/bootstrap-icons/icons/shield-lock.svg"; // reset password
|
||||
import "../node_modules/bootstrap-icons/icons/arrow-repeat.svg"; // resend confirmation
|
||||
import "../node_modules/@mdi/svg/svg/head-question-outline.svg"; // forgot password
|
||||
import "../node_modules/bootstrap-icons/icons/people.svg"; // users management
|
||||
// calendar/event icons
|
||||
import "../node_modules/bootstrap-icons/icons/calendar2.svg";
|
||||
import "../node_modules/bootstrap-icons/icons/calendar2-plus.svg";
|
||||
import "../node_modules/bootstrap-icons/icons/calendar2-date.svg";
|
||||
import "../node_modules/bootstrap-icons/icons/calendar2-event.svg";
|
||||
import "../node_modules/bootstrap-icons/icons/calendar2-range.svg";
|
||||
import "../node_modules/bootstrap-icons/icons/clock-history.svg"; // shift template
|
||||
import "../node_modules/bootstrap-icons/icons/tag.svg";
|
||||
import "../node_modules/bootstrap-icons/icons/hourglass.svg";
|
||||
import "../node_modules/bootstrap-icons/icons/map.svg";
|
||||
import "../node_modules/bootstrap-icons/icons/geo.svg";
|
||||
import "../node_modules/bootstrap-icons/icons/justify-left.svg";
|
||||
import "../node_modules/bootstrap-icons/icons/plus-circle-dotted.svg";
|
||||
import "../node_modules/bootstrap-icons/icons/clipboard-plus.svg";
|
||||
import "../node_modules/bootstrap-icons/icons/star.svg";
|
||||
import "../node_modules/bootstrap-icons/icons/star-fill.svg";
|
||||
import "../node_modules/bootstrap-icons/icons/binoculars.svg";
|
||||
import "../node_modules/bootstrap-icons/icons/binoculars-fill.svg";
|
||||
import "../node_modules/bootstrap-icons/icons/eraser.svg";
|
||||
import "../node_modules/bootstrap-icons/icons/save.svg";
|
||||
import "../node_modules/bootstrap-icons/icons/asterisk.svg";
|
||||
import "../node_modules/bootstrap-icons/icons/card-list.svg";
|
||||
import "../node_modules/bootstrap-icons/icons/file-earmark-spreadsheet.svg";
|
||||
import "../node_modules/bootstrap-icons/icons/box-arrow-in-left.svg";
|
||||
import "../node_modules/bootstrap-icons/icons/link.svg";
|
||||
// Include phoenix_html to handle method=PUT/DELETE in forms and buttons.
|
||||
import 'phoenix_html'
|
||||
|
||||
// webpack automatically bundles all modules in your
|
||||
// entry points. Those entry points can be configured
|
||||
// in "webpack.config.js".
|
||||
//
|
||||
// Import deps with the dep name or local files with a relative path, for example:
|
||||
//
|
||||
// import {Socket} from "phoenix"
|
||||
// import socket from "./socket"
|
||||
//
|
||||
import "phoenix_html";
|
||||
// import Socket for Phoenix Channels
|
||||
import { Socket } from "phoenix";
|
||||
// import topbar for load progress in live reloading / liveview
|
||||
import topbar from "topbar";
|
||||
// import LiveSocket for LiveView
|
||||
import { LiveSocket } from "phoenix_live_view";
|
||||
|
||||
|
||||
// Bootstrap v5 js imports
|
||||
import "bootstrap/js/dist/alert";
|
||||
import "bootstrap/js/dist/collapse";
|
||||
import "bootstrap/js/dist/dropdown";
|
||||
import 'bootstrap/js/dist/alert';
|
||||
import 'bootstrap/js/dist/collapse';
|
||||
import 'bootstrap/js/dist/dropdown';
|
||||
// Bootstrap helpers
|
||||
import "./_hamburger-helper";
|
||||
import './_hamburger-helper';
|
||||
import "./_form-validity";
|
||||
// Bootstrap-liveview helpers
|
||||
import { AlertRemover } from "./_alert-remover";
|
||||
|
|
|
|||
17561
assets/package-lock.json
generated
17561
assets/package-lock.json
generated
File diff suppressed because it is too large
Load diff
|
|
@ -1,43 +1,28 @@
|
|||
{
|
||||
"repository": {},
|
||||
"description": " ",
|
||||
"license": "MIT",
|
||||
"name": "vanilla",
|
||||
"private": true,
|
||||
"version": "0.0.0",
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"deploy": "NODE_ENV=production webpack --mode production",
|
||||
"watch": "webpack --mode development --watch"
|
||||
},
|
||||
"dependencies": {
|
||||
"@fontsource/lato": "^4.2.2",
|
||||
"@mdi/svg": "^5.9.55",
|
||||
"@popperjs/core": "^2.9.2",
|
||||
"bootstrap": "^5.0.0-beta3",
|
||||
"bootstrap-icons": "^1.4.1",
|
||||
"hamburgers": "^1.1.3",
|
||||
"heroicons": "^1.0.0",
|
||||
"phoenix": "file:../deps/phoenix",
|
||||
"phoenix_html": "file:../deps/phoenix_html",
|
||||
"phoenix_live_view": "file:../deps/phoenix_live_view",
|
||||
"topbar": "^1.x"
|
||||
"dev": "vite",
|
||||
"build": "vite build",
|
||||
"preview": "vite preview"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@babel/core": "^7.x",
|
||||
"@babel/preset-env": "^7.x",
|
||||
"autoprefixer": "^10.2.5",
|
||||
"babel-loader": "^8.x",
|
||||
"copy-webpack-plugin": "^8.x",
|
||||
"css-loader": "^5.x",
|
||||
"css-minimizer-webpack-plugin": "^1.x",
|
||||
"file-loader": "^6.2.0",
|
||||
"glob-all": "^3.2.1",
|
||||
"mini-css-extract-plugin": "^1.x",
|
||||
"postcss": "^8.2.9",
|
||||
"postcss-loader": "^5.2.0",
|
||||
"postcss-scss": "^3.0.5",
|
||||
"purgecss-webpack-plugin": "^4.0.3",
|
||||
"sass": "^1.x",
|
||||
"sass-loader": "^11.x",
|
||||
"svg-sprite-loader": "^6.x",
|
||||
"webpack": "^5.x",
|
||||
"webpack-cli": "^4.x"
|
||||
"@types/node": "^18.6.5",
|
||||
"@types/phoenix": "^1.5.4",
|
||||
"sass": "^1.54.3",
|
||||
"svg-sprite-generator": "^0.0.7",
|
||||
"vite": "^3.0.0"
|
||||
},
|
||||
"dependencies": {
|
||||
"@fontsource/lato": "^4.5.9",
|
||||
"bootstrap": "^5.2.0",
|
||||
"bootstrap-icons": "^1.9.1",
|
||||
"hamburgers": "^1.2.1",
|
||||
"phoenix": "^1.6.11",
|
||||
"phoenix_html": "^3.2.0",
|
||||
"phoenix_live_view": "^0.17.11",
|
||||
"topbar": "^1.x"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,5 +0,0 @@
|
|||
module.exports = {
|
||||
parser: require("postcss-scss"),
|
||||
|
||||
plugins: [require("autoprefixer")],
|
||||
};
|
||||
37
assets/vite.config.js
Normal file
37
assets/vite.config.js
Normal file
|
|
@ -0,0 +1,37 @@
|
|||
import { defineConfig } from "vite";
|
||||
|
||||
export default defineConfig(({ command }) => {
|
||||
const isDev = command !== "build";
|
||||
if (isDev) {
|
||||
// Terminate the watcher when Phoenix quits
|
||||
process.stdin.on("close", () => {
|
||||
process.exit(0);
|
||||
});
|
||||
|
||||
process.stdin.resume();
|
||||
}
|
||||
|
||||
return {
|
||||
server: {
|
||||
port: 3000
|
||||
},
|
||||
publicDir: "static",
|
||||
build: {
|
||||
target: "esnext", // build for recent browsers
|
||||
outDir: "../priv/static", // emit assets to priv/static
|
||||
emptyOutDir: true,
|
||||
sourcemap: isDev, // enable source map in dev build
|
||||
manifest: false, // do not generate manifest.json
|
||||
rollupOptions: {
|
||||
input: {
|
||||
app: "./js/app.js"
|
||||
},
|
||||
output: {
|
||||
entryFileNames: "assets/[name].js", // remove hash
|
||||
chunkFileNames: "assets/[name].js",
|
||||
assetFileNames: "assets/[name][extname]"
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
});
|
||||
|
|
@ -1,105 +0,0 @@
|
|||
const path = require("path");
|
||||
const glob = require("glob-all");
|
||||
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
|
||||
const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");
|
||||
const CopyWebpackPlugin = require("copy-webpack-plugin");
|
||||
const SpriteLoaderPlugin = require("svg-sprite-loader/plugin");
|
||||
const PurgecssPlugin = require("purgecss-webpack-plugin");
|
||||
|
||||
module.exports = (env, options) => {
|
||||
const devMode = options.mode !== "production";
|
||||
|
||||
return {
|
||||
entry: {
|
||||
app: glob.sync("./vendor/**/*.js").concat(["./js/app.js"]),
|
||||
},
|
||||
output: {
|
||||
path: path.resolve(__dirname, "../priv/static/js"),
|
||||
filename: "[name].js",
|
||||
publicPath: "/js/",
|
||||
},
|
||||
module: {
|
||||
rules: [
|
||||
{
|
||||
test: /\.js$/,
|
||||
exclude: /node_modules/,
|
||||
use: {
|
||||
loader: "babel-loader",
|
||||
},
|
||||
},
|
||||
{
|
||||
test: /\.[s]?css$/,
|
||||
use: [
|
||||
MiniCssExtractPlugin.loader,
|
||||
"css-loader",
|
||||
"sass-loader",
|
||||
"postcss-loader",
|
||||
],
|
||||
},
|
||||
{
|
||||
test: /\.(woff(2)?|ttf|eot)(\?v=\d+\.\d+\.\d+)?$/,
|
||||
use: [
|
||||
{
|
||||
loader: "file-loader",
|
||||
options: {
|
||||
esModule: false,
|
||||
name: "[name].[ext]",
|
||||
outputPath: "../fonts",
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
test: /\.svg$/,
|
||||
loader: "svg-sprite-loader",
|
||||
options: {
|
||||
extract: true,
|
||||
spriteFilename: "icons.svg",
|
||||
publicPath: "../images/",
|
||||
symbolId: (filePath) => {
|
||||
if (filePath.includes("bootstrap-icons")) {
|
||||
return `bi-${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)}`;
|
||||
}
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
plugins: [
|
||||
new MiniCssExtractPlugin({ filename: "../css/app.css" }),
|
||||
new SpriteLoaderPlugin({ plainSprite: true }),
|
||||
new CopyWebpackPlugin({
|
||||
patterns: [{ from: "static/", to: "../" }],
|
||||
}),
|
||||
].concat(
|
||||
devMode
|
||||
? []
|
||||
: [
|
||||
new PurgecssPlugin({
|
||||
paths: glob.sync([
|
||||
"../**/*.html.leex",
|
||||
"../**/*.html.eex",
|
||||
"../**/views/**/*.ex",
|
||||
"../**/live/**/*.ex",
|
||||
"./js/**/*.js",
|
||||
]),
|
||||
safelist: [/phx/, /topbar/],
|
||||
}),
|
||||
]
|
||||
),
|
||||
optimization: {
|
||||
minimizer: ["...", new CssMinimizerPlugin()],
|
||||
},
|
||||
devtool: devMode ? "source-map" : undefined,
|
||||
};
|
||||
};
|
||||
Loading…
Add table
Add a link
Reference in a new issue