From 995489eb3c88434ca62b0c54893950ebe4f59959 Mon Sep 17 00:00:00 2001 From: Valeriy Date: Sun, 27 Jan 2019 16:10:50 +0300 Subject: [PATCH] fix(client): classic challenge styles and update react-reflex --- client/package-lock.json | 51 ++++++++++++++----- client/package.json | 2 +- .../Challenges/classic/DesktopLayout.js | 2 +- .../templates/Challenges/classic/Editor.js | 6 +-- .../Challenges/classic/MobileLayout.js | 4 +- .../templates/Challenges/classic/classic.css | 31 +++-------- .../Challenges/components/preview.css | 9 +--- .../Challenges/components/side-panel.css | 7 +++ .../Challenges/components/tool-panel.css | 8 +-- 9 files changed, 66 insertions(+), 54 deletions(-) diff --git a/client/package-lock.json b/client/package-lock.json index 4d6d756dbb..3a962d4a50 100644 --- a/client/package-lock.json +++ b/client/package-lock.json @@ -15835,13 +15835,38 @@ "integrity": "sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA==" }, "react-measure": { - "version": "2.1.2", - "resolved": "https://registry.npmjs.org/react-measure/-/react-measure-2.1.2.tgz", - "integrity": "sha512-2xgrlj77Pv8MIYhm+S5s4Q+QnsYFT3CXzoUkx2mWZBIWzQnT7ubMtmsVtCoNdYV5PGKjTlwo9iGAtS3SrTG/Gg==", + "version": "2.2.2", + "resolved": "https://registry.npmjs.org/react-measure/-/react-measure-2.2.2.tgz", + "integrity": "sha512-7cnTiqUfS08o2VQ+tZ614/MSpzgr5NiSWF3mmWM2MbvL1r8V20LXJZ1Mpyi0Nfwf7G1bP692eGCmgOc0fsWvFg==", "requires": { - "get-node-dimensions": "^1.2.0", - "prop-types": "^15.5.10", - "resize-observer-polyfill": "^1.4.2" + "@babel/runtime": "^7.2.0", + "get-node-dimensions": "^1.2.1", + "prop-types": "^15.6.2", + "resize-observer-polyfill": "^1.5.0" + }, + "dependencies": { + "@babel/runtime": { + "version": "7.3.1", + "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.3.1.tgz", + "integrity": "sha512-7jGW8ppV0ant637pIqAcFfQDDH1orEPGJb8aXfUozuCU3QqX7rX4DA8iwrbPrR1hcH0FTTHz47yQnk+bl5xHQA==", + "requires": { + "regenerator-runtime": "^0.12.0" + } + }, + "prop-types": { + "version": "15.6.2", + "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.6.2.tgz", + "integrity": "sha512-3pboPvLiWD7dkI3qf3KbUe6hKFKa52w+AE0VCqECtf+QHAKgOL37tTaNCnuX1nAAQ4ZhyP+kYVKf8rLmJ/feDQ==", + "requires": { + "loose-envify": "^1.3.1", + "object-assign": "^4.1.1" + } + }, + "regenerator-runtime": { + "version": "0.12.1", + "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.12.1.tgz", + "integrity": "sha512-odxIc1/vDlo4iZcfXqRYFj0vpXFNoGdKMAUieAlFYO6m/nl5e9KR/beGf41z4a1FI+aQgtjhuaSlDxQ0hmkrHg==" + } } }, "react-media": { @@ -15926,11 +15951,11 @@ } }, "react-reflex": { - "version": "2.2.9", - "resolved": "https://registry.npmjs.org/react-reflex/-/react-reflex-2.2.9.tgz", - "integrity": "sha512-NDn2fu7TuQlc0vKfIJW1gHa7n5SDj2fonfmpm9NzO1ql4je6mcqjTibeN0eyIAomcNwKAd5IPe8JOHKbK7pYYA==", + "version": "3.0.8", + "resolved": "https://registry.npmjs.org/react-reflex/-/react-reflex-3.0.8.tgz", + "integrity": "sha512-IDq0CD4/hieuZaNKFA7p0W5b5jnzEWupasPB+yfI4aG5n3DzK1D6OjuHkehJqArN6NPF9Ku8Pl3P03W0dm5fNw==", "requires": { - "babel-runtime": "^6.23.0", + "@babel/runtime": "^7.0.0", "lodash.throttle": "^4.1.1", "prop-types": "^15.5.8", "react-measure": "^2.0.2" @@ -16616,9 +16641,9 @@ "dev": true }, "resize-observer-polyfill": { - "version": "1.5.0", - "resolved": "https://registry.npmjs.org/resize-observer-polyfill/-/resize-observer-polyfill-1.5.0.tgz", - "integrity": "sha512-M2AelyJDVR/oLnToJLtuDJRBBWUGUvvGigj1411hXhAdyFWqMaqHp7TixW3FpiLuVaikIcR1QL+zqoJoZlOgpg==" + "version": "1.5.1", + "resolved": "https://registry.npmjs.org/resize-observer-polyfill/-/resize-observer-polyfill-1.5.1.tgz", + "integrity": "sha512-LwZrotdHOo12nQuZlHEmtuXdqGoOD0OhaxopaNFxWzInpEgaLWoVuAMbTzixuosCx2nEG58ngzW3vxdWoxIgdg==" }, "resolve": { "version": "1.8.1", diff --git a/client/package.json b/client/package.json index c46bb4248c..84e088e433 100644 --- a/client/package.json +++ b/client/package.json @@ -48,7 +48,7 @@ "react-media": "^1.9.2", "react-monaco-editor": "^0.18.0", "react-redux": "^5.0.7", - "react-reflex": "^2.2.9", + "react-reflex": "^3.0.8", "react-spinkit": "^3.0.0", "react-stripe-elements": "^2.0.1", "react-youtube": "^7.8.0", diff --git a/client/src/templates/Challenges/classic/DesktopLayout.js b/client/src/templates/Challenges/classic/DesktopLayout.js index 0c60156373..3379bbeadc 100644 --- a/client/src/templates/Challenges/classic/DesktopLayout.js +++ b/client/src/templates/Challenges/classic/DesktopLayout.js @@ -29,7 +29,7 @@ class DesktopLayout extends Component { preview } = this.props; return ( - + {instructions} diff --git a/client/src/templates/Challenges/classic/Editor.js b/client/src/templates/Challenges/classic/Editor.js index 144c3fe678..b384c4251b 100644 --- a/client/src/templates/Challenges/classic/Editor.js +++ b/client/src/templates/Challenges/classic/Editor.js @@ -1,4 +1,4 @@ -import React, { Component } from 'react'; +import React, { Component, Fragment } from 'react'; import PropTypes from 'prop-types'; import { bindActionCreators } from 'redux'; import { connect } from 'react-redux'; @@ -130,7 +130,7 @@ class Editor extends Component { const { contents, ext, theme, fileKey } = this.props; const editorTheme = theme === 'night' ? 'vs-dark-custom' : 'vs-custom'; return ( -
+ -
+ ); } } diff --git a/client/src/templates/Challenges/classic/MobileLayout.js b/client/src/templates/Challenges/classic/MobileLayout.js index 95a9c17ab7..007aaab91c 100644 --- a/client/src/templates/Challenges/classic/MobileLayout.js +++ b/client/src/templates/Challenges/classic/MobileLayout.js @@ -63,10 +63,10 @@ class MobileLayout extends Component { {instructions} -
{editor}
+ {editor} -
{testOutput}
+ {testOutput} {hasPreview && ( diff --git a/client/src/templates/Challenges/classic/classic.css b/client/src/templates/Challenges/classic/classic.css index f3a6f13452..5f41b34970 100644 --- a/client/src/templates/Challenges/classic/classic.css +++ b/client/src/templates/Challenges/classic/classic.css @@ -2,28 +2,8 @@ overflow: hidden !important; } -.editor { - height: 100%; -} - -.instructions-panel { - padding: 0 10px; +.desktop-layout { height: calc(100vh - 38px); - overflow-x: hidden; - overflow-y: auto; -} - -@media screen and (max-width: 767px) { - .instructions-panel { - height: calc(100vh - 112px); - } -} - -.react-monaco-editor-container { - width: 100%; - height: 100%; - display: flex; - align-items: end; } .monaco-menu .action-label { @@ -45,7 +25,12 @@ padding: 5px 10px; } -.challenge-editor-wrapper { - height: calc(100vh - 112px); +#challenge-page-tabs .tab-content { + height: calc(100vh - 107px); + overflow-y: auto; +} + +#challenge-page-tabs .tab-pane { + height: 100%; overflow: hidden; } diff --git a/client/src/templates/Challenges/components/preview.css b/client/src/templates/Challenges/components/preview.css index 32d53a31fa..3168b7e3cf 100644 --- a/client/src/templates/Challenges/components/preview.css +++ b/client/src/templates/Challenges/components/preview.css @@ -1,19 +1,12 @@ .challenge-preview, .challenge-preview-frame { - height: calc(100vh - 38px); + height: 100%; width: 100%; padding: 0; margin: 0; border: none; } -@media screen and (max-width: 767px) { - .challenge-preview, - .challenge-preview-frame { - height: calc(100vh - 112px); - } -} - .enable-iframe { pointer-events: auto; } diff --git a/client/src/templates/Challenges/components/side-panel.css b/client/src/templates/Challenges/components/side-panel.css index 05c2e4d13f..928641ee32 100644 --- a/client/src/templates/Challenges/components/side-panel.css +++ b/client/src/templates/Challenges/components/side-panel.css @@ -5,3 +5,10 @@ overflow-x: auto; overflow-y: hidden; } + +.instructions-panel { + padding: 0 10px; + height: 100%; + width: 100%; + overflow-y: auto; +} diff --git a/client/src/templates/Challenges/components/tool-panel.css b/client/src/templates/Challenges/components/tool-panel.css index fe5e09fce9..1ac5088591 100644 --- a/client/src/templates/Challenges/components/tool-panel.css +++ b/client/src/templates/Challenges/components/tool-panel.css @@ -1,8 +1,10 @@ -.tool-panel-group button, .tool-panel-group a { +.tool-panel-group button, +.tool-panel-group a { font-size: 1.1rem; } -.tool-panel-group-mobile button, .tool-panel-group-mobile a { +.tool-panel-group-mobile button, +.tool-panel-group-mobile a { font-size: 16px; } @@ -10,8 +12,8 @@ display: flex; flex-direction: row-reverse; padding: 0 2px; - background: #fff; } + .tool-panel-group-mobile .btn-block + .btn-block { margin: 0 2px 0 0; }