базовый клиент на сайте
This commit is contained in:
Alexey Kasyanchuk
parent
d8928b8eb4
commit
46708c8f7e
1
.gitignore
vendored
1
.gitignore
vendored
@ -1 +1,2 @@
|
|||||||
node_modules/*
|
node_modules/*
|
||||||
|
build/
|
||||||
|
|||||||
28
config/env.js
Normal file
28
config/env.js
Normal file
@ -0,0 +1,28 @@
|
|||||||
|
// Grab NODE_ENV and REACT_APP_* environment variables and prepare them to be
|
||||||
|
// injected into the application via DefinePlugin in Webpack configuration.
|
||||||
|
|
||||||
|
var REACT_APP = /^REACT_APP_/i;
|
||||||
|
|
||||||
|
function getClientEnvironment(publicUrl) {
|
||||||
|
var processEnv = Object
|
||||||
|
.keys(process.env)
|
||||||
|
.filter(key => REACT_APP.test(key))
|
||||||
|
.reduce((env, key) => {
|
||||||
|
env[key] = JSON.stringify(process.env[key]);
|
||||||
|
return env;
|
||||||
|
}, {
|
||||||
|
// Useful for determining whether we’re running in production mode.
|
||||||
|
// Most importantly, it switches React into the correct mode.
|
||||||
|
'NODE_ENV': JSON.stringify(
|
||||||
|
process.env.NODE_ENV || 'development'
|
||||||
|
),
|
||||||
|
// Useful for resolving the correct path to static assets in `public`.
|
||||||
|
// For example, <img src={process.env.PUBLIC_URL + '/img/logo.png'} />.
|
||||||
|
// This should only be used as an escape hatch. Normally you would put
|
||||||
|
// images into the `src` and `import` them in code to get their paths.
|
||||||
|
'PUBLIC_URL': JSON.stringify(publicUrl)
|
||||||
|
});
|
||||||
|
return {'process.env': processEnv};
|
||||||
|
}
|
||||||
|
|
||||||
|
module.exports = getClientEnvironment;
|
||||||
12
config/jest/cssTransform.js
Normal file
12
config/jest/cssTransform.js
Normal file
@ -0,0 +1,12 @@
|
|||||||
|
// This is a custom Jest transformer turning style imports into empty objects.
|
||||||
|
// http://facebook.github.io/jest/docs/tutorial-webpack.html
|
||||||
|
|
||||||
|
module.exports = {
|
||||||
|
process() {
|
||||||
|
return 'module.exports = {};';
|
||||||
|
},
|
||||||
|
getCacheKey(fileData, filename) {
|
||||||
|
// The output is always the same.
|
||||||
|
return 'cssTransform';
|
||||||
|
},
|
||||||
|
};
|
||||||
10
config/jest/fileTransform.js
Normal file
10
config/jest/fileTransform.js
Normal file
@ -0,0 +1,10 @@
|
|||||||
|
const path = require('path');
|
||||||
|
|
||||||
|
// This is a custom Jest transformer turning file imports into filenames.
|
||||||
|
// http://facebook.github.io/jest/docs/tutorial-webpack.html
|
||||||
|
|
||||||
|
module.exports = {
|
||||||
|
process(src, filename) {
|
||||||
|
return 'module.exports = ' + JSON.stringify(path.basename(filename)) + ';';
|
||||||
|
},
|
||||||
|
};
|
||||||
45
config/paths.js
Normal file
45
config/paths.js
Normal file
@ -0,0 +1,45 @@
|
|||||||
|
var path = require('path');
|
||||||
|
var fs = require('fs');
|
||||||
|
|
||||||
|
// Make sure any symlinks in the project folder are resolved:
|
||||||
|
// https://github.com/facebookincubator/create-react-app/issues/637
|
||||||
|
var appDirectory = fs.realpathSync(process.cwd());
|
||||||
|
function resolveApp(relativePath) {
|
||||||
|
return path.resolve(appDirectory, relativePath);
|
||||||
|
}
|
||||||
|
|
||||||
|
// We support resolving modules according to `NODE_PATH`.
|
||||||
|
// This lets you use absolute paths in imports inside large monorepos:
|
||||||
|
// https://github.com/facebookincubator/create-react-app/issues/253.
|
||||||
|
|
||||||
|
// It works similar to `NODE_PATH` in Node itself:
|
||||||
|
// https://nodejs.org/api/modules.html#modules_loading_from_the_global_folders
|
||||||
|
|
||||||
|
// We will export `nodePaths` as an array of absolute paths.
|
||||||
|
// It will then be used by Webpack configs.
|
||||||
|
// Jest doesn’t need this because it already handles `NODE_PATH` out of the box.
|
||||||
|
|
||||||
|
// Note that unlike in Node, only *relative* paths from `NODE_PATH` are honored.
|
||||||
|
// Otherwise, we risk importing Node.js core modules into an app instead of Webpack shims.
|
||||||
|
// https://github.com/facebookincubator/create-react-app/issues/1023#issuecomment-265344421
|
||||||
|
|
||||||
|
var nodePaths = (process.env.NODE_PATH || '')
|
||||||
|
.split(process.platform === 'win32' ? ';' : ':')
|
||||||
|
.filter(Boolean)
|
||||||
|
.filter(folder => !path.isAbsolute(folder))
|
||||||
|
.map(resolveApp);
|
||||||
|
|
||||||
|
// config after eject: we're in ./config/
|
||||||
|
module.exports = {
|
||||||
|
appBuild: resolveApp('build'),
|
||||||
|
appPublic: resolveApp('public'),
|
||||||
|
appHtml: resolveApp('public/index.html'),
|
||||||
|
appIndexJs: resolveApp('src/index.js'),
|
||||||
|
appPackageJson: resolveApp('package.json'),
|
||||||
|
appSrc: resolveApp('src'),
|
||||||
|
yarnLockFile: resolveApp('yarn.lock'),
|
||||||
|
testsSetup: resolveApp('src/setupTests.js'),
|
||||||
|
appNodeModules: resolveApp('node_modules'),
|
||||||
|
ownNodeModules: resolveApp('node_modules'),
|
||||||
|
nodePaths: nodePaths
|
||||||
|
};
|
||||||
14
config/polyfills.js
Normal file
14
config/polyfills.js
Normal file
@ -0,0 +1,14 @@
|
|||||||
|
if (typeof Promise === 'undefined') {
|
||||||
|
// Rejection tracking prevents a common issue where React gets into an
|
||||||
|
// inconsistent state due to an error, but it gets swallowed by a Promise,
|
||||||
|
// and the user has no idea what causes React's erratic future behavior.
|
||||||
|
require('promise/lib/rejection-tracking').enable();
|
||||||
|
window.Promise = require('promise/lib/es6-extensions.js');
|
||||||
|
}
|
||||||
|
|
||||||
|
// fetch() polyfill for making API calls.
|
||||||
|
require('whatwg-fetch');
|
||||||
|
|
||||||
|
// Object.assign() is commonly used with React.
|
||||||
|
// It will use the native implementation if it's present and isn't buggy.
|
||||||
|
Object.assign = require('object-assign');
|
||||||
208
config/webpack.config.dev.js
Normal file
208
config/webpack.config.dev.js
Normal file
@ -0,0 +1,208 @@
|
|||||||
|
var autoprefixer = require('autoprefixer');
|
||||||
|
var webpack = require('webpack');
|
||||||
|
var HtmlWebpackPlugin = require('html-webpack-plugin');
|
||||||
|
var CaseSensitivePathsPlugin = require('case-sensitive-paths-webpack-plugin');
|
||||||
|
var InterpolateHtmlPlugin = require('react-dev-utils/InterpolateHtmlPlugin');
|
||||||
|
var WatchMissingNodeModulesPlugin = require('react-dev-utils/WatchMissingNodeModulesPlugin');
|
||||||
|
var getClientEnvironment = require('./env');
|
||||||
|
var paths = require('./paths');
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
// Webpack uses `publicPath` to determine where the app is being served from.
|
||||||
|
// In development, we always serve from the root. This makes config easier.
|
||||||
|
var publicPath = '/';
|
||||||
|
// `publicUrl` is just like `publicPath`, but we will provide it to our app
|
||||||
|
// as %PUBLIC_URL% in `index.html` and `process.env.PUBLIC_URL` in JavaScript.
|
||||||
|
// Omit trailing slash as %PUBLIC_PATH%/xyz looks better than %PUBLIC_PATH%xyz.
|
||||||
|
var publicUrl = '';
|
||||||
|
// Get environment variables to inject into our app.
|
||||||
|
var env = getClientEnvironment(publicUrl);
|
||||||
|
|
||||||
|
// This is the development configuration.
|
||||||
|
// It is focused on developer experience and fast rebuilds.
|
||||||
|
// The production configuration is different and lives in a separate file.
|
||||||
|
module.exports = {
|
||||||
|
// You may want 'eval' instead if you prefer to see the compiled output in DevTools.
|
||||||
|
// See the discussion in https://github.com/facebookincubator/create-react-app/issues/343.
|
||||||
|
devtool: 'cheap-module-source-map',
|
||||||
|
// These are the "entry points" to our application.
|
||||||
|
// This means they will be the "root" imports that are included in JS bundle.
|
||||||
|
// The first two entry points enable "hot" CSS and auto-refreshes for JS.
|
||||||
|
entry: [
|
||||||
|
// Include an alternative client for WebpackDevServer. A client's job is to
|
||||||
|
// connect to WebpackDevServer by a socket and get notified about changes.
|
||||||
|
// When you save a file, the client will either apply hot updates (in case
|
||||||
|
// of CSS changes), or refresh the page (in case of JS changes). When you
|
||||||
|
// make a syntax error, this client will display a syntax error overlay.
|
||||||
|
// Note: instead of the default WebpackDevServer client, we use a custom one
|
||||||
|
// to bring better experience for Create React App users. You can replace
|
||||||
|
// the line below with these two lines if you prefer the stock client:
|
||||||
|
// require.resolve('webpack-dev-server/client') + '?/',
|
||||||
|
// require.resolve('webpack/hot/dev-server'),
|
||||||
|
require.resolve('react-dev-utils/webpackHotDevClient'),
|
||||||
|
// We ship a few polyfills by default:
|
||||||
|
require.resolve('./polyfills'),
|
||||||
|
// Finally, this is your app's code:
|
||||||
|
paths.appIndexJs
|
||||||
|
// We include the app code last so that if there is a runtime error during
|
||||||
|
// initialization, it doesn't blow up the WebpackDevServer client, and
|
||||||
|
// changing JS code would still trigger a refresh.
|
||||||
|
],
|
||||||
|
output: {
|
||||||
|
// Next line is not used in dev but WebpackDevServer crashes without it:
|
||||||
|
path: paths.appBuild,
|
||||||
|
// Add /* filename */ comments to generated require()s in the output.
|
||||||
|
pathinfo: true,
|
||||||
|
// This does not produce a real file. It's just the virtual path that is
|
||||||
|
// served by WebpackDevServer in development. This is the JS bundle
|
||||||
|
// containing code from all our entry points, and the Webpack runtime.
|
||||||
|
filename: 'static/js/bundle.js',
|
||||||
|
// This is the URL that app is served from. We use "/" in development.
|
||||||
|
publicPath: publicPath
|
||||||
|
},
|
||||||
|
resolve: {
|
||||||
|
// This allows you to set a fallback for where Webpack should look for modules.
|
||||||
|
// We read `NODE_PATH` environment variable in `paths.js` and pass paths here.
|
||||||
|
// We use `fallback` instead of `root` because we want `node_modules` to "win"
|
||||||
|
// if there any conflicts. This matches Node resolution mechanism.
|
||||||
|
// https://github.com/facebookincubator/create-react-app/issues/253
|
||||||
|
fallback: paths.nodePaths,
|
||||||
|
// These are the reasonable defaults supported by the Node ecosystem.
|
||||||
|
// We also include JSX as a common component filename extension to support
|
||||||
|
// some tools, although we do not recommend using it, see:
|
||||||
|
// https://github.com/facebookincubator/create-react-app/issues/290
|
||||||
|
extensions: ['.js', '.json', '.jsx', ''],
|
||||||
|
alias: {
|
||||||
|
// Support React Native Web
|
||||||
|
// https://www.smashingmagazine.com/2016/08/a-glimpse-into-the-future-with-react-native-for-web/
|
||||||
|
'react-native': 'react-native-web'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
module: {
|
||||||
|
// First, run the linter.
|
||||||
|
// It's important to do this before Babel processes the JS.
|
||||||
|
preLoaders: [
|
||||||
|
{
|
||||||
|
test: /\.(js|jsx)$/,
|
||||||
|
loader: 'eslint',
|
||||||
|
include: paths.appSrc,
|
||||||
|
}
|
||||||
|
],
|
||||||
|
loaders: [
|
||||||
|
// Default loader: load all assets that are not handled
|
||||||
|
// by other loaders with the url loader.
|
||||||
|
// Note: This list needs to be updated with every change of extensions
|
||||||
|
// the other loaders match.
|
||||||
|
// E.g., when adding a loader for a new supported file extension,
|
||||||
|
// we need to add the supported extension to this loader too.
|
||||||
|
// Add one new line in `exclude` for each loader.
|
||||||
|
//
|
||||||
|
// "file" loader makes sure those assets get served by WebpackDevServer.
|
||||||
|
// When you `import` an asset, you get its (virtual) filename.
|
||||||
|
// In production, they would get copied to the `build` folder.
|
||||||
|
// "url" loader works like "file" loader except that it embeds assets
|
||||||
|
// smaller than specified limit in bytes as data URLs to avoid requests.
|
||||||
|
// A missing `test` is equivalent to a match.
|
||||||
|
{
|
||||||
|
exclude: [
|
||||||
|
/\.html$/,
|
||||||
|
/\.(js|jsx)$/,
|
||||||
|
/\.css$/,
|
||||||
|
/\.json$/,
|
||||||
|
/\.svg$/
|
||||||
|
],
|
||||||
|
loader: 'url',
|
||||||
|
query: {
|
||||||
|
limit: 10000,
|
||||||
|
name: 'static/media/[name].[hash:8].[ext]'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
// Process JS with Babel.
|
||||||
|
{
|
||||||
|
test: /\.(js|jsx)$/,
|
||||||
|
include: paths.appSrc,
|
||||||
|
loader: 'babel',
|
||||||
|
query: {
|
||||||
|
|
||||||
|
// This is a feature of `babel-loader` for webpack (not Babel itself).
|
||||||
|
// It enables caching results in ./node_modules/.cache/babel-loader/
|
||||||
|
// directory for faster rebuilds.
|
||||||
|
cacheDirectory: true
|
||||||
|
}
|
||||||
|
},
|
||||||
|
// "postcss" loader applies autoprefixer to our CSS.
|
||||||
|
// "css" loader resolves paths in CSS and adds assets as dependencies.
|
||||||
|
// "style" loader turns CSS into JS modules that inject <style> tags.
|
||||||
|
// In production, we use a plugin to extract that CSS to a file, but
|
||||||
|
// in development "style" loader enables hot editing of CSS.
|
||||||
|
{
|
||||||
|
test: /\.css$/,
|
||||||
|
loader: 'style!css?importLoaders=1!postcss'
|
||||||
|
},
|
||||||
|
// JSON is not enabled by default in Webpack but both Node and Browserify
|
||||||
|
// allow it implicitly so we also enable it.
|
||||||
|
{
|
||||||
|
test: /\.json$/,
|
||||||
|
loader: 'json'
|
||||||
|
},
|
||||||
|
// "file" loader for svg
|
||||||
|
{
|
||||||
|
test: /\.svg$/,
|
||||||
|
loader: 'file',
|
||||||
|
query: {
|
||||||
|
name: 'static/media/[name].[hash:8].[ext]'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
|
||||||
|
// We use PostCSS for autoprefixing only.
|
||||||
|
postcss: function() {
|
||||||
|
return [
|
||||||
|
autoprefixer({
|
||||||
|
browsers: [
|
||||||
|
'>1%',
|
||||||
|
'last 4 versions',
|
||||||
|
'Firefox ESR',
|
||||||
|
'not ie < 9', // React doesn't support IE8 anyway
|
||||||
|
]
|
||||||
|
}),
|
||||||
|
];
|
||||||
|
},
|
||||||
|
plugins: [
|
||||||
|
// Makes the public URL available as %PUBLIC_URL% in index.html, e.g.:
|
||||||
|
// <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
|
||||||
|
// In development, this will be an empty string.
|
||||||
|
new InterpolateHtmlPlugin({
|
||||||
|
PUBLIC_URL: publicUrl
|
||||||
|
}),
|
||||||
|
// Generates an `index.html` file with the <script> injected.
|
||||||
|
new HtmlWebpackPlugin({
|
||||||
|
inject: true,
|
||||||
|
template: paths.appHtml,
|
||||||
|
}),
|
||||||
|
// Makes some environment variables available to the JS code, for example:
|
||||||
|
// if (process.env.NODE_ENV === 'development') { ... }. See `./env.js`.
|
||||||
|
new webpack.DefinePlugin(env),
|
||||||
|
// This is necessary to emit hot updates (currently CSS only):
|
||||||
|
new webpack.HotModuleReplacementPlugin(),
|
||||||
|
// Watcher doesn't work well if you mistype casing in a path so we use
|
||||||
|
// a plugin that prints an error when you attempt to do this.
|
||||||
|
// See https://github.com/facebookincubator/create-react-app/issues/240
|
||||||
|
new CaseSensitivePathsPlugin(),
|
||||||
|
// If you require a missing module and then `npm install` it, you still have
|
||||||
|
// to restart the development server for Webpack to discover it. This plugin
|
||||||
|
// makes the discovery automatic so you don't have to restart.
|
||||||
|
// See https://github.com/facebookincubator/create-react-app/issues/186
|
||||||
|
new WatchMissingNodeModulesPlugin(paths.appNodeModules)
|
||||||
|
],
|
||||||
|
// Some libraries import Node modules but don't use them in the browser.
|
||||||
|
// Tell Webpack to provide empty mocks for them so importing them works.
|
||||||
|
node: {
|
||||||
|
fs: 'empty',
|
||||||
|
net: 'empty',
|
||||||
|
tls: 'empty'
|
||||||
|
}
|
||||||
|
};
|
||||||
246
config/webpack.config.prod.js
Normal file
246
config/webpack.config.prod.js
Normal file
@ -0,0 +1,246 @@
|
|||||||
|
var autoprefixer = require('autoprefixer');
|
||||||
|
var webpack = require('webpack');
|
||||||
|
var HtmlWebpackPlugin = require('html-webpack-plugin');
|
||||||
|
var ExtractTextPlugin = require('extract-text-webpack-plugin');
|
||||||
|
var ManifestPlugin = require('webpack-manifest-plugin');
|
||||||
|
var InterpolateHtmlPlugin = require('react-dev-utils/InterpolateHtmlPlugin');
|
||||||
|
var url = require('url');
|
||||||
|
var paths = require('./paths');
|
||||||
|
var getClientEnvironment = require('./env');
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
function ensureSlash(path, needsSlash) {
|
||||||
|
var hasSlash = path.endsWith('/');
|
||||||
|
if (hasSlash && !needsSlash) {
|
||||||
|
return path.substr(path, path.length - 1);
|
||||||
|
} else if (!hasSlash && needsSlash) {
|
||||||
|
return path + '/';
|
||||||
|
} else {
|
||||||
|
return path;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// We use "homepage" field to infer "public path" at which the app is served.
|
||||||
|
// Webpack needs to know it to put the right <script> hrefs into HTML even in
|
||||||
|
// single-page apps that may serve index.html for nested URLs like /todos/42.
|
||||||
|
// We can't use a relative path in HTML because we don't want to load something
|
||||||
|
// like /todos/42/static/js/bundle.7289d.js. We have to know the root.
|
||||||
|
var homepagePath = require(paths.appPackageJson).homepage;
|
||||||
|
var homepagePathname = homepagePath ? url.parse(homepagePath).pathname : '/';
|
||||||
|
// Webpack uses `publicPath` to determine where the app is being served from.
|
||||||
|
// It requires a trailing slash, or the file assets will get an incorrect path.
|
||||||
|
var publicPath = ensureSlash(homepagePathname, true);
|
||||||
|
// `publicUrl` is just like `publicPath`, but we will provide it to our app
|
||||||
|
// as %PUBLIC_URL% in `index.html` and `process.env.PUBLIC_URL` in JavaScript.
|
||||||
|
// Omit trailing slash as %PUBLIC_PATH%/xyz looks better than %PUBLIC_PATH%xyz.
|
||||||
|
var publicUrl = ensureSlash(homepagePathname, false);
|
||||||
|
// Get environment variables to inject into our app.
|
||||||
|
var env = getClientEnvironment(publicUrl);
|
||||||
|
|
||||||
|
// Assert this just to be safe.
|
||||||
|
// Development builds of React are slow and not intended for production.
|
||||||
|
if (env['process.env'].NODE_ENV !== '"production"') {
|
||||||
|
throw new Error('Production builds must have NODE_ENV=production.');
|
||||||
|
}
|
||||||
|
|
||||||
|
// This is the production configuration.
|
||||||
|
// It compiles slowly and is focused on producing a fast and minimal bundle.
|
||||||
|
// The development configuration is different and lives in a separate file.
|
||||||
|
module.exports = {
|
||||||
|
// Don't attempt to continue if there are any errors.
|
||||||
|
bail: true,
|
||||||
|
// We generate sourcemaps in production. This is slow but gives good results.
|
||||||
|
// You can exclude the *.map files from the build during deployment.
|
||||||
|
devtool: 'source-map',
|
||||||
|
// In production, we only want to load the polyfills and the app code.
|
||||||
|
entry: [
|
||||||
|
require.resolve('./polyfills'),
|
||||||
|
paths.appIndexJs
|
||||||
|
],
|
||||||
|
output: {
|
||||||
|
// The build folder.
|
||||||
|
path: paths.appBuild,
|
||||||
|
// Generated JS file names (with nested folders).
|
||||||
|
// There will be one main bundle, and one file per asynchronous chunk.
|
||||||
|
// We don't currently advertise code splitting but Webpack supports it.
|
||||||
|
filename: 'static/js/[name].[chunkhash:8].js',
|
||||||
|
chunkFilename: 'static/js/[name].[chunkhash:8].chunk.js',
|
||||||
|
// We inferred the "public path" (such as / or /my-project) from homepage.
|
||||||
|
publicPath: publicPath
|
||||||
|
},
|
||||||
|
resolve: {
|
||||||
|
// This allows you to set a fallback for where Webpack should look for modules.
|
||||||
|
// We read `NODE_PATH` environment variable in `paths.js` and pass paths here.
|
||||||
|
// We use `fallback` instead of `root` because we want `node_modules` to "win"
|
||||||
|
// if there any conflicts. This matches Node resolution mechanism.
|
||||||
|
// https://github.com/facebookincubator/create-react-app/issues/253
|
||||||
|
fallback: paths.nodePaths,
|
||||||
|
// These are the reasonable defaults supported by the Node ecosystem.
|
||||||
|
// We also include JSX as a common component filename extension to support
|
||||||
|
// some tools, although we do not recommend using it, see:
|
||||||
|
// https://github.com/facebookincubator/create-react-app/issues/290
|
||||||
|
extensions: ['.js', '.json', '.jsx', ''],
|
||||||
|
alias: {
|
||||||
|
// Support React Native Web
|
||||||
|
// https://www.smashingmagazine.com/2016/08/a-glimpse-into-the-future-with-react-native-for-web/
|
||||||
|
'react-native': 'react-native-web'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
module: {
|
||||||
|
// First, run the linter.
|
||||||
|
// It's important to do this before Babel processes the JS.
|
||||||
|
preLoaders: [
|
||||||
|
{
|
||||||
|
test: /\.(js|jsx)$/,
|
||||||
|
loader: 'eslint',
|
||||||
|
include: paths.appSrc
|
||||||
|
}
|
||||||
|
],
|
||||||
|
loaders: [
|
||||||
|
// Default loader: load all assets that are not handled
|
||||||
|
// by other loaders with the url loader.
|
||||||
|
// Note: This list needs to be updated with every change of extensions
|
||||||
|
// the other loaders match.
|
||||||
|
// E.g., when adding a loader for a new supported file extension,
|
||||||
|
// we need to add the supported extension to this loader too.
|
||||||
|
// Add one new line in `exclude` for each loader.
|
||||||
|
//
|
||||||
|
// "file" loader makes sure those assets end up in the `build` folder.
|
||||||
|
// When you `import` an asset, you get its filename.
|
||||||
|
// "url" loader works just like "file" loader but it also embeds
|
||||||
|
// assets smaller than specified size as data URLs to avoid requests.
|
||||||
|
{
|
||||||
|
exclude: [
|
||||||
|
/\.html$/,
|
||||||
|
/\.(js|jsx)$/,
|
||||||
|
/\.css$/,
|
||||||
|
/\.json$/,
|
||||||
|
/\.svg$/
|
||||||
|
],
|
||||||
|
loader: 'url',
|
||||||
|
query: {
|
||||||
|
limit: 10000,
|
||||||
|
name: 'static/media/[name].[hash:8].[ext]'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
// Process JS with Babel.
|
||||||
|
{
|
||||||
|
test: /\.(js|jsx)$/,
|
||||||
|
include: paths.appSrc,
|
||||||
|
loader: 'babel',
|
||||||
|
|
||||||
|
},
|
||||||
|
// The notation here is somewhat confusing.
|
||||||
|
// "postcss" loader applies autoprefixer to our CSS.
|
||||||
|
// "css" loader resolves paths in CSS and adds assets as dependencies.
|
||||||
|
// "style" loader normally turns CSS into JS modules injecting <style>,
|
||||||
|
// but unlike in development configuration, we do something different.
|
||||||
|
// `ExtractTextPlugin` first applies the "postcss" and "css" loaders
|
||||||
|
// (second argument), then grabs the result CSS and puts it into a
|
||||||
|
// separate file in our build process. This way we actually ship
|
||||||
|
// a single CSS file in production instead of JS code injecting <style>
|
||||||
|
// tags. If you use code splitting, however, any async bundles will still
|
||||||
|
// use the "style" loader inside the async code so CSS from them won't be
|
||||||
|
// in the main CSS file.
|
||||||
|
{
|
||||||
|
test: /\.css$/,
|
||||||
|
loader: ExtractTextPlugin.extract('style', 'css?importLoaders=1!postcss')
|
||||||
|
// Note: this won't work without `new ExtractTextPlugin()` in `plugins`.
|
||||||
|
},
|
||||||
|
// JSON is not enabled by default in Webpack but both Node and Browserify
|
||||||
|
// allow it implicitly so we also enable it.
|
||||||
|
{
|
||||||
|
test: /\.json$/,
|
||||||
|
loader: 'json'
|
||||||
|
},
|
||||||
|
// "file" loader for svg
|
||||||
|
{
|
||||||
|
test: /\.svg$/,
|
||||||
|
loader: 'file',
|
||||||
|
query: {
|
||||||
|
name: 'static/media/[name].[hash:8].[ext]'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
|
||||||
|
// We use PostCSS for autoprefixing only.
|
||||||
|
postcss: function() {
|
||||||
|
return [
|
||||||
|
autoprefixer({
|
||||||
|
browsers: [
|
||||||
|
'>1%',
|
||||||
|
'last 4 versions',
|
||||||
|
'Firefox ESR',
|
||||||
|
'not ie < 9', // React doesn't support IE8 anyway
|
||||||
|
]
|
||||||
|
}),
|
||||||
|
];
|
||||||
|
},
|
||||||
|
plugins: [
|
||||||
|
// Makes the public URL available as %PUBLIC_URL% in index.html, e.g.:
|
||||||
|
// <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
|
||||||
|
// In production, it will be an empty string unless you specify "homepage"
|
||||||
|
// in `package.json`, in which case it will be the pathname of that URL.
|
||||||
|
new InterpolateHtmlPlugin({
|
||||||
|
PUBLIC_URL: publicUrl
|
||||||
|
}),
|
||||||
|
// Generates an `index.html` file with the <script> injected.
|
||||||
|
new HtmlWebpackPlugin({
|
||||||
|
inject: true,
|
||||||
|
template: paths.appHtml,
|
||||||
|
minify: {
|
||||||
|
removeComments: true,
|
||||||
|
collapseWhitespace: true,
|
||||||
|
removeRedundantAttributes: true,
|
||||||
|
useShortDoctype: true,
|
||||||
|
removeEmptyAttributes: true,
|
||||||
|
removeStyleLinkTypeAttributes: true,
|
||||||
|
keepClosingSlash: true,
|
||||||
|
minifyJS: true,
|
||||||
|
minifyCSS: true,
|
||||||
|
minifyURLs: true
|
||||||
|
}
|
||||||
|
}),
|
||||||
|
// Makes some environment variables available to the JS code, for example:
|
||||||
|
// if (process.env.NODE_ENV === 'production') { ... }. See `./env.js`.
|
||||||
|
// It is absolutely essential that NODE_ENV was set to production here.
|
||||||
|
// Otherwise React will be compiled in the very slow development mode.
|
||||||
|
new webpack.DefinePlugin(env),
|
||||||
|
// This helps ensure the builds are consistent if source hasn't changed:
|
||||||
|
new webpack.optimize.OccurrenceOrderPlugin(),
|
||||||
|
// Try to dedupe duplicated modules, if any:
|
||||||
|
new webpack.optimize.DedupePlugin(),
|
||||||
|
// Minify the code.
|
||||||
|
new webpack.optimize.UglifyJsPlugin({
|
||||||
|
compress: {
|
||||||
|
screw_ie8: true, // React doesn't support IE8
|
||||||
|
warnings: false
|
||||||
|
},
|
||||||
|
mangle: {
|
||||||
|
screw_ie8: true
|
||||||
|
},
|
||||||
|
output: {
|
||||||
|
comments: false,
|
||||||
|
screw_ie8: true
|
||||||
|
}
|
||||||
|
}),
|
||||||
|
// Note: this won't work without ExtractTextPlugin.extract(..) in `loaders`.
|
||||||
|
new ExtractTextPlugin('static/css/[name].[contenthash:8].css'),
|
||||||
|
// Generate a manifest file which contains a mapping of all asset filenames
|
||||||
|
// to their corresponding output file so that tools can pick it up without
|
||||||
|
// having to parse `index.html`.
|
||||||
|
new ManifestPlugin({
|
||||||
|
fileName: 'asset-manifest.json'
|
||||||
|
})
|
||||||
|
],
|
||||||
|
// Some libraries import Node modules but don't use them in the browser.
|
||||||
|
// Tell Webpack to provide empty mocks for them so importing them works.
|
||||||
|
node: {
|
||||||
|
fs: 'empty',
|
||||||
|
net: 'empty',
|
||||||
|
tls: 'empty'
|
||||||
|
}
|
||||||
|
};
|
||||||
124
index.js
124
index.js
@ -1,16 +1,130 @@
|
|||||||
const client = new (require('./lib/client'))
|
const client = new (require('./lib/client'))
|
||||||
const spider = new (require('./lib/spider'))(client)
|
const spider = new (require('./lib/spider'))(client)
|
||||||
|
const mysql = require('mysql');
|
||||||
|
|
||||||
//spider.on('unensureHash', (hash)=> console.log(hash))
|
var express = require('express');
|
||||||
|
var app = express();
|
||||||
|
var server = require('http').Server(app);
|
||||||
|
var io = require('socket.io')(server);
|
||||||
|
|
||||||
spider.on('ensureHash', (hash, addr)=> {
|
// Start server
|
||||||
console.log('new hash');
|
server.listen(8099);
|
||||||
|
var connection = mysql.createConnection({
|
||||||
|
host : 'localhost',
|
||||||
|
user : 'root',
|
||||||
|
password : '',
|
||||||
|
database : 'btsearch'
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
|
app.get('/', function(req, res)
|
||||||
|
{
|
||||||
|
res.sendfile(__dirname + '/build/index.html');
|
||||||
|
});
|
||||||
|
|
||||||
|
app.use(express.static('build'));
|
||||||
|
|
||||||
|
io.on('connection', function(socket)
|
||||||
|
{
|
||||||
|
socket.on('recentTorrents', function(callback)
|
||||||
|
{
|
||||||
|
connection.query('SELECT * FROM `torrents` ORDER BY added DESC LIMIT 0,10', function (error, rows, fields) {
|
||||||
|
let torrents = [];
|
||||||
|
rows.forEach((row) => {
|
||||||
|
torrents.push({
|
||||||
|
hash: row.hash,
|
||||||
|
name: row.name,
|
||||||
|
size: row.size,
|
||||||
|
files: row.files,
|
||||||
|
piecelength: row.piecelength,
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
callback(torrents)
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
socket.on('torrent', function(hash, callback)
|
||||||
|
{
|
||||||
|
connection.query('SELECT * FROM `torrents` WHERE `hash` = ?', hash, function (error, rows, fields) {
|
||||||
|
if(rows.length == 0) {
|
||||||
|
callback(undefined);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
callback({
|
||||||
|
hash: rows[0].hash,
|
||||||
|
name: rows[0].name,
|
||||||
|
size: rows[0].size,
|
||||||
|
files: rows[0].files,
|
||||||
|
piecelength: rows[0].piecelength,
|
||||||
})
|
})
|
||||||
|
});
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
client.on('complete', function (metadata, infoHash) {
|
connection.connect(function(err) {
|
||||||
console.log(metadata.info);
|
if (err) {
|
||||||
|
console.error('error connecting: ' + err.stack);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
//spider.on('ensureHash', (hash, addr)=> {
|
||||||
|
// console.log('new hash');
|
||||||
|
//})
|
||||||
|
|
||||||
|
client.on('complete', function (metadata, infohash, rinfo) {
|
||||||
|
console.log('writing torrent to db');
|
||||||
|
const hash = infohash.toString('hex');
|
||||||
|
let size = metadata.info.length ? metadata.info.length : 0;
|
||||||
|
let filesCount = 1;
|
||||||
|
if(metadata.info.files && metadata.info.files.length > 0)
|
||||||
|
{
|
||||||
|
filesCount = metadata.info.files.length;
|
||||||
|
size = 0;
|
||||||
|
|
||||||
|
connection.query('DELETE FROM files WHERE hash = :hash', {hash: hash}, function (err, result) {
|
||||||
|
|
||||||
|
})
|
||||||
|
for(let i = 0; i < metadata.info.files.length; i++)
|
||||||
|
{
|
||||||
|
let file = metadata.info.files[i];
|
||||||
|
let fileQ = {
|
||||||
|
hash: hash,
|
||||||
|
path: file.path,
|
||||||
|
size: file.length,
|
||||||
|
};
|
||||||
|
let query = connection.query('INSERT INTO files SET ?', fileQ, function(err, result) {
|
||||||
|
// Neat!
|
||||||
|
});
|
||||||
|
|
||||||
|
size += file.length;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
var torrentQ = {
|
||||||
|
hash: hash,
|
||||||
|
name: metadata.info.name,
|
||||||
|
size: size,
|
||||||
|
files: filesCount,
|
||||||
|
piecelength: metadata.info['piece length'],
|
||||||
|
ipv4: rinfo.address,
|
||||||
|
port: rinfo.port
|
||||||
|
};
|
||||||
|
var query = connection.query('INSERT INTO torrents SET ?', torrentQ, function(err, result) {
|
||||||
|
if(result) {
|
||||||
|
io.sockets.emit('newTorrent', {
|
||||||
|
hash: hash,
|
||||||
|
name: metadata.info.name,
|
||||||
|
size: size,
|
||||||
|
files: filesCount,
|
||||||
|
piecelength: metadata.info['piece length']
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
// spider.on('nodes', (nodes)=>console.log('foundNodes'))
|
// spider.on('nodes', (nodes)=>console.log('foundNodes'))
|
||||||
|
|
||||||
spider.listen(4445)
|
spider.listen(4445)
|
||||||
|
});
|
||||||
96
package.json
96
package.json
@ -1,15 +1,95 @@
|
|||||||
{
|
{
|
||||||
"name": "btsearch",
|
"name": "btsearch",
|
||||||
"version": "1.0.0",
|
"version": "0.1.0",
|
||||||
"description": "",
|
"private": true,
|
||||||
"main": "index.js",
|
"devDependencies": {
|
||||||
"scripts": {
|
"babel-eslint": "7.1.1",
|
||||||
"test": "echo \"Error: no test specified\" && exit 1"
|
"eslint": "3.8.1",
|
||||||
|
"eslint-plugin-flowtype": "2.21.0",
|
||||||
|
"eslint-plugin-import": "2.0.1",
|
||||||
|
"eslint-plugin-jsx-a11y": "2.2.3",
|
||||||
|
"eslint-plugin-react": "6.4.1",
|
||||||
|
"autoprefixer": "6.5.1",
|
||||||
|
"babel-core": "6.17.0",
|
||||||
|
"babel-jest": "17.0.2",
|
||||||
|
"babel-loader": "6.2.7",
|
||||||
|
"babel-preset-react-app": "^2.0.1",
|
||||||
|
"case-sensitive-paths-webpack-plugin": "1.1.4",
|
||||||
|
"chalk": "1.1.3",
|
||||||
|
"connect-history-api-fallback": "1.3.0",
|
||||||
|
"cross-spawn": "4.0.2",
|
||||||
|
"css-loader": "0.26.0",
|
||||||
|
"detect-port": "1.0.1",
|
||||||
|
"dotenv": "2.0.0",
|
||||||
|
"eslint-config-react-app": "^0.5.0",
|
||||||
|
"eslint-loader": "1.6.0",
|
||||||
|
"extract-text-webpack-plugin": "1.0.1",
|
||||||
|
"file-loader": "0.9.0",
|
||||||
|
"filesize": "3.3.0",
|
||||||
|
"fs-extra": "0.30.0",
|
||||||
|
"gzip-size": "3.0.0",
|
||||||
|
"html-webpack-plugin": "2.24.0",
|
||||||
|
"http-proxy-middleware": "0.17.2",
|
||||||
|
"jest": "17.0.2",
|
||||||
|
"json-loader": "0.5.4",
|
||||||
|
"object-assign": "4.1.0",
|
||||||
|
"path-exists": "2.1.0",
|
||||||
|
"postcss-loader": "1.0.0",
|
||||||
|
"promise": "7.1.1",
|
||||||
|
"react-dev-utils": "^0.4.2",
|
||||||
|
"recursive-readdir": "2.1.0",
|
||||||
|
"strip-ansi": "3.0.1",
|
||||||
|
"style-loader": "0.13.1",
|
||||||
|
"url-loader": "0.5.7",
|
||||||
|
"webpack": "1.14.0",
|
||||||
|
"webpack-dev-server": "1.16.2",
|
||||||
|
"webpack-manifest-plugin": "1.1.0",
|
||||||
|
"whatwg-fetch": "1.0.0"
|
||||||
},
|
},
|
||||||
"author": "",
|
|
||||||
"license": "ISC",
|
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"bencode": "^0.11.0",
|
"bencode": "^0.11.0",
|
||||||
"bitfield": "^1.1.2"
|
"bitfield": "^1.1.2",
|
||||||
|
"express": "^4.14.0",
|
||||||
|
"mysql": "^2.12.0",
|
||||||
|
"react": "^15.4.1",
|
||||||
|
"react-dom": "^15.4.1",
|
||||||
|
"socket.io": "^1.7.2"
|
||||||
|
},
|
||||||
|
"scripts": {
|
||||||
|
"start": "node scripts/start.js",
|
||||||
|
"build": "node scripts/build.js",
|
||||||
|
"test": "node scripts/test.js --env=jsdom"
|
||||||
|
},
|
||||||
|
"jest": {
|
||||||
|
"collectCoverageFrom": [
|
||||||
|
"src/**/*.{js,jsx}"
|
||||||
|
],
|
||||||
|
"setupFiles": [
|
||||||
|
"<rootDir>\\config\\polyfills.js"
|
||||||
|
],
|
||||||
|
"testPathIgnorePatterns": [
|
||||||
|
"<rootDir>[/\\\\](build|docs|node_modules)[/\\\\]"
|
||||||
|
],
|
||||||
|
"testEnvironment": "node",
|
||||||
|
"testURL": "http://localhost",
|
||||||
|
"transform": {
|
||||||
|
"^.+\\.(js|jsx)$": "<rootDir>/node_modules/babel-jest",
|
||||||
|
"^.+\\.css$": "<rootDir>\\config\\jest\\cssTransform.js",
|
||||||
|
"^(?!.*\\.(js|jsx|css|json)$)": "<rootDir>\\config\\jest\\fileTransform.js"
|
||||||
|
},
|
||||||
|
"transformIgnorePatterns": [
|
||||||
|
"[/\\\\]node_modules[/\\\\].+\\.(js|jsx)$"
|
||||||
|
],
|
||||||
|
"moduleNameMapper": {
|
||||||
|
"^react-native$": "react-native-web"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"babel": {
|
||||||
|
"presets": [
|
||||||
|
"react-app"
|
||||||
|
]
|
||||||
|
},
|
||||||
|
"eslintConfig": {
|
||||||
|
"extends": "react-app"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
BIN
public/favicon.ico
Normal file
BIN
public/favicon.ico
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 24 KiB |
13
public/index.html
Normal file
13
public/index.html
Normal file
@ -0,0 +1,13 @@
|
|||||||
|
<!doctype html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||||
|
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
|
||||||
|
<title>BT Search</title>
|
||||||
|
<script src="http://localhost:8099/socket.io/socket.io.js"></script>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div id="root"></div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
224
scripts/build.js
Normal file
224
scripts/build.js
Normal file
@ -0,0 +1,224 @@
|
|||||||
|
// Do this as the first thing so that any code reading it knows the right env.
|
||||||
|
process.env.NODE_ENV = 'production';
|
||||||
|
|
||||||
|
// Load environment variables from .env file. Suppress warnings using silent
|
||||||
|
// if this file is missing. dotenv will never modify any environment variables
|
||||||
|
// that have already been set.
|
||||||
|
// https://github.com/motdotla/dotenv
|
||||||
|
require('dotenv').config({silent: true});
|
||||||
|
|
||||||
|
var chalk = require('chalk');
|
||||||
|
var fs = require('fs-extra');
|
||||||
|
var path = require('path');
|
||||||
|
var pathExists = require('path-exists');
|
||||||
|
var filesize = require('filesize');
|
||||||
|
var gzipSize = require('gzip-size').sync;
|
||||||
|
var webpack = require('webpack');
|
||||||
|
var config = require('../config/webpack.config.prod');
|
||||||
|
var paths = require('../config/paths');
|
||||||
|
var checkRequiredFiles = require('react-dev-utils/checkRequiredFiles');
|
||||||
|
var recursive = require('recursive-readdir');
|
||||||
|
var stripAnsi = require('strip-ansi');
|
||||||
|
|
||||||
|
var useYarn = pathExists.sync(paths.yarnLockFile);
|
||||||
|
|
||||||
|
// Warn and crash if required files are missing
|
||||||
|
if (!checkRequiredFiles([paths.appHtml, paths.appIndexJs])) {
|
||||||
|
process.exit(1);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Input: /User/dan/app/build/static/js/main.82be8.js
|
||||||
|
// Output: /static/js/main.js
|
||||||
|
function removeFileNameHash(fileName) {
|
||||||
|
return fileName
|
||||||
|
.replace(paths.appBuild, '')
|
||||||
|
.replace(/\/?(.*)(\.\w+)(\.js|\.css)/, (match, p1, p2, p3) => p1 + p3);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Input: 1024, 2048
|
||||||
|
// Output: "(+1 KB)"
|
||||||
|
function getDifferenceLabel(currentSize, previousSize) {
|
||||||
|
var FIFTY_KILOBYTES = 1024 * 50;
|
||||||
|
var difference = currentSize - previousSize;
|
||||||
|
var fileSize = !Number.isNaN(difference) ? filesize(difference) : 0;
|
||||||
|
if (difference >= FIFTY_KILOBYTES) {
|
||||||
|
return chalk.red('+' + fileSize);
|
||||||
|
} else if (difference < FIFTY_KILOBYTES && difference > 0) {
|
||||||
|
return chalk.yellow('+' + fileSize);
|
||||||
|
} else if (difference < 0) {
|
||||||
|
return chalk.green(fileSize);
|
||||||
|
} else {
|
||||||
|
return '';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// First, read the current file sizes in build directory.
|
||||||
|
// This lets us display how much they changed later.
|
||||||
|
recursive(paths.appBuild, (err, fileNames) => {
|
||||||
|
var previousSizeMap = (fileNames || [])
|
||||||
|
.filter(fileName => /\.(js|css)$/.test(fileName))
|
||||||
|
.reduce((memo, fileName) => {
|
||||||
|
var contents = fs.readFileSync(fileName);
|
||||||
|
var key = removeFileNameHash(fileName);
|
||||||
|
memo[key] = gzipSize(contents);
|
||||||
|
return memo;
|
||||||
|
}, {});
|
||||||
|
|
||||||
|
// Remove all content but keep the directory so that
|
||||||
|
// if you're in it, you don't end up in Trash
|
||||||
|
fs.emptyDirSync(paths.appBuild);
|
||||||
|
|
||||||
|
// Start the webpack build
|
||||||
|
build(previousSizeMap);
|
||||||
|
|
||||||
|
// Merge with the public folder
|
||||||
|
copyPublicFolder();
|
||||||
|
});
|
||||||
|
|
||||||
|
// Print a detailed summary of build files.
|
||||||
|
function printFileSizes(stats, previousSizeMap) {
|
||||||
|
var assets = stats.toJson().assets
|
||||||
|
.filter(asset => /\.(js|css)$/.test(asset.name))
|
||||||
|
.map(asset => {
|
||||||
|
var fileContents = fs.readFileSync(paths.appBuild + '/' + asset.name);
|
||||||
|
var size = gzipSize(fileContents);
|
||||||
|
var previousSize = previousSizeMap[removeFileNameHash(asset.name)];
|
||||||
|
var difference = getDifferenceLabel(size, previousSize);
|
||||||
|
return {
|
||||||
|
folder: path.join('build', path.dirname(asset.name)),
|
||||||
|
name: path.basename(asset.name),
|
||||||
|
size: size,
|
||||||
|
sizeLabel: filesize(size) + (difference ? ' (' + difference + ')' : '')
|
||||||
|
};
|
||||||
|
});
|
||||||
|
assets.sort((a, b) => b.size - a.size);
|
||||||
|
var longestSizeLabelLength = Math.max.apply(null,
|
||||||
|
assets.map(a => stripAnsi(a.sizeLabel).length)
|
||||||
|
);
|
||||||
|
assets.forEach(asset => {
|
||||||
|
var sizeLabel = asset.sizeLabel;
|
||||||
|
var sizeLength = stripAnsi(sizeLabel).length;
|
||||||
|
if (sizeLength < longestSizeLabelLength) {
|
||||||
|
var rightPadding = ' '.repeat(longestSizeLabelLength - sizeLength);
|
||||||
|
sizeLabel += rightPadding;
|
||||||
|
}
|
||||||
|
console.log(
|
||||||
|
' ' + sizeLabel +
|
||||||
|
' ' + chalk.dim(asset.folder + path.sep) + chalk.cyan(asset.name)
|
||||||
|
);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// Print out errors
|
||||||
|
function printErrors(summary, errors) {
|
||||||
|
console.log(chalk.red(summary));
|
||||||
|
console.log();
|
||||||
|
errors.forEach(err => {
|
||||||
|
console.log(err.message || err);
|
||||||
|
console.log();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// Create the production build and print the deployment instructions.
|
||||||
|
function build(previousSizeMap) {
|
||||||
|
console.log('Creating an optimized production build...');
|
||||||
|
webpack(config).run((err, stats) => {
|
||||||
|
if (err) {
|
||||||
|
printErrors('Failed to compile.', [err]);
|
||||||
|
process.exit(1);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (stats.compilation.errors.length) {
|
||||||
|
printErrors('Failed to compile.', stats.compilation.errors);
|
||||||
|
process.exit(1);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (process.env.CI && stats.compilation.warnings.length) {
|
||||||
|
printErrors('Failed to compile.', stats.compilation.warnings);
|
||||||
|
process.exit(1);
|
||||||
|
}
|
||||||
|
|
||||||
|
console.log(chalk.green('Compiled successfully.'));
|
||||||
|
console.log();
|
||||||
|
|
||||||
|
console.log('File sizes after gzip:');
|
||||||
|
console.log();
|
||||||
|
printFileSizes(stats, previousSizeMap);
|
||||||
|
console.log();
|
||||||
|
|
||||||
|
var openCommand = process.platform === 'win32' ? 'start' : 'open';
|
||||||
|
var appPackage = require(paths.appPackageJson);
|
||||||
|
var homepagePath = appPackage.homepage;
|
||||||
|
var publicPath = config.output.publicPath;
|
||||||
|
if (homepagePath && homepagePath.indexOf('.github.io/') !== -1) {
|
||||||
|
// "homepage": "http://user.github.io/project"
|
||||||
|
console.log('The project was built assuming it is hosted at ' + chalk.green(publicPath) + '.');
|
||||||
|
console.log('You can control this with the ' + chalk.green('homepage') + ' field in your ' + chalk.cyan('package.json') + '.');
|
||||||
|
console.log();
|
||||||
|
console.log('The ' + chalk.cyan('build') + ' folder is ready to be deployed.');
|
||||||
|
console.log('To publish it at ' + chalk.green(homepagePath) + ', run:');
|
||||||
|
// If script deploy has been added to package.json, skip the instructions
|
||||||
|
if (typeof appPackage.scripts.deploy === 'undefined') {
|
||||||
|
console.log();
|
||||||
|
if (useYarn) {
|
||||||
|
console.log(' ' + chalk.cyan('yarn') + ' add --dev gh-pages');
|
||||||
|
} else {
|
||||||
|
console.log(' ' + chalk.cyan('npm') + ' install --save-dev gh-pages');
|
||||||
|
}
|
||||||
|
console.log();
|
||||||
|
console.log('Add the following script in your ' + chalk.cyan('package.json') + '.');
|
||||||
|
console.log();
|
||||||
|
console.log(' ' + chalk.dim('// ...'));
|
||||||
|
console.log(' ' + chalk.yellow('"scripts"') + ': {');
|
||||||
|
console.log(' ' + chalk.dim('// ...'));
|
||||||
|
console.log(' ' + chalk.yellow('"deploy"') + ': ' + chalk.yellow('"npm run build&&gh-pages -d build"'));
|
||||||
|
console.log(' }');
|
||||||
|
console.log();
|
||||||
|
console.log('Then run:');
|
||||||
|
}
|
||||||
|
console.log();
|
||||||
|
console.log(' ' + chalk.cyan(useYarn ? 'yarn' : 'npm') + ' run deploy');
|
||||||
|
console.log();
|
||||||
|
} else if (publicPath !== '/') {
|
||||||
|
// "homepage": "http://mywebsite.com/project"
|
||||||
|
console.log('The project was built assuming it is hosted at ' + chalk.green(publicPath) + '.');
|
||||||
|
console.log('You can control this with the ' + chalk.green('homepage') + ' field in your ' + chalk.cyan('package.json') + '.');
|
||||||
|
console.log();
|
||||||
|
console.log('The ' + chalk.cyan('build') + ' folder is ready to be deployed.');
|
||||||
|
console.log();
|
||||||
|
} else {
|
||||||
|
// no homepage or "homepage": "http://mywebsite.com"
|
||||||
|
console.log('The project was built assuming it is hosted at the server root.');
|
||||||
|
if (homepagePath) {
|
||||||
|
// "homepage": "http://mywebsite.com"
|
||||||
|
console.log('You can control this with the ' + chalk.green('homepage') + ' field in your ' + chalk.cyan('package.json') + '.');
|
||||||
|
console.log();
|
||||||
|
} else {
|
||||||
|
// no homepage
|
||||||
|
console.log('To override this, specify the ' + chalk.green('homepage') + ' in your ' + chalk.cyan('package.json') + '.');
|
||||||
|
console.log('For example, add this to build it for GitHub Pages:')
|
||||||
|
console.log();
|
||||||
|
console.log(' ' + chalk.green('"homepage"') + chalk.cyan(': ') + chalk.green('"http://myname.github.io/myapp"') + chalk.cyan(','));
|
||||||
|
console.log();
|
||||||
|
}
|
||||||
|
console.log('The ' + chalk.cyan('build') + ' folder is ready to be deployed.');
|
||||||
|
console.log('You may also serve it locally with a static server:')
|
||||||
|
console.log();
|
||||||
|
if (useYarn) {
|
||||||
|
console.log(' ' + chalk.cyan('yarn') + ' global add pushstate-server');
|
||||||
|
} else {
|
||||||
|
console.log(' ' + chalk.cyan('npm') + ' install -g pushstate-server');
|
||||||
|
}
|
||||||
|
console.log(' ' + chalk.cyan('pushstate-server') + ' build');
|
||||||
|
console.log(' ' + chalk.cyan(openCommand) + ' http://localhost:9000');
|
||||||
|
console.log();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function copyPublicFolder() {
|
||||||
|
fs.copySync(paths.appPublic, paths.appBuild, {
|
||||||
|
dereference: true,
|
||||||
|
filter: file => file !== paths.appHtml
|
||||||
|
});
|
||||||
|
}
|
||||||
315
scripts/start.js
Normal file
315
scripts/start.js
Normal file
@ -0,0 +1,315 @@
|
|||||||
|
process.env.NODE_ENV = 'development';
|
||||||
|
|
||||||
|
// Load environment variables from .env file. Suppress warnings using silent
|
||||||
|
// if this file is missing. dotenv will never modify any environment variables
|
||||||
|
// that have already been set.
|
||||||
|
// https://github.com/motdotla/dotenv
|
||||||
|
require('dotenv').config({silent: true});
|
||||||
|
|
||||||
|
var chalk = require('chalk');
|
||||||
|
var webpack = require('webpack');
|
||||||
|
var WebpackDevServer = require('webpack-dev-server');
|
||||||
|
var historyApiFallback = require('connect-history-api-fallback');
|
||||||
|
var httpProxyMiddleware = require('http-proxy-middleware');
|
||||||
|
var detect = require('detect-port');
|
||||||
|
var clearConsole = require('react-dev-utils/clearConsole');
|
||||||
|
var checkRequiredFiles = require('react-dev-utils/checkRequiredFiles');
|
||||||
|
var formatWebpackMessages = require('react-dev-utils/formatWebpackMessages');
|
||||||
|
var getProcessForPort = require('react-dev-utils/getProcessForPort');
|
||||||
|
var openBrowser = require('react-dev-utils/openBrowser');
|
||||||
|
var prompt = require('react-dev-utils/prompt');
|
||||||
|
var pathExists = require('path-exists');
|
||||||
|
var config = require('../config/webpack.config.dev');
|
||||||
|
var paths = require('../config/paths');
|
||||||
|
|
||||||
|
var useYarn = pathExists.sync(paths.yarnLockFile);
|
||||||
|
var cli = useYarn ? 'yarn' : 'npm';
|
||||||
|
var isInteractive = process.stdout.isTTY;
|
||||||
|
|
||||||
|
// Warn and crash if required files are missing
|
||||||
|
if (!checkRequiredFiles([paths.appHtml, paths.appIndexJs])) {
|
||||||
|
process.exit(1);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Tools like Cloud9 rely on this.
|
||||||
|
var DEFAULT_PORT = process.env.PORT || 3000;
|
||||||
|
var compiler;
|
||||||
|
var handleCompile;
|
||||||
|
|
||||||
|
// You can safely remove this after ejecting.
|
||||||
|
// We only use this block for testing of Create React App itself:
|
||||||
|
var isSmokeTest = process.argv.some(arg => arg.indexOf('--smoke-test') > -1);
|
||||||
|
if (isSmokeTest) {
|
||||||
|
handleCompile = function (err, stats) {
|
||||||
|
if (err || stats.hasErrors() || stats.hasWarnings()) {
|
||||||
|
process.exit(1);
|
||||||
|
} else {
|
||||||
|
process.exit(0);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
function setupCompiler(host, port, protocol) {
|
||||||
|
// "Compiler" is a low-level interface to Webpack.
|
||||||
|
// It lets us listen to some events and provide our own custom messages.
|
||||||
|
compiler = webpack(config, handleCompile);
|
||||||
|
|
||||||
|
// "invalid" event fires when you have changed a file, and Webpack is
|
||||||
|
// recompiling a bundle. WebpackDevServer takes care to pause serving the
|
||||||
|
// bundle, so if you refresh, it'll wait instead of serving the old one.
|
||||||
|
// "invalid" is short for "bundle invalidated", it doesn't imply any errors.
|
||||||
|
compiler.plugin('invalid', function() {
|
||||||
|
if (isInteractive) {
|
||||||
|
clearConsole();
|
||||||
|
}
|
||||||
|
console.log('Compiling...');
|
||||||
|
});
|
||||||
|
|
||||||
|
var isFirstCompile = true;
|
||||||
|
|
||||||
|
// "done" event fires when Webpack has finished recompiling the bundle.
|
||||||
|
// Whether or not you have warnings or errors, you will get this event.
|
||||||
|
compiler.plugin('done', function(stats) {
|
||||||
|
if (isInteractive) {
|
||||||
|
clearConsole();
|
||||||
|
}
|
||||||
|
|
||||||
|
// We have switched off the default Webpack output in WebpackDevServer
|
||||||
|
// options so we are going to "massage" the warnings and errors and present
|
||||||
|
// them in a readable focused way.
|
||||||
|
var messages = formatWebpackMessages(stats.toJson({}, true));
|
||||||
|
var isSuccessful = !messages.errors.length && !messages.warnings.length;
|
||||||
|
var showInstructions = isSuccessful && (isInteractive || isFirstCompile);
|
||||||
|
|
||||||
|
if (isSuccessful) {
|
||||||
|
console.log(chalk.green('Compiled successfully!'));
|
||||||
|
}
|
||||||
|
|
||||||
|
if (showInstructions) {
|
||||||
|
console.log();
|
||||||
|
console.log('The app is running at:');
|
||||||
|
console.log();
|
||||||
|
console.log(' ' + chalk.cyan(protocol + '://' + host + ':' + port + '/'));
|
||||||
|
console.log();
|
||||||
|
console.log('Note that the development build is not optimized.');
|
||||||
|
console.log('To create a production build, use ' + chalk.cyan(cli + ' run build') + '.');
|
||||||
|
console.log();
|
||||||
|
isFirstCompile = false;
|
||||||
|
}
|
||||||
|
|
||||||
|
// If errors exist, only show errors.
|
||||||
|
if (messages.errors.length) {
|
||||||
|
console.log(chalk.red('Failed to compile.'));
|
||||||
|
console.log();
|
||||||
|
messages.errors.forEach(message => {
|
||||||
|
console.log(message);
|
||||||
|
console.log();
|
||||||
|
});
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Show warnings if no errors were found.
|
||||||
|
if (messages.warnings.length) {
|
||||||
|
console.log(chalk.yellow('Compiled with warnings.'));
|
||||||
|
console.log();
|
||||||
|
messages.warnings.forEach(message => {
|
||||||
|
console.log(message);
|
||||||
|
console.log();
|
||||||
|
});
|
||||||
|
// Teach some ESLint tricks.
|
||||||
|
console.log('You may use special comments to disable some warnings.');
|
||||||
|
console.log('Use ' + chalk.yellow('// eslint-disable-next-line') + ' to ignore the next line.');
|
||||||
|
console.log('Use ' + chalk.yellow('/* eslint-disable */') + ' to ignore all warnings in a file.');
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// We need to provide a custom onError function for httpProxyMiddleware.
|
||||||
|
// It allows us to log custom error messages on the console.
|
||||||
|
function onProxyError(proxy) {
|
||||||
|
return function(err, req, res){
|
||||||
|
var host = req.headers && req.headers.host;
|
||||||
|
console.log(
|
||||||
|
chalk.red('Proxy error:') + ' Could not proxy request ' + chalk.cyan(req.url) +
|
||||||
|
' from ' + chalk.cyan(host) + ' to ' + chalk.cyan(proxy) + '.'
|
||||||
|
);
|
||||||
|
console.log(
|
||||||
|
'See https://nodejs.org/api/errors.html#errors_common_system_errors for more information (' +
|
||||||
|
chalk.cyan(err.code) + ').'
|
||||||
|
);
|
||||||
|
console.log();
|
||||||
|
|
||||||
|
// And immediately send the proper error response to the client.
|
||||||
|
// Otherwise, the request will eventually timeout with ERR_EMPTY_RESPONSE on the client side.
|
||||||
|
if (res.writeHead && !res.headersSent) {
|
||||||
|
res.writeHead(500);
|
||||||
|
}
|
||||||
|
res.end('Proxy error: Could not proxy request ' + req.url + ' from ' +
|
||||||
|
host + ' to ' + proxy + ' (' + err.code + ').'
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function addMiddleware(devServer) {
|
||||||
|
// `proxy` lets you to specify a fallback server during development.
|
||||||
|
// Every unrecognized request will be forwarded to it.
|
||||||
|
var proxy = require(paths.appPackageJson).proxy;
|
||||||
|
devServer.use(historyApiFallback({
|
||||||
|
// Paths with dots should still use the history fallback.
|
||||||
|
// See https://github.com/facebookincubator/create-react-app/issues/387.
|
||||||
|
disableDotRule: true,
|
||||||
|
// For single page apps, we generally want to fallback to /index.html.
|
||||||
|
// However we also want to respect `proxy` for API calls.
|
||||||
|
// So if `proxy` is specified, we need to decide which fallback to use.
|
||||||
|
// We use a heuristic: if request `accept`s text/html, we pick /index.html.
|
||||||
|
// Modern browsers include text/html into `accept` header when navigating.
|
||||||
|
// However API calls like `fetch()` won’t generally accept text/html.
|
||||||
|
// If this heuristic doesn’t work well for you, don’t use `proxy`.
|
||||||
|
htmlAcceptHeaders: proxy ?
|
||||||
|
['text/html'] :
|
||||||
|
['text/html', '*/*']
|
||||||
|
}));
|
||||||
|
if (proxy) {
|
||||||
|
if (typeof proxy !== 'string') {
|
||||||
|
console.log(chalk.red('When specified, "proxy" in package.json must be a string.'));
|
||||||
|
console.log(chalk.red('Instead, the type of "proxy" was "' + typeof proxy + '".'));
|
||||||
|
console.log(chalk.red('Either remove "proxy" from package.json, or make it a string.'));
|
||||||
|
process.exit(1);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Otherwise, if proxy is specified, we will let it handle any request.
|
||||||
|
// There are a few exceptions which we won't send to the proxy:
|
||||||
|
// - /index.html (served as HTML5 history API fallback)
|
||||||
|
// - /*.hot-update.json (WebpackDevServer uses this too for hot reloading)
|
||||||
|
// - /sockjs-node/* (WebpackDevServer uses this for hot reloading)
|
||||||
|
// Tip: use https://jex.im/regulex/ to visualize the regex
|
||||||
|
var mayProxy = /^(?!\/(index\.html$|.*\.hot-update\.json$|sockjs-node\/)).*$/;
|
||||||
|
|
||||||
|
// Pass the scope regex both to Express and to the middleware for proxying
|
||||||
|
// of both HTTP and WebSockets to work without false positives.
|
||||||
|
var hpm = httpProxyMiddleware(pathname => mayProxy.test(pathname), {
|
||||||
|
target: proxy,
|
||||||
|
logLevel: 'silent',
|
||||||
|
onProxyReq: function(proxyReq, req, res) {
|
||||||
|
// Browers may send Origin headers even with same-origin
|
||||||
|
// requests. To prevent CORS issues, we have to change
|
||||||
|
// the Origin to match the target URL.
|
||||||
|
if (proxyReq.getHeader('origin')) {
|
||||||
|
proxyReq.setHeader('origin', proxy);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
onError: onProxyError(proxy),
|
||||||
|
secure: false,
|
||||||
|
changeOrigin: true,
|
||||||
|
ws: true
|
||||||
|
});
|
||||||
|
devServer.use(mayProxy, hpm);
|
||||||
|
|
||||||
|
// Listen for the websocket 'upgrade' event and upgrade the connection.
|
||||||
|
// If this is not done, httpProxyMiddleware will not try to upgrade until
|
||||||
|
// an initial plain HTTP request is made.
|
||||||
|
devServer.listeningApp.on('upgrade', hpm.upgrade);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Finally, by now we have certainly resolved the URL.
|
||||||
|
// It may be /index.html, so let the dev server try serving it again.
|
||||||
|
devServer.use(devServer.middleware);
|
||||||
|
}
|
||||||
|
|
||||||
|
function runDevServer(host, port, protocol) {
|
||||||
|
var devServer = new WebpackDevServer(compiler, {
|
||||||
|
// Enable gzip compression of generated files.
|
||||||
|
compress: true,
|
||||||
|
// Silence WebpackDevServer's own logs since they're generally not useful.
|
||||||
|
// It will still show compile warnings and errors with this setting.
|
||||||
|
clientLogLevel: 'none',
|
||||||
|
// By default WebpackDevServer serves physical files from current directory
|
||||||
|
// in addition to all the virtual build products that it serves from memory.
|
||||||
|
// This is confusing because those files won’t automatically be available in
|
||||||
|
// production build folder unless we copy them. However, copying the whole
|
||||||
|
// project directory is dangerous because we may expose sensitive files.
|
||||||
|
// Instead, we establish a convention that only files in `public` directory
|
||||||
|
// get served. Our build script will copy `public` into the `build` folder.
|
||||||
|
// In `index.html`, you can get URL of `public` folder with %PUBLIC_PATH%:
|
||||||
|
// <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
|
||||||
|
// In JavaScript code, you can access it with `process.env.PUBLIC_URL`.
|
||||||
|
// Note that we only recommend to use `public` folder as an escape hatch
|
||||||
|
// for files like `favicon.ico`, `manifest.json`, and libraries that are
|
||||||
|
// for some reason broken when imported through Webpack. If you just want to
|
||||||
|
// use an image, put it in `src` and `import` it from JavaScript instead.
|
||||||
|
contentBase: paths.appPublic,
|
||||||
|
// Enable hot reloading server. It will provide /sockjs-node/ endpoint
|
||||||
|
// for the WebpackDevServer client so it can learn when the files were
|
||||||
|
// updated. The WebpackDevServer client is included as an entry point
|
||||||
|
// in the Webpack development configuration. Note that only changes
|
||||||
|
// to CSS are currently hot reloaded. JS changes will refresh the browser.
|
||||||
|
hot: true,
|
||||||
|
// It is important to tell WebpackDevServer to use the same "root" path
|
||||||
|
// as we specified in the config. In development, we always serve from /.
|
||||||
|
publicPath: config.output.publicPath,
|
||||||
|
// WebpackDevServer is noisy by default so we emit custom message instead
|
||||||
|
// by listening to the compiler events with `compiler.plugin` calls above.
|
||||||
|
quiet: true,
|
||||||
|
// Reportedly, this avoids CPU overload on some systems.
|
||||||
|
// https://github.com/facebookincubator/create-react-app/issues/293
|
||||||
|
watchOptions: {
|
||||||
|
ignored: /node_modules/
|
||||||
|
},
|
||||||
|
// Enable HTTPS if the HTTPS environment variable is set to 'true'
|
||||||
|
https: protocol === "https",
|
||||||
|
host: host
|
||||||
|
});
|
||||||
|
|
||||||
|
// Our custom middleware proxies requests to /index.html or a remote API.
|
||||||
|
addMiddleware(devServer);
|
||||||
|
|
||||||
|
// Launch WebpackDevServer.
|
||||||
|
devServer.listen(port, (err, result) => {
|
||||||
|
if (err) {
|
||||||
|
return console.log(err);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (isInteractive) {
|
||||||
|
clearConsole();
|
||||||
|
}
|
||||||
|
console.log(chalk.cyan('Starting the development server...'));
|
||||||
|
console.log();
|
||||||
|
|
||||||
|
if (isInteractive) {
|
||||||
|
openBrowser(protocol + '://' + host + ':' + port + '/');
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function run(port) {
|
||||||
|
var protocol = process.env.HTTPS === 'true' ? "https" : "http";
|
||||||
|
var host = process.env.HOST || 'localhost';
|
||||||
|
setupCompiler(host, port, protocol);
|
||||||
|
runDevServer(host, port, protocol);
|
||||||
|
}
|
||||||
|
|
||||||
|
// We attempt to use the default port but if it is busy, we offer the user to
|
||||||
|
// run on a different port. `detect()` Promise resolves to the next free port.
|
||||||
|
detect(DEFAULT_PORT).then(port => {
|
||||||
|
if (port === DEFAULT_PORT) {
|
||||||
|
run(port);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (isInteractive) {
|
||||||
|
clearConsole();
|
||||||
|
var existingProcess = getProcessForPort(DEFAULT_PORT);
|
||||||
|
var question =
|
||||||
|
chalk.yellow('Something is already running on port ' + DEFAULT_PORT + '.' +
|
||||||
|
((existingProcess) ? ' Probably:\n ' + existingProcess : '')) +
|
||||||
|
'\n\nWould you like to run the app on another port instead?';
|
||||||
|
|
||||||
|
prompt(question, true).then(shouldChangePort => {
|
||||||
|
if (shouldChangePort) {
|
||||||
|
run(port);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
console.log(chalk.red('Something is already running on port ' + DEFAULT_PORT + '.'));
|
||||||
|
}
|
||||||
|
});
|
||||||
31
scripts/test.js
Normal file
31
scripts/test.js
Normal file
@ -0,0 +1,31 @@
|
|||||||
|
process.env.NODE_ENV = 'test';
|
||||||
|
process.env.PUBLIC_URL = '';
|
||||||
|
|
||||||
|
// Load environment variables from .env file. Suppress warnings using silent
|
||||||
|
// if this file is missing. dotenv will never modify any environment variables
|
||||||
|
// that have already been set.
|
||||||
|
// https://github.com/motdotla/dotenv
|
||||||
|
require('dotenv').config({silent: true});
|
||||||
|
|
||||||
|
const jest = require('jest');
|
||||||
|
const argv = process.argv.slice(2);
|
||||||
|
|
||||||
|
// Watch unless on CI or in coverage mode
|
||||||
|
if (!process.env.CI && argv.indexOf('--coverage') < 0) {
|
||||||
|
argv.push('--watch');
|
||||||
|
}
|
||||||
|
|
||||||
|
// A temporary hack to clear terminal correctly.
|
||||||
|
// You can remove this after updating to Jest 18 when it's out.
|
||||||
|
// https://github.com/facebook/jest/pull/2230
|
||||||
|
var realWrite = process.stdout.write;
|
||||||
|
var CLEAR = process.platform === 'win32' ? '\x1Bc' : '\x1B[2J\x1B[3J\x1B[H';
|
||||||
|
process.stdout.write = function(chunk, encoding, callback) {
|
||||||
|
if (chunk === '\x1B[2J\x1B[H') {
|
||||||
|
chunk = CLEAR;
|
||||||
|
}
|
||||||
|
return realWrite.call(this, chunk, encoding, callback);
|
||||||
|
};
|
||||||
|
|
||||||
|
|
||||||
|
jest.run(argv);
|
||||||
24
src/app.css
Normal file
24
src/app.css
Normal file
@ -0,0 +1,24 @@
|
|||||||
|
.App {
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.App-logo {
|
||||||
|
animation: App-logo-spin infinite 20s linear;
|
||||||
|
height: 80px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.App-header {
|
||||||
|
background-color: #222;
|
||||||
|
height: 150px;
|
||||||
|
padding: 20px;
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.App-intro {
|
||||||
|
font-size: large;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes App-logo-spin {
|
||||||
|
from { transform: rotate(0deg); }
|
||||||
|
to { transform: rotate(360deg); }
|
||||||
|
}
|
||||||
19
src/app.js
Normal file
19
src/app.js
Normal file
@ -0,0 +1,19 @@
|
|||||||
|
import React, { Component } from 'react';
|
||||||
|
import './app.css';
|
||||||
|
|
||||||
|
var io = require("socket.io-client");
|
||||||
|
window.torrentSocket = io('http://localhost:8099/');
|
||||||
|
|
||||||
|
import RecentTorrents from './recent-torrents'
|
||||||
|
|
||||||
|
class App extends Component {
|
||||||
|
render() {
|
||||||
|
return (
|
||||||
|
<div className="App">
|
||||||
|
<RecentTorrents />
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export default App;
|
||||||
256
src/css/izi/animations.css
Normal file
256
src/css/izi/animations.css
Normal file
@ -0,0 +1,256 @@
|
|||||||
|
.animated {
|
||||||
|
transition: 0.2s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.scale0 {
|
||||||
|
transform: scale(0,0);
|
||||||
|
}
|
||||||
|
|
||||||
|
.scale1 {
|
||||||
|
transform: scale(1,1);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/* - - - - - - - - - - - - - - -
|
||||||
|
|
||||||
|
АНИМАЦИИ
|
||||||
|
|
||||||
|
- - - - - - - - - - - - - - - - */
|
||||||
|
|
||||||
|
.an-zoom-in {
|
||||||
|
animation: zoom-in 0.2s;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes zoom-in {
|
||||||
|
0% {
|
||||||
|
opacity: 0;
|
||||||
|
transform: scale(0, 0);
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
opacity: 1;
|
||||||
|
transform: scale(1, 1);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.an-show-op {
|
||||||
|
animation: show-op 0.2s;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes show-op {
|
||||||
|
0% {
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.an-slide-r {
|
||||||
|
animation: slide-r 0.2s;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes slide-r {
|
||||||
|
0% {
|
||||||
|
opacity: 0;
|
||||||
|
transform: translateX(+50px);
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
opacity: 1;
|
||||||
|
transform: translateX(0px);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.an-slide-l {
|
||||||
|
animation: slide-l 0.2s;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes slide-l {
|
||||||
|
0% {
|
||||||
|
opacity: 0;
|
||||||
|
transform: translateX(-50px);
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
opacity: 1;
|
||||||
|
transform: translateX(0px);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.an-slide-t {
|
||||||
|
animation: slide-t 0.2s;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes slide-t {
|
||||||
|
0% {
|
||||||
|
opacity: 0;
|
||||||
|
transform: translateY(-50px);
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
opacity: 1;
|
||||||
|
transform: translateY(0px);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.an-slide-b {
|
||||||
|
animation: slide-b 0.2s;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes slide-b {
|
||||||
|
0% {
|
||||||
|
opacity: 0;
|
||||||
|
transform: translateY(50px);
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
opacity: 1;
|
||||||
|
transform: translateY(0px);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.an-flare-red {
|
||||||
|
animation: flare-red;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes flare-red {
|
||||||
|
0% {
|
||||||
|
box-shadow: 0px 0px 0px 10px rgba(255, 42, 42, 0.0);
|
||||||
|
}
|
||||||
|
30% {
|
||||||
|
box-shadow: 0px 0px 0px 25px rgba(255, 42, 42, 0.2);
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
box-shadow: 0px 0px 0px 50px rgba(255, 42, 42, 0.0);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.an-flare-green {
|
||||||
|
animation: flare-green;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes flare-green {
|
||||||
|
0% {
|
||||||
|
box-shadow: 0px 0px 0px 10px rgba(54, 215, 146, 0.0);
|
||||||
|
}
|
||||||
|
30% {
|
||||||
|
box-shadow: 0px 0px 0px 25px rgba(54, 215, 146, 0.2);
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
box-shadow: 0px 0px 0px 50px rgba(54, 215, 146, 0.0);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.an-flare-glam {
|
||||||
|
animation: flare-glam;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes flare-glam {
|
||||||
|
0% {
|
||||||
|
box-shadow: 0px 0px 0px 10px rgba(210, 95, 210, 0.0);
|
||||||
|
}
|
||||||
|
30% {
|
||||||
|
box-shadow: 0px 0px 0px 25px rgba(210, 95, 210, 0.25);
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
box-shadow: 0px 0px 0px 50px rgba(210, 95, 210, 0.0);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.an-flare-orange {
|
||||||
|
animation: flare-orange;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes flare-orange {
|
||||||
|
0% {
|
||||||
|
box-shadow: 0px 0px 0px 10px rgba(255, 173, 64, 0.0);
|
||||||
|
}
|
||||||
|
30% {
|
||||||
|
box-shadow: 0px 0px 0px 25px rgba(255, 173, 64, 0.25);
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
box-shadow: 0px 0px 0px 50px rgba(255, 173, 64, 0.0);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.an-flare-blue {
|
||||||
|
animation: flare-blue;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes flare-blue {
|
||||||
|
0% {
|
||||||
|
box-shadow: 0px 0px 0px 10px rgba(31,225,227, 0.0);
|
||||||
|
}
|
||||||
|
30% {
|
||||||
|
box-shadow: 0px 0px 0px 25px rgba(31,225,227, 0.25);
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
box-shadow: 0px 0px 0px 50px rgba(31,225,227, 0.0);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
.an0-25 {
|
||||||
|
animation-duration: 0.25s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.an0-5 {
|
||||||
|
animation-duration: 0.5s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.an0-75 {
|
||||||
|
animation-duration: 0.75s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.an1 {
|
||||||
|
animation-duration: 1s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.an1-5 {
|
||||||
|
animation-duration: 1.5s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.an2 {
|
||||||
|
animation-duration: 2s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.an2-5 {
|
||||||
|
animation-duration: 2.5s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.an-linear {
|
||||||
|
animation-timing-function: linear;
|
||||||
|
}
|
||||||
|
|
||||||
|
.an-infinite {
|
||||||
|
animation-iteration-count: infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* точечный спиннер */
|
||||||
|
|
||||||
|
.spinner {
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.spinner > div {
|
||||||
|
width: 0.5em;
|
||||||
|
height: 0.5em;
|
||||||
|
margin: 0.25em;
|
||||||
|
background-color: #dedede;
|
||||||
|
border-radius: 100%;
|
||||||
|
display: inline-block;
|
||||||
|
animation: sk-bouncedelay 1.4s infinite ease-in-out both;
|
||||||
|
}
|
||||||
|
|
||||||
|
.spinner .bounce1 {
|
||||||
|
animation-delay: -0.32s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.spinner .bounce2 {
|
||||||
|
animation-delay: -0.16s;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes sk-bouncedelay {
|
||||||
|
0%, 80%, 100% {
|
||||||
|
transform: scale(0);
|
||||||
|
} 40% {
|
||||||
|
transform: scale(1.0);
|
||||||
|
}
|
||||||
|
}
|
||||||
334
src/css/izi/components.css
Normal file
334
src/css/izi/components.css
Normal file
@ -0,0 +1,334 @@
|
|||||||
|
/* пирог */
|
||||||
|
|
||||||
|
.pie > * {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ---------------------
|
||||||
|
|
||||||
|
СТРАНИЦЫ
|
||||||
|
|
||||||
|
--------------------- */
|
||||||
|
|
||||||
|
.page.padding {
|
||||||
|
padding: 2.5rem 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.page-container.hide > .page-content {
|
||||||
|
transform: translateX(-50px);
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
.page-container.show > .page-content {
|
||||||
|
transform: translateX(0);
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
.page-container.close > .page-content {
|
||||||
|
transform: translateX(+50px);
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* крылья */
|
||||||
|
|
||||||
|
.wings {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
align-items: baseline;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.wings::before,
|
||||||
|
.wings::after {
|
||||||
|
content: "";
|
||||||
|
flex-basis: 100%;
|
||||||
|
height: 1px;
|
||||||
|
background: rgba(40, 40, 40, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* текст */
|
||||||
|
|
||||||
|
.p {
|
||||||
|
max-width: 17.5em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.text-center {
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* всплывающие подсказки */
|
||||||
|
|
||||||
|
[data-title] {
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
[data-title]:hover:active::before,
|
||||||
|
[data-title]:hover:active::after {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
[data-title]::before {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
z-index: 1;
|
||||||
|
display: none;
|
||||||
|
width: 0;
|
||||||
|
height: 0;
|
||||||
|
border-style: solid;
|
||||||
|
border-color: transparent #1D7373 transparent transparent;
|
||||||
|
border-width: 10px 10px 10px 0;
|
||||||
|
right: -12.5px;
|
||||||
|
top: 50%;
|
||||||
|
-webkit-transform: translateY(-50%);
|
||||||
|
transform: translateY(-50%);
|
||||||
|
animation: show-op 0.2s;
|
||||||
|
-webkit-animation: show-op 0.2s;
|
||||||
|
}
|
||||||
|
|
||||||
|
[data-title]::after {
|
||||||
|
content: attr(data-title);
|
||||||
|
position: absolute;
|
||||||
|
z-index: 1;
|
||||||
|
display: none;
|
||||||
|
width: 100px;
|
||||||
|
right: -107.5px;
|
||||||
|
top: 50%;
|
||||||
|
-webkit-transform: translateY(-50%);
|
||||||
|
transform: translateY(-50%);
|
||||||
|
border-radius: 1px;
|
||||||
|
text-align: center;
|
||||||
|
line-height: normal;
|
||||||
|
font-size: 0.7rem;
|
||||||
|
color: #fff;
|
||||||
|
background: #1D7373;
|
||||||
|
padding: 5px;
|
||||||
|
animation: show-op 0.2s;
|
||||||
|
-webkit-animation: show-op 0.2s;
|
||||||
|
}
|
||||||
|
|
||||||
|
[data-title]:hover::after,
|
||||||
|
[data-title]:hover::before {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
#float-buttons {
|
||||||
|
position: fixed;
|
||||||
|
bottom: 0.85rem;
|
||||||
|
right: 0.85rem;
|
||||||
|
direction: rtl;
|
||||||
|
}
|
||||||
|
|
||||||
|
#float-buttons > * {
|
||||||
|
display: flex;
|
||||||
|
font-size: 1.15em;
|
||||||
|
flex-shrink: 0;
|
||||||
|
transition: 0.2s;
|
||||||
|
}
|
||||||
|
|
||||||
|
#float-buttons.hide > * {
|
||||||
|
-webkit-transform: scale(0);
|
||||||
|
transform: scale(0);
|
||||||
|
}
|
||||||
|
|
||||||
|
#notifier {
|
||||||
|
position: fixed;
|
||||||
|
transition: 0.2s;
|
||||||
|
width: 100%;
|
||||||
|
bottom: 0;
|
||||||
|
transform: translateY(100%);
|
||||||
|
}
|
||||||
|
|
||||||
|
#notifier.show {
|
||||||
|
transform: translateY(0);
|
||||||
|
}
|
||||||
|
|
||||||
|
@media only screen and (orientation: landscape) and (min-width: 1100px) {
|
||||||
|
#notifier {
|
||||||
|
padding: 0.5em;
|
||||||
|
width: 25em;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* лодер */
|
||||||
|
|
||||||
|
.loader {
|
||||||
|
height: 4px;
|
||||||
|
width: 100%;
|
||||||
|
position: relative;
|
||||||
|
overflow: hidden;
|
||||||
|
background-color: #ddd;
|
||||||
|
}
|
||||||
|
.loader:before{
|
||||||
|
display: block;
|
||||||
|
position: absolute;
|
||||||
|
content: "";
|
||||||
|
left: -200px;
|
||||||
|
width: 200px;
|
||||||
|
height: 4px;
|
||||||
|
background-color: #2980b9;
|
||||||
|
animation: loading 2s linear infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes loading {
|
||||||
|
from {left: -200px; width: 30%;}
|
||||||
|
50% {width: 30%;}
|
||||||
|
70% {width: 70%;}
|
||||||
|
80% { left: 50%;}
|
||||||
|
95% {left: 120%;}
|
||||||
|
to {left: 100%;}
|
||||||
|
}
|
||||||
|
|
||||||
|
.image-preview {
|
||||||
|
background-position: center;
|
||||||
|
background-size: cover;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/* страничный лодер */
|
||||||
|
|
||||||
|
#fountainG{
|
||||||
|
position:relative;
|
||||||
|
width:234px;
|
||||||
|
height:22px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.fountainG{
|
||||||
|
position:absolute;
|
||||||
|
top:0;
|
||||||
|
background-color:rgb(168,168,168);
|
||||||
|
width:22px;
|
||||||
|
height:22px;
|
||||||
|
animation-name:bounce_fountainG;
|
||||||
|
animation-duration:1.5s;
|
||||||
|
animation-iteration-count:infinite;
|
||||||
|
animation-direction:normal;
|
||||||
|
transform:scale(.3);
|
||||||
|
border-radius:15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#fountainG_1{
|
||||||
|
left:0;
|
||||||
|
animation-delay:0.6s;
|
||||||
|
}
|
||||||
|
|
||||||
|
#fountainG_2{
|
||||||
|
left:29px;
|
||||||
|
animation-delay:0.75s;
|
||||||
|
}
|
||||||
|
|
||||||
|
#fountainG_3{
|
||||||
|
left:58px;
|
||||||
|
animation-delay:0.9s;
|
||||||
|
}
|
||||||
|
|
||||||
|
#fountainG_4{
|
||||||
|
left:88px;
|
||||||
|
animation-delay:1.05s;
|
||||||
|
}
|
||||||
|
|
||||||
|
#fountainG_5{
|
||||||
|
left:117px;
|
||||||
|
animation-delay:1.2s;
|
||||||
|
}
|
||||||
|
|
||||||
|
#fountainG_6{
|
||||||
|
left:146px;
|
||||||
|
animation-delay:1.35s;
|
||||||
|
}
|
||||||
|
|
||||||
|
#fountainG_7{
|
||||||
|
left:175px;
|
||||||
|
animation-delay:1.5s;
|
||||||
|
}
|
||||||
|
|
||||||
|
#fountainG_8{
|
||||||
|
left:205px;
|
||||||
|
animation-delay:1.64s;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
@keyframes bounce_fountainG{
|
||||||
|
0%{
|
||||||
|
transform:scale(1);
|
||||||
|
background-color:rgb(97,97,97);
|
||||||
|
}
|
||||||
|
|
||||||
|
100%{
|
||||||
|
transform:scale(.3);
|
||||||
|
background-color:rgb(255,255,255);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.chat {
|
||||||
|
padding-right: 4px;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.chat .messageBox {
|
||||||
|
overflow-y: auto;
|
||||||
|
overflow-x: none;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.chat .message {
|
||||||
|
padding: 2px 0px;
|
||||||
|
align-items: start;
|
||||||
|
}
|
||||||
|
|
||||||
|
.chat .message img {
|
||||||
|
max-height: 42px;
|
||||||
|
max-width: 42px;
|
||||||
|
margin-top: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.chat .message span {
|
||||||
|
margin-top: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.chat .message .messageText {
|
||||||
|
margin-left: 6px;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.chat .messageSend {
|
||||||
|
margin-top: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* слайдер */
|
||||||
|
|
||||||
|
.main-slider .sponsors {
|
||||||
|
overflow-x: auto;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
overflow-y: hidden;
|
||||||
|
-webkit-overflow-scrolling: touch;
|
||||||
|
background: rgba(0,0,0,0.8);
|
||||||
|
}
|
||||||
|
|
||||||
|
.main-slider .sponsors img {
|
||||||
|
height: 5.5em;
|
||||||
|
padding: 0 0.7em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.about-sponsors .sponsors {
|
||||||
|
flex-wrap: wrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.about-sponsors .sponsors img {
|
||||||
|
height: 7em;
|
||||||
|
padding: 0 1em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.about-socials .socials {
|
||||||
|
padding: 1em;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.about-socials .socials svg {
|
||||||
|
fill: black;
|
||||||
|
height: 3em;
|
||||||
|
padding: 0 1em;
|
||||||
|
}
|
||||||
178
src/css/izi/flex.css
Normal file
178
src/css/izi/flex.css
Normal file
@ -0,0 +1,178 @@
|
|||||||
|
/* FLEX */
|
||||||
|
|
||||||
|
.row, .column {
|
||||||
|
display: flex;
|
||||||
|
align-items: flex-start;
|
||||||
|
justify-content: flex-start;
|
||||||
|
}
|
||||||
|
|
||||||
|
.wrap {
|
||||||
|
flex-wrap: wrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.row.reverse {
|
||||||
|
flex-direction: row-reverse;
|
||||||
|
}
|
||||||
|
|
||||||
|
.column {
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
.column.reverse {
|
||||||
|
flex-direction: column-reverse;
|
||||||
|
}
|
||||||
|
|
||||||
|
.row.center,
|
||||||
|
.column.inline {
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.column.center,
|
||||||
|
.row.inline {
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.row.stretch,
|
||||||
|
.column.stretch {
|
||||||
|
align-items: stretch;
|
||||||
|
}
|
||||||
|
|
||||||
|
.row.top,
|
||||||
|
.column.left {
|
||||||
|
align-items: flex-start;
|
||||||
|
}
|
||||||
|
.row.bottom,
|
||||||
|
.colum.right {
|
||||||
|
align-items: flex-end;
|
||||||
|
}
|
||||||
|
|
||||||
|
.row > .self-top {
|
||||||
|
align-self: flex-end;
|
||||||
|
}
|
||||||
|
.row > .self-bottom {
|
||||||
|
align-self: flex-end;
|
||||||
|
}
|
||||||
|
|
||||||
|
.column > .self-right {
|
||||||
|
align-self: flex-end;
|
||||||
|
}
|
||||||
|
.column > .self-left {
|
||||||
|
align-self: flex-start;
|
||||||
|
}
|
||||||
|
|
||||||
|
.self-center {
|
||||||
|
align-self: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.self-stretch {
|
||||||
|
align-self: stretch;
|
||||||
|
}
|
||||||
|
|
||||||
|
.row.space-between,
|
||||||
|
.column.space-between {
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
.row.space-around,
|
||||||
|
.column.space-around {
|
||||||
|
justify-content: space-around;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.ml-auto {
|
||||||
|
margin-left: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mt-auto {
|
||||||
|
margin-top: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.jc-end {
|
||||||
|
justify-content: flex-end;
|
||||||
|
}
|
||||||
|
|
||||||
|
.shrink0 {
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.shrink1 {
|
||||||
|
flex-shrink: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.baseline {
|
||||||
|
align-items: baseline;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* поток */
|
||||||
|
|
||||||
|
.column.indent0-25 > *:not(:first-child):not(.ripple) {
|
||||||
|
margin-top: 0.25em;
|
||||||
|
}
|
||||||
|
.column.indent0-5 > *:not(:first-child):not(.ripple) {
|
||||||
|
margin-top: 0.5em;
|
||||||
|
}
|
||||||
|
.column.indent0-75 > *:not(:first-child):not(.ripple) {
|
||||||
|
margin-top: 0.75em;
|
||||||
|
}
|
||||||
|
.column.indent1 > *:not(:first-child):not(.ripple) {
|
||||||
|
margin-top: 1em;
|
||||||
|
}
|
||||||
|
.column.indent1-25 > *:not(:first-child):not(.ripple) {
|
||||||
|
margin-top: 1.25em;
|
||||||
|
}
|
||||||
|
.column.indent1-5 > *:not(:first-child):not(.ripple) {
|
||||||
|
margin-top: 1.5em;
|
||||||
|
}
|
||||||
|
.column.indent1-75 > *:not(:first-child):not(.ripple) {
|
||||||
|
margin-top: 1.75em;
|
||||||
|
}
|
||||||
|
.column.indent2 > *:not(:first-child):not(.ripple) {
|
||||||
|
margin-top: 2em;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* строка с остступами */
|
||||||
|
|
||||||
|
.row.indent0-25 > *:not(:first-child):not(.ripple) {
|
||||||
|
margin-left: 0.25em;
|
||||||
|
}
|
||||||
|
.row.indent0-5 > *:not(:first-child):not(.ripple) {
|
||||||
|
margin-left: 0.5em;
|
||||||
|
}
|
||||||
|
.row.indent0-75 > *:not(:first-child):not(.ripple) {
|
||||||
|
margin-left: 0.75em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.row.indent1 > *:not(:first-child):not(.ripple) {
|
||||||
|
margin-left: 1em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.row.indent1-25 > *:not(:first-child):not(.ripple) {
|
||||||
|
margin-left: 1.25em;
|
||||||
|
}
|
||||||
|
.row.indent1-5 > *:not(:first-child):not(.ripple) {
|
||||||
|
margin-left: 1.5em;
|
||||||
|
}
|
||||||
|
.row.indent1-75 > *:not(:first-child):not(.ripple) {
|
||||||
|
margin-left: 1.75em;
|
||||||
|
}
|
||||||
|
.row.indent2 > *:not(:first-child):not(.ripple) {
|
||||||
|
margin-left: 2em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.row.indent.wrap {
|
||||||
|
flex-wrap: wrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.row.indent.wrap > * {
|
||||||
|
margin: 0 0.5em;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* размеры */
|
||||||
|
|
||||||
|
.row > .full-size, .column > .full-size {
|
||||||
|
flex-basis: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.row.solid > *:not(.soft), .column.solid > *:not(.soft) {
|
||||||
|
flex-shrink: 0;
|
||||||
|
flex-grow: 0;
|
||||||
|
}
|
||||||
164
src/css/izi/inputs.css
Normal file
164
src/css/izi/inputs.css
Normal file
@ -0,0 +1,164 @@
|
|||||||
|
/* переключалка */
|
||||||
|
|
||||||
|
[data-switch]:not(.butt):not(.show) {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ---- инпуты ---- */
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
input[type="text"],
|
||||||
|
input[type="email"],
|
||||||
|
input[type="password"] {
|
||||||
|
font-size: inherit;
|
||||||
|
font-family: inherit;
|
||||||
|
width: 100%;
|
||||||
|
background: none;
|
||||||
|
outline: none;
|
||||||
|
border: none;
|
||||||
|
color: inherit;
|
||||||
|
}
|
||||||
|
|
||||||
|
select {
|
||||||
|
padding: 0;
|
||||||
|
font-family: inherit;
|
||||||
|
font-size: 1em;
|
||||||
|
background-color: transparent;
|
||||||
|
width: 100%;
|
||||||
|
border: none;
|
||||||
|
color: inherit;
|
||||||
|
}
|
||||||
|
select:focus {
|
||||||
|
outline: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
textarea {
|
||||||
|
font-size: inherit;
|
||||||
|
font-family: inherit;
|
||||||
|
width: 100%;
|
||||||
|
|
||||||
|
resize: none;
|
||||||
|
background: none;
|
||||||
|
outline: none;
|
||||||
|
border: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* обычный инпут */
|
||||||
|
|
||||||
|
.input-normal {
|
||||||
|
font-size: 1em;
|
||||||
|
padding: 0.75em;
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
|
||||||
|
.input-normal > *:not(:first-child) {
|
||||||
|
margin-left: 0.75em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.input-normal svg {
|
||||||
|
height: 1em;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* лэйбл-инпут */
|
||||||
|
|
||||||
|
.input-label {
|
||||||
|
display: -webkit-flex;
|
||||||
|
display: -ms-flexbox;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
|
||||||
|
font-size: 1em;
|
||||||
|
height: 4em;
|
||||||
|
cursor: text;
|
||||||
|
}
|
||||||
|
|
||||||
|
.input-label .combo {
|
||||||
|
position: relative;
|
||||||
|
display: -webkit-flex;
|
||||||
|
display: -ms-flexbox;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.input-label .combo > * {
|
||||||
|
width: 100%;
|
||||||
|
text-align: center;
|
||||||
|
transition: 0.3s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.input-label .placeholder {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.input-label.focused .placeholder {
|
||||||
|
transform: translateY(-100%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.input-label input {
|
||||||
|
transform: scale(1, 0);
|
||||||
|
}
|
||||||
|
|
||||||
|
.input-label.focused input {
|
||||||
|
transform: scale(1, 1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.input-label .underline {
|
||||||
|
width: 0;
|
||||||
|
opacity: 0;
|
||||||
|
border-bottom: 1px solid;
|
||||||
|
transform: translateY(0.5em);
|
||||||
|
}
|
||||||
|
|
||||||
|
.input-label.focused .underline {
|
||||||
|
width: 100%;
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* чекбокс-инпут */
|
||||||
|
|
||||||
|
label.input-checkbox {
|
||||||
|
cursor: pointer;
|
||||||
|
margin-left: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
label.input-checkbox .switcher {
|
||||||
|
position: relative;
|
||||||
|
width: 2em;
|
||||||
|
height: 1em;
|
||||||
|
border-radius: 1em;
|
||||||
|
padding: 0;
|
||||||
|
background: #d3d3d3;
|
||||||
|
-webkit-transition: .4s;
|
||||||
|
transition: .4s;
|
||||||
|
}
|
||||||
|
|
||||||
|
label.input-checkbox .switcher::before {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
height: 1em;
|
||||||
|
width: 1em;
|
||||||
|
border-radius: 50%;
|
||||||
|
background: #fff;
|
||||||
|
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
|
||||||
|
-webkit-transition: .4s;
|
||||||
|
transition: .4s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.input-checkbox input[type="checkbox"]:checked ~ .switcher::before {
|
||||||
|
right: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.input-checkbox input[type="checkbox"]:checked ~ .switcher {
|
||||||
|
background: #3F51B5;
|
||||||
|
}
|
||||||
|
|
||||||
|
.input-checkbox input[type="checkbox"] {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
480
src/css/izi/izi.css
Normal file
480
src/css/izi/izi.css
Normal file
@ -0,0 +1,480 @@
|
|||||||
|
|
||||||
|
html {
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
*,
|
||||||
|
:before,
|
||||||
|
:after {
|
||||||
|
box-sizing: inherit;
|
||||||
|
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
|
||||||
|
-webkit-touch-callout: none;
|
||||||
|
/* -webkit-user-select: none;
|
||||||
|
-khtml-user-select: none;
|
||||||
|
-moz-user-select: none;
|
||||||
|
-ms-user-select: none;
|
||||||
|
user-select: none;
|
||||||
|
*/
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
font-family: Roboto, Arial, Helvetica, sans-serif;
|
||||||
|
font-size: 16px;
|
||||||
|
margin: 0;
|
||||||
|
background: #ededed;
|
||||||
|
cursor: default;
|
||||||
|
}
|
||||||
|
|
||||||
|
html,
|
||||||
|
body {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
svg {
|
||||||
|
height: 1em;
|
||||||
|
}
|
||||||
|
|
||||||
|
svg.iconmonstr {
|
||||||
|
padding: 0.10em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* фикс мерцания */
|
||||||
|
|
||||||
|
.flick-fix {
|
||||||
|
-webkit-backface-visibility: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ссылки */
|
||||||
|
|
||||||
|
a {
|
||||||
|
text-decoration: none;
|
||||||
|
color: inherit;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* примитивные позиции */
|
||||||
|
|
||||||
|
.relative {
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.absolute {
|
||||||
|
position: absolute;
|
||||||
|
}
|
||||||
|
|
||||||
|
.absolute.full-size {
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
bottom: 0;
|
||||||
|
right: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* указатель на нажатие */
|
||||||
|
|
||||||
|
.clickable {
|
||||||
|
cursor: pointer;
|
||||||
|
position: relative;
|
||||||
|
overflow: hidden;
|
||||||
|
z-index: 0;
|
||||||
|
transition: 0.5s;
|
||||||
|
-webkit-user-select: none; /* Chrome all / Safari all */
|
||||||
|
-moz-user-select: none; /* Firefox all */
|
||||||
|
-ms-user-select: none; /* IE 10+ */
|
||||||
|
user-select: none; /* Likely future */
|
||||||
|
}
|
||||||
|
|
||||||
|
.clickable .ripple {
|
||||||
|
display: block;
|
||||||
|
position: absolute;
|
||||||
|
border-radius: 100%;
|
||||||
|
transform:scale(0);
|
||||||
|
}
|
||||||
|
|
||||||
|
[class*="-bright-b"] .ripple {
|
||||||
|
background:rgba(80, 80, 80, 0.20);
|
||||||
|
}
|
||||||
|
[class*="-dark-b"] .ripple {
|
||||||
|
background:rgba(255, 255, 255, 0.4);
|
||||||
|
}
|
||||||
|
|
||||||
|
.an-ripple {
|
||||||
|
animation:ripple 0.65s linear;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes ripple {
|
||||||
|
100% {
|
||||||
|
opacity: 0; transform: scale(2.5);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* разделитель */
|
||||||
|
|
||||||
|
.divider {
|
||||||
|
height: 1px;
|
||||||
|
width: 100%;
|
||||||
|
border-bottom: 1px solid;
|
||||||
|
}
|
||||||
|
|
||||||
|
[class*="-bright-b"] .divider:not([class*="-dark-c"]) {
|
||||||
|
color: rgba(0,0,0,0.07);
|
||||||
|
}
|
||||||
|
|
||||||
|
[class*="-dark-b"] .divider:not([class*="-bright-c"]) {
|
||||||
|
color: rgba(255,255,255,0.07);
|
||||||
|
}
|
||||||
|
|
||||||
|
.border1 {
|
||||||
|
border: 1px solid;
|
||||||
|
}
|
||||||
|
|
||||||
|
[class*="-bright-b"] .border1 {
|
||||||
|
border-color: rgba(0,0,0,0.10);
|
||||||
|
}
|
||||||
|
|
||||||
|
[class*="-dark-b"] .border1 {
|
||||||
|
border-color: rgba(255,255,255,0.10);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* eщё разделитель */
|
||||||
|
|
||||||
|
[class*="-bright-b"] .underlined {
|
||||||
|
border-bottom: 1px solid rgba(0,0,0,0.07);
|
||||||
|
}
|
||||||
|
|
||||||
|
[class*="-dark-b"] .underlined {
|
||||||
|
border-bottom: 1px solid rgba(255,255,255,0.07);
|
||||||
|
}
|
||||||
|
|
||||||
|
[class*="-bright-b"] .upperlined {
|
||||||
|
border-top: 1px solid rgba(0,0,0,0.07);
|
||||||
|
}
|
||||||
|
|
||||||
|
[class*="-dark-b"] .upperlined {
|
||||||
|
border-top: 1px solid rgba(255,255,255,0.07);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* круг */
|
||||||
|
|
||||||
|
.round {
|
||||||
|
border-radius: 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* закруглённые углы */
|
||||||
|
|
||||||
|
.rounded {
|
||||||
|
border-radius: 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* вот это повороты */
|
||||||
|
|
||||||
|
.rotate90 {
|
||||||
|
transform: rotate(90deg);
|
||||||
|
}
|
||||||
|
|
||||||
|
.rotate180 {
|
||||||
|
transform: rotate(180deg);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* текст без переносов */
|
||||||
|
|
||||||
|
.text {
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.text-nowrap {
|
||||||
|
white-space: nowrap;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
min-width: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.text-bold {
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* переносы по буквам */
|
||||||
|
|
||||||
|
.break-word {
|
||||||
|
word-break: break-word;
|
||||||
|
min-width:0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* upper-case */
|
||||||
|
|
||||||
|
.u-case {
|
||||||
|
text-transform: uppercase;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* прокрутка */
|
||||||
|
|
||||||
|
.scroll {
|
||||||
|
overflow: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.scrollY {
|
||||||
|
overflow-y: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.scrollX {
|
||||||
|
overflow-x: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hidden {
|
||||||
|
visibility: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ---------------------
|
||||||
|
|
||||||
|
РАЗМЕРЫ
|
||||||
|
|
||||||
|
--------------------- */
|
||||||
|
|
||||||
|
.full-size {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.w100p {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
.h100p {
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.w50p {
|
||||||
|
width: 50%;
|
||||||
|
}
|
||||||
|
.h50p {
|
||||||
|
height: 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mw100p {
|
||||||
|
max-width: 100%;
|
||||||
|
}
|
||||||
|
.mh100p {
|
||||||
|
max-height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.w1em {
|
||||||
|
width: 1em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.h1em {
|
||||||
|
height: 1em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sz1em {
|
||||||
|
width: 1em;
|
||||||
|
height: 1em;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ---------------------
|
||||||
|
|
||||||
|
ПОЗИЦИИ
|
||||||
|
|
||||||
|
--------------------- */
|
||||||
|
|
||||||
|
.fixed {
|
||||||
|
position: fixed;
|
||||||
|
}
|
||||||
|
|
||||||
|
.top0 {
|
||||||
|
top: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.left0 {
|
||||||
|
left: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.right0 {
|
||||||
|
right: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bottom0 {
|
||||||
|
bottom: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ---------------------
|
||||||
|
|
||||||
|
ТЕНИ
|
||||||
|
|
||||||
|
--------------------- */
|
||||||
|
|
||||||
|
.shadow1 {
|
||||||
|
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
|
||||||
|
}
|
||||||
|
|
||||||
|
.shadow2 {
|
||||||
|
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
|
||||||
|
}
|
||||||
|
|
||||||
|
.shadow3 {
|
||||||
|
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
|
||||||
|
}
|
||||||
|
|
||||||
|
.shadow4 {
|
||||||
|
box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
|
||||||
|
}
|
||||||
|
|
||||||
|
.shadow5 {
|
||||||
|
box-shadow: 0 19px 38px rgba(0, 0, 0, 0.30), 0 15px 12px rgba(0, 0, 0, 0.22);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ---------------------
|
||||||
|
|
||||||
|
ПРОЗРАЧНОСТЬ
|
||||||
|
|
||||||
|
--------------------- */
|
||||||
|
|
||||||
|
.op75 {
|
||||||
|
opacity: 0.75;
|
||||||
|
}
|
||||||
|
|
||||||
|
.op5 {
|
||||||
|
opacity: 0.5;
|
||||||
|
}
|
||||||
|
|
||||||
|
.op25 {
|
||||||
|
opacity: 0.25;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ---------------------
|
||||||
|
|
||||||
|
МАРГИНЫ
|
||||||
|
|
||||||
|
--------------------- */
|
||||||
|
|
||||||
|
.mar0-25 {
|
||||||
|
margin: 0.25em;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ---------------------
|
||||||
|
|
||||||
|
ПАДДИНГИ
|
||||||
|
|
||||||
|
--------------------- */
|
||||||
|
|
||||||
|
.pad0-25 {
|
||||||
|
padding: 0.25em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pad0-5 {
|
||||||
|
padding: 0.5em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pad0-75 {
|
||||||
|
padding: 0.75em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pad1 {
|
||||||
|
padding: 1em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pad1-25 {
|
||||||
|
padding: 1.25em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pad1-5 {
|
||||||
|
padding: 1.5em;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ---------------------
|
||||||
|
|
||||||
|
РАЗМЕРЫ ШРИФТА
|
||||||
|
|
||||||
|
--------------------- */
|
||||||
|
|
||||||
|
.fs0-25 {
|
||||||
|
font-size: 0.25em;
|
||||||
|
}
|
||||||
|
.fs0-5 {
|
||||||
|
font-size: 0.5em;
|
||||||
|
}
|
||||||
|
.fs0-65 {
|
||||||
|
font-size: 0.65em;
|
||||||
|
}
|
||||||
|
.fs0-75 {
|
||||||
|
font-size: 0.75em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.fs0-85 {
|
||||||
|
font-size: 0.85em;
|
||||||
|
}
|
||||||
|
.fs1 {
|
||||||
|
font-size: 1em;
|
||||||
|
}
|
||||||
|
.fs1-15 {
|
||||||
|
font-size: 1.15em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.fs1-25 {
|
||||||
|
font-size: 1.25em;
|
||||||
|
}
|
||||||
|
.fs1-5 {
|
||||||
|
font-size: 1.5em;
|
||||||
|
}
|
||||||
|
.fs1-75 {
|
||||||
|
font-size: 1.75em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.fs2 {
|
||||||
|
font-size: 2em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.fs2-25 {
|
||||||
|
font-size: 2.25em;
|
||||||
|
}
|
||||||
|
.fs2-5 {
|
||||||
|
font-size: 2.5em;
|
||||||
|
}
|
||||||
|
.fs2-75 {
|
||||||
|
font-size: 2.75em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.fs3 {
|
||||||
|
font-size: 3em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.fs3-25 {
|
||||||
|
font-size: 3.25em;
|
||||||
|
}
|
||||||
|
.fs3-5 {
|
||||||
|
font-size: 3em;
|
||||||
|
}
|
||||||
|
.fs3-75 {
|
||||||
|
font-size: 3.75em;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ---------------------
|
||||||
|
|
||||||
|
Z-ИНДЕКС
|
||||||
|
|
||||||
|
--------------------- */
|
||||||
|
|
||||||
|
.z0 {
|
||||||
|
z-index: 0
|
||||||
|
}
|
||||||
|
.z1 {
|
||||||
|
z-index: 1
|
||||||
|
}
|
||||||
|
.z2 {
|
||||||
|
z-index: 2
|
||||||
|
}
|
||||||
|
.z3 {
|
||||||
|
z-index: 3
|
||||||
|
}
|
||||||
|
.z4 {
|
||||||
|
z-index: 4
|
||||||
|
}
|
||||||
|
.z5 {
|
||||||
|
z-index: 5
|
||||||
|
}
|
||||||
|
|
||||||
|
.overflow-hidden {
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
461
src/css/izi/material-palette.css
Normal file
461
src/css/izi/material-palette.css
Normal file
@ -0,0 +1,461 @@
|
|||||||
|
/* - - - - - - - - - - - - -
|
||||||
|
|
||||||
|
ПАЛИТРА
|
||||||
|
|
||||||
|
- - - - - - - - - - - - - */
|
||||||
|
|
||||||
|
.veil-black-dark-c {
|
||||||
|
color: #303030;
|
||||||
|
fill: #303030;
|
||||||
|
}
|
||||||
|
|
||||||
|
.veil-black-dark-b {
|
||||||
|
background-color: #303030;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* DARK BLUE */
|
||||||
|
|
||||||
|
.dark-blue-dark-c {
|
||||||
|
color: #151b27;
|
||||||
|
fill: #151b27;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dark-blue-dark-b {
|
||||||
|
background-color: #151b27;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ЧЁРНЫЙ */
|
||||||
|
|
||||||
|
.black-dark-c {
|
||||||
|
color: rgba(0, 0, 0, 0.87);
|
||||||
|
fill: rgba(0, 0, 0, 0.87);
|
||||||
|
}
|
||||||
|
|
||||||
|
[class*="-bright-b"] {
|
||||||
|
color: rgba(0, 0, 0, 0.87);
|
||||||
|
fill:rgba(0, 0, 0, 0.54);
|
||||||
|
}
|
||||||
|
[class*="-bright-b"] .sec-c {
|
||||||
|
color: rgba(0, 0, 0, 0.54);
|
||||||
|
}
|
||||||
|
[class*="-bright-b"] .dis-c {
|
||||||
|
color: rgba(0, 0, 0, 0.38);
|
||||||
|
fill:rgba(0, 0, 0, 0.38);
|
||||||
|
}
|
||||||
|
|
||||||
|
[class*="-bright-b"] ::placeholder {
|
||||||
|
color: rgba(0, 0, 0, 0.38);
|
||||||
|
}
|
||||||
|
|
||||||
|
[class*="-bright-b"] .icon svg {
|
||||||
|
fill:rgba(0, 0, 0, 0.54);
|
||||||
|
}
|
||||||
|
[class*="-bright-b"] .dis-c .icon svg {
|
||||||
|
fill:rgba(0, 0, 0, 0.38);
|
||||||
|
}
|
||||||
|
|
||||||
|
.black-dark-b {
|
||||||
|
background-color: rgb(0, 0, 0);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* БЕЛЫЙ */
|
||||||
|
|
||||||
|
.veil-white {
|
||||||
|
background: rgba(255,255,255,0.7);
|
||||||
|
}
|
||||||
|
|
||||||
|
.white-bright-c {
|
||||||
|
color: rgba(255,255,255,1);
|
||||||
|
fill: rgba(255,255,255,1);
|
||||||
|
}
|
||||||
|
|
||||||
|
[class*="-dark-b"] {
|
||||||
|
color: rgb(255,255,255);
|
||||||
|
fill: rgb(255, 255, 255);
|
||||||
|
}
|
||||||
|
[class*="-dark-b"] .sec-c {
|
||||||
|
color: rgba(255,255,255,0.70);
|
||||||
|
fill: rgba(255,255,255,0.70);
|
||||||
|
}
|
||||||
|
[class*="-dark-b"] .dis-c {
|
||||||
|
color: rgba(255,255,255,0.50);
|
||||||
|
fill: rgba(255,255,255,0.50);
|
||||||
|
}
|
||||||
|
|
||||||
|
[class*="-dark-b"] ::placeholder {
|
||||||
|
color: rgba(255,255,255,0.50);
|
||||||
|
}
|
||||||
|
|
||||||
|
[class*="-dark-b"] .icon svg {
|
||||||
|
fill: rgb(255,255,255);
|
||||||
|
}
|
||||||
|
[class*="-dark-b"] .dis-c .icon svg {
|
||||||
|
fill: rgba(255,255,255,0.50);
|
||||||
|
}
|
||||||
|
|
||||||
|
.white-bright-b {
|
||||||
|
background-color: rgb(255,255,255);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/* RED */
|
||||||
|
|
||||||
|
.red-dark-c {
|
||||||
|
color: #F44336;
|
||||||
|
fill: #F44336;
|
||||||
|
}
|
||||||
|
|
||||||
|
.red-dark-b {
|
||||||
|
background-color: #F44336;
|
||||||
|
}
|
||||||
|
|
||||||
|
.red-bright-c {
|
||||||
|
color: #FF8A80;
|
||||||
|
fill: #FF8A80;
|
||||||
|
}
|
||||||
|
|
||||||
|
.red-bright-b {
|
||||||
|
background-color: #FF8A80;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/* PINK */
|
||||||
|
|
||||||
|
.pink-dark-c {
|
||||||
|
color: #E91E63;
|
||||||
|
fill: #E91E63;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pink-dark-b {
|
||||||
|
background-color: #E91E63;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pink-bright-c {
|
||||||
|
color: #FF80AB;
|
||||||
|
fill: #FF80AB;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pink-bright-b {
|
||||||
|
background-color: #FF80AB;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/* PURPLE */
|
||||||
|
|
||||||
|
.purple-dark-c {
|
||||||
|
color: #9C27B0;
|
||||||
|
fill: #9C27B0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.purple-dark-b {
|
||||||
|
background-color: #9C27B0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.purple-bright-c {
|
||||||
|
color: #EA80FC;
|
||||||
|
fill: #EA80FC;
|
||||||
|
}
|
||||||
|
|
||||||
|
.purple-bright-b {
|
||||||
|
background-color: #E040FB;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/* DEEP PURPLE */
|
||||||
|
|
||||||
|
.dpurple-dark-c {
|
||||||
|
color: #673AB7;
|
||||||
|
fill: #673AB7;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dpurple-dark-b {
|
||||||
|
background-color: #673AB7;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dpurple-bright-c {
|
||||||
|
color: #B388FF;
|
||||||
|
fill: #B388FF;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dpurple-bright-b {
|
||||||
|
background-color: #B388FF;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/* INDIGO */
|
||||||
|
|
||||||
|
.indigo-dark-c {
|
||||||
|
color: #3F51B5;
|
||||||
|
fill: #3F51B5;
|
||||||
|
}
|
||||||
|
|
||||||
|
.indigo-dark-b {
|
||||||
|
background-color: #3F51B5;
|
||||||
|
}
|
||||||
|
|
||||||
|
.indigo-bright-c {
|
||||||
|
color: #8C9EFF;
|
||||||
|
fill: #8C9EFF;
|
||||||
|
}
|
||||||
|
|
||||||
|
.indigo-bright-b {
|
||||||
|
background-color: #8C9EFF;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/* BLUE */
|
||||||
|
|
||||||
|
.blue-dark-c {
|
||||||
|
color: #2196F3;
|
||||||
|
fill: #2196F3;
|
||||||
|
}
|
||||||
|
|
||||||
|
.blue-dark-b {
|
||||||
|
background-color: #2196F3;
|
||||||
|
}
|
||||||
|
|
||||||
|
.blue-bright-c {
|
||||||
|
color: #82B1FF;
|
||||||
|
fill: #82B1FF;
|
||||||
|
}
|
||||||
|
|
||||||
|
.blue-bright-b {
|
||||||
|
background-color: #82B1FF;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/* LIGHT BLUE */
|
||||||
|
|
||||||
|
.lblue-dark-c {
|
||||||
|
color: #039BE5;
|
||||||
|
fill: #039BE5;
|
||||||
|
}
|
||||||
|
|
||||||
|
.lblue-dark-b {
|
||||||
|
background-color: #039BE5;
|
||||||
|
}
|
||||||
|
|
||||||
|
.lblue-bright-c {
|
||||||
|
color: #40C4FF;
|
||||||
|
fill: #40C4FF;
|
||||||
|
}
|
||||||
|
|
||||||
|
.lblue-bright-b {
|
||||||
|
background-color: #40C4FF;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/* CYAN */
|
||||||
|
|
||||||
|
.cyan-dark-c {
|
||||||
|
color: #0097A7;
|
||||||
|
fill: #0097A7;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cyan-dark-b {
|
||||||
|
background-color: #0097A7;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cyan-bright-c {
|
||||||
|
color: #18FFFF;
|
||||||
|
fill: #18FFFF;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cyan-bright-b {
|
||||||
|
background-color: #18FFFF;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/* TYAL */
|
||||||
|
|
||||||
|
.teal-dark-c {
|
||||||
|
color: #009688;
|
||||||
|
fill: #009688;
|
||||||
|
}
|
||||||
|
|
||||||
|
.teal-dark-b {
|
||||||
|
background-color: #009688;
|
||||||
|
}
|
||||||
|
|
||||||
|
.teal-bright-c {
|
||||||
|
color: #64FFDA;
|
||||||
|
fill: #64FFDA;
|
||||||
|
}
|
||||||
|
|
||||||
|
.teal-bright-b {
|
||||||
|
background-color: #64FFDA;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/* GREEN */
|
||||||
|
|
||||||
|
.green-dark-c {
|
||||||
|
color: #43A047;
|
||||||
|
fill: #43A047;
|
||||||
|
}
|
||||||
|
|
||||||
|
.green-dark-b {
|
||||||
|
background-color: #43A047;
|
||||||
|
}
|
||||||
|
|
||||||
|
.green-bright-c {
|
||||||
|
color: #69F0AE;
|
||||||
|
fill: #69F0AE;
|
||||||
|
}
|
||||||
|
|
||||||
|
.green-bright-b {
|
||||||
|
background-color: #69F0AE;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/* LIGHT GREEN */
|
||||||
|
|
||||||
|
.lgreen-dark-c {
|
||||||
|
color: #689F38;
|
||||||
|
fill: #689F38;
|
||||||
|
}
|
||||||
|
|
||||||
|
.lgreen-dark-b {
|
||||||
|
background-color: #689F38;
|
||||||
|
}
|
||||||
|
|
||||||
|
.lgreen-bright-c {
|
||||||
|
color: #B2FF59;
|
||||||
|
fill: #B2FF59;
|
||||||
|
}
|
||||||
|
|
||||||
|
.lgreen-bright-b {
|
||||||
|
background-color: #B2FF59;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/* LIME */
|
||||||
|
|
||||||
|
.lime-dark-c {
|
||||||
|
color: #827717;
|
||||||
|
fill: #827717;
|
||||||
|
}
|
||||||
|
|
||||||
|
.lime-dark-b {
|
||||||
|
background-color: #827717;
|
||||||
|
}
|
||||||
|
|
||||||
|
.lime-bright-c {
|
||||||
|
color: #EEFF41;
|
||||||
|
fill: #EEFF41;
|
||||||
|
}
|
||||||
|
|
||||||
|
.lime-bright-b {
|
||||||
|
background-color: #EEFF41;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/* YELLOW */
|
||||||
|
|
||||||
|
.yellow-bright-c {
|
||||||
|
color: #FFFF00;
|
||||||
|
fill: #FFFF00;
|
||||||
|
}
|
||||||
|
|
||||||
|
.yellow-bright-b {
|
||||||
|
background-color: #FFFF00;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/* AMBER */
|
||||||
|
|
||||||
|
.amber-bright-c {
|
||||||
|
color: #FFD740;
|
||||||
|
fill: #FFD740;
|
||||||
|
}
|
||||||
|
|
||||||
|
.amber-bright-b {
|
||||||
|
background-color: #FFD740;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/* ORANGE */
|
||||||
|
|
||||||
|
.orange-dark-c {
|
||||||
|
color: #EF6C00;
|
||||||
|
fill: #EF6C00;
|
||||||
|
}
|
||||||
|
|
||||||
|
.orange-dark-b {
|
||||||
|
background-color: #EF6C00;
|
||||||
|
}
|
||||||
|
|
||||||
|
.orange-bright-c {
|
||||||
|
color: #FFAB40;
|
||||||
|
fill: #FFAB40;
|
||||||
|
}
|
||||||
|
|
||||||
|
.orange-bright-b {
|
||||||
|
background-color: #FFAB40;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/* DEEP ORANGE */
|
||||||
|
|
||||||
|
.dorange-dark-c {
|
||||||
|
color: #FF5722;
|
||||||
|
fill: #FF5722;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dorange-dark-b {
|
||||||
|
background-color: #FF5722;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dorange-bright-c {
|
||||||
|
color: #FF6E40;
|
||||||
|
fill: #FF6E40;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dorange-bright-b {
|
||||||
|
background-color: #FF6E40;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/* BROWN */
|
||||||
|
|
||||||
|
.brown-dark-c {
|
||||||
|
color: #795548;
|
||||||
|
fill: #795548;
|
||||||
|
}
|
||||||
|
|
||||||
|
.brown-dark-b {
|
||||||
|
background-color: #795548;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/* GREY */
|
||||||
|
|
||||||
|
.grey-dark-c {
|
||||||
|
color: #757575;
|
||||||
|
fill: #757575;
|
||||||
|
}
|
||||||
|
|
||||||
|
.grey-dark-b {
|
||||||
|
background-color: #757575;
|
||||||
|
}
|
||||||
|
|
||||||
|
.grey-bright-c {
|
||||||
|
color: #9E9E9E;
|
||||||
|
fill: #9E9E9E;
|
||||||
|
}
|
||||||
|
|
||||||
|
.grey-bright-b {
|
||||||
|
background-color: #9E9E9E;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/* BLUE GREY */
|
||||||
|
|
||||||
|
.bgrey-dark-c {
|
||||||
|
color: #607D8B;
|
||||||
|
fill: #607D8B;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bgrey-dark-b {
|
||||||
|
background-color: #607D8B;
|
||||||
|
}
|
||||||
5
src/index.css
Normal file
5
src/index.css
Normal file
@ -0,0 +1,5 @@
|
|||||||
|
body {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
font-family: sans-serif;
|
||||||
|
}
|
||||||
17
src/index.js
Normal file
17
src/index.js
Normal file
@ -0,0 +1,17 @@
|
|||||||
|
import React from 'react';
|
||||||
|
import ReactDOM from 'react-dom';
|
||||||
|
import App from './app';
|
||||||
|
|
||||||
|
import './css/izi/izi.css';
|
||||||
|
import './css/izi/material-palette.css';
|
||||||
|
import './css/izi/flex.css';
|
||||||
|
import './css/izi/inputs.css';
|
||||||
|
import './css/izi/components.css';
|
||||||
|
import './css/izi/animations.css';
|
||||||
|
|
||||||
|
import './index.css';
|
||||||
|
|
||||||
|
ReactDOM.render(
|
||||||
|
<App />,
|
||||||
|
document.getElementById('root')
|
||||||
|
);
|
||||||
35
src/recent-torrents.js
Normal file
35
src/recent-torrents.js
Normal file
@ -0,0 +1,35 @@
|
|||||||
|
import React, { Component } from 'react';
|
||||||
|
|
||||||
|
export default class RecentTorrents extends Component {
|
||||||
|
constructor() {
|
||||||
|
super()
|
||||||
|
this.torrents = [];
|
||||||
|
}
|
||||||
|
componentDidMount() {
|
||||||
|
window.torrentSocket.emit('recentTorrents', (data) => {
|
||||||
|
this.torrents = data;
|
||||||
|
this.forceUpdate();
|
||||||
|
});
|
||||||
|
window.torrentSocket.on('newTorrent', (torrent) => {
|
||||||
|
this.torrents.unshift(torrent);
|
||||||
|
if(this.torrents.length > 10)
|
||||||
|
this.torrents.pop()
|
||||||
|
this.forceUpdate();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
render() {
|
||||||
|
return (
|
||||||
|
<div className="list column">
|
||||||
|
{
|
||||||
|
this.torrents.map((torrent, index) =>{
|
||||||
|
return(
|
||||||
|
<div key={index}>
|
||||||
|
{torrent.name}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
})
|
||||||
|
}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
Loading…
Reference in New Issue
Block a user