initial implementation of bootstrap v5, purgecss, postcss, autoprefixer
This commit is contained in:
parent
7efb7f7fcc
commit
d9b9da830b
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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");
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load Diff
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -0,0 +1,5 @@
|
|||
module.exports = {
|
||||
parser: require("postcss-scss"),
|
||||
|
||||
plugins: [require("autoprefixer")],
|
||||
};
|
||||
|
|
@ -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()],
|
||||
},
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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,22 +10,22 @@
|
|||
<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">
|
||||
<ul>
|
||||
<li><%= link "Properties", to: Routes.property_index_path(@conn, :index) %></li>
|
||||
<%= if function_exported?(Routes, :live_dashboard_path, 2) do %>
|
||||
<li><%= link "LiveDashboard", to: Routes.live_dashboard_path(@conn, :home) %></li>
|
||||
<% 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>
|
||||
|
||||
<%= 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 %>
|
||||
<li><%= link "LiveDashboard", to: Routes.live_dashboard_path(@conn, :home) %></li>
|
||||
<% end %>
|
||||
</ul>
|
||||
<%= render "_user_menu.html", assigns %>
|
||||
|
||||
|
||||
<%= @inner_content %>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
Loading…
Reference in New Issue