Add a loading spinner to wall-display
Spinner GIF derived from https://loading.io/, using `apng2gif` to get correct transparency behavior
This commit is contained in:
parent
cf0127c5a8
commit
084f398d41
BIN
src/loading.gif
Normal file
BIN
src/loading.gif
Normal file
Binary file not shown.
After Width: | Height: | Size: 15 KiB |
14
src/modal.css
Normal file
14
src/modal.css
Normal file
@ -0,0 +1,14 @@
|
|||||||
|
.modal {
|
||||||
|
position: fixed;
|
||||||
|
z-index: 99;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
#loadingSpinner {
|
||||||
|
background-image: url(./loading.gif);
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-position: center;
|
||||||
|
}
|
@ -7,6 +7,7 @@
|
|||||||
<title>Tool Reservations</title>
|
<title>Tool Reservations</title>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
<div class="modal" id="loadingSpinner"></div>
|
||||||
<div id="calendar"></div>
|
<div id="calendar"></div>
|
||||||
<script src="bundle-wall-display.js"></script>
|
<script src="bundle-wall-display.js"></script>
|
||||||
</body>
|
</body>
|
||||||
|
@ -10,6 +10,7 @@ import { CalendarOptions } from '@fullcalendar/core';
|
|||||||
import { common_calendarOptions, main } from './common';
|
import { common_calendarOptions, main } from './common';
|
||||||
|
|
||||||
import './wall-display.html';
|
import './wall-display.html';
|
||||||
|
import './modal.css';
|
||||||
import './ios-fixes.css';
|
import './ios-fixes.css';
|
||||||
|
|
||||||
document.body.addEventListener('touchmove', (e) => e.preventDefault(), {
|
document.body.addEventListener('touchmove', (e) => e.preventDefault(), {
|
||||||
@ -29,6 +30,12 @@ const calendarOptions: CalendarOptions = {
|
|||||||
};
|
};
|
||||||
})
|
})
|
||||||
: [],
|
: [],
|
||||||
|
loading(isLoading: boolean) {
|
||||||
|
const spinner = document.getElementById('loadingSpinner');
|
||||||
|
if (spinner) {
|
||||||
|
spinner.style.display = isLoading ? '' : 'none';
|
||||||
|
}
|
||||||
|
},
|
||||||
};
|
};
|
||||||
|
|
||||||
const calendar = main(calendarOptions, !toolFilter);
|
const calendar = main(calendarOptions, !toolFilter);
|
||||||
|
@ -4,6 +4,10 @@ const common = {
|
|||||||
mode: 'development',
|
mode: 'development',
|
||||||
module: {
|
module: {
|
||||||
rules: [
|
rules: [
|
||||||
|
{
|
||||||
|
test: /\.(png|jpg|gif|svg|eot|ttf|woff)$/,
|
||||||
|
type: 'asset/resource',
|
||||||
|
},
|
||||||
{
|
{
|
||||||
test: /\.css$/i,
|
test: /\.css$/i,
|
||||||
use: ['style-loader', 'css-loader'],
|
use: ['style-loader', 'css-loader'],
|
||||||
|
Loading…
Reference in New Issue
Block a user