From a691ee1259d8a6d7432f5ad80e6562cb61062970 Mon Sep 17 00:00:00 2001 From: Jernej Pregelj Date: Fri, 3 May 2019 11:28:00 +0200 Subject: [PATCH] grid mobile layout, back button to select --- client/package-lock.json | 120 +++++------------- .../components/atoms/AreaButton.module.scss | 3 +- .../src/components/atoms/AreaButton.test.tsx | 17 +++ client/src/components/atoms/AreaButton.tsx | 8 +- client/src/routes/Publish/Step.tsx | 15 +-- client/src/routes/Publish/index.module.scss | 19 ++- client/src/routes/Publish/index.tsx | 5 +- client/src/routes/Publish/loader.tsx | 3 +- package-lock.json | 2 +- server/package-lock.json | 41 ++---- 10 files changed, 90 insertions(+), 143 deletions(-) diff --git a/client/package-lock.json b/client/package-lock.json index 0e0cd8f..88df907 100644 --- a/client/package-lock.json +++ b/client/package-lock.json @@ -3307,8 +3307,7 @@ "ansi-regex": { "version": "2.1.1", "bundled": true, - "dev": true, - "optional": true + "dev": true }, "aproba": { "version": "1.2.0", @@ -3329,14 +3328,12 @@ "balanced-match": { "version": "1.0.0", "bundled": true, - "dev": true, - "optional": true + "dev": true }, "brace-expansion": { "version": "1.1.11", "bundled": true, "dev": true, - "optional": true, "requires": { "balanced-match": "^1.0.0", "concat-map": "0.0.1" @@ -3351,20 +3348,17 @@ "code-point-at": { "version": "1.1.0", "bundled": true, - "dev": true, - "optional": true + "dev": true }, "concat-map": { "version": "0.0.1", "bundled": true, - "dev": true, - "optional": true + "dev": true }, "console-control-strings": { "version": "1.1.0", "bundled": true, - "dev": true, - "optional": true + "dev": true }, "core-util-is": { "version": "1.0.2", @@ -3481,8 +3475,7 @@ "inherits": { "version": "2.0.3", "bundled": true, - "dev": true, - "optional": true + "dev": true }, "ini": { "version": "1.3.5", @@ -3494,7 +3487,6 @@ "version": "1.0.0", "bundled": true, "dev": true, - "optional": true, "requires": { "number-is-nan": "^1.0.0" } @@ -3509,7 +3501,6 @@ "version": "3.0.4", "bundled": true, "dev": true, - "optional": true, "requires": { "brace-expansion": "^1.1.7" } @@ -3517,14 +3508,12 @@ "minimist": { "version": "0.0.8", "bundled": true, - "dev": true, - "optional": true + "dev": true }, "minipass": { "version": "2.3.5", "bundled": true, "dev": true, - "optional": true, "requires": { "safe-buffer": "^5.1.2", "yallist": "^3.0.0" @@ -3543,7 +3532,6 @@ "version": "0.5.1", "bundled": true, "dev": true, - "optional": true, "requires": { "minimist": "0.0.8" } @@ -3624,8 +3612,7 @@ "number-is-nan": { "version": "1.0.1", "bundled": true, - "dev": true, - "optional": true + "dev": true }, "object-assign": { "version": "4.1.1", @@ -3637,7 +3624,6 @@ "version": "1.4.0", "bundled": true, "dev": true, - "optional": true, "requires": { "wrappy": "1" } @@ -3723,8 +3709,7 @@ "safe-buffer": { "version": "5.1.2", "bundled": true, - "dev": true, - "optional": true + "dev": true }, "safer-buffer": { "version": "2.1.2", @@ -3760,7 +3745,6 @@ "version": "1.0.2", "bundled": true, "dev": true, - "optional": true, "requires": { "code-point-at": "^1.0.0", "is-fullwidth-code-point": "^1.0.0", @@ -3780,7 +3764,6 @@ "version": "3.0.1", "bundled": true, "dev": true, - "optional": true, "requires": { "ansi-regex": "^2.0.0" } @@ -3824,14 +3807,12 @@ "wrappy": { "version": "1.0.2", "bundled": true, - "dev": true, - "optional": true + "dev": true }, "yallist": { "version": "3.0.3", "bundled": true, - "dev": true, - "optional": true + "dev": true } } }, @@ -8613,8 +8594,7 @@ "ansi-regex": { "version": "2.1.1", "bundled": true, - "dev": true, - "optional": true + "dev": true }, "aproba": { "version": "1.2.0", @@ -8635,14 +8615,12 @@ "balanced-match": { "version": "1.0.0", "bundled": true, - "dev": true, - "optional": true + "dev": true }, "brace-expansion": { "version": "1.1.11", "bundled": true, "dev": true, - "optional": true, "requires": { "balanced-match": "^1.0.0", "concat-map": "0.0.1" @@ -8657,20 +8635,17 @@ "code-point-at": { "version": "1.1.0", "bundled": true, - "dev": true, - "optional": true + "dev": true }, "concat-map": { "version": "0.0.1", "bundled": true, - "dev": true, - "optional": true + "dev": true }, "console-control-strings": { "version": "1.1.0", "bundled": true, - "dev": true, - "optional": true + "dev": true }, "core-util-is": { "version": "1.0.2", @@ -8787,8 +8762,7 @@ "inherits": { "version": "2.0.3", "bundled": true, - "dev": true, - "optional": true + "dev": true }, "ini": { "version": "1.3.5", @@ -8800,7 +8774,6 @@ "version": "1.0.0", "bundled": true, "dev": true, - "optional": true, "requires": { "number-is-nan": "^1.0.0" } @@ -8815,7 +8788,6 @@ "version": "3.0.4", "bundled": true, "dev": true, - "optional": true, "requires": { "brace-expansion": "^1.1.7" } @@ -8823,14 +8795,12 @@ "minimist": { "version": "0.0.8", "bundled": true, - "dev": true, - "optional": true + "dev": true }, "minipass": { "version": "2.3.5", "bundled": true, "dev": true, - "optional": true, "requires": { "safe-buffer": "^5.1.2", "yallist": "^3.0.0" @@ -8849,7 +8819,6 @@ "version": "0.5.1", "bundled": true, "dev": true, - "optional": true, "requires": { "minimist": "0.0.8" } @@ -8930,8 +8899,7 @@ "number-is-nan": { "version": "1.0.1", "bundled": true, - "dev": true, - "optional": true + "dev": true }, "object-assign": { "version": "4.1.1", @@ -8943,7 +8911,6 @@ "version": "1.4.0", "bundled": true, "dev": true, - "optional": true, "requires": { "wrappy": "1" } @@ -9029,8 +8996,7 @@ "safe-buffer": { "version": "5.1.2", "bundled": true, - "dev": true, - "optional": true + "dev": true }, "safer-buffer": { "version": "2.1.2", @@ -9066,7 +9032,6 @@ "version": "1.0.2", "bundled": true, "dev": true, - "optional": true, "requires": { "code-point-at": "^1.0.0", "is-fullwidth-code-point": "^1.0.0", @@ -9086,7 +9051,6 @@ "version": "3.0.1", "bundled": true, "dev": true, - "optional": true, "requires": { "ansi-regex": "^2.0.0" } @@ -9130,14 +9094,12 @@ "wrappy": { "version": "1.0.2", "bundled": true, - "dev": true, - "optional": true + "dev": true }, "yallist": { "version": "3.0.3", "bundled": true, - "dev": true, - "optional": true + "dev": true } } } @@ -15473,14 +15435,6 @@ "integrity": "sha1-hnrHTjhkGHsdPUfZlqeOxciDB3c=", "dev": true }, - "typedarray-to-buffer": { - "version": "3.1.5", - "resolved": "https://registry.npmjs.org/typedarray-to-buffer/-/typedarray-to-buffer-3.1.5.tgz", - "integrity": "sha512-zdu8XMNEDepKKR+XYOXAVPtWui0ly0NtohUscw+UmaHiAWT8hrV1rr//H6V+0DvJ3OQ19S979M0laLfX8rm82Q==", - "requires": { - "is-typedarray": "^1.0.0" - } - }, "typescript": { "version": "3.4.4", "resolved": "https://registry.npmjs.org/typescript/-/typescript-3.4.4.tgz", @@ -16274,8 +16228,19 @@ "integrity": "sha512-8p6ZLv+1JYa5Vs8oBn33Nn3VGFBbF+wVfO+b78RJS1Qf1uIOzjFVDk3XwYDD7rlz9G5BKpxhaQw+6EGQ7L02aw==", "requires": { "underscore": "1.8.3", - "web3-core-helpers": "1.0.0-beta.37", - "websocket": "git://github.com/frozeman/WebSocket-Node.git#browserifyCompatible" + "web3-core-helpers": "1.0.0-beta.37" + }, + "dependencies": { + "websocket": { + "version": "git://github.com/frozeman/WebSocket-Node.git#6c72925e3f8aaaea8dc8450f97627e85263999f2", + "from": "git://github.com/frozeman/WebSocket-Node.git#6c72925e3f8aaaea8dc8450f97627e85263999f2", + "requires": { + "debug": "^2.2.0", + "nan": "^2.3.3", + "typedarray-to-buffer": "^3.1.2", + "yaeti": "^0.0.6" + } + } } }, "web3-shh": { @@ -16624,16 +16589,6 @@ "source-map": "~0.6.1" } }, - "websocket": { - "version": "git://github.com/frozeman/WebSocket-Node.git#6c72925e3f8aaaea8dc8450f97627e85263999f2", - "from": "git://github.com/frozeman/WebSocket-Node.git#browserifyCompatible", - "requires": { - "debug": "^2.2.0", - "nan": "^2.3.3", - "typedarray-to-buffer": "^3.1.2", - "yaeti": "^0.0.6" - } - }, "websocket-driver": { "version": "0.7.0", "resolved": "https://registry.npmjs.org/websocket-driver/-/websocket-driver-0.7.0.tgz", @@ -17053,11 +17008,6 @@ "integrity": "sha1-bRX7qITAhnnA136I53WegR4H+kE=", "dev": true }, - "yaeti": { - "version": "0.0.6", - "resolved": "https://registry.npmjs.org/yaeti/-/yaeti-0.0.6.tgz", - "integrity": "sha1-8m9ITXJoTPQr7ft2lwqhYI+/lXc=" - }, "yallist": { "version": "2.1.2", "resolved": "https://registry.npmjs.org/yallist/-/yallist-2.1.2.tgz", diff --git a/client/src/components/atoms/AreaButton.module.scss b/client/src/components/atoms/AreaButton.module.scss index 3efbb63..8b36834 100644 --- a/client/src/components/atoms/AreaButton.module.scss +++ b/client/src/components/atoms/AreaButton.module.scss @@ -5,7 +5,7 @@ word-wrap: break-word; word-break: break-all; - > a { + > div { display: block; height: 100%; padding: $spacer; @@ -14,6 +14,7 @@ background: $brand-white; color: inherit; position: relative; + cursor: pointer; &:hover, &:focus { diff --git a/client/src/components/atoms/AreaButton.test.tsx b/client/src/components/atoms/AreaButton.test.tsx index e69de29..f59d6be 100644 --- a/client/src/components/atoms/AreaButton.test.tsx +++ b/client/src/components/atoms/AreaButton.test.tsx @@ -0,0 +1,17 @@ +import React from 'react' +import { render } from 'react-testing-library' +import AreaButton from './AreaButton' + +describe('AreaButton', () => { + it('renders without crashing', () => { + const { container } = render( + Promise.resolve()} + /> + ) + expect(container.firstChild).toBeInTheDocument() + container.firstChild && expect(container.firstChild.nodeName).toBe('UL') + }) +}) diff --git a/client/src/components/atoms/AreaButton.tsx b/client/src/components/atoms/AreaButton.tsx index 1c2b7c3..84fc94c 100644 --- a/client/src/components/atoms/AreaButton.tsx +++ b/client/src/components/atoms/AreaButton.tsx @@ -4,12 +4,12 @@ import styles from './AreaButton.module.scss' const AreaButton = ({ title, description, action }: { title: string; description: string, action: any }) => { return ( - + + ) } diff --git a/client/src/routes/Publish/Step.tsx b/client/src/routes/Publish/Step.tsx index ec940f5..4601c97 100644 --- a/client/src/routes/Publish/Step.tsx +++ b/client/src/routes/Publish/Step.tsx @@ -46,16 +46,13 @@ interface StepProps { export default class Step extends PureComponent { public previousButton() { - const { currentStep, prev } = this.props + const { prev } = this.props - if (currentStep !== 1) { - return ( - - ) - } - return null + return ( + + ) } public nextButton() { diff --git a/client/src/routes/Publish/index.module.scss b/client/src/routes/Publish/index.module.scss index c38536a..41e374b 100644 --- a/client/src/routes/Publish/index.module.scss +++ b/client/src/routes/Publish/index.module.scss @@ -1,23 +1,20 @@ @import '../../styles/variables'; -/* - -.small{ - -} -*/ - .typeGrid { display: grid; grid-template-rows: 2fr 1fr 1fr 1fr; grid-template-columns: 1fr 1fr; grid-gap: $spacer/4; +} - @media (min-width: $break-point--small) { - grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); +@media (min-width: $break-point--small) { + .typeGrid > div:first-child { + grid-column: 1 / span 2; } } -.typeGrid > article:first-child { - grid-column: 1 / span 2; +@media (max-width: $break-point--small) { + .typeGrid > div { + grid-column: 1 / span 2; + } } diff --git a/client/src/routes/Publish/index.tsx b/client/src/routes/Publish/index.tsx index 276b34b..7b40eb2 100644 --- a/client/src/routes/Publish/index.tsx +++ b/client/src/routes/Publish/index.tsx @@ -25,11 +25,14 @@ class Publish extends Component<{}, PublishState> { public publishAlgorithm = () => { this.setState({ type: 'algorithm' }) } + public toSelect = () => { + this.setState({ type: 'start' }) + } public render() { return (
{this.state.type !== 'start' && ( - + )} {this.state.type === 'start' && ( { @@ -74,7 +75,7 @@ class Loader extends Component { private prev = () => { let { currentStep } = this.state - currentStep = currentStep <= 1 ? 1 : currentStep - 1 + currentStep = currentStep <= 1 ? this.props.toSelect() : currentStep - 1 this.setState({ currentStep }) } diff --git a/package-lock.json b/package-lock.json index 405c0e1..93b8868 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,6 +1,6 @@ { "name": "commons", - "version": "0.2.1", + "version": "0.2.3", "lockfileVersion": 1, "requires": true, "dependencies": { diff --git a/server/package-lock.json b/server/package-lock.json index f0a8169..7301493 100644 --- a/server/package-lock.json +++ b/server/package-lock.json @@ -2228,8 +2228,7 @@ "version": "2.1.1", "resolved": false, "integrity": "sha1-w7M6te42DYbg5ijwRorn7yfWVN8=", - "dev": true, - "optional": true + "dev": true }, "aproba": { "version": "1.2.0", @@ -2253,15 +2252,13 @@ "version": "1.0.0", "resolved": false, "integrity": "sha1-ibTRmasr7kneFk6gK4nORi1xt2c=", - "dev": true, - "optional": true + "dev": true }, "brace-expansion": { "version": "1.1.11", "resolved": false, "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==", "dev": true, - "optional": true, "requires": { "balanced-match": "^1.0.0", "concat-map": "0.0.1" @@ -2278,22 +2275,19 @@ "version": "1.1.0", "resolved": false, "integrity": "sha1-DQcLTQQ6W+ozovGkDi7bPZpMz3c=", - "dev": true, - "optional": true + "dev": true }, "concat-map": { "version": "0.0.1", "resolved": false, "integrity": "sha1-2Klr13/Wjfd5OnMDajug1UBdR3s=", - "dev": true, - "optional": true + "dev": true }, "console-control-strings": { "version": "1.1.0", "resolved": false, "integrity": "sha1-PXz0Rk22RG6mRL9LOVB/mFEAjo4=", - "dev": true, - "optional": true + "dev": true }, "core-util-is": { "version": "1.0.2", @@ -2424,8 +2418,7 @@ "version": "2.0.3", "resolved": false, "integrity": "sha1-Yzwsg+PaQqUC9SRmAiSA9CCCYd4=", - "dev": true, - "optional": true + "dev": true }, "ini": { "version": "1.3.5", @@ -2439,7 +2432,6 @@ "resolved": false, "integrity": "sha1-754xOG8DGn8NZDr4L95QxFfvAMs=", "dev": true, - "optional": true, "requires": { "number-is-nan": "^1.0.0" } @@ -2456,7 +2448,6 @@ "resolved": false, "integrity": "sha512-yJHVQEhyqPLUTgt9B83PXu6W3rx4MvvHvSUvToogpwoGDOUQ+yDrR0HRot+yOCdCO7u4hX3pWft6kWBBcqh0UA==", "dev": true, - "optional": true, "requires": { "brace-expansion": "^1.1.7" } @@ -2465,15 +2456,13 @@ "version": "0.0.8", "resolved": false, "integrity": "sha1-hX/Kv8M5fSYluCKCYuhqp6ARsF0=", - "dev": true, - "optional": true + "dev": true }, "minipass": { "version": "2.3.5", "resolved": false, "integrity": "sha512-Gi1W4k059gyRbyVUZQ4mEqLm0YIUiGYfvxhF6SIlk3ui1WVxMTGfGdQ2SInh3PDrRTVvPKgULkpJtT4RH10+VA==", "dev": true, - "optional": true, "requires": { "safe-buffer": "^5.1.2", "yallist": "^3.0.0" @@ -2494,7 +2483,6 @@ "resolved": false, "integrity": "sha1-MAV0OOrGz3+MR2fzhkjWaX11yQM=", "dev": true, - "optional": true, "requires": { "minimist": "0.0.8" } @@ -2583,8 +2571,7 @@ "version": "1.0.1", "resolved": false, "integrity": "sha1-CXtgK1NCKlIsGvuHkDGDNpQaAR0=", - "dev": true, - "optional": true + "dev": true }, "object-assign": { "version": "4.1.1", @@ -2598,7 +2585,6 @@ "resolved": false, "integrity": "sha1-WDsap3WWHUsROsF9nFC6753Xa9E=", "dev": true, - "optional": true, "requires": { "wrappy": "1" } @@ -2694,8 +2680,7 @@ "version": "5.1.2", "resolved": false, "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==", - "dev": true, - "optional": true + "dev": true }, "safer-buffer": { "version": "2.1.2", @@ -2737,7 +2722,6 @@ "resolved": false, "integrity": "sha1-EYvfW4zcUaKn5w0hHgfisLmxB9M=", "dev": true, - "optional": true, "requires": { "code-point-at": "^1.0.0", "is-fullwidth-code-point": "^1.0.0", @@ -2759,7 +2743,6 @@ "resolved": false, "integrity": "sha1-ajhfuIU9lS1f8F0Oiq+UJ43GPc8=", "dev": true, - "optional": true, "requires": { "ansi-regex": "^2.0.0" } @@ -2808,15 +2791,13 @@ "version": "1.0.2", "resolved": false, "integrity": "sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8=", - "dev": true, - "optional": true + "dev": true }, "yallist": { "version": "3.0.3", "resolved": false, "integrity": "sha512-S+Zk8DEWE6oKpV+vI3qWkaK+jSbIK86pCwe2IF/xwIpQ8jEuxpw9NyaGjmp9+BoJv5FV2piqCDcoCtStppiq2A==", - "dev": true, - "optional": true + "dev": true } } },