scss + makefile

This commit is contained in:
assada 2022-09-23 13:22:14 +03:00
parent d7bdf27e10
commit 083c09f6a5
9 changed files with 5631 additions and 191 deletions

View File

@ -44,14 +44,23 @@ WHITE='\033[1;37m'
.title: .title:
$(info $(APP_NAME) v$(VERSION)) $(info $(APP_NAME) v$(VERSION))
.PHONY: fbuild .PHONY: install
fbuild: ## Build frontend install: ## Install all deps
npm install npm install
$(info Building Browser MQTT library)
cd node_modules/mqtt cd node_modules/mqtt
npm install npm install
webpack ./mqtt.js --output-library mqtt webpack ./mqtt.js --output-library mqtt
cd ../..
npm run build-dev .PHONY: build
build: ## Build frontend (default: env=dev)
ifeq ($(env), prod)
$(info Building frontend for production)
npm run build:prod
else
$(info Building frontend for development)
npm run build:dev
endif
# Public targets # Public targets
.PHONY: test .PHONY: test

View File

@ -12,7 +12,8 @@ Flightcondroller for PX4 from browser via mqtt-mavlink bridge
### Build frontend (dev) ### Build frontend (dev)
```bash ```bash
make fbuild make install
make build env=dev
``` ```
### Up frontend (dev) ### Up frontend (dev)
```bash ```bash

View File

@ -1,86 +0,0 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>UDrone</title>
<meta name="theme-color" content="#7952b3">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<style>
html,
body {
height: 100%;
}
body {
display: flex;
align-items: center;
padding-top: 40px;
padding-bottom: 40px;
background-color: #f5f5f5;
}
.form-signin {
width: 100%;
max-width: 330px;
padding: 15px;
margin: auto;
}
.form-signin .checkbox {
font-weight: 400;
}
.form-signin .form-floating:focus-within {
z-index: 2;
}
.form-signin input[type="email"] {
margin-bottom: -1px;
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
}
.form-signin input[type="password"] {
margin-bottom: 10px;
border-top-left-radius: 0;
border-top-right-radius: 0;
}
.bd-placeholder-img {
font-size: 1.125rem;
text-anchor: middle;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}
@media (min-width: 768px) {
.bd-placeholder-img-lg {
font-size: 3.5rem;
}
}
</style>
</head>
<body class="text-center">
<main class="form-signin">
<form>
<img class="mb-4" src="/docs/5.0/assets/brand/bootstrap-logo.svg" alt="" width="72" height="57">
<h1 class="h3 mb-3 fw-normal">Ввійдіть будьласка</h1>
<div class="form-floating">
<input type="text" class="form-control" id="floatingInput" placeholder="name@example.com">
<label for="floatingInput">Логін</label>
</div>
<div class="form-floating">
<input type="password" class="form-control" id="floatingPassword" placeholder="Password">
<label for="floatingPassword">Пароль</label>
</div>
<a href="dashboard.html" class="w-100 btn btn-lg btn-primary" type="submit">Вхід</a>
<p class="mt-5 mb-3 text-muted">&copy; 2022</p>
</form>
</main>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
</body>
</html>

View File

@ -4,102 +4,9 @@
<meta charset="utf-8"> <meta charset="utf-8">
<title>UDrone</title> <title>UDrone</title>
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no"> <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
<link rel="stylesheet" type="text/css" href="./node_modules/flight-indicators-js/css/flight-indicators.css" />
<link href="https://api.mapbox.com/mapbox-gl-js/v2.9.2/mapbox-gl.css" rel="stylesheet"> <link href="https://api.mapbox.com/mapbox-gl-js/v2.9.2/mapbox-gl.css" rel="stylesheet">
<script src="https://api.mapbox.com/mapbox-gl-js/v2.9.2/mapbox-gl.js"></script> <script src="https://api.mapbox.com/mapbox-gl-js/v2.9.2/mapbox-gl.js"></script>
<style> <link rel="stylesheet" href="/dist/style.css">
body { margin: 0; padding: 0; font-family: sans-serif;}
#map { position: absolute; top: 0; bottom: 0; width: 100%; }
#ui {
z-index: 99999;
position: absolute;
bottom: 0;
}
.instrument .hidden {
display: none;
}
.context-menu {
position: absolute;
z-index: 10000;
}
.menu {
display: flex;
flex-direction: column;
background-color: #edece1;
padding: 10px 0;
margin: 0;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
border-top-right-radius: 5px;
}
.mapboxgl-ctrl button .mapboxgl-ctrl-icon {
background-color: #232323;
}
.mapboxgl-ctrl-group button {
background-color: #232323;
color: #fff;
font-weight: bold;
}
.menu > li > a {
font: inherit;
border: 0;
padding: 10px 30px 10px 15px;
display: flex;
align-items: center;
position: relative;
text-decoration: unset;
color: #000;
font-weight: 500;
}
.menu > li > a:hover {
background:#f1f3f7;
color: #013b01;
}
.menu > li {
text-decoration: none;
list-style-type: none; /* Remove bullets */
padding: 0; /* Remove padding */
margin: 0; /* Remove margins */
}
.menu > li > a > i {
padding-right: 10px;
}
.menu > li.trash > a:hover {
color: red;
}
.mapboxgl-popup {
max-width: 400px;
font: 12px/20px 'Helvetica Neue', Arial, Helvetica, sans-serif;
}
#data {
display: block;
position: fixed;
width: 50%;
border-radius: 25px;
height: 25px;
line-height: 25px;
padding: 10px 25px;
top: 0;
left: 0;
margin: 10px;
background-color: #232323;
color: #fff;
border: #838383 solid 1px;
}
#data > .data_el {
padding-right: 10%;
display: inline;
}
</style>
</head> </head>
<body> <body>
<!-- <iframe width="300" style="position: absolute; z-index: 99999; right: 0;" height="230" src="http://www.youtube.com/embed/yotbnhfRgMY?autoplay=1" frameborder="0" allowfullscreen></iframe> --> <!-- <iframe width="300" style="position: absolute; z-index: 99999; right: 0;" height="230" src="http://www.youtube.com/embed/yotbnhfRgMY?autoplay=1" frameborder="0" allowfullscreen></iframe> -->

5499
package-lock.json generated

File diff suppressed because it is too large Load Diff

View File

@ -5,8 +5,8 @@
"private": true, "private": true,
"scripts": { "scripts": {
"test": "echo \"Error: no test specified\" && exit 1", "test": "echo \"Error: no test specified\" && exit 1",
"build-dev": "webpack --mode=development", "build:dev": "webpack --mode=development",
"build-prod": "webpack --mode=production" "build:prod": "webpack --mode=production"
}, },
"keywords": [], "keywords": [],
"author": "", "author": "",
@ -21,6 +21,11 @@
"@babel/preset-env": "^7.18.10", "@babel/preset-env": "^7.18.10",
"babel-loader": "^8.2.5", "babel-loader": "^8.2.5",
"compression-webpack-plugin": "^10.0.0", "compression-webpack-plugin": "^10.0.0",
"css-loader": "^6.7.1",
"css-minimizer-webpack-plugin": "^4.1.0",
"mini-css-extract-plugin": "^2.6.1",
"node-sass": "^7.0.3",
"sass-loader": "^13.0.2",
"terser-webpack-plugin": "^5.3.6", "terser-webpack-plugin": "^5.3.6",
"webpack": "^5.74.0", "webpack": "^5.74.0",
"webpack-build-notifier": "^2.3.0", "webpack-build-notifier": "^2.3.0",

View File

@ -6,6 +6,8 @@ import RJSON from 'relaxed-json';
import { RulerControl, StylesControl } from 'mapbox-gl-controls'; import { RulerControl, StylesControl } from 'mapbox-gl-controls';
import MiniMap from "./mapbox/mapbox-minimap" import MiniMap from "./mapbox/mapbox-minimap"
import './scss/app.scss';
mapboxgl.accessToken = 'pk.eyJ1IjoiYXNzYWRhIiwiYSI6ImNrbTkzd2RlOTBrMmwyb3BoZGZ5bXpyZXIifQ.qPyi1nxJHcc4Z1xL1EKuuA'; mapboxgl.accessToken = 'pk.eyJ1IjoiYXNzYWRhIiwiYSI6ImNrbTkzd2RlOTBrMmwyb3BoZGZ5bXpyZXIifQ.qPyi1nxJHcc4Z1xL1EKuuA';
const map = new mapboxgl.Map({ const map = new mapboxgl.Map({
container: 'map', // container ID container: 'map', // container ID

93
src/scss/app.scss Normal file
View File

@ -0,0 +1,93 @@
@import '/node_modules/flight-indicators-js/css/flight-indicators.css';
body { margin: 0; padding: 0; font-family: sans-serif;}
#map { position: absolute; top: 0; bottom: 0; width: 100%; }
#ui {
z-index: 99999;
position: absolute;
bottom: 0;
}
.instrument .hidden {
display: none;
}
.context-menu {
position: absolute;
z-index: 10000;
}
.menu {
display: flex;
flex-direction: column;
background-color: #edece1;
padding: 10px 0;
margin: 0;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
border-top-right-radius: 5px;
}
.mapboxgl-ctrl button .mapboxgl-ctrl-icon {
background-color: #232323;
}
.mapboxgl-ctrl-group button {
background-color: #232323;
color: #fff;
font-weight: bold;
}
.menu > li > a {
font: inherit;
border: 0;
padding: 10px 30px 10px 15px;
display: flex;
align-items: center;
position: relative;
text-decoration: unset;
color: #000;
font-weight: 500;
}
.menu > li > a:hover {
background:#f1f3f7;
color: #013b01;
}
.menu > li {
text-decoration: none;
list-style-type: none; /* Remove bullets */
padding: 0; /* Remove padding */
margin: 0; /* Remove margins */
}
.menu > li > a > i {
padding-right: 10px;
}
.menu > li.trash > a:hover {
color: red;
}
.mapboxgl-popup {
max-width: 400px;
font: 12px/20px 'Helvetica Neue', Arial, Helvetica, sans-serif;
}
#data {
display: block;
position: fixed;
width: 50%;
border-radius: 25px;
height: 25px;
line-height: 25px;
padding: 10px 25px;
top: 0;
left: 0;
margin: 10px;
background-color: #232323;
color: #fff;
border: #838383 solid 1px;
}
#data > .data_el {
padding-right: 10%;
display: inline;
}

View File

@ -1,6 +1,8 @@
const path = require('path'); const path = require('path');
const WebpackBuildNotifierPlugin = require('webpack-build-notifier'); const WebpackBuildNotifierPlugin = require('webpack-build-notifier');
const CompressionPlugin = require("compression-webpack-plugin"); const CompressionPlugin = require("compression-webpack-plugin");
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");
module.exports = (env, argv) => { module.exports = (env, argv) => {
@ -18,6 +20,14 @@ module.exports = (env, argv) => {
test: /\.(js)$/, test: /\.(js)$/,
exclude: /node_modules/, exclude: /node_modules/,
use: ['babel-loader'] use: ['babel-loader']
},
{
test:/\.(s*)css$/,
use: [
MiniCssExtractPlugin.loader,
'css-loader',
'sass-loader',
]
} }
] ]
}, },
@ -26,6 +36,9 @@ module.exports = (env, argv) => {
title: "UDrone", title: "UDrone",
suppressSuccess: false, // don't spam success notifications suppressSuccess: false, // don't spam success notifications
}), }),
new MiniCssExtractPlugin({
filename: 'style.css',
})
], ],
optimization: { optimization: {
minimize: isProduction, minimize: isProduction,
@ -40,7 +53,8 @@ module.exports = (env, argv) => {
}, },
new CompressionPlugin({ new CompressionPlugin({
test: /\.js(\?.*)?$/i, test: /\.js(\?.*)?$/i,
}) }),
new CssMinimizerPlugin(),
], ],
}, },
resolve: { resolve: {