grassrootseconomics/openethereum
5
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Add Loading splashscreen

Browse Source
This commit is contained in:
Nicolas Gotchac 2016-11-24 03:40:22 +01:00
parent e676f00dfa
commit d188435fd8
4 changed files with 78 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
js/src/dapps/index.ejs
View File

@ -5,9 +5,35 @@
<meta name="viewport" content="width=device-width">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title><%= htmlWebpackPlugin.options.title %></title>
<style>
html, body, #container {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
.loading-container {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
font-family: Roboto;
background-color: rgba(0, 0, 0, 0.8);
color: #ddd;
}
.loading {
font-size: 4em;
}
</style>
</head>
<body>
<div id="container"></div>
<div id="container">
<div class="loading-container">
<span class="loading">Loading...</span>
</div>
</div>
<script src="vendor.js"></script>
<% if (!htmlWebpackPlugin.options.secure) { %>
<script src="/parity-utils/parity.js"></script>

23
js/src/index.ejs
View File

@ -7,12 +7,33 @@
<title><%= htmlWebpackPlugin.options.title %></title>
<style>
html, body, #container {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
.loading-container {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
font-family: Roboto;
background-color: rgba(0, 0, 0, 0.8);
color: #ddd;
}
.loading {
font-size: 4em;
}
</style>
</head>
<body>
<div id="container"></div>
<div id="container">
<div class="loading-container">
<span class="loading">Loading...</span>
</div>
</div>
<script src="vendor.js"></script>
</body>
</html>

37
js/webpack/config.js
View File

@ -15,12 +15,8 @@
// You should have received a copy of the GNU General Public License
// along with Parity. If not, see <http://www.gnu.org/licenses/>.
const path = require('path');
const postcssImport = require('postcss-import');
const postcssNested = require('postcss-nested');
const postcssVars = require('postcss-simple-vars');
const rucksack = require('rucksack-css');
const webpack = require('webpack');
const path = require('path');
const WebpackErrorNotificationPlugin = require('webpack-error-notification');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
@ -28,17 +24,11 @@ const HtmlWebpackPlugin = require('html-webpack-plugin');
const Shared = require('./shared');
const DAPPS = require('../src/dapps');
const ENV = process.env.NODE_ENV || 'development';
const isProd = ENV === 'production';
const DEST = process.env.BUILD_DEST || '.build';
const FAVICON = path.resolve(__dirname, '../assets/images/parity-logo-black-no-text.png');
// dapps
const entry = Shared.dappsEntry;
// main UI
entry.index = './index.js';
const DEST = process.env.BUILD_DEST || '.build';
const ENV = process.env.NODE_ENV || 'development';
const isProd = ENV === 'production';
module.exports = {
debug: !isProd,
@ -46,7 +36,9 @@ module.exports = {
devtool: isProd ? '#eval' : '#cheap-module-eval-source-map',
context: path.join(__dirname, '../src'),
entry: entry,
entry: Object.assign({}, Shared.dappsEntry, {
index: './index.js'
}),
output: {
path: path.join(__dirname, '../', DEST),
filename: '[name].[hash].js'
@ -113,20 +105,7 @@ module.exports = {
attrs: ['img:src', 'link:href']
},
postcss: [
postcssImport({
addDependencyTo: webpack
}),
postcssNested({}),
postcssVars({
unknown: function (node, name, result) {
node.warn(result, `Unknown variable ${name}`);
}
}),
rucksack({
autoprefixer: true
})
],
postcss: Shared.postcss,
plugins: (function () {
const plugins = Shared.getPlugins().concat([

21
js/webpack/shared.js
View File

@ -17,6 +17,11 @@
const webpack = require('webpack');
const HappyPack = require('happypack');
const postcssImport = require('postcss-import');
const postcssNested = require('postcss-nested');
const postcssVars = require('postcss-simple-vars');
const rucksack = require('rucksack-css');
const ENV = process.env.NODE_ENV || 'development';
const isProd = ENV === 'production';
@ -77,6 +82,21 @@ function getDappsEntry () {
}, {});
}
const postcss = [
postcssImport({
addDependencyTo: webpack
}),
postcssNested({}),
postcssVars({
unknown: function (node, name, result) {
node.warn(result, `Unknown variable ${name}`);
}
}),
rucksack({
autoprefixer: true
})
];
const proxies = [
{
context: (pathname, req) => {
@ -118,5 +138,6 @@ const proxies = [
module.exports = {
getPlugins: getPlugins,
dappsEntry: getDappsEntry(),
postcss: postcss,
proxies: proxies
};