From debb0640da5aaa184e4740cb5dcc4848f52c2d4d Mon Sep 17 00:00:00 2001 From: muerwre Date: Tue, 2 Apr 2019 17:25:50 +0700 Subject: [PATCH] css grid to pack my layout --- package-lock.json | 536 +++++++++++++++++- package.json | 7 + src/components/flow/HeroPlaceholder/index.tsx | 7 + .../flow/HeroPlaceholder/style.scss | 9 + src/components/flow/TestGrid/index.tsx | 72 +++ src/components/flow/TestGrid/style.scss | 52 ++ src/components/main/Header/index.tsx | 23 + src/components/main/Header/style.scss | 57 ++ src/containers/App.tsx | 14 +- src/containers/FlowLayout/index.tsx | 13 + src/containers/MainLayout/index.tsx | 11 + src/containers/MainLayout/style.scss | 4 + src/index.html | 1 - src/sprites/circles.svg | 128 +++++ src/sprites/dots.svg | 84 +++ src/sprites/logo_sm.svg | 145 +++++ src/styles/colors.scss | 3 + src/styles/global.scss | 45 ++ src/styles/variables.scss | 10 + webpack.config.js | 14 +- 20 files changed, 1212 insertions(+), 23 deletions(-) create mode 100644 src/components/flow/HeroPlaceholder/index.tsx create mode 100644 src/components/flow/HeroPlaceholder/style.scss create mode 100644 src/components/flow/TestGrid/index.tsx create mode 100644 src/components/flow/TestGrid/style.scss create mode 100644 src/components/main/Header/index.tsx create mode 100644 src/components/main/Header/style.scss create mode 100644 src/containers/FlowLayout/index.tsx create mode 100644 src/containers/MainLayout/index.tsx create mode 100644 src/containers/MainLayout/style.scss create mode 100644 src/sprites/circles.svg create mode 100644 src/sprites/dots.svg create mode 100644 src/sprites/logo_sm.svg diff --git a/package-lock.json b/package-lock.json index c29dd243..4cf16a95 100644 --- a/package-lock.json +++ b/package-lock.json @@ -88,9 +88,16 @@ "dev": true, "requires": { "esutils": "^2.0.2", + "lodash": "^4.17.11", "to-fast-properties": "^2.0.0" } }, + "lodash": { + "version": "4.17.11", + "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.11.tgz", + "integrity": "sha512-cQKh8igo5QUhZ7lg38DYWAxMvjSAKG0A8wGSVimP07SIUEK2UO+arSRKbRZWtelMtN5V0Hkwh5ryOto/SshYIg==", + "dev": true + }, "to-fast-properties": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/to-fast-properties/-/to-fast-properties-2.0.0.tgz", @@ -116,9 +123,16 @@ "dev": true, "requires": { "esutils": "^2.0.2", + "lodash": "^4.17.11", "to-fast-properties": "^2.0.0" } }, + "lodash": { + "version": "4.17.11", + "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.11.tgz", + "integrity": "sha512-cQKh8igo5QUhZ7lg38DYWAxMvjSAKG0A8wGSVimP07SIUEK2UO+arSRKbRZWtelMtN5V0Hkwh5ryOto/SshYIg==", + "dev": true + }, "to-fast-properties": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/to-fast-properties/-/to-fast-properties-2.0.0.tgz", @@ -155,6 +169,7 @@ "requires": { "@babel/types": "^7.3.4", "jsesc": "^2.5.1", + "lodash": "^4.17.11", "source-map": "^0.5.0", "trim-right": "^1.0.1" } @@ -223,7 +238,8 @@ "@babel/parser": "^7.3.4", "@babel/types": "^7.3.4", "debug": "^4.1.0", - "globals": "^11.1.0" + "globals": "^11.1.0", + "lodash": "^4.17.11" } }, "@babel/types": { @@ -233,6 +249,7 @@ "dev": true, "requires": { "esutils": "^2.0.2", + "lodash": "^4.17.11", "to-fast-properties": "^2.0.0" } }, @@ -283,6 +300,12 @@ "integrity": "sha512-OYu7XEzjkCQ3C5Ps3QIZsQfNpqoJyZZA99wd9aWd05NCtC5pWOkShK2mkL6HXQR6/Cy2lbNdPlZBpuQHXE63gA==", "dev": true }, + "lodash": { + "version": "4.17.11", + "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.11.tgz", + "integrity": "sha512-cQKh8igo5QUhZ7lg38DYWAxMvjSAKG0A8wGSVimP07SIUEK2UO+arSRKbRZWtelMtN5V0Hkwh5ryOto/SshYIg==", + "dev": true + }, "ms": { "version": "2.1.1", "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.1.tgz", @@ -455,6 +478,7 @@ "requires": { "@babel/types": "^7.3.4", "jsesc": "^2.5.1", + "lodash": "^4.17.11", "source-map": "^0.5.0", "trim-right": "^1.0.1" } @@ -523,7 +547,8 @@ "@babel/parser": "^7.3.4", "@babel/types": "^7.3.4", "debug": "^4.1.0", - "globals": "^11.1.0" + "globals": "^11.1.0", + "lodash": "^4.17.11" } }, "@babel/types": { @@ -533,6 +558,7 @@ "dev": true, "requires": { "esutils": "^2.0.2", + "lodash": "^4.17.11", "to-fast-properties": "^2.0.0" } }, @@ -583,6 +609,12 @@ "integrity": "sha512-OYu7XEzjkCQ3C5Ps3QIZsQfNpqoJyZZA99wd9aWd05NCtC5pWOkShK2mkL6HXQR6/Cy2lbNdPlZBpuQHXE63gA==", "dev": true }, + "lodash": { + "version": "4.17.11", + "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.11.tgz", + "integrity": "sha512-cQKh8igo5QUhZ7lg38DYWAxMvjSAKG0A8wGSVimP07SIUEK2UO+arSRKbRZWtelMtN5V0Hkwh5ryOto/SshYIg==", + "dev": true + }, "ms": { "version": "2.1.1", "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.1.tgz", @@ -642,9 +674,16 @@ "dev": true, "requires": { "esutils": "^2.0.2", + "lodash": "^4.17.11", "to-fast-properties": "^2.0.0" } }, + "lodash": { + "version": "4.17.11", + "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.11.tgz", + "integrity": "sha512-cQKh8igo5QUhZ7lg38DYWAxMvjSAKG0A8wGSVimP07SIUEK2UO+arSRKbRZWtelMtN5V0Hkwh5ryOto/SshYIg==", + "dev": true + }, "to-fast-properties": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/to-fast-properties/-/to-fast-properties-2.0.0.tgz", @@ -669,9 +708,16 @@ "dev": true, "requires": { "esutils": "^2.0.2", + "lodash": "^4.17.11", "to-fast-properties": "^2.0.0" } }, + "lodash": { + "version": "4.17.11", + "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.11.tgz", + "integrity": "sha512-cQKh8igo5QUhZ7lg38DYWAxMvjSAKG0A8wGSVimP07SIUEK2UO+arSRKbRZWtelMtN5V0Hkwh5ryOto/SshYIg==", + "dev": true + }, "to-fast-properties": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/to-fast-properties/-/to-fast-properties-2.0.0.tgz", @@ -696,9 +742,16 @@ "dev": true, "requires": { "esutils": "^2.0.2", + "lodash": "^4.17.11", "to-fast-properties": "^2.0.0" } }, + "lodash": { + "version": "4.17.11", + "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.11.tgz", + "integrity": "sha512-cQKh8igo5QUhZ7lg38DYWAxMvjSAKG0A8wGSVimP07SIUEK2UO+arSRKbRZWtelMtN5V0Hkwh5ryOto/SshYIg==", + "dev": true + }, "to-fast-properties": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/to-fast-properties/-/to-fast-properties-2.0.0.tgz", @@ -837,9 +890,16 @@ "dev": true, "requires": { "esutils": "^2.0.2", + "lodash": "^4.17.11", "to-fast-properties": "^2.0.0" } }, + "lodash": { + "version": "4.17.11", + "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.11.tgz", + "integrity": "sha512-cQKh8igo5QUhZ7lg38DYWAxMvjSAKG0A8wGSVimP07SIUEK2UO+arSRKbRZWtelMtN5V0Hkwh5ryOto/SshYIg==", + "dev": true + }, "to-fast-properties": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/to-fast-properties/-/to-fast-properties-2.0.0.tgz", @@ -901,6 +961,7 @@ "requires": { "@babel/types": "^7.3.4", "jsesc": "^2.5.1", + "lodash": "^4.17.11", "source-map": "^0.5.0", "trim-right": "^1.0.1" } @@ -969,7 +1030,8 @@ "@babel/parser": "^7.3.4", "@babel/types": "^7.3.4", "debug": "^4.1.0", - "globals": "^11.1.0" + "globals": "^11.1.0", + "lodash": "^4.17.11" } }, "@babel/types": { @@ -979,6 +1041,7 @@ "dev": true, "requires": { "esutils": "^2.0.2", + "lodash": "^4.17.11", "to-fast-properties": "^2.0.0" } }, @@ -1029,6 +1092,12 @@ "integrity": "sha512-OYu7XEzjkCQ3C5Ps3QIZsQfNpqoJyZZA99wd9aWd05NCtC5pWOkShK2mkL6HXQR6/Cy2lbNdPlZBpuQHXE63gA==", "dev": true }, + "lodash": { + "version": "4.17.11", + "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.11.tgz", + "integrity": "sha512-cQKh8igo5QUhZ7lg38DYWAxMvjSAKG0A8wGSVimP07SIUEK2UO+arSRKbRZWtelMtN5V0Hkwh5ryOto/SshYIg==", + "dev": true + }, "ms": { "version": "2.1.1", "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.1.tgz", @@ -1081,6 +1150,7 @@ "requires": { "@babel/types": "^7.3.4", "jsesc": "^2.5.1", + "lodash": "^4.17.11", "source-map": "^0.5.0", "trim-right": "^1.0.1" } @@ -1149,7 +1219,8 @@ "@babel/parser": "^7.3.4", "@babel/types": "^7.3.4", "debug": "^4.1.0", - "globals": "^11.1.0" + "globals": "^11.1.0", + "lodash": "^4.17.11" } }, "@babel/types": { @@ -1159,6 +1230,7 @@ "dev": true, "requires": { "esutils": "^2.0.2", + "lodash": "^4.17.11", "to-fast-properties": "^2.0.0" } }, @@ -1209,6 +1281,12 @@ "integrity": "sha512-OYu7XEzjkCQ3C5Ps3QIZsQfNpqoJyZZA99wd9aWd05NCtC5pWOkShK2mkL6HXQR6/Cy2lbNdPlZBpuQHXE63gA==", "dev": true }, + "lodash": { + "version": "4.17.11", + "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.11.tgz", + "integrity": "sha512-cQKh8igo5QUhZ7lg38DYWAxMvjSAKG0A8wGSVimP07SIUEK2UO+arSRKbRZWtelMtN5V0Hkwh5ryOto/SshYIg==", + "dev": true + }, "ms": { "version": "2.1.1", "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.1.tgz", @@ -1280,6 +1358,7 @@ "dev": true, "requires": { "esutils": "^2.0.2", + "lodash": "^4.17.11", "to-fast-properties": "^2.0.0" } }, @@ -1309,6 +1388,12 @@ "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==", "dev": true }, + "lodash": { + "version": "4.17.11", + "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.11.tgz", + "integrity": "sha512-cQKh8igo5QUhZ7lg38DYWAxMvjSAKG0A8wGSVimP07SIUEK2UO+arSRKbRZWtelMtN5V0Hkwh5ryOto/SshYIg==", + "dev": true + }, "supports-color": { "version": "5.5.0", "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz", @@ -1364,6 +1449,7 @@ "requires": { "@babel/types": "^7.3.4", "jsesc": "^2.5.1", + "lodash": "^4.17.11", "source-map": "^0.5.0", "trim-right": "^1.0.1" } @@ -1432,7 +1518,8 @@ "@babel/parser": "^7.3.4", "@babel/types": "^7.3.4", "debug": "^4.1.0", - "globals": "^11.1.0" + "globals": "^11.1.0", + "lodash": "^4.17.11" } }, "@babel/types": { @@ -1442,6 +1529,7 @@ "dev": true, "requires": { "esutils": "^2.0.2", + "lodash": "^4.17.11", "to-fast-properties": "^2.0.0" } }, @@ -1492,6 +1580,12 @@ "integrity": "sha512-OYu7XEzjkCQ3C5Ps3QIZsQfNpqoJyZZA99wd9aWd05NCtC5pWOkShK2mkL6HXQR6/Cy2lbNdPlZBpuQHXE63gA==", "dev": true }, + "lodash": { + "version": "4.17.11", + "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.11.tgz", + "integrity": "sha512-cQKh8igo5QUhZ7lg38DYWAxMvjSAKG0A8wGSVimP07SIUEK2UO+arSRKbRZWtelMtN5V0Hkwh5ryOto/SshYIg==", + "dev": true + }, "ms": { "version": "2.1.1", "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.1.tgz", @@ -1797,6 +1891,7 @@ "dev": true, "requires": { "esutils": "^2.0.2", + "lodash": "^4.17.11", "to-fast-properties": "^2.0.0" } }, @@ -1832,6 +1927,12 @@ "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==", "dev": true }, + "lodash": { + "version": "4.17.11", + "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.11.tgz", + "integrity": "sha512-cQKh8igo5QUhZ7lg38DYWAxMvjSAKG0A8wGSVimP07SIUEK2UO+arSRKbRZWtelMtN5V0Hkwh5ryOto/SshYIg==", + "dev": true + }, "supports-color": { "version": "5.5.0", "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz", @@ -1990,6 +2091,7 @@ "dev": true, "requires": { "esutils": "^2.0.2", + "lodash": "^4.17.11", "to-fast-properties": "^2.0.0" } }, @@ -2019,6 +2121,12 @@ "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==", "dev": true }, + "lodash": { + "version": "4.17.11", + "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.11.tgz", + "integrity": "sha512-cQKh8igo5QUhZ7lg38DYWAxMvjSAKG0A8wGSVimP07SIUEK2UO+arSRKbRZWtelMtN5V0Hkwh5ryOto/SshYIg==", + "dev": true + }, "supports-color": { "version": "5.5.0", "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz", @@ -2141,9 +2249,16 @@ "dev": true, "requires": { "esutils": "^2.0.2", + "lodash": "^4.17.11", "to-fast-properties": "^2.0.0" } }, + "lodash": { + "version": "4.17.11", + "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.11.tgz", + "integrity": "sha512-cQKh8igo5QUhZ7lg38DYWAxMvjSAKG0A8wGSVimP07SIUEK2UO+arSRKbRZWtelMtN5V0Hkwh5ryOto/SshYIg==", + "dev": true + }, "to-fast-properties": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/to-fast-properties/-/to-fast-properties-2.0.0.tgz", @@ -2705,6 +2820,27 @@ } } }, + "adjust-sourcemap-loader": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/adjust-sourcemap-loader/-/adjust-sourcemap-loader-2.0.0.tgz", + "integrity": "sha512-4hFsTsn58+YjrU9qKzML2JSSDqKvN8mUGQ0nNIrfPi8hmIONT4L3uUaT6MKdMsZ9AjsU6D2xDkZxCkbQPxChrA==", + "dev": true, + "requires": { + "assert": "1.4.1", + "camelcase": "5.0.0", + "loader-utils": "1.2.3", + "object-path": "0.11.4", + "regex-parser": "2.2.10" + }, + "dependencies": { + "camelcase": { + "version": "5.0.0", + "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-5.0.0.tgz", + "integrity": "sha512-faqwZqnWxbxn+F1d399ygeamQNy3lPp/H9H6rNrqYh4FSVCtcY+3cub1MxA8o9mDd55mM8Aghuu/kuyYA6VTsA==", + "dev": true + } + } + }, "ajv": { "version": "5.5.2", "resolved": "https://registry.npmjs.org/ajv/-/ajv-5.5.2.tgz", @@ -2828,6 +2964,12 @@ "commander": "^2.11.0" } }, + "arity-n": { + "version": "1.0.4", + "resolved": "https://registry.npmjs.org/arity-n/-/arity-n-1.0.4.tgz", + "integrity": "sha1-2edrEXM+CFacCEeuezmyhgswt0U=", + "dev": true + }, "arr-diff": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/arr-diff/-/arr-diff-4.0.0.tgz", @@ -3018,6 +3160,22 @@ } } }, + "autoresponsive-core": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/autoresponsive-core/-/autoresponsive-core-1.0.1.tgz", + "integrity": "sha512-sNmRjQWslRJFOHRF7tEtqHU4MH4FDHN46vYdScfYRctSkCc4Ksqs5jKiDRXkFIdSJ4XWWcboq92567S74IKFSQ==", + "dev": true + }, + "autoresponsive-react": { + "version": "1.1.31", + "resolved": "https://registry.npmjs.org/autoresponsive-react/-/autoresponsive-react-1.1.31.tgz", + "integrity": "sha512-aHzbT8Zr5Aaj0uQ6Zbf5552ojwTrfc3smOr8QW2ng9iAB6UxGRyYBg3jAvsezICzvLlmFk0g+n3i0px8SUS3Vw==", + "dev": true, + "requires": { + "autoresponsive-core": "^1.0.1", + "exenv": "^1.2.0" + } + }, "awesome-typescript-loader": { "version": "5.2.1", "resolved": "https://registry.npmjs.org/awesome-typescript-loader/-/awesome-typescript-loader-5.2.1.tgz", @@ -4228,6 +4386,11 @@ "integrity": "sha1-3DQxT05nkxgJP8dgJyUl+UvyXBY=", "dev": true }, + "batch-processor": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/batch-processor/-/batch-processor-1.0.0.tgz", + "integrity": "sha1-dclcMrdI4IUNEMKxaPa9vpiRrOg=" + }, "bcrypt-pbkdf": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/bcrypt-pbkdf/-/bcrypt-pbkdf-1.0.1.tgz", @@ -4324,6 +4487,11 @@ "integrity": "sha1-aN/1++YMUes3cl6p4+0xDcwed24=", "dev": true }, + "bowser": { + "version": "1.9.4", + "resolved": "https://registry.npmjs.org/bowser/-/bowser-1.9.4.tgz", + "integrity": "sha512-9IdMmj2KjigRq6oWhmwv1W36pDuA4STQZ8q6YO9um+x07xgYNCD3Oou+WP/3L1HNz7iqythGet3/p4wvc8AAwQ==" + }, "brace-expansion": { "version": "1.1.11", "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz", @@ -4663,6 +4831,11 @@ "resolved": "https://registry.npmjs.org/caseless/-/caseless-0.12.0.tgz", "integrity": "sha1-G2gcIf+EAzyCZUMJBolCDRhxUdw=" }, + "chain-function": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/chain-function/-/chain-function-1.0.1.tgz", + "integrity": "sha512-SxltgMwL9uCko5/ZCLiyG2B7R9fY4pDZUw7hJ4MhirdjBLosoDqkWABi3XMucddHdLiFJMb7PD2MZifZriuMTg==" + }, "chalk": { "version": "1.1.3", "resolved": "https://registry.npmjs.org/chalk/-/chalk-1.1.3.tgz", @@ -4961,6 +5134,15 @@ "integrity": "sha1-E3kY1teCg/ffemt8WmPhQOaUJeY=", "dev": true }, + "compose-function": { + "version": "3.0.3", + "resolved": "https://registry.npmjs.org/compose-function/-/compose-function-3.0.3.tgz", + "integrity": "sha1-ntZ18TzFRQHTCVCkhv9qe6OrGF8=", + "dev": true, + "requires": { + "arity-n": "^1.0.4" + } + }, "compressible": { "version": "2.0.16", "resolved": "https://registry.npmjs.org/compressible/-/compressible-2.0.16.tgz", @@ -5287,6 +5469,26 @@ "randomfill": "^1.0.3" } }, + "css": { + "version": "2.2.4", + "resolved": "https://registry.npmjs.org/css/-/css-2.2.4.tgz", + "integrity": "sha512-oUnjmWpy0niI3x/mPL8dVEI1l7MnG3+HHyRPHf+YFSbK+svOhXpmSOcDURUh2aOCgl2grzrOPt1nHLuCVFULLw==", + "dev": true, + "requires": { + "inherits": "^2.0.3", + "source-map": "^0.6.1", + "source-map-resolve": "^0.5.2", + "urix": "^0.1.0" + }, + "dependencies": { + "source-map": { + "version": "0.6.1", + "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz", + "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==", + "dev": true + } + } + }, "css-color-names": { "version": "0.0.4", "resolved": "https://registry.npmjs.org/css-color-names/-/css-color-names-0.0.4.tgz", @@ -5362,6 +5564,15 @@ } } }, + "css-in-js-utils": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/css-in-js-utils/-/css-in-js-utils-2.0.1.tgz", + "integrity": "sha512-PJF0SpJT+WdbVVt0AOYp9C8GnuruRlL/UFW7932nLWmFLQTaWEzTBQEx7/hn4BuV+WON75iAViSUJLiU3PKbpA==", + "requires": { + "hyphenate-style-name": "^1.0.2", + "isobject": "^3.0.1" + } + }, "css-loader": { "version": "0.28.11", "resolved": "https://registry.npmjs.org/css-loader/-/css-loader-0.28.11.tgz", @@ -5705,7 +5916,8 @@ }, "js-yaml": { "version": "3.12.2", - "resolved": "", + "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-3.12.2.tgz", + "integrity": "sha512-QHn/Lh/7HhZ/Twc7vJYQTkjuCa0kaCcDcjK5Zlk2rvnUpy7DxMJ23+Jc2dcyvltwQVg1nygAVlB2oRDFHoRS5Q==", "dev": true, "requires": { "argparse": "^1.0.7", @@ -6399,6 +6611,14 @@ "utila": "~0.4" } }, + "dom-helpers": { + "version": "3.4.0", + "resolved": "https://registry.npmjs.org/dom-helpers/-/dom-helpers-3.4.0.tgz", + "integrity": "sha512-LnuPJ+dwqKDIyotW1VzmOZ5TONUN7CwkCR5hrgawTUbkBGYdeoNLZo6nNfGkCrjtE1nXXaj7iMMpDa8/d9WoIA==", + "requires": { + "@babel/runtime": "^7.1.2" + } + }, "dom-serializer": { "version": "0.1.1", "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-0.1.1.tgz", @@ -6466,6 +6686,14 @@ "stream-shift": "^1.0.0" } }, + "easy-css-transform-builder": { + "version": "0.0.2", + "resolved": "https://registry.npmjs.org/easy-css-transform-builder/-/easy-css-transform-builder-0.0.2.tgz", + "integrity": "sha1-pUFmenkZ4X9n2CsR08tV/dVDMCI=", + "requires": { + "invariant": "^2.2.2" + } + }, "ecc-jsbn": { "version": "0.1.1", "resolved": "https://registry.npmjs.org/ecc-jsbn/-/ecc-jsbn-0.1.1.tgz", @@ -6487,6 +6715,14 @@ "integrity": "sha512-mN2qeapQWdi2B9uddxTZ4nl80y46hbyKY5Wt9Yjih+QZFQLdaujEDK4qJky35WhyxMzHF3ZY41Lgjd2BPDuBhg==", "dev": true }, + "element-resize-detector": { + "version": "1.1.15", + "resolved": "https://registry.npmjs.org/element-resize-detector/-/element-resize-detector-1.1.15.tgz", + "integrity": "sha512-16/5avDegXlUxytGgaumhjyQoM6hpp5j3+L79sYq5hlXfTNRy5WMMuTVWkZU3egp/CokCmTmvf18P3KeB57Iog==", + "requires": { + "batch-processor": "^1.0.0" + } + }, "elliptic": { "version": "6.4.1", "resolved": "https://registry.npmjs.org/elliptic/-/elliptic-6.4.1.tgz", @@ -7041,6 +7277,11 @@ "integrity": "sha1-Qa4u62XvpiJorr/qg6x9eSmbCIc=", "dev": true }, + "ev-emitter": { + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/ev-emitter/-/ev-emitter-1.1.1.tgz", + "integrity": "sha512-ipiDYhdQSCZ4hSbX4rMW+XzNKMD1prg/sTvoVmSLkuQ1MVlwjJQQA+sW8tMYR3BLUr9KjodFV4pvzunvRhd33Q==" + }, "eventemitter3": { "version": "3.1.0", "resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-3.1.0.tgz", @@ -7102,6 +7343,11 @@ } } }, + "exenv": { + "version": "1.2.2", + "resolved": "https://registry.npmjs.org/exenv/-/exenv-1.2.2.tgz", + "integrity": "sha1-KueOhdmJQVhnCwPUe+wfA72Ru50=" + }, "expand-brackets": { "version": "2.1.4", "resolved": "https://registry.npmjs.org/expand-brackets/-/expand-brackets-2.1.4.tgz", @@ -8730,6 +8976,11 @@ "integrity": "sha1-7AbBDgo0wPL68Zn3/X/Hj//QPHM=", "dev": true }, + "hyphenate-style-name": { + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/hyphenate-style-name/-/hyphenate-style-name-1.0.3.tgz", + "integrity": "sha512-EcuixamT82oplpoJ2XU4pDtKGWQ7b00CD9f1ug9IaQ3p1bkHMiKCZ9ut9QDI6qsa6cpUuB+A/I+zLtdNK4n2DQ==" + }, "iconv-lite": { "version": "0.4.21", "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.21.tgz", @@ -8834,6 +9085,14 @@ "integrity": "sha1-Cd/Uq50g4p6xw+gLiZA3jfnjy5w=", "optional": true }, + "imagesloaded": { + "version": "4.1.4", + "resolved": "https://registry.npmjs.org/imagesloaded/-/imagesloaded-4.1.4.tgz", + "integrity": "sha512-ltiBVcYpc/TYTF5nolkMNsnREHW+ICvfQ3Yla2Sgr71YFwQ86bDwV9hgpFhFtrGPuwEx5+LqOHIrdXBdoWwwsA==", + "requires": { + "ev-emitter": "^1.0.0" + } + }, "immutable": { "version": "3.8.2", "resolved": "https://registry.npmjs.org/immutable/-/immutable-3.8.2.tgz", @@ -8987,6 +9246,15 @@ "integrity": "sha512-RZY5huIKCMRWDUqZlEi72f/lmXKMvuszcMBduliQ3nnWbx9X/ZBQO7DijMEYS9EhHBb2qacRUMtC7svLwe0lcw==", "dev": true }, + "inline-style-prefixer": { + "version": "3.0.8", + "resolved": "https://registry.npmjs.org/inline-style-prefixer/-/inline-style-prefixer-3.0.8.tgz", + "integrity": "sha1-hVG45bTVcyROZqNLBPfTIHaitTQ=", + "requires": { + "bowser": "^1.7.3", + "css-in-js-utils": "^2.0.0" + } + }, "inquirer": { "version": "3.3.0", "resolved": "https://registry.npmjs.org/inquirer/-/inquirer-3.3.0.tgz", @@ -9946,6 +10214,11 @@ } } }, + "lodash": { + "version": "4.17.11", + "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.11.tgz", + "integrity": "sha512-cQKh8igo5QUhZ7lg38DYWAxMvjSAKG0A8wGSVimP07SIUEK2UO+arSRKbRZWtelMtN5V0Hkwh5ryOto/SshYIg==" + }, "lodash.assign": { "version": "4.2.0", "resolved": "https://registry.npmjs.org/lodash.assign/-/lodash.assign-4.2.0.tgz", @@ -9962,12 +10235,22 @@ "resolved": "https://registry.npmjs.org/lodash.clonedeep/-/lodash.clonedeep-4.5.0.tgz", "integrity": "sha1-4j8/nE+Pvd6HJSnBBxhXoIblzO8=" }, + "lodash.debounce": { + "version": "4.0.8", + "resolved": "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-4.0.8.tgz", + "integrity": "sha1-gteb/zCmfEAF/9XiUVMArZyk168=" + }, "lodash.get": { "version": "4.4.2", "resolved": "https://registry.npmjs.org/lodash.get/-/lodash.get-4.4.2.tgz", "integrity": "sha1-LRd/ZS+jHpObRDjVNBSZ36OCXpk=", "dev": true }, + "lodash.isequal": { + "version": "4.5.0", + "resolved": "https://registry.npmjs.org/lodash.isequal/-/lodash.isequal-4.5.0.tgz", + "integrity": "sha1-QVxEePK8wwEgwizhDtMib30+GOA=" + }, "lodash.memoize": { "version": "4.1.2", "resolved": "https://registry.npmjs.org/lodash.memoize/-/lodash.memoize-4.1.2.tgz", @@ -9984,6 +10267,11 @@ "resolved": "https://registry.npmjs.org/lodash.tail/-/lodash.tail-4.1.1.tgz", "integrity": "sha1-0jM6NtnncXyK0vfKyv7HwytERmQ=" }, + "lodash.throttle": { + "version": "4.1.1", + "resolved": "https://registry.npmjs.org/lodash.throttle/-/lodash.throttle-4.1.1.tgz", + "integrity": "sha1-wj6RtxAkKscMN/HhzaknTMOb8vQ=" + }, "lodash.uniq": { "version": "4.5.0", "resolved": "https://registry.npmjs.org/lodash.uniq/-/lodash.uniq-4.5.0.tgz", @@ -11080,6 +11368,12 @@ "integrity": "sha1-xUYBd4rVYPEULODgG8yotW0TQm0=", "dev": true }, + "object-path": { + "version": "0.11.4", + "resolved": "https://registry.npmjs.org/object-path/-/object-path-0.11.4.tgz", + "integrity": "sha1-NwrnUvvzfePqcKhhwju6iRVpGUk=", + "dev": true + }, "object-visit": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/object-visit/-/object-visit-1.0.1.tgz", @@ -12906,6 +13200,11 @@ "performance-now": "^2.1.0" } }, + "raleway-cyrillic": { + "version": "4.0.2", + "resolved": "https://registry.npmjs.org/raleway-cyrillic/-/raleway-cyrillic-4.0.2.tgz", + "integrity": "sha1-HcKzrqYwKwhTbs7jGIyS0li4jOE=" + }, "ramda": { "version": "0.24.1", "resolved": "https://registry.npmjs.org/ramda/-/ramda-0.24.1.tgz", @@ -13033,6 +13332,27 @@ } } }, + "react-draggable": { + "version": "3.2.1", + "resolved": "https://registry.npmjs.org/react-draggable/-/react-draggable-3.2.1.tgz", + "integrity": "sha512-r+3Bs9InID2lyIEbR8UIRVtpn4jgu1ArFEZgIy8vibJjijLSdNLX7rH9U68BBVD4RD9v44RXbaK4EHLyKXzNQw==", + "requires": { + "classnames": "^2.2.5", + "prop-types": "^15.6.0" + } + }, + "react-grid-layout": { + "version": "0.16.6", + "resolved": "https://registry.npmjs.org/react-grid-layout/-/react-grid-layout-0.16.6.tgz", + "integrity": "sha512-h2EsYgsqcESLJeevQSJsEKp8hhh+phOlXDJoMhlV2e7T3VWQL+S6iCF3iD/LK19r4oyRyOMDEir0KV+eLXrAyw==", + "requires": { + "classnames": "2.x", + "lodash.isequal": "^4.0.0", + "prop-types": "15.x", + "react-draggable": "3.x", + "react-resizable": "1.x" + } + }, "react-hot-loader": { "version": "4.8.0", "resolved": "https://registry.npmjs.org/react-hot-loader/-/react-hot-loader-4.8.0.tgz", @@ -13102,6 +13422,14 @@ "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.8.4.tgz", "integrity": "sha512-PVadd+WaUDOAciICm/J1waJaSvgq+4rHE/K70j0PFqKhkTBsPv/82UGQJNXAngz1fOQLLxI6z1sEDmJDQhCTAA==" }, + "react-layout-pack": { + "version": "0.2.3", + "resolved": "https://registry.npmjs.org/react-layout-pack/-/react-layout-pack-0.2.3.tgz", + "integrity": "sha1-/Bw/1EsX8u55l9xzrJuKRRvf3bQ=", + "requires": { + "in-publish": "^2.0.0" + } + }, "react-lifecycles-compat": { "version": "3.0.4", "resolved": "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz", @@ -13124,6 +13452,21 @@ } } }, + "react-packery-component": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/react-packery-component/-/react-packery-component-1.0.2.tgz", + "integrity": "sha1-FSEiHaSRZ8s87fR9W1UsM0iBgKk=", + "dependencies": { + "imagesloaded": { + "version": "git+https://github.com/eiriklv/imagesloaded.git#04535a148206e58790927e133f24ca199163b995", + "from": "git+https://github.com/eiriklv/imagesloaded.git", + "requires": { + "eventie": ">=1.0.4 <2", + "wolfy87-eventemitter": "4.x" + } + } + } + }, "react-redux": { "version": "6.0.1", "resolved": "https://registry.npmjs.org/react-redux/-/react-redux-6.0.1.tgz", @@ -13165,6 +13508,15 @@ } } }, + "react-resizable": { + "version": "1.7.5", + "resolved": "https://registry.npmjs.org/react-resizable/-/react-resizable-1.7.5.tgz", + "integrity": "sha512-lauPcBsLqmxMHXHpTeOBpYenGalbSikYr8hK+lwtNYMQX1pGd2iYE+pDvZEV97nCnzuCtWM9htp7OpsBIY2Sjw==", + "requires": { + "prop-types": "15.x", + "react-draggable": "^2.2.6 || ^3.0.3" + } + }, "react-router": { "version": "4.3.1", "resolved": "https://registry.npmjs.org/react-router/-/react-router-4.3.1.tgz", @@ -13222,6 +13574,46 @@ "react-motion": "^0.5.2" } }, + "react-sizeme": { + "version": "2.5.2", + "resolved": "https://registry.npmjs.org/react-sizeme/-/react-sizeme-2.5.2.tgz", + "integrity": "sha512-hYvcncV1FxVzPm2EhVwlOLf7Tk+k/ttO6rI7bfKUL/aL1gYzrY3DXJsdZ6nFaFgGSU/i8KC6gCoptOhBbRJpXQ==", + "requires": { + "element-resize-detector": "^1.1.12", + "invariant": "^2.2.2", + "lodash.debounce": "^4.0.8", + "lodash.throttle": "^4.1.1", + "shallowequal": "^1.0.2" + } + }, + "react-stack-grid": { + "version": "0.7.1", + "resolved": "https://registry.npmjs.org/react-stack-grid/-/react-stack-grid-0.7.1.tgz", + "integrity": "sha512-Fw7qMt5Rd9wQpNCnvK4Gi+ry/nL5rKfzP2hGsw5/DZxArEMk60VoDLy68Uskq09l6wk7qb2w7P2+lNzSd9mYEw==", + "requires": { + "easy-css-transform-builder": "^0.0.2", + "exenv": "^1.2.1", + "imagesloaded": "^4.1.1", + "inline-style-prefixer": "^3.0.6", + "invariant": "^2.2.2", + "prop-types": "^15.5.10", + "react-sizeme": "^2.2.0", + "react-transition-group": "^1.2.0", + "shallowequal": "^1.0.1" + } + }, + "react-transition-group": { + "version": "1.2.1", + "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-1.2.1.tgz", + "integrity": "sha512-CWaL3laCmgAFdxdKbhhps+c0HRGF4c+hdM4H23+FI1QBNUyx/AMeIJGWorehPNSaKnQNOAxL7PQmqMu78CDj3Q==", + "requires": { + "chain-function": "^1.0.0", + "dom-helpers": "^3.2.0", + "loose-envify": "^1.3.1", + "prop-types": "^15.5.6", + "warning": "^3.0.0" + } + }, "read-pkg": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-2.0.0.tgz", @@ -13410,6 +13802,12 @@ "safe-regex": "^1.1.0" } }, + "regex-parser": { + "version": "2.2.10", + "resolved": "https://registry.npmjs.org/regex-parser/-/regex-parser-2.2.10.tgz", + "integrity": "sha512-8t6074A68gHfU8Neftl0Le6KTDwfGAj7IyjPIMSfikI2wJUTHDMaIq42bUsfVnj8mhx0R+45rdUXHGpN164avA==", + "dev": true + }, "regexp-tree": { "version": "0.1.5", "resolved": "https://registry.npmjs.org/regexp-tree/-/regexp-tree-0.1.5.tgz", @@ -13740,6 +14138,98 @@ "integrity": "sha1-LGN/53yJOv0qZj/iGqkIAGjiBSo=", "dev": true }, + "resolve-url-loader": { + "version": "3.0.1", + "resolved": "https://registry.npmjs.org/resolve-url-loader/-/resolve-url-loader-3.0.1.tgz", + "integrity": "sha512-oBFayx/K2hUKdQ47USSHsmjP8+oQlNG5Vx+OYpTba+M1LNBCcMXc5/mR16RLDCtbM68rk0Rc9cDJfHT+BipAXQ==", + "dev": true, + "requires": { + "adjust-sourcemap-loader": "2.0.0", + "camelcase": "5.0.0", + "compose-function": "3.0.3", + "convert-source-map": "1.6.0", + "es6-iterator": "2.0.3", + "loader-utils": "1.2.3", + "postcss": "7.0.14", + "rework": "1.0.1", + "rework-visit": "1.0.0", + "source-map": "0.6.1" + }, + "dependencies": { + "ansi-styles": { + "version": "3.2.1", + "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz", + "integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==", + "dev": true, + "requires": { + "color-convert": "^1.9.0" + } + }, + "camelcase": { + "version": "5.0.0", + "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-5.0.0.tgz", + "integrity": "sha512-faqwZqnWxbxn+F1d399ygeamQNy3lPp/H9H6rNrqYh4FSVCtcY+3cub1MxA8o9mDd55mM8Aghuu/kuyYA6VTsA==", + "dev": true + }, + "chalk": { + "version": "2.4.2", + "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz", + "integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==", + "dev": true, + "requires": { + "ansi-styles": "^3.2.1", + "escape-string-regexp": "^1.0.5", + "supports-color": "^5.3.0" + }, + "dependencies": { + "supports-color": { + "version": "5.5.0", + "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz", + "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==", + "dev": true, + "requires": { + "has-flag": "^3.0.0" + } + } + } + }, + "convert-source-map": { + "version": "1.6.0", + "resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-1.6.0.tgz", + "integrity": "sha512-eFu7XigvxdZ1ETfbgPBohgyQ/Z++C0eEhTor0qRwBw9unw+L0/6V8wkSuGgzdThkiS5lSpdptOQPD8Ak40a+7A==", + "dev": true, + "requires": { + "safe-buffer": "~5.1.1" + } + }, + "postcss": { + "version": "7.0.14", + "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.14.tgz", + "integrity": "sha512-NsbD6XUUMZvBxtQAJuWDJeeC4QFsmWsfozWxCJPWf3M55K9iu2iMDaKqyoOdTJ1R4usBXuxlVFAIo8rZPQD4Bg==", + "dev": true, + "requires": { + "chalk": "^2.4.2", + "source-map": "^0.6.1", + "supports-color": "^6.1.0" + } + }, + "source-map": { + "version": "0.6.1", + "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz", + "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==", + "dev": true + }, + "supports-color": { + "version": "6.1.0", + "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-6.1.0.tgz", + "integrity": "sha512-qe1jfm1Mg7Nq/NSh6XE24gPXROEVsWHxC1LIx//XNlD9iw7YZQGjZNjYN7xGaEG6iKdA8EtNFW6R0gjnVXp+wQ==", + "dev": true, + "requires": { + "has-flag": "^3.0.0" + } + } + } + }, "restore-cursor": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/restore-cursor/-/restore-cursor-2.0.0.tgz", @@ -13756,6 +14246,30 @@ "integrity": "sha512-TTlYpa+OL+vMMNG24xSlQGEJ3B/RzEfUlLct7b5G/ytav+wPrplCpVMFuwzXbkecJrb6IYo1iFb0S9v37754mg==", "dev": true }, + "rework": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/rework/-/rework-1.0.1.tgz", + "integrity": "sha1-MIBqhBNCtUUQqkEQhQzUhTQUSqc=", + "dev": true, + "requires": { + "convert-source-map": "^0.3.3", + "css": "^2.0.0" + }, + "dependencies": { + "convert-source-map": { + "version": "0.3.5", + "resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-0.3.5.tgz", + "integrity": "sha1-8dgClQr33SYxof6+BZZVDIarMZA=", + "dev": true + } + } + }, + "rework-visit": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/rework-visit/-/rework-visit-1.0.0.tgz", + "integrity": "sha1-mUWygD8hni96ygCtuLyfZA+ELJo=", + "dev": true + }, "rgb-regex": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/rgb-regex/-/rgb-regex-1.0.1.tgz", @@ -13992,7 +14506,15 @@ "async": { "version": "2.6.2", "resolved": "https://registry.npmjs.org/async/-/async-2.6.2.tgz", - "integrity": "sha512-H1qVYh1MYhEEFLsP97cVKqCGo7KfCyTt6uEWqsTBr9SO84oK9Uwbyd/yCW+6rKJLHksBNUVWZDAjfS+Ccx0Bbg==" + "integrity": "sha512-H1qVYh1MYhEEFLsP97cVKqCGo7KfCyTt6uEWqsTBr9SO84oK9Uwbyd/yCW+6rKJLHksBNUVWZDAjfS+Ccx0Bbg==", + "requires": { + "lodash": "^4.17.11" + } + }, + "lodash": { + "version": "4.17.11", + "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.11.tgz", + "integrity": "sha512-cQKh8igo5QUhZ7lg38DYWAxMvjSAKG0A8wGSVimP07SIUEK2UO+arSRKbRZWtelMtN5V0Hkwh5ryOto/SshYIg==" } } }, diff --git a/package.json b/package.json index aa4d5744..80c8f394 100644 --- a/package.json +++ b/package.json @@ -16,6 +16,7 @@ "devDependencies": { "@babel/cli": "^7.0.0-rc.1", "@babel/preset-env": "^7.0.0-rc.1", + "autoresponsive-react": "^1.1.31", "awesome-typescript-loader": "^5.2.1", "babel-core": "^6.26.3", "babel-eslint": "^8.2.3", @@ -42,6 +43,7 @@ "mini-css-extract-plugin": "^0.5.0", "optimize-css-assets-webpack-plugin": "^5.0.1", "path": "^0.12.7", + "resolve-url-loader": "^3.0.1", "style-loader": "^0.21.0", "ts-node": "^8.0.1", "typescript": "^3.2.4", @@ -67,13 +69,18 @@ "less-middleware": "~2.2.1", "lodash": "^4.17.10", "node-sass": "^4.11.0", + "raleway-cyrillic": "^4.0.2", "react": "16.8.1", "react-dom": "16.8.1", + "react-grid-layout": "^0.16.6", "react-hot-loader": "^4.1.1", + "react-layout-pack": "^0.2.3", + "react-packery-component": "^1.0.2", "react-redux": "^6.0.1", "react-router": "^4.3.1", "react-router-dom": "^4.3.1", "react-scrollbar": "^0.5.4", + "react-stack-grid": "^0.7.1", "redux": "^4.0.1", "redux-persist": "^5.10.0", "redux-saga": "^0.16.2", diff --git a/src/components/flow/HeroPlaceholder/index.tsx b/src/components/flow/HeroPlaceholder/index.tsx new file mode 100644 index 00000000..1f233721 --- /dev/null +++ b/src/components/flow/HeroPlaceholder/index.tsx @@ -0,0 +1,7 @@ +import * as React from 'react'; +const style = require('./style.scss'); + +export const HeroPlaceholder = () => ( +
+
+); diff --git a/src/components/flow/HeroPlaceholder/style.scss b/src/components/flow/HeroPlaceholder/style.scss new file mode 100644 index 00000000..ae7a9405 --- /dev/null +++ b/src/components/flow/HeroPlaceholder/style.scss @@ -0,0 +1,9 @@ +.container { + height: 280px; + width: 100%; + background: transparentize(white, 0.9) url("http://37.192.131.144/hero/photos/photo-20140527-1639766.jpg") no-repeat 50% 30%; + background-size: cover; + opacity: 0.7; + //box-shadow: white 0 0 0 1px; + //border-radius: $panel_radius $panel_radius 0 0; +} diff --git a/src/components/flow/TestGrid/index.tsx b/src/components/flow/TestGrid/index.tsx new file mode 100644 index 00000000..b59be9a8 --- /dev/null +++ b/src/components/flow/TestGrid/index.tsx @@ -0,0 +1,72 @@ +import * as React from 'react'; +import classnames from 'classnames'; +// import * as AutoResponsive from 'autoresponsive-react'; +// const ReactGridLayout = require('react-grid-layout'); +// import 'react-grid-layout/css/styles.css'; +// import 'react-resizable/css/styles.css'; + +const style = require('./style.scss'); +// const Packery = require('react-packery-component')(React); +// http://37.192.131.144/hero/photos/photo-20120825-1532512.jpg + +export const TestGrid = () => ( +
+
+
+
+
+
+
+
+
+
+
+
+); + +// export const TestGrid = () => ( +// +//
+//
+//
+//
+//
+//
+//
+// +// ); + +// export const TestGrid = () => ( +// +//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+// +// ); diff --git a/src/components/flow/TestGrid/style.scss b/src/components/flow/TestGrid/style.scss new file mode 100644 index 00000000..fcb9018e --- /dev/null +++ b/src/components/flow/TestGrid/style.scss @@ -0,0 +1,52 @@ +.grid { + //display: grid; + padding: $gap / 2; + margin: 0 (-$gap / 2); +} + +.grid_test { + width: 1024px; + display: grid; + grid-template-columns: repeat(5, 256px); + grid-template-rows: repeat(2, 256px); + grid-auto-rows: 256px; + grid-auto-flow: row dense; +} + +.cell { + padding: $gap / 4; + box-sizing: border-box; + display: flex; + flex: 0 0; + + &::after { + content: ' '; + background: transparentize(white, 0.9); + width: 100%; + height: 100%; + } +} + +.vert_2 { + grid-row-end: span 2; +} + +.vert_3 { + grid-row-end: span 3; +} + +.vert_4 { + grid-row-end: span 3; +} + +.hor_2 { + grid-column-end: span 2; +} + +.hor_3 { + grid-column-end: span 3; +} + +.hor_4 { + grid-column-end: span 4; +} diff --git a/src/components/main/Header/index.tsx b/src/components/main/Header/index.tsx new file mode 100644 index 00000000..4f5b614e --- /dev/null +++ b/src/components/main/Header/index.tsx @@ -0,0 +1,23 @@ +import * as React from 'react'; +const style = require('./style.scss'); +const logo_sm = require('$sprites/logo_sm.svg'); + +export const Header = () => ( +
+
+
+ VAULT +
+
+
+
depth
+
boris
+
flow
+
+
+
+ gvorcek +
+
+
+); diff --git a/src/components/main/Header/style.scss b/src/components/main/Header/style.scss new file mode 100644 index 00000000..f4fa6ea9 --- /dev/null +++ b/src/components/main/Header/style.scss @@ -0,0 +1,57 @@ +.container { + display: flex; + align-items: center; + justify-content: flex-end; + font-weight: 500; + padding: $gap $spc; +} + +.logo { + font-size: 1.4em; + font-weight: 800; + display: flex; +} + +.spacer { + flex: 1; +} + +.plugs { + display: flex; + + > div { + //margin: 8px; + display: flex; + align-items: center; + position: relative; + padding: $gap; + + &::after { + content: ' '; + margin-left: $spc; + background: white; + width: 2px; + height: $gap; + display: block; + } + } +} + +.profile { + padding: 5px 10px; + box-shadow: white 0 0 0 1px; + border-radius: 10px; +} + +.user_button { + padding: 0 $gap; + display: flex; + align-items: center; +} + +.user_avatar { + width: 16px; + height: 16px; + background: transparentize(white, 0.5); + margin-right: $gap; +} diff --git a/src/containers/App.tsx b/src/containers/App.tsx index 59fdf3e2..625c7c13 100644 --- a/src/containers/App.tsx +++ b/src/containers/App.tsx @@ -6,30 +6,22 @@ import { SomeComponent } from '$components/SomeComponent'; import { ConnectedRouter } from "connected-react-router"; import { history } from "$redux/store"; import { NavLink, Switch, Route } from 'react-router-dom'; +import { MainLayout } from "$containers/MainLayout"; +import { FlowLayout } from "$containers/FlowLayout"; interface IAppProps {} interface IAppState {} class Component extends React.Component { - state = { }; - render() { return (
-
- - Root - - - Something - -
( + +
+ +
+ +); diff --git a/src/containers/MainLayout/index.tsx b/src/containers/MainLayout/index.tsx new file mode 100644 index 00000000..4c0a473c --- /dev/null +++ b/src/containers/MainLayout/index.tsx @@ -0,0 +1,11 @@ +import * as React from 'react'; +import { Header } from "$components/main/Header"; + +const style = require('./style.scss'); + +export const MainLayout = ({ children }) => ( +
+
+ {children} +
+); diff --git a/src/containers/MainLayout/style.scss b/src/containers/MainLayout/style.scss new file mode 100644 index 00000000..1936ffb1 --- /dev/null +++ b/src/containers/MainLayout/style.scss @@ -0,0 +1,4 @@ +.wrapper { + width: 100%; + //padding: $gap 0; +} diff --git a/src/index.html b/src/index.html index 7c11151b..6fe9461f 100644 --- a/src/index.html +++ b/src/index.html @@ -4,7 +4,6 @@ - <%= htmlWebpackPlugin.options.title %> diff --git a/src/sprites/circles.svg b/src/sprites/circles.svg new file mode 100644 index 00000000..3d3a4faf --- /dev/null +++ b/src/sprites/circles.svg @@ -0,0 +1,128 @@ + + + + + + + + + + image/svg+xml + + + + + + + + + + + + + + + + + + + + diff --git a/src/sprites/dots.svg b/src/sprites/dots.svg new file mode 100644 index 00000000..94a266e4 --- /dev/null +++ b/src/sprites/dots.svg @@ -0,0 +1,84 @@ + + + + + + + + + + + + image/svg+xml + + + + + + + + + + + diff --git a/src/sprites/logo_sm.svg b/src/sprites/logo_sm.svg new file mode 100644 index 00000000..041bd4c8 --- /dev/null +++ b/src/sprites/logo_sm.svg @@ -0,0 +1,145 @@ + + + + + + + + + + + + + + + + image/svg+xml + + + + + + + + + + + + + + + + + + diff --git a/src/styles/colors.scss b/src/styles/colors.scss index 8b137891..9c0783c6 100644 --- a/src/styles/colors.scss +++ b/src/styles/colors.scss @@ -1 +1,4 @@ +$main_bg_color: #111111; +$main_text_color: white; +$content_bg_color: #191919; diff --git a/src/styles/global.scss b/src/styles/global.scss index 25fa51c5..93b02887 100644 --- a/src/styles/global.scss +++ b/src/styles/global.scss @@ -1,2 +1,47 @@ +@import "~raleway-cyrillic/raleway.css"; + body { + background: $main_bg_color; + background: $main_bg_color url("../sprites/dots.svg"); + //url("http://vault48.org/pixmaps/texture.jpg"); + //background: #111111; + color: $main_text_color; + font-family: Raleway, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; + -webkit-font-smoothing: antialiased; + font-size: 16px; + + &::before { + content: ''; + position: absolute; + height: 100%; + width: 100%; + top: 0; + left: 0; + z-index: -1; + background: url("../sprites/circles.svg"); + pointer-events: none; + background-size: cover; + } +} + +:global(.padded) { + padding: $gap; +} + +:global(.default_container) { + max-width: $content_width; + margin: auto; +} + +:global(.content_container) { + background: $content_bg_color; +} + + +:global(.head_container) { + background: $main_bg_color; +} + +:global(.footer) { + height: 40px; } diff --git a/src/styles/variables.scss b/src/styles/variables.scss index 945c0c7e..5e3de1e5 100644 --- a/src/styles/variables.scss +++ b/src/styles/variables.scss @@ -1 +1,11 @@ @import 'colors'; + +$cell: 256px; +$content_width: $cell * 5; +$gap: 8px; +$spc: $gap * 2; +$panel_radius: 1px; + +@mixin outer_shadow() { + box-shadow: transparentize(white, 0.92) -1px -1px, transparentize(black, 0.8) 1px 1px; +} diff --git a/webpack.config.js b/webpack.config.js index 1cfc55de..8d1bbba7 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -34,7 +34,7 @@ const resolve = { $redux: join(__dirname, 'src/redux'), $utils: join(__dirname, 'src/utils'), }, - extensions: ['*', '.ts', '.tsx', '.js', '.jsx', '.json'] + extensions: ['*', '.ts', '.tsx', '.js', '.jsx', '.json', '.scss'] }; /* Configuration */ @@ -78,7 +78,6 @@ module.exports = () => { test: /\.scss$/, use: [ { loader: isDevelopment ? 'style-loader' : MiniCssExtractPlugin.loader }, - // { loader: 'css-loader' }, { loader: 'css-loader', options: { @@ -88,7 +87,14 @@ module.exports = () => { localIdentName: '[name]__[local]__[hash:base64:5]' } }, - { loader: 'sass-loader' }, + { loader: 'resolve-url-loader' }, + { + loader: 'sass-loader', + options: { + sourceMap: true, + sourceMapContents: false + } + }, { loader: 'sass-resources-loader', options: { @@ -111,7 +117,7 @@ module.exports = () => { loader: 'file-loader', options: { name: '[name].[ext]', - outputPath: 'fonts/' + // outputPath: '/font' } } },