initial implementation of bootstrap v5, purgecss, postcss, autoprefixer

This commit is contained in:
Adam Piontek 2021-02-25 15:27:31 -05:00
parent 7efb7f7fcc
commit d9b9da830b
9 changed files with 998 additions and 62 deletions

View file

@ -1,5 +1,5 @@
/* This file is for your main application css. */
@import "./phoenix.css";
/* Bootstrap v5 */
@import "~bootstrap/scss/bootstrap";
/* LiveView specific classes for your customizations */
.phx-no-feedback.invalid-feedback,
@ -55,30 +55,6 @@
}
/* Alerts and form errors */
.alert {
padding: 15px;
margin-bottom: 20px;
border: 1px solid transparent;
border-radius: 4px;
}
.alert-info {
color: #31708f;
background-color: #d9edf7;
border-color: #bce8f1;
}
.alert-warning {
color: #8a6d3b;
background-color: #fcf8e3;
border-color: #faebcc;
}
.alert-danger {
color: #a94442;
background-color: #f2dede;
border-color: #ebccd1;
}
.alert p {
margin-bottom: 0;
}
.alert:empty {
display: none;
}

View file

@ -17,6 +17,11 @@ import { Socket } from "phoenix";
import topbar from "topbar";
import { LiveSocket } from "phoenix_live_view";
// Bootstrap v5 js imports
import Collapse from "bootstrap/js/dist/collapse";
import Dropdown from "bootstrap/js/dist/dropdown";
// LiveSocket setup
let csrfToken = document
.querySelector("meta[name='csrf-token']")
.getAttribute("content");

911
assets/package-lock.json generated

File diff suppressed because it is too large Load diff

View file

@ -7,6 +7,8 @@
"watch": "webpack --mode development --watch"
},
"dependencies": {
"@popperjs/core": "^2.8.4",
"bootstrap": "^5.0.0-beta2",
"phoenix": "file:../deps/phoenix",
"phoenix_html": "file:../deps/phoenix_html",
"phoenix_live_view": "file:../deps/phoenix_live_view",
@ -15,11 +17,17 @@
"devDependencies": {
"@babel/core": "^7.x",
"@babel/preset-env": "^7.x",
"autoprefixer": "^10.2.4",
"babel-loader": "^8.x",
"copy-webpack-plugin": "^7.x",
"css-loader": "^5.x",
"css-minimizer-webpack-plugin": "^1.x",
"glob-all": "^3.2.1",
"mini-css-extract-plugin": "^1.x",
"postcss": "^8.2.6",
"postcss-loader": "^5.0.0",
"postcss-scss": "^3.0.4",
"purgecss-webpack-plugin": "^4.0.2",
"sass": "^1.x",
"sass-loader": "^10.x",
"webpack": "^5.x",

5
assets/postcss.config.js Normal file
View file

@ -0,0 +1,5 @@
module.exports = {
parser: require("postcss-scss"),
plugins: [require("autoprefixer")],
};

View file

@ -1,8 +1,9 @@
const path = require("path");
const glob = require("glob");
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 PurgecssPlugin = require("purgecss-webpack-plugin");
module.exports = (env, options) => {
const devMode = options.mode !== "production";
@ -27,7 +28,12 @@ module.exports = (env, options) => {
},
{
test: /\.[s]?css$/,
use: [MiniCssExtractPlugin.loader, "css-loader", "sass-loader"],
use: [
MiniCssExtractPlugin.loader,
"css-loader",
"sass-loader",
"postcss-loader",
],
},
],
},
@ -36,7 +42,22 @@ module.exports = (env, options) => {
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()],
},

View file

@ -13,8 +13,8 @@
</form>
</section>
<section class="row">
<article class="column">
<section class="row align-items-start">
<article class="col">
<h2>Resources</h2>
<ul>
<li>
@ -28,7 +28,7 @@
</li>
</ul>
</article>
<article class="column">
<article class="col">
<h2>Help</h2>
<ul>
<li>
@ -45,4 +45,5 @@
</li>
</ul>
</article>
</section>

View file

@ -0,0 +1,37 @@
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" 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>
<div class="collapse navbar-collapse" id="navbarSupportedContent" phx-update="ignore">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item dropdown" phx-update="ignore">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" data-bs-toggle="dropdown" aria-expanded="false">Dropdown</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
</ul>
<form class="d-flex">
<input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success" type="submit">Search</button>
</form>
</div>
</div>
</nav>

View file

@ -10,9 +10,12 @@
<script defer phx-track-static type="text/javascript" src="<%= Routes.static_path(@conn, "/js/app.js") %>"></script>
</head>
<body>
<header>
<section class="container">
<nav role="navigation">
<%= render "_navbar.html", assigns %>
<%# <section class="container">
</section> %>
<ul>
<li><%= link "Properties", to: Routes.property_index_path(@conn, :index) %></li>
<%= if function_exported?(Routes, :live_dashboard_path, 2) do %>
@ -20,12 +23,9 @@
<% end %>
</ul>
<%= render "_user_menu.html", assigns %>
</nav>
<a href="https://phoenixframework.org/" class="phx-logo">
<img src="<%= Routes.static_path(@conn, "/images/phoenix.png") %>" alt="Phoenix Framework Logo"/>
</a>
</section>
</header>
<%= @inner_content %>
</body>
</html>