Address issues with Bootstrap and Popper
This commit is contained in:
Tyler Vigario
parent
716b55b020
commit
e32b9aeae3
|
Before Width: | Height: | Size: 3.0 KiB After Width: | Height: | Size: 3.0 KiB |
|
Before Width: | Height: | Size: 1.1 KiB After Width: | Height: | Size: 1.1 KiB |
|
Before Width: | Height: | Size: 620 B After Width: | Height: | Size: 620 B |
|
Before Width: | Height: | Size: 16 KiB After Width: | Height: | Size: 16 KiB |
|
Before Width: | Height: | Size: 597 B After Width: | Height: | Size: 597 B |
|
Before Width: | Height: | Size: 400 B After Width: | Height: | Size: 400 B |
|
Before Width: | Height: | Size: 33 KiB After Width: | Height: | Size: 33 KiB |
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@ -1 +1 @@
|
||||
<!doctype html><head><meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta charset="UTF-8"><title>botamusique web interface</title><link rel="icon" href="static/img/favicon.ico"/><link rel="stylesheet" href="static/css/main.css"></head><body><div class="container" style="max-width: 800px"><div class="col-8" style="margin: auto; padding-top: 50px;"><div class="card"><div class="card-header">Token Required</div><div class="card-body"><h3>Token Required!</h3>You are accessing the web interface of {{ name }}. A token is needed to grant you access.<br/>Please send "{{ command }}" to the bot in mumble to acquire one.<form action="."><div class="form-group mt-3"><label for="token_input">Token</label><div class="input-group"><input type="password" class="form-control btn-space" id="token_input" name="token" placeholder="xxxxxxx"> <button type="submit" class="btn btn-primary">Submit</button></div></div></form></div></div></div></div><script src="static/js/main.js"></script></body>
|
||||
<!doctype html><head><meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta charset="UTF-8"><title>botamusique web interface</title><link rel="icon" href="static/image/favicon.ico"/><link rel="stylesheet" href="static/css/main.css"></head><body><div class="container" style="max-width: 800px"><div class="col-8" style="margin: auto; padding-top: 50px;"><div class="card"><div class="card-header">Token Required</div><div class="card-body"><h3>Token Required!</h3>You are accessing the web interface of {{ name }}. A token is needed to grant you access.<br/>Please send "{{ command }}" to the bot in mumble to acquire one.<form action="."><div class="form-group mt-3"><label for="token_input">Token</label><div class="input-group"><input type="password" class="form-control btn-space" id="token_input" name="token" placeholder="xxxxxxx"> <button type="submit" class="btn btn-primary">Submit</button></div></div></form></div></div></div></div><script src="static/js/main.js"></script></body>
|
||||
71
web/package-lock.json
generated
71
web/package-lock.json
generated
@ -1117,6 +1117,12 @@
|
||||
"integrity": "sha512-iYCgjm1dGPRuo12+BStjd1HiVQqhlRhWDOQigNxn023HcjnhsiFz9pc6CzJj4HwDCSQca9bxTL4PxJDbkdm3PA==",
|
||||
"dev": true
|
||||
},
|
||||
"@types/json-schema": {
|
||||
"version": "7.0.5",
|
||||
"resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.5.tgz",
|
||||
"integrity": "sha512-7+2BITlgjgDhH0vvwZU/HZJVyk+2XUlvxXe8dFMedNX/aMkaOq++rMAFXc0tM7ij15QaWlbdQASBR9dihi+bDQ==",
|
||||
"dev": true
|
||||
},
|
||||
"@types/json5": {
|
||||
"version": "0.0.29",
|
||||
"resolved": "https://registry.npmjs.org/@types/json5/-/json5-0.0.29.tgz",
|
||||
@ -1997,6 +2003,12 @@
|
||||
"integrity": "sha1-BuuE8A7qQT2oav/vrL/7Ngk7PFA=",
|
||||
"dev": true
|
||||
},
|
||||
"camelcase": {
|
||||
"version": "5.3.1",
|
||||
"resolved": "https://registry.npmjs.org/camelcase/-/camelcase-5.3.1.tgz",
|
||||
"integrity": "sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg==",
|
||||
"dev": true
|
||||
},
|
||||
"caniuse-lite": {
|
||||
"version": "1.0.30001066",
|
||||
"resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001066.tgz",
|
||||
@ -2463,9 +2475,9 @@
|
||||
}
|
||||
},
|
||||
"css-loader": {
|
||||
"version": "3.5.3",
|
||||
"resolved": "https://registry.npmjs.org/css-loader/-/css-loader-3.5.3.tgz",
|
||||
"integrity": "sha512-UEr9NH5Lmi7+dguAm+/JSPovNjYbm2k3TK58EiwQHzOHH5Jfq1Y+XoP2bQO6TMn7PptMd0opxxedAWcaSTRKHw==",
|
||||
"version": "3.6.0",
|
||||
"resolved": "https://registry.npmjs.org/css-loader/-/css-loader-3.6.0.tgz",
|
||||
"integrity": "sha512-M5lSukoWi1If8dhQAUCvj4H8vUt3vOnwbQBH9DdTm/s4Ym2B/3dPMtYZeJmq7Q3S3Pa+I94DcZ7pc9bP14cWIQ==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"camelcase": "^5.3.1",
|
||||
@ -2473,27 +2485,52 @@
|
||||
"icss-utils": "^4.1.1",
|
||||
"loader-utils": "^1.2.3",
|
||||
"normalize-path": "^3.0.0",
|
||||
"postcss": "^7.0.27",
|
||||
"postcss": "^7.0.32",
|
||||
"postcss-modules-extract-imports": "^2.0.0",
|
||||
"postcss-modules-local-by-default": "^3.0.2",
|
||||
"postcss-modules-scope": "^2.2.0",
|
||||
"postcss-modules-values": "^3.0.0",
|
||||
"postcss-value-parser": "^4.0.3",
|
||||
"schema-utils": "^2.6.6",
|
||||
"postcss-value-parser": "^4.1.0",
|
||||
"schema-utils": "^2.7.0",
|
||||
"semver": "^6.3.0"
|
||||
},
|
||||
"dependencies": {
|
||||
"camelcase": {
|
||||
"version": "5.3.1",
|
||||
"resolved": "https://registry.npmjs.org/camelcase/-/camelcase-5.3.1.tgz",
|
||||
"integrity": "sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg==",
|
||||
"dev": true
|
||||
"postcss": {
|
||||
"version": "7.0.32",
|
||||
"resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.32.tgz",
|
||||
"integrity": "sha512-03eXong5NLnNCD05xscnGKGDZ98CyzoqPSMjOe6SuoQY7Z2hIj0Ld1g/O/UQRuOle2aRtiIRDg9tDcTGAkLfKw==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"chalk": "^2.4.2",
|
||||
"source-map": "^0.6.1",
|
||||
"supports-color": "^6.1.0"
|
||||
}
|
||||
},
|
||||
"schema-utils": {
|
||||
"version": "2.7.0",
|
||||
"resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-2.7.0.tgz",
|
||||
"integrity": "sha512-0ilKFI6QQF5nxDZLFn2dMjvc4hjg/Wkg7rHd3jK6/A4a1Hl9VFdQWvgB1UMGoU94pad1P/8N7fMcEnLnSiju8A==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"@types/json-schema": "^7.0.4",
|
||||
"ajv": "^6.12.2",
|
||||
"ajv-keywords": "^3.4.1"
|
||||
}
|
||||
},
|
||||
"semver": {
|
||||
"version": "6.3.0",
|
||||
"resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz",
|
||||
"integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==",
|
||||
"dev": true
|
||||
},
|
||||
"supports-color": {
|
||||
"version": "6.1.0",
|
||||
"resolved": "https://registry.npmjs.org/supports-color/-/supports-color-6.1.0.tgz",
|
||||
"integrity": "sha512-qe1jfm1Mg7Nq/NSh6XE24gPXROEVsWHxC1LIx//XNlD9iw7YZQGjZNjYN7xGaEG6iKdA8EtNFW6R0gjnVXp+wQ==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"has-flag": "^3.0.0"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
@ -3103,9 +3140,9 @@
|
||||
}
|
||||
},
|
||||
"eslint-plugin-import": {
|
||||
"version": "2.21.1",
|
||||
"resolved": "https://registry.npmjs.org/eslint-plugin-import/-/eslint-plugin-import-2.21.1.tgz",
|
||||
"integrity": "sha512-qYOOsgUv63vHof7BqbzuD+Ud34bXHxFJxntuAC1ZappFZXYbRIek3aJ7jc9i2dHDGDyZ/0zlO0cpioES265Lsw==",
|
||||
"version": "2.21.2",
|
||||
"resolved": "https://registry.npmjs.org/eslint-plugin-import/-/eslint-plugin-import-2.21.2.tgz",
|
||||
"integrity": "sha512-FEmxeGI6yaz+SnEB6YgNHlQK1Bs2DKLM+YF+vuTk5H8J9CLbJLtlPvRFgZZ2+sXiKAlN5dpdlrWOjK8ZoZJpQA==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"array-includes": "^3.1.1",
|
||||
@ -3136,9 +3173,9 @@
|
||||
}
|
||||
},
|
||||
"eslint-plugin-jsdoc": {
|
||||
"version": "27.0.5",
|
||||
"resolved": "https://registry.npmjs.org/eslint-plugin-jsdoc/-/eslint-plugin-jsdoc-27.0.5.tgz",
|
||||
"integrity": "sha512-LU2sclCdHe4ykYlb2Jb7Nk7L6xd8PfwANV1KRgwHV78kCo/D8aeTdinNZb8BpZQEmu4HbrY82SPZIvyYumHVTQ==",
|
||||
"version": "27.0.7",
|
||||
"resolved": "https://registry.npmjs.org/eslint-plugin-jsdoc/-/eslint-plugin-jsdoc-27.0.7.tgz",
|
||||
"integrity": "sha512-pJKQ8Nby/bQ4VjMtYF26cVU5/jckpHIN5VYij61Ie3ZQIURySh1ThOoZX7IVBYNakpRxsrCwbGmMelsxbjivVg==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"comment-parser": "^0.7.5",
|
||||
|
||||
@ -3,12 +3,9 @@
|
||||
"private": true,
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"dev": "npm run development",
|
||||
"development": "webpack --mode=development --config webpack.config.cjs --progress",
|
||||
"lint": "eslint --config .eslintrc.json src/js/ --ext .mjs",
|
||||
"lint:fix": "npm run lint -- --fix",
|
||||
"prod": "npm run production",
|
||||
"production": "webpack --mode=production --config webpack.config.cjs --progress",
|
||||
"build": "webpack --config webpack.config.cjs --progress",
|
||||
"test": "echo \"Error: no test specified\" && exit 1"
|
||||
},
|
||||
"repository": {
|
||||
@ -29,11 +26,11 @@
|
||||
"babel-eslint": "^10.1.0",
|
||||
"babel-loader": "^8.1.0",
|
||||
"core-js": "^3.6.5",
|
||||
"css-loader": "^3.5.3",
|
||||
"css-loader": "^3.6.0",
|
||||
"eslint": "^7.2.0",
|
||||
"eslint-config-google": "^0.14.0",
|
||||
"eslint-plugin-import": "^2.21.1",
|
||||
"eslint-plugin-jsdoc": "^27.0.5",
|
||||
"eslint-plugin-import": "^2.21.2",
|
||||
"eslint-plugin-jsdoc": "^27.0.7",
|
||||
"eslint-plugin-node": "^11.1.0",
|
||||
"html-webpack-plugin": "^4.3.0",
|
||||
"mini-css-extract-plugin": "^0.9.0",
|
||||
|
||||
@ -1,8 +1,3 @@
|
||||
// eslint-disable-next-line no-unused-vars
|
||||
import {$, jQuery} from 'jquery/src/jquery';
|
||||
import 'jquery-migrate/src/migrate';
|
||||
import 'popper.js';
|
||||
import 'bootstrap/js/src/index';
|
||||
import {library, dom} from '@fortawesome/fontawesome-svg-core/index.es';
|
||||
import {fas} from '@fortawesome/free-solid-svg-icons/index.es';
|
||||
import {far} from '@fortawesome/free-regular-svg-icons/index.es';
|
||||
|
||||
@ -1,3 +1,10 @@
|
||||
import 'jquery/src/jquery';
|
||||
import 'jquery-migrate/src/migrate';
|
||||
import Popper from 'popper.js/dist/esm/popper';
|
||||
import {
|
||||
Modal,
|
||||
Toast,
|
||||
} from 'bootstrap/js/src/index';
|
||||
import {
|
||||
isOverflown,
|
||||
setProgressBar,
|
||||
@ -30,7 +37,7 @@ const pl_tag_edit_element = $('.playlist-item-edit');
|
||||
const notag_element = $('.library-item-notag'); // these elements are shared with library
|
||||
const tag_element = $('.library-item-tag');
|
||||
|
||||
const add_tag_modal = $('#addTagModal');
|
||||
const addTagModal = new Modal(document.getElementById('addTagModal'));
|
||||
|
||||
const playlist_loading = $('#playlist-loading');
|
||||
const playlist_table = $('#playlist-table');
|
||||
@ -497,8 +504,6 @@ const tag_edit_element = $('.library-item-edit');
|
||||
// var notag_element = $(".library-item-notag");
|
||||
// var tag_element = $(".library-item-tag");
|
||||
|
||||
// var add_tag_modal = $("#addTagModal");
|
||||
|
||||
function addResultItem(item) {
|
||||
id_element.val(item.id);
|
||||
title_element.html(item.title);
|
||||
@ -762,7 +767,7 @@ function addTagModalShow(_id, _title, _tag_tuples) {
|
||||
tag_copy.appendTo(add_tag_modal_tags);
|
||||
modal_tag_text.html('');
|
||||
});
|
||||
add_tag_modal.modal('show');
|
||||
addTagModal.show();
|
||||
}
|
||||
|
||||
document.getElementById('addTagModalAddBtn').addEventListener('click', () => {
|
||||
@ -875,7 +880,7 @@ document.getElementById('volume-up-btn').addEventListener('click', () => {
|
||||
// ------- Upload ------
|
||||
// ---------------------
|
||||
|
||||
const uploadModal = $('#uploadModal');
|
||||
const uploadModal = new Modal(document.getElementById('uploadModal'));
|
||||
|
||||
const uploadFileInput = document.getElementById('uploadSelectFile');
|
||||
const uploadModalItem = document.getElementsByClassName('uploadItem')[0];
|
||||
@ -921,7 +926,7 @@ function uploadStart() {
|
||||
}
|
||||
|
||||
uploadFileInput.value = '';
|
||||
uploadModal.modal('show');
|
||||
uploadModal.show();
|
||||
uploadNextFile();
|
||||
}
|
||||
}
|
||||
@ -1022,7 +1027,7 @@ function uploadCancel() {
|
||||
$(uploadCancelBtn).tooltip('show');
|
||||
} else {
|
||||
$(uploadCancelBtn).tooltip('hide');
|
||||
uploadModal.modal('hide');
|
||||
uploadModal.hide();
|
||||
runningXHR.abort();
|
||||
filesToProceed = [];
|
||||
uploadFileInput.value = '';
|
||||
@ -1056,7 +1061,7 @@ document.getElementById('add-radio-url').querySelector('button').addEventListene
|
||||
// ------ Player ------
|
||||
// ---------------------
|
||||
|
||||
const player = document.getElementById('playerToast');
|
||||
const player = new Toast(document.getElementById('playerToast'));
|
||||
const playerArtwork = document.getElementById('playerArtwork');
|
||||
const playerArtworkIdle = document.getElementById('playerArtworkIdle');
|
||||
const playerTitle = document.getElementById('playerTitle');
|
||||
@ -1082,7 +1087,7 @@ playerSkipBtn.addEventListener('click', () => {
|
||||
});
|
||||
|
||||
document.getElementById('player-toast').addEventListener('click', () => {
|
||||
$(player).toast('show');
|
||||
player.show();
|
||||
});
|
||||
|
||||
function playerSetIdle() {
|
||||
|
||||
@ -6,7 +6,7 @@
|
||||
|
||||
<title>botamusique web interface</title>
|
||||
|
||||
<link rel="icon" href="static/img/favicon.ico" />
|
||||
<link rel="icon" href="static/image/favicon.ico" />
|
||||
|
||||
<link id="pagestyle" rel="stylesheet" href="static/css/main.css">
|
||||
</head>
|
||||
@ -15,7 +15,7 @@
|
||||
<div class="container page-header mb-5" id="banner">
|
||||
<div class="row">
|
||||
<div class="col-auto">
|
||||
<img src="static/img/logo.png" height="200px">
|
||||
<img src="static/image/logo.png" height="200px">
|
||||
</div>
|
||||
<div class="col my-auto">
|
||||
<h1>botamusique Web Interface</h1>
|
||||
@ -83,12 +83,12 @@
|
||||
<tbody id="playlist-table" class="playlist-table">
|
||||
<tr id="playlist-loading">
|
||||
<td colspan="4" class="text-center">
|
||||
<img style="margin: auto; width: 35px;" src="static/img/loading.svg" />
|
||||
<img style="margin: auto; width: 35px;" src="static/image/loading.svg" />
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="playlist-empty" class="d-none">
|
||||
<td colspan="4" class="text-center">
|
||||
<img style="margin: auto; width: 35px;" src="static/img/empty_box.svg" />
|
||||
<img style="margin: auto; width: 35px;" src="static/image/empty_box.svg" />
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="playlist-expand table-dark d-none">
|
||||
@ -101,7 +101,7 @@
|
||||
<td>
|
||||
<input hidden type="text" class="playlist-item-id" value="" />
|
||||
<div class="float-left">
|
||||
<img width="80" class="playlist-item-thumbnail" src="static/img/unknown-album.png" />
|
||||
<img width="80" class="playlist-item-thumbnail" src="static/image/unknown-album.png" />
|
||||
</div>
|
||||
<div class="playlist-artwork">
|
||||
<b class="playlist-item-title"></b>
|
||||
@ -195,17 +195,17 @@
|
||||
<div class="card-body">
|
||||
<div id="library-group" class="list-group library-group" style="overflow: auto;">
|
||||
<div id="library-item-loading" class="list-group-item library-item">
|
||||
<img style="margin: auto; width: 35px;" src="static/img/loading.svg" />
|
||||
<img style="margin: auto; width: 35px;" src="static/image/loading.svg" />
|
||||
</div>
|
||||
<div id="library-item-empty" style="display: none" class="list-group-item library-item">
|
||||
<img style="margin: auto; width: 35px;" src="static/img/empty_box.svg" />
|
||||
<img style="margin: auto; width: 35px;" src="static/image/empty_box.svg" />
|
||||
</div>
|
||||
<div id="library-item" style="display: none;" class="list-group-item library-item">
|
||||
<input hidden type="text" class="library-item-id" value="" />
|
||||
|
||||
<div class="library-thumb-col">
|
||||
<div class="library-thumb-img">
|
||||
<img class="library-item-thumb library-thumb-img" src="static/img/unknown-album.png" />
|
||||
<img class="library-item-thumb library-thumb-img" src="static/image/unknown-album.png" />
|
||||
</div>
|
||||
<div class="btn-group-vertical library-thumb-grp">
|
||||
<div class="library-item-play btn btn-secondary library-thumb-btn-up" title="Play">
|
||||
@ -405,8 +405,8 @@
|
||||
</button>
|
||||
</div>
|
||||
<div class="toast-body" id="playerContainer">
|
||||
<img id="playerArtworkIdle" src="static/img/empty_box.svg" />
|
||||
<img id="playerArtwork" src="static/img/unknown-album.png" style="display: none;" />
|
||||
<img id="playerArtworkIdle" src="static/image/empty_box.svg" />
|
||||
<img id="playerArtwork" src="static/image/unknown-album.png" style="display: none;" />
|
||||
<div id="playerInfo">
|
||||
<div id="playerActionBox">
|
||||
<button id="playerPlayBtn" class="btn btn-primary btn-sm btn-space" style="display: none">
|
||||
|
||||
@ -6,7 +6,7 @@
|
||||
|
||||
<title>botamusique web interface</title>
|
||||
|
||||
<link rel="icon" href="static/img/favicon.ico" />
|
||||
<link rel="icon" href="static/image/favicon.ico" />
|
||||
|
||||
<link rel="stylesheet" href="static/css/main.css">
|
||||
</head>
|
||||
@ -40,4 +40,4 @@
|
||||
<script src="static/js/main.js"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
</html>
|
||||
|
||||
@ -3,6 +3,7 @@ const MiniCssExtractPlugin = require('mini-css-extract-plugin');
|
||||
const HtmlWebpackPlugin = require('html-webpack-plugin');
|
||||
|
||||
module.exports = {
|
||||
mode: 'production',
|
||||
entry: {
|
||||
main: [
|
||||
'./src/js/app.mjs',
|
||||
@ -13,6 +14,11 @@ module.exports = {
|
||||
],
|
||||
},
|
||||
devtool: 'source-map',
|
||||
/*optimization: {
|
||||
splitChunks: {
|
||||
chunks: 'all',
|
||||
},
|
||||
},*/
|
||||
output: {
|
||||
filename: 'static/js/[name].js',
|
||||
path: path.resolve(__dirname, '../'),
|
||||
@ -40,9 +46,9 @@ module.exports = {
|
||||
MiniCssExtractPlugin.loader,
|
||||
'css-loader', // translates CSS into CommonJS modules
|
||||
{
|
||||
loader: 'postcss-loader', // Run postcss actions
|
||||
loader: 'postcss-loader',
|
||||
options: {
|
||||
plugins: function() { // postcss plugins, can be exported to postcss.config.js
|
||||
plugins: function() {
|
||||
return [
|
||||
require('autoprefixer'),
|
||||
];
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user