initial implementation of bootstrap v5, purgecss, postcss, autoprefixer
This commit is contained in:
parent
7efb7f7fcc
commit
d9b9da830b
9 changed files with 998 additions and 62 deletions
|
@ -1,5 +1,5 @@
|
||||||
/* This file is for your main application css. */
|
/* Bootstrap v5 */
|
||||||
@import "./phoenix.css";
|
@import "~bootstrap/scss/bootstrap";
|
||||||
|
|
||||||
/* LiveView specific classes for your customizations */
|
/* LiveView specific classes for your customizations */
|
||||||
.phx-no-feedback.invalid-feedback,
|
.phx-no-feedback.invalid-feedback,
|
||||||
|
@ -55,30 +55,6 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Alerts and form errors */
|
/* 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 {
|
.alert:empty {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
|
@ -17,6 +17,11 @@ import { Socket } from "phoenix";
|
||||||
import topbar from "topbar";
|
import topbar from "topbar";
|
||||||
import { LiveSocket } from "phoenix_live_view";
|
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
|
let csrfToken = document
|
||||||
.querySelector("meta[name='csrf-token']")
|
.querySelector("meta[name='csrf-token']")
|
||||||
.getAttribute("content");
|
.getAttribute("content");
|
||||||
|
|
911
assets/package-lock.json
generated
911
assets/package-lock.json
generated
File diff suppressed because it is too large
Load diff
|
@ -7,6 +7,8 @@
|
||||||
"watch": "webpack --mode development --watch"
|
"watch": "webpack --mode development --watch"
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
|
"@popperjs/core": "^2.8.4",
|
||||||
|
"bootstrap": "^5.0.0-beta2",
|
||||||
"phoenix": "file:../deps/phoenix",
|
"phoenix": "file:../deps/phoenix",
|
||||||
"phoenix_html": "file:../deps/phoenix_html",
|
"phoenix_html": "file:../deps/phoenix_html",
|
||||||
"phoenix_live_view": "file:../deps/phoenix_live_view",
|
"phoenix_live_view": "file:../deps/phoenix_live_view",
|
||||||
|
@ -15,11 +17,17 @@
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@babel/core": "^7.x",
|
"@babel/core": "^7.x",
|
||||||
"@babel/preset-env": "^7.x",
|
"@babel/preset-env": "^7.x",
|
||||||
|
"autoprefixer": "^10.2.4",
|
||||||
"babel-loader": "^8.x",
|
"babel-loader": "^8.x",
|
||||||
"copy-webpack-plugin": "^7.x",
|
"copy-webpack-plugin": "^7.x",
|
||||||
"css-loader": "^5.x",
|
"css-loader": "^5.x",
|
||||||
"css-minimizer-webpack-plugin": "^1.x",
|
"css-minimizer-webpack-plugin": "^1.x",
|
||||||
|
"glob-all": "^3.2.1",
|
||||||
"mini-css-extract-plugin": "^1.x",
|
"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": "^1.x",
|
||||||
"sass-loader": "^10.x",
|
"sass-loader": "^10.x",
|
||||||
"webpack": "^5.x",
|
"webpack": "^5.x",
|
||||||
|
|
5
assets/postcss.config.js
Normal file
5
assets/postcss.config.js
Normal file
|
@ -0,0 +1,5 @@
|
||||||
|
module.exports = {
|
||||||
|
parser: require("postcss-scss"),
|
||||||
|
|
||||||
|
plugins: [require("autoprefixer")],
|
||||||
|
};
|
|
@ -1,8 +1,9 @@
|
||||||
const path = require("path");
|
const path = require("path");
|
||||||
const glob = require("glob");
|
const glob = require("glob-all");
|
||||||
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
|
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
|
||||||
const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");
|
const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");
|
||||||
const CopyWebpackPlugin = require("copy-webpack-plugin");
|
const CopyWebpackPlugin = require("copy-webpack-plugin");
|
||||||
|
const PurgecssPlugin = require("purgecss-webpack-plugin");
|
||||||
|
|
||||||
module.exports = (env, options) => {
|
module.exports = (env, options) => {
|
||||||
const devMode = options.mode !== "production";
|
const devMode = options.mode !== "production";
|
||||||
|
@ -27,7 +28,12 @@ module.exports = (env, options) => {
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
test: /\.[s]?css$/,
|
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({
|
new CopyWebpackPlugin({
|
||||||
patterns: [{ from: "static/", to: "../" }],
|
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: {
|
optimization: {
|
||||||
minimizer: ["...", new CssMinimizerPlugin()],
|
minimizer: ["...", new CssMinimizerPlugin()],
|
||||||
},
|
},
|
||||||
|
|
|
@ -13,8 +13,8 @@
|
||||||
</form>
|
</form>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<section class="row">
|
<section class="row align-items-start">
|
||||||
<article class="column">
|
<article class="col">
|
||||||
<h2>Resources</h2>
|
<h2>Resources</h2>
|
||||||
<ul>
|
<ul>
|
||||||
<li>
|
<li>
|
||||||
|
@ -28,7 +28,7 @@
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
</article>
|
</article>
|
||||||
<article class="column">
|
<article class="col">
|
||||||
<h2>Help</h2>
|
<h2>Help</h2>
|
||||||
<ul>
|
<ul>
|
||||||
<li>
|
<li>
|
||||||
|
@ -45,4 +45,5 @@
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
</article>
|
</article>
|
||||||
|
|
||||||
</section>
|
</section>
|
||||||
|
|
37
lib/bones73k_web/templates/layout/_navbar.html.eex
Normal file
37
lib/bones73k_web/templates/layout/_navbar.html.eex
Normal 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>
|
|
@ -10,9 +10,12 @@
|
||||||
<script defer phx-track-static type="text/javascript" src="<%= Routes.static_path(@conn, "/js/app.js") %>"></script>
|
<script defer phx-track-static type="text/javascript" src="<%= Routes.static_path(@conn, "/js/app.js") %>"></script>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<header>
|
|
||||||
<section class="container">
|
<%= render "_navbar.html", assigns %>
|
||||||
<nav role="navigation">
|
|
||||||
|
<%# <section class="container">
|
||||||
|
</section> %>
|
||||||
|
|
||||||
<ul>
|
<ul>
|
||||||
<li><%= link "Properties", to: Routes.property_index_path(@conn, :index) %></li>
|
<li><%= link "Properties", to: Routes.property_index_path(@conn, :index) %></li>
|
||||||
<%= if function_exported?(Routes, :live_dashboard_path, 2) do %>
|
<%= if function_exported?(Routes, :live_dashboard_path, 2) do %>
|
||||||
|
@ -20,12 +23,9 @@
|
||||||
<% end %>
|
<% end %>
|
||||||
</ul>
|
</ul>
|
||||||
<%= render "_user_menu.html", assigns %>
|
<%= 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 %>
|
<%= @inner_content %>
|
||||||
|
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
Loading…
Reference in a new issue