scss + makefile
This commit is contained in:
parent
d7bdf27e10
commit
083c09f6a5
17
Makefile
17
Makefile
@ -44,14 +44,23 @@ WHITE='\033[1;37m'
|
||||
.title:
|
||||
$(info $(APP_NAME) v$(VERSION))
|
||||
|
||||
.PHONY: fbuild
|
||||
fbuild: ## Build frontend
|
||||
.PHONY: install
|
||||
install: ## Install all deps
|
||||
npm install
|
||||
$(info Building Browser MQTT library)
|
||||
cd node_modules/mqtt
|
||||
npm install
|
||||
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
|
||||
.PHONY: test
|
||||
|
||||
@ -12,7 +12,8 @@ Flightcondroller for PX4 from browser via mqtt-mavlink bridge
|
||||
|
||||
### Build frontend (dev)
|
||||
```bash
|
||||
make fbuild
|
||||
make install
|
||||
make build env=dev
|
||||
```
|
||||
### Up frontend (dev)
|
||||
```bash
|
||||
|
||||
86
index.html
86
index.html
@ -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">© 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>
|
||||
95
map.html
95
map.html
@ -4,102 +4,9 @@
|
||||
<meta charset="utf-8">
|
||||
<title>UDrone</title>
|
||||
<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">
|
||||
<script src="https://api.mapbox.com/mapbox-gl-js/v2.9.2/mapbox-gl.js"></script>
|
||||
<style>
|
||||
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>
|
||||
<link rel="stylesheet" href="/dist/style.css">
|
||||
</head>
|
||||
<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> -->
|
||||
|
||||
5499
package-lock.json
generated
5499
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@ -5,8 +5,8 @@
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"test": "echo \"Error: no test specified\" && exit 1",
|
||||
"build-dev": "webpack --mode=development",
|
||||
"build-prod": "webpack --mode=production"
|
||||
"build:dev": "webpack --mode=development",
|
||||
"build:prod": "webpack --mode=production"
|
||||
},
|
||||
"keywords": [],
|
||||
"author": "",
|
||||
@ -21,6 +21,11 @@
|
||||
"@babel/preset-env": "^7.18.10",
|
||||
"babel-loader": "^8.2.5",
|
||||
"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",
|
||||
"webpack": "^5.74.0",
|
||||
"webpack-build-notifier": "^2.3.0",
|
||||
|
||||
@ -6,6 +6,8 @@ import RJSON from 'relaxed-json';
|
||||
import { RulerControl, StylesControl } from 'mapbox-gl-controls';
|
||||
import MiniMap from "./mapbox/mapbox-minimap"
|
||||
|
||||
import './scss/app.scss';
|
||||
|
||||
mapboxgl.accessToken = 'pk.eyJ1IjoiYXNzYWRhIiwiYSI6ImNrbTkzd2RlOTBrMmwyb3BoZGZ5bXpyZXIifQ.qPyi1nxJHcc4Z1xL1EKuuA';
|
||||
const map = new mapboxgl.Map({
|
||||
container: 'map', // container ID
|
||||
|
||||
93
src/scss/app.scss
Normal file
93
src/scss/app.scss
Normal 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;
|
||||
}
|
||||
@ -1,6 +1,8 @@
|
||||
const path = require('path');
|
||||
const WebpackBuildNotifierPlugin = require('webpack-build-notifier');
|
||||
const CompressionPlugin = require("compression-webpack-plugin");
|
||||
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
|
||||
const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");
|
||||
|
||||
|
||||
module.exports = (env, argv) => {
|
||||
@ -18,6 +20,14 @@ module.exports = (env, argv) => {
|
||||
test: /\.(js)$/,
|
||||
exclude: /node_modules/,
|
||||
use: ['babel-loader']
|
||||
},
|
||||
{
|
||||
test:/\.(s*)css$/,
|
||||
use: [
|
||||
MiniCssExtractPlugin.loader,
|
||||
'css-loader',
|
||||
'sass-loader',
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
@ -26,6 +36,9 @@ module.exports = (env, argv) => {
|
||||
title: "UDrone",
|
||||
suppressSuccess: false, // don't spam success notifications
|
||||
}),
|
||||
new MiniCssExtractPlugin({
|
||||
filename: 'style.css',
|
||||
})
|
||||
],
|
||||
optimization: {
|
||||
minimize: isProduction,
|
||||
@ -40,7 +53,8 @@ module.exports = (env, argv) => {
|
||||
},
|
||||
new CompressionPlugin({
|
||||
test: /\.js(\?.*)?$/i,
|
||||
})
|
||||
}),
|
||||
new CssMinimizerPlugin(),
|
||||
],
|
||||
},
|
||||
resolve: {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user