From fc6738133a000dfb73a1f63b32fbd5ea3573951a Mon Sep 17 00:00:00 2001 From: Jessica Bunyan Date: Wed, 17 Apr 2019 18:55:55 +0100 Subject: [PATCH 01/17] remove pos: fixed --- app/app.global.scss | 10 ++++++--- app/components/FileLoader.js | 15 ++++++++----- app/components/FileLoader.scss | 12 ++++++---- app/components/GlobalAlert.scss | 32 +++++++++++++------------- app/components/PageWrapper.js | 40 +++++++++++---------------------- 5 files changed, 53 insertions(+), 56 deletions(-) diff --git a/app/app.global.scss b/app/app.global.scss index 4efff7166..8c4a8764c 100644 --- a/app/app.global.scss +++ b/app/app.global.scss @@ -1,5 +1,5 @@ -@import "./colors.global.scss"; -@import "./spacers.global.scss"; +@import './colors.global.scss'; +@import './spacers.global.scss'; body { position: relative; @@ -8,6 +8,10 @@ body { background-color: $background-dark; } +* { + overflow: hidden; +} + ul { margin: 0; padding-left: 20px; @@ -51,4 +55,4 @@ ul { .capitalize { text-transform: capitalize; -} \ No newline at end of file +} diff --git a/app/components/FileLoader.js b/app/components/FileLoader.js index 221b179d1..0bd674c6a 100644 --- a/app/components/FileLoader.js +++ b/app/components/FileLoader.js @@ -45,7 +45,7 @@ export default class FileLoader extends Component { const yPos = _.get(this.props.store, ['scrollPosition', 'y']) || 0; window.scrollTo(xPos, yPos); - if (this.props.history.action === "PUSH") { + if (this.props.history.action === 'PUSH') { // I don't really like this but when returning back to the file loader, the action is "POP" // instead of "PUSH", and we don't want to trigger the loader and ruin our ability to restore // scroll position when returning to fileLoader from a game @@ -73,7 +73,8 @@ export default class FileLoader extends Component { // Have to offset both the height and sticky position of the sidebar when a global notif is // active. Wish I knew a better way to do this. - const globalNotifHeightPx = _.get(this.props.globalNotifs, ['activeNotif', 'heightPx']) || 0; + const globalNotifHeightPx = + _.get(this.props.globalNotifs, ['activeNotif', 'heightPx']) || 0; const customStyling = { height: `calc(100vh - ${globalNotifHeightPx}px)`, }; @@ -242,7 +243,7 @@ export default class FileLoader extends Component { renderLoadingState() { const store = this.props.store || {}; - + return ( - {this.renderGlobalError()} - {this.renderFilteredFilesNotif(processedFiles)} - {this.renderFileSelection(processedFiles)} +
+ {this.renderGlobalError()} + {this.renderFilteredFilesNotif(processedFiles)} + {this.renderFileSelection(processedFiles)} +
); } diff --git a/app/components/FileLoader.scss b/app/components/FileLoader.scss index 391b1c494..0c6a90d69 100644 --- a/app/components/FileLoader.scss +++ b/app/components/FileLoader.scss @@ -1,4 +1,4 @@ -@import "../colors.global.scss"; +@import '../colors.global.scss'; .layout { display: grid; @@ -30,13 +30,13 @@ .play-cell { text-align: center; - button>i { - color: #94969A; + button > i { + color: #94969a; } button:hover { i { - color: #FFFFFF; + color: #ffffff; } } } @@ -100,3 +100,7 @@ .bound-link { display: contents; } + +.scroller { + overflow-y: scroll; +} diff --git a/app/components/GlobalAlert.scss b/app/components/GlobalAlert.scss index 5df92ffb4..993d6635b 100644 --- a/app/components/GlobalAlert.scss +++ b/app/components/GlobalAlert.scss @@ -1,34 +1,34 @@ -@import "../colors.global.scss"; +@import '../colors.global.scss'; .alert { - top: 0px; - position: fixed !important; - width: 100% !important; - z-index: 1000; - margin: 0 !important; - border-radius: 0 !important; + top: 0px; + // position: fixed !important; + width: 100% !important; + z-index: 1000; + margin: 0 !important; + border-radius: 0 !important; } .single-line-message { - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; } .main { - padding-top: 100px; + padding-top: 100px; } .icon { - font-size: 24px !important; + font-size: 24px !important; } .version-arrow-icon { - margin-right: 0 !important; + margin-right: 0 !important; } .upgrade-link { - margin-left: 6px; - cursor: pointer; - font-weight: bold; + margin-left: 6px; + cursor: pointer; + font-weight: bold; } diff --git a/app/components/PageWrapper.js b/app/components/PageWrapper.js index 7baa74cb3..2ade75f59 100644 --- a/app/components/PageWrapper.js +++ b/app/components/PageWrapper.js @@ -1,5 +1,4 @@ import React, { Component } from 'react'; -import _ from 'lodash'; import log from 'electron-log'; import PropTypes from 'prop-types'; import { ipcRenderer } from 'electron'; @@ -9,17 +8,16 @@ import { connect } from 'react-redux'; import GlobalAlert from './GlobalAlert'; import * as NotifActions from '../actions/notifs'; import * as GameActions from '../actions/game'; -import { playFile } from "../actions/fileLoader"; +import { playFile } from '../actions/fileLoader'; // Originally this logic was supposed to just exist at the App level. For some reason though -// that broke navigation, so I decided to put the logic after the +// that broke navigation, so I decided to put the logic after the class PageWrapper extends Component { static propTypes = { children: PropTypes.any.isRequired, history: PropTypes.object.isRequired, - + // From redux - store: PropTypes.object.isRequired, appUpgradeDownloaded: PropTypes.func.isRequired, gameProfileLoad: PropTypes.func.isRequired, playFile: PropTypes.func.isRequired, @@ -39,7 +37,7 @@ class PageWrapper extends Component { // When main process (main.dev.js) tells us an update has been downloaded, trigger // a global notif to be shown this.props.appUpgradeDownloaded(upgradeDetails); - } + }; onPlayReplay = (event, slpPath) => { log.info(`playing file ${slpPath}`); @@ -48,27 +46,12 @@ class PageWrapper extends Component { this.props.playFile({ fullPath: slpPath, }); - } + }; render() { - let spacerEl = null; - - const notifHeightPx = _.get(this.props.store, ['activeNotif', 'heightPx']); - if (notifHeightPx) { - const customStyling = { - height: `${notifHeightPx}px`, - }; - - // User spacer element to give space for notif. I tried using padding on the top-level div - // and that sorta worked but it didn't seem to respond well when I closed the notif while - // on the file loader page, there would still be space above the file selector - spacerEl =
; - } - return ( - {spacerEl}
{this.props.children}
 ); @@ -82,11 +65,14 @@ function mapStateToProps(state) { } function mapDispatchToProps(dispatch) { - return bindActionCreators({ - ...NotifActions, - ...GameActions, - playFile: playFile, - }, dispatch); + return bindActionCreators( + { + ...NotifActions, + ...GameActions, + playFile: playFile, + }, + dispatch + ); } export default connect( From 054824c501c3735a9b6662b0342982cc854ba933 Mon Sep 17 00:00:00 2001 From: Jessica Bunyan Date: Wed, 17 Apr 2019 19:08:37 +0100 Subject: [PATCH 02/17] added scroller component --- app/components/FileLoader.js | 5 +- app/components/Settings.js | 75 +++++++++++++++-------------- app/components/common/Scroller.js | 12 +++++ app/components/common/Scroller.scss | 4 ++ 4 files changed, 59 insertions(+), 37 deletions(-) create mode 100644 app/components/common/Scroller.js create mode 100644 app/components/common/Scroller.scss diff --git a/app/components/FileLoader.js b/app/components/FileLoader.js index 0bd674c6a..70d62bc66 100644 --- a/app/components/FileLoader.js +++ b/app/components/FileLoader.js @@ -18,6 +18,7 @@ import DismissibleMessage from './common/DismissibleMessage'; import PageHeader from './common/PageHeader'; import FolderBrowser from './common/FolderBrowser'; import PageWrapper from './PageWrapper'; +import Scroller from './common/Scroller'; export default class FileLoader extends Component { static propTypes = { @@ -318,11 +319,11 @@ export default class FileLoader extends Component { text="Replay Browser" history={this.props.history} /> -
+ {this.renderGlobalError()} {this.renderFilteredFilesNotif(processedFiles)} {this.renderFileSelection(processedFiles)} -
+
); } diff --git a/app/components/Settings.js b/app/components/Settings.js index 65415b366..a2f5798aa 100644 --- a/app/components/Settings.js +++ b/app/components/Settings.js @@ -1,12 +1,7 @@ import React, { Component } from 'react'; import PropTypes from 'prop-types'; import _ from 'lodash'; -import { - Button, - Message, - Header, - Icon, -} from 'semantic-ui-react'; +import { Button, Message, Header, Icon } from 'semantic-ui-react'; import { getDefaultDolphinPath } from '../utils/settings'; import PageHeader from './common/PageHeader'; import ActionInput from './common/ActionInput'; @@ -15,6 +10,7 @@ import DismissibleMessage from './common/DismissibleMessage'; import styles from './Settings.scss'; import PageWrapper from './PageWrapper'; +import Scroller from './common/Scroller'; import SpacedGroup from './common/SpacedGroup'; const { app } = require('electron').remote; @@ -74,7 +70,8 @@ export default class Settings extends Component {
Hello Linux friend! We cannot include a Dolphin build that is guaranteed to work on your distro. Please find the Playback Dolphin Path -  option to configure. Join the discord +  option to configure.{' '} + Join the discord  if you have any questions.
); @@ -113,34 +110,37 @@ export default class Settings extends Component { } renderISOVersionCheck() { - const validationState = _.get(this.props.store, 'isoValidationState') || 'unknown'; + const validationState = + _.get(this.props.store, 'isoValidationState') || 'unknown'; let icon, text, loading; switch (validationState) { - case "success": - icon = "check circle outline"; - text = "Valid"; + case 'success': + icon = 'check circle outline'; + text = 'Valid'; loading = false; break; - case "fail": - icon = "times circle outline"; - text = "Bad ISO"; + case 'fail': + icon = 'times circle outline'; + text = 'Bad ISO'; loading = false; break; - case "validating": - icon = "spinner"; - text = "Verifying"; + case 'validating': + icon = 'spinner'; + text = 'Verifying'; loading = true; break; default: - icon = "question circle outline"; - text = ""; + icon = 'question circle outline'; + text = ''; loading = false; break; } - + return ( -
+
{text}
@@ -158,7 +158,7 @@ export default class Settings extends Component { label="Melee ISO File" description="The path to a NTSC Melee 1.02 ISO. Used for playing replay files" value={store.settings.isoPath} - error={isoValidationState === "fail"} + error={isoValidationState === 'fail'} onClick={this.props.browseFile} handlerParams={['isoPath']} /> @@ -179,9 +179,7 @@ export default class Settings extends Component { const platform = process.platform; if (platform === 'linux') { - inputs.push([ - this.renderPlaybackInstanceInput(), - ]); + inputs.push([this.renderPlaybackInstanceInput()]); } return ( @@ -199,9 +197,7 @@ export default class Settings extends Component { const platform = process.platform; if (platform !== 'linux') { - inputs.push([ - this.renderPlaybackInstanceInput(), - ]); + inputs.push([this.renderPlaybackInstanceInput()]); } if (_.isEmpty(inputs)) { @@ -222,7 +218,7 @@ export default class Settings extends Component { renderPlaybackInstanceInput() { const store = this.props.store || {}; - + const platform = process.platform; // If on Linux, indicate the steps required @@ -230,9 +226,18 @@ export default class Settings extends Component {
Linux users must build their own playback Dolphin instance
    -
  • Use installer script to compile playback Dolphin
    • +
  • + Use{' '} + + installer script + {' '} + to compile playback Dolphin +
  • Move the compiled instance out of the build directory
    • -
  • Set the field below to point to the directory that contains dolphin-emu
    • +
  • + Set the field below to point to the directory that contains + dolphin-emu +
); @@ -245,8 +250,8 @@ export default class Settings extends Component { if (platform !== 'linux') { playbackDolphinDescription = (
- An instance of Dolphin for playing replays comes bundled - with this app. This setting allows you to configure a different instance.  + An instance of Dolphin for playing replays comes bundled with this + app. This setting allows you to configure a different instance.  Only modify if you know what you are doing.
); @@ -289,7 +294,7 @@ export default class Settings extends Component { {this.renderConfigDolphin()}
- ) + ); } renderContent() { @@ -317,7 +322,7 @@ export default class Settings extends Component { infoText={`App v${currentVersion}`} history={this.props.history} /> - {this.renderContent()} + {this.renderContent()} ); diff --git a/app/components/common/Scroller.js b/app/components/common/Scroller.js new file mode 100644 index 000000000..12ac7af7d --- /dev/null +++ b/app/components/common/Scroller.js @@ -0,0 +1,12 @@ +import _ from 'lodash'; +import React, { Component } from 'react'; +import PropTypes from 'prop-types'; +import styles from './Scroller.scss'; + +const path = require('path'); + +export default class Scroller extends Component { + render() { + return
{this.props.children}
; + } +} diff --git a/app/components/common/Scroller.scss b/app/components/common/Scroller.scss new file mode 100644 index 000000000..82dfbf41b --- /dev/null +++ b/app/components/common/Scroller.scss @@ -0,0 +1,4 @@ +.scroller { + overflow-y: auto; + height: calc(100vh - 150px); +} From 9b2cb995758b28987e3a6b31ae30759b7634b7e3 Mon Sep 17 00:00:00 2001 From: Jessica Bunyan Date: Wed, 17 Apr 2019 19:09:00 +0100 Subject: [PATCH 03/17] proptypes for scroller --- app/components/common/Scroller.js | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/app/components/common/Scroller.js b/app/components/common/Scroller.js index 12ac7af7d..ac5ec4a08 100644 --- a/app/components/common/Scroller.js +++ b/app/components/common/Scroller.js @@ -1,11 +1,12 @@ -import _ from 'lodash'; import React, { Component } from 'react'; import PropTypes from 'prop-types'; import styles from './Scroller.scss'; -const path = require('path'); - export default class Scroller extends Component { + static propTypes = { + children: PropTypes.any.isRequired, + }; + render() { return
{this.props.children}
; } From da8d6bf7a7f0066859cb38da105b9fc6d71fbcf1 Mon Sep 17 00:00:00 2001 From: Jessica Bunyan Date: Wed, 17 Apr 2019 19:40:05 +0100 Subject: [PATCH 04/17] removed sticky and added scroller to stats --- app/components/stats/GameProfile.js | 65 ++++++++------------------- app/components/stats/GameProfile.scss | 28 +++++------- 2 files changed, 28 insertions(+), 65 deletions(-) diff --git a/app/components/stats/GameProfile.js b/app/components/stats/GameProfile.js index bc2f71a5a..1d23ab083 100644 --- a/app/components/stats/GameProfile.js +++ b/app/components/stats/GameProfile.js @@ -5,7 +5,6 @@ import PropTypes from 'prop-types'; import { Header, Segment, - Sticky, Image, Icon, Button, @@ -26,6 +25,7 @@ import * as stageUtils from '../../utils/stages'; import * as timeUtils from '../../utils/time'; import * as playerUtils from '../../utils/players'; import PageWrapper from '../PageWrapper'; +import Scroller from '../common/Scroller'; export default class GameProfile extends Component { static propTypes = { @@ -40,11 +40,6 @@ export default class GameProfile extends Component { // store data store: PropTypes.object.isRequired, errors: PropTypes.object.isRequired, - globalNotifs: PropTypes.object.isRequired, - }; - - state = { - isStatsStuck: false, }; refStats = null; @@ -79,7 +74,7 @@ export default class GameProfile extends Component { renderLoading() { const store = this.props.store || {}; - + return ( ( @@ -232,48 +231,16 @@ export default class GameProfile extends Component { } renderStats() { - const handleStick = () => { - this.setState({ - isStatsStuck: true, - }); - }; - - const handleUnstick = () => { - this.setState({ - isStatsStuck: false, - }); - }; - - const statsSectionClasses = classNames( - { - [styles['stuck']]: this.state.isStatsStuck, - }, - styles['stats-section'] - ); - - const globalNotifHeightPx = - _.get(this.props.globalNotifs, ['activeNotif', 'heightPx']) || 0; - return ( {this.renderErrorModal()} - -
- {this.renderMatchupDisplay()} - {this.renderGameDetails()} + +
+ {this.renderOverall()} + {this.renderStocks()} + {this.renderPunishes()}
- -
- {this.renderOverall()} - {this.renderStocks()} - {this.renderPunishes()} -
+ ); } @@ -401,6 +368,10 @@ export default class GameProfile extends Component {
+
+ {this.renderMatchupDisplay()} + {this.renderGameDetails()} +
{this.renderContent()}
diff --git a/app/components/stats/GameProfile.scss b/app/components/stats/GameProfile.scss index 4acc758cb..afc89175e 100644 --- a/app/components/stats/GameProfile.scss +++ b/app/components/stats/GameProfile.scss @@ -1,12 +1,11 @@ -@import "../../colors.global"; +@import '../../colors.global'; $header-height: 97px; .stats-player-header { background: $background-lightest !important; - box-shadow: 0 3px 5px rgba(0, 0, 0, 0.2); - margin: 0 -34px 0 -34px !important; - padding: 0 48px 0 48px !important; + border-radius: 4px; + box-shadow: 2px 3px 5px rgba(0, 0, 0, 0.2); .matchup-display { display: grid; @@ -79,18 +78,11 @@ $header-height: 97px; } } -.sticky-names { - z-index: 2; - position: relative; -} - -.stats-section { - padding-top: 28px; - - &.stuck { - margin-top: $header-height !important; - } -} +// .sticky-names { +// z-index: 2; +// position: relative; +// width: 100%; +// } .vs-element { color: rgba(255, 255, 255, 0.5); @@ -127,11 +119,11 @@ $header-height: 97px; margin: 0 !important; box-shadow: 3px 3px 2px rgba(0, 0, 0, 0.1) !important; - thead>tr>th { + thead > tr > th { background: $background-medium !important; } - tbody>tr>td { + tbody > tr > td { background: $background-light !important; &.category { From 1332b172d23b2900fdda6bdbc1cced2bffeaef18 Mon Sep 17 00:00:00 2001 From: Jessica Bunyan Date: Thu, 18 Apr 2019 17:56:47 +0100 Subject: [PATCH 05/17] remove scroller.scss --- app/components/common/Scroller.js | 9 +++++++-- app/components/common/Scroller.scss | 4 ---- 2 files changed, 7 insertions(+), 6 deletions(-) delete mode 100644 app/components/common/Scroller.scss diff --git a/app/components/common/Scroller.js b/app/components/common/Scroller.js index ac5ec4a08..9bc67661d 100644 --- a/app/components/common/Scroller.js +++ b/app/components/common/Scroller.js @@ -1,13 +1,18 @@ import React, { Component } from 'react'; import PropTypes from 'prop-types'; -import styles from './Scroller.scss'; export default class Scroller extends Component { static propTypes = { children: PropTypes.any.isRequired, + topOffset: PropTypes.number.isRequired, }; render() { - return
{this.props.children}
; + const customStyles = { + overflowY: 'auto', + height: `calc(100vh - ${this.props.topOffset + 100}px)`, + }; + + return
{this.props.children}
; } } diff --git a/app/components/common/Scroller.scss b/app/components/common/Scroller.scss deleted file mode 100644 index 82dfbf41b..000000000 --- a/app/components/common/Scroller.scss +++ /dev/null @@ -1,4 +0,0 @@ -.scroller { - overflow-y: auto; - height: calc(100vh - 150px); -} From c17b3fb35d2b02720c1247d07ab67b6eba6dd386 Mon Sep 17 00:00:00 2001 From: Jessica Bunyan Date: Thu, 18 Apr 2019 18:09:34 +0100 Subject: [PATCH 06/17] remote redundant scroller --- app/components/Settings.js | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/app/components/Settings.js b/app/components/Settings.js index a2f5798aa..1f2c00a3b 100644 --- a/app/components/Settings.js +++ b/app/components/Settings.js @@ -10,7 +10,6 @@ import DismissibleMessage from './common/DismissibleMessage'; import styles from './Settings.scss'; import PageWrapper from './PageWrapper'; -import Scroller from './common/Scroller'; import SpacedGroup from './common/SpacedGroup'; const { app } = require('electron').remote; @@ -322,7 +321,7 @@ export default class Settings extends Component { infoText={`App v${currentVersion}`} history={this.props.history} /> - {this.renderContent()} + {this.renderContent()}
); From a9aec8b28860ae2d071c2ab6aff7880a42b17955 Mon Sep 17 00:00:00 2001 From: Jessica Bunyan Date: Thu, 18 Apr 2019 18:10:17 +0100 Subject: [PATCH 07/17] set scroller offset based on global notifs --- app/components/FileLoader.js | 5 ++++- app/components/stats/GameProfile.js | 6 +++++- 2 files changed, 9 insertions(+), 2 deletions(-) diff --git a/app/components/FileLoader.js b/app/components/FileLoader.js index 70d62bc66..19997cc37 100644 --- a/app/components/FileLoader.js +++ b/app/components/FileLoader.js @@ -312,6 +312,9 @@ export default class FileLoader extends Component { const files = store.files || []; const processedFiles = this.processFiles(files); + const scrollerOffset = + _.get(this.props.globalNotifs, ['activeNotif', 'heightPx']) || 0; + return (
- + {this.renderGlobalError()} {this.renderFilteredFilesNotif(processedFiles)} {this.renderFileSelection(processedFiles)} diff --git a/app/components/stats/GameProfile.js b/app/components/stats/GameProfile.js index 1d23ab083..69647a87f 100644 --- a/app/components/stats/GameProfile.js +++ b/app/components/stats/GameProfile.js @@ -40,6 +40,7 @@ export default class GameProfile extends Component { // store data store: PropTypes.object.isRequired, errors: PropTypes.object.isRequired, + globalNotifs: PropTypes.object.isRequired, }; refStats = null; @@ -231,10 +232,13 @@ export default class GameProfile extends Component { } renderStats() { + const scrollerOffset = + 120 + (_.get(this.props.globalNotifs, ['activeNotif', 'heightPx']) || 0); // 120 for game stats header + return ( {this.renderErrorModal()} - +
{this.renderOverall()} {this.renderStocks()} From 1abcd943ae015844ec6bba7917640976647b5550 Mon Sep 17 00:00:00 2001 From: Jessica Bunyan Date: Thu, 18 Apr 2019 19:53:59 +0100 Subject: [PATCH 08/17] revert the majority of the prettierJS changes --- app/app.global.scss | 4 +- app/components/FileLoader.js | 3 +- app/components/FileLoader.scss | 14 ++--- app/components/GlobalAlert.scss | 33 ++++++------ app/components/PageWrapper.js | 4 +- app/components/Settings.js | 74 +++++++++++++-------------- app/components/stats/GameProfile.scss | 10 +--- 7 files changed, 63 insertions(+), 79 deletions(-) diff --git a/app/app.global.scss b/app/app.global.scss index 8c4a8764c..30d853820 100644 --- a/app/app.global.scss +++ b/app/app.global.scss @@ -1,5 +1,5 @@ -@import './colors.global.scss'; -@import './spacers.global.scss'; +@import "./colors.global.scss"; +@import "./spacers.global.scss"; body { position: relative; diff --git a/app/components/FileLoader.js b/app/components/FileLoader.js index 19997cc37..498479277 100644 --- a/app/components/FileLoader.js +++ b/app/components/FileLoader.js @@ -46,7 +46,7 @@ export default class FileLoader extends Component { const yPos = _.get(this.props.store, ['scrollPosition', 'y']) || 0; window.scrollTo(xPos, yPos); - if (this.props.history.action === 'PUSH') { + if (this.props.history.action === "PUSH") { // I don't really like this but when returning back to the file loader, the action is "POP" // instead of "PUSH", and we don't want to trigger the loader and ruin our ability to restore // scroll position when returning to fileLoader from a game @@ -244,7 +244,6 @@ export default class FileLoader extends Component { renderLoadingState() { const store = this.props.store || {}; - return ( i { - color: #94969a; + button>i { + color: #94969A; } button:hover { i { - color: #ffffff; + color: #FFFFFF; } } } @@ -99,8 +99,4 @@ .bound-link { display: contents; -} - -.scroller { - overflow-y: scroll; -} +} \ No newline at end of file diff --git a/app/components/GlobalAlert.scss b/app/components/GlobalAlert.scss index 993d6635b..abca66708 100644 --- a/app/components/GlobalAlert.scss +++ b/app/components/GlobalAlert.scss @@ -1,34 +1,33 @@ -@import '../colors.global.scss'; +@import "../colors.global.scss"; .alert { - top: 0px; - // position: fixed !important; - width: 100% !important; - z-index: 1000; - margin: 0 !important; - border-radius: 0 !important; + top: 0px; + width: 100% !important; + z-index: 1000; + margin: 0 !important; + border-radius: 0 !important; } .single-line-message { - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; } .main { - padding-top: 100px; + padding-top: 100px; } .icon { - font-size: 24px !important; + font-size: 24px !important; } .version-arrow-icon { - margin-right: 0 !important; + margin-right: 0 !important; } .upgrade-link { - margin-left: 6px; - cursor: pointer; - font-weight: bold; -} + margin-left: 6px; + cursor: pointer; + font-weight: bold; +} \ No newline at end of file diff --git a/app/components/PageWrapper.js b/app/components/PageWrapper.js index 2ade75f59..30574c523 100644 --- a/app/components/PageWrapper.js +++ b/app/components/PageWrapper.js @@ -8,10 +8,10 @@ import { connect } from 'react-redux'; import GlobalAlert from './GlobalAlert'; import * as NotifActions from '../actions/notifs'; import * as GameActions from '../actions/game'; -import { playFile } from '../actions/fileLoader'; +import { playFile } from "../actions/fileLoader"; // Originally this logic was supposed to just exist at the App level. For some reason though -// that broke navigation, so I decided to put the logic after the +// that broke navigation, so I decided to put the logic after the class PageWrapper extends Component { static propTypes = { children: PropTypes.any.isRequired, diff --git a/app/components/Settings.js b/app/components/Settings.js index 1f2c00a3b..f3d3a1628 100644 --- a/app/components/Settings.js +++ b/app/components/Settings.js @@ -1,7 +1,12 @@ import React, { Component } from 'react'; import PropTypes from 'prop-types'; import _ from 'lodash'; -import { Button, Message, Header, Icon } from 'semantic-ui-react'; +import { + Button, + Message, + Header, + Icon, +} from 'semantic-ui-react'; import { getDefaultDolphinPath } from '../utils/settings'; import PageHeader from './common/PageHeader'; import ActionInput from './common/ActionInput'; @@ -69,8 +74,7 @@ export default class Settings extends Component {
Hello Linux friend! We cannot include a Dolphin build that is guaranteed to work on your distro. Please find the Playback Dolphin Path -  option to configure.{' '} - Join the discord +  option to configure. Join the discord  if you have any questions.
); @@ -109,37 +113,34 @@ export default class Settings extends Component { } renderISOVersionCheck() { - const validationState = - _.get(this.props.store, 'isoValidationState') || 'unknown'; + const validationState = _.get(this.props.store, 'isoValidationState') || 'unknown'; let icon, text, loading; switch (validationState) { - case 'success': - icon = 'check circle outline'; - text = 'Valid'; + case "success": + icon = "check circle outline"; + text = "Valid"; loading = false; break; - case 'fail': - icon = 'times circle outline'; - text = 'Bad ISO'; + case "fail": + icon = "times circle outline"; + text = "Bad ISO"; loading = false; break; - case 'validating': - icon = 'spinner'; - text = 'Verifying'; + case "validating": + icon = "spinner"; + text = "Verifying"; loading = true; break; default: - icon = 'question circle outline'; - text = ''; + icon = "question circle outline"; + text = ""; loading = false; break; } - + return ( -
+
{text}
@@ -157,7 +158,7 @@ export default class Settings extends Component { label="Melee ISO File" description="The path to a NTSC Melee 1.02 ISO. Used for playing replay files" value={store.settings.isoPath} - error={isoValidationState === 'fail'} + error={isoValidationState === "fail"} onClick={this.props.browseFile} handlerParams={['isoPath']} /> @@ -178,7 +179,9 @@ export default class Settings extends Component { const platform = process.platform; if (platform === 'linux') { - inputs.push([this.renderPlaybackInstanceInput()]); + inputs.push([ + this.renderPlaybackInstanceInput(), + ]); } return ( @@ -196,7 +199,9 @@ export default class Settings extends Component { const platform = process.platform; if (platform !== 'linux') { - inputs.push([this.renderPlaybackInstanceInput()]); + inputs.push([ + this.renderPlaybackInstanceInput(), + ]); } if (_.isEmpty(inputs)) { @@ -217,7 +222,7 @@ export default class Settings extends Component { renderPlaybackInstanceInput() { const store = this.props.store || {}; - + const platform = process.platform; // If on Linux, indicate the steps required @@ -225,18 +230,9 @@ export default class Settings extends Component {
Linux users must build their own playback Dolphin instance
    -
  • - Use{' '} - - installer script - {' '} - to compile playback Dolphin -
    • +
  • Use installer script to compile playback Dolphin
  • Move the compiled instance out of the build directory
    • -
  • - Set the field below to point to the directory that contains - dolphin-emu -
    • +
  • Set the field below to point to the directory that contains dolphin-emu
); @@ -249,8 +245,8 @@ export default class Settings extends Component { if (platform !== 'linux') { playbackDolphinDescription = (
- An instance of Dolphin for playing replays comes bundled with this - app. This setting allows you to configure a different instance.  + An instance of Dolphin for playing replays comes bundled + with this app. This setting allows you to configure a different instance.  Only modify if you know what you are doing.
); @@ -293,7 +289,7 @@ export default class Settings extends Component { {this.renderConfigDolphin()}
- ); + ) } renderContent() { @@ -326,4 +322,4 @@ export default class Settings extends Component { ); } -} +} \ No newline at end of file diff --git a/app/components/stats/GameProfile.scss b/app/components/stats/GameProfile.scss index afc89175e..639995f67 100644 --- a/app/components/stats/GameProfile.scss +++ b/app/components/stats/GameProfile.scss @@ -78,12 +78,6 @@ $header-height: 97px; } } -// .sticky-names { -// z-index: 2; -// position: relative; -// width: 100%; -// } - .vs-element { color: rgba(255, 255, 255, 0.5); line-height: 0.8; @@ -119,11 +113,11 @@ $header-height: 97px; margin: 0 !important; box-shadow: 3px 3px 2px rgba(0, 0, 0, 0.1) !important; - thead > tr > th { + thead>tr>th { background: $background-medium !important; } - tbody > tr > td { + tbody>tr>td { background: $background-light !important; &.category { From d6b9c70d60cb95b30323c2b163eb5f7068e5f3b6 Mon Sep 17 00:00:00 2001 From: Jessica Bunyan Date: Thu, 2 May 2019 09:56:15 +0100 Subject: [PATCH 09/17] shifted scollbar to right edge --- app/components/common/Scroller.js | 1 + 1 file changed, 1 insertion(+) diff --git a/app/components/common/Scroller.js b/app/components/common/Scroller.js index 9bc67661d..0001661ac 100644 --- a/app/components/common/Scroller.js +++ b/app/components/common/Scroller.js @@ -11,6 +11,7 @@ export default class Scroller extends Component { const customStyles = { overflowY: 'auto', height: `calc(100vh - ${this.props.topOffset + 100}px)`, + width: `calc(100% + 17px)`, }; return
{this.props.children}
; From 2c45c9266fee660ee014c0874d1e8a422b3919f4 Mon Sep 17 00:00:00 2001 From: Jessica Bunyan Date: Thu, 2 May 2019 09:59:23 +0100 Subject: [PATCH 10/17] applied previous change (scrollbar aligned with edge) to stats page --- app/components/stats/GameProfile.js | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/app/components/stats/GameProfile.js b/app/components/stats/GameProfile.js index 69647a87f..b15799dbf 100644 --- a/app/components/stats/GameProfile.js +++ b/app/components/stats/GameProfile.js @@ -236,16 +236,16 @@ export default class GameProfile extends Component { 120 + (_.get(this.props.globalNotifs, ['activeNotif', 'heightPx']) || 0); // 120 for game stats header return ( - - {this.renderErrorModal()} - + + + {this.renderErrorModal()}
{this.renderOverall()} {this.renderStocks()} {this.renderPunishes()}
- - + + ); } From f45f24d6d33c1fd5743f0342f9d9a375d0f66e62 Mon Sep 17 00:00:00 2001 From: Jessica Bunyan Date: Thu, 2 May 2019 10:09:07 +0100 Subject: [PATCH 11/17] adjusted top offset pixel value --- app/components/common/Scroller.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/components/common/Scroller.js b/app/components/common/Scroller.js index 0001661ac..1eaeb8056 100644 --- a/app/components/common/Scroller.js +++ b/app/components/common/Scroller.js @@ -10,7 +10,7 @@ export default class Scroller extends Component { render() { const customStyles = { overflowY: 'auto', - height: `calc(100vh - ${this.props.topOffset + 100}px)`, + height: `calc(100vh - ${this.props.topOffset + 85}px)`, width: `calc(100% + 17px)`, }; From 4fd0b31c8cfbce4a810dd76dac8d006f57aeedc4 Mon Sep 17 00:00:00 2001 From: Jessica Bunyan Date: Thu, 2 May 2019 10:23:02 +0100 Subject: [PATCH 12/17] added scrollers to settings and console page --- app/components/Console.js | 130 +++++++++++++++++---------------- app/components/Settings.js | 6 +- app/containers/ConsolePage.js | 1 + app/containers/SettingsPage.js | 1 + 4 files changed, 76 insertions(+), 62 deletions(-) diff --git a/app/components/Console.js b/app/components/Console.js index 68779dc89..7a5200be6 100644 --- a/app/components/Console.js +++ b/app/components/Console.js @@ -12,6 +12,7 @@ import DismissibleMessage from './common/DismissibleMessage'; import styles from './Console.scss'; import SpacedGroup from './common/SpacedGroup'; import ActionInput from './common/ActionInput'; +import Scroller from './common/Scroller'; const { dialog } = require('electron').remote; @@ -32,6 +33,7 @@ export default class Console extends Component { history: PropTypes.object.isRequired, store: PropTypes.object.isRequired, errors: PropTypes.object.isRequired, + topOffset: PropTypes.number.isRequired, }; state = { @@ -353,7 +355,7 @@ export default class Console extends Component { ); } - + renderDeleteButton = connection => { const status = connection.connectionStatus; const isConnected = status === ConnectionStatus.CONNECTED; @@ -550,67 +552,71 @@ export default class Console extends Component { const validation = _.get(this.state, ['formData', 'validation']) || {}; const panes = [ - { menuItem: "Basic", render: () => - - - - -
- Not recommended unless on wired LAN connection.  - Real-time mode will attempt to prevent delay from accumulating when mirroring. Using it - when on a connection with inconsistent latency will cause extremely choppy playback. + { + menuItem: "Basic", render: () => + + + + +
+ Not recommended unless on wired LAN connection.  + Real-time mode will attempt to prevent delay from accumulating when mirroring. Using it + when on a connection with inconsistent latency will cause extremely choppy playback. +
+ + , + }, + { + menuItem: "Advanced", render: () => +
+ Only modify if you know what you doing.  + These settings let you select an OBS source (e.g. your dolphin capture) + to be shown if the game is active and hidden if the game is inactive. + You must install the   + OBS Websocket Plugin  + for this feature to work.
- - }, - { menuItem: "Advanced", render: () => -
- Only modify if you know what you doing.  - These settings let you select an OBS source (e.g. your dolphin capture) - to be shown if the game is active and hidden if the game is inactive. - You must install the   - OBS Websocket Plugin  - for this feature to work. -
- - - - }]; + + + , + }]; let errorMessage = null; if (validation.targetFolder === "empty") { @@ -636,8 +642,10 @@ export default class Console extends Component { text="Console" history={this.props.history} /> - {this.renderContent()} - {this.renderEditModal()} + + {this.renderContent()} + {this.renderEditModal()} +
); diff --git a/app/components/Settings.js b/app/components/Settings.js index f3d3a1628..46d4d36a7 100644 --- a/app/components/Settings.js +++ b/app/components/Settings.js @@ -16,6 +16,7 @@ import DismissibleMessage from './common/DismissibleMessage'; import styles from './Settings.scss'; import PageWrapper from './PageWrapper'; import SpacedGroup from './common/SpacedGroup'; +import Scroller from './common/Scroller'; const { app } = require('electron').remote; @@ -34,6 +35,7 @@ export default class Settings extends Component { history: PropTypes.object.isRequired, store: PropTypes.object.isRequired, errors: PropTypes.object.isRequired, + topOffset: PropTypes.number.isRequired, }; componentDidMount() { @@ -317,7 +319,9 @@ export default class Settings extends Component { infoText={`App v${currentVersion}`} history={this.props.history} /> - {this.renderContent()} + + {this.renderContent()} +
); diff --git a/app/containers/ConsolePage.js b/app/containers/ConsolePage.js index 281988e00..c4f3f92b1 100644 --- a/app/containers/ConsolePage.js +++ b/app/containers/ConsolePage.js @@ -9,6 +9,7 @@ function mapStateToProps(state) { return { store: state.console, errors: state.errors, + topOffset: _.get(state.globalNotifs, ['activeNotif', 'heightPx']) || 0, }; } diff --git a/app/containers/SettingsPage.js b/app/containers/SettingsPage.js index cf5af9a66..8183e28b7 100644 --- a/app/containers/SettingsPage.js +++ b/app/containers/SettingsPage.js @@ -9,6 +9,7 @@ function mapStateToProps(state) { return { store: state.settings, errors: state.errors, + topOffset: _.get(state.globalNotifs, ['activeNotif', 'heightPx']) || 0, }; } From 8c5d0c483bfc4863404d7d2fab54f5b5328575ff Mon Sep 17 00:00:00 2001 From: Jessica Bunyan Date: Thu, 2 May 2019 10:27:22 +0100 Subject: [PATCH 13/17] removed gloablNotifs prop and replaced with offset to keep consistency --- app/components/FileLoader.js | 10 +++------- app/components/stats/GameProfile.js | 6 ++---- app/containers/FileLoaderPage.js | 2 +- app/containers/GameProfilePage.js | 3 ++- 4 files changed, 8 insertions(+), 13 deletions(-) diff --git a/app/components/FileLoader.js b/app/components/FileLoader.js index 498479277..94fdf7a74 100644 --- a/app/components/FileLoader.js +++ b/app/components/FileLoader.js @@ -38,7 +38,7 @@ export default class FileLoader extends Component { history: PropTypes.object.isRequired, store: PropTypes.object.isRequired, errors: PropTypes.object.isRequired, - globalNotifs: PropTypes.object.isRequired, + topOffset: PropTypes.number.isRequired, }; componentDidMount() { @@ -74,10 +74,8 @@ export default class FileLoader extends Component { // Have to offset both the height and sticky position of the sidebar when a global notif is // active. Wish I knew a better way to do this. - const globalNotifHeightPx = - _.get(this.props.globalNotifs, ['activeNotif', 'heightPx']) || 0; const customStyling = { - height: `calc(100vh - ${globalNotifHeightPx}px)`, + height: `calc(100vh - ${this.props.topOffset}px)`, }; // We return a div that will serve as a placeholder for our column as well as a fixed @@ -311,8 +309,6 @@ export default class FileLoader extends Component { const files = store.files || []; const processedFiles = this.processFiles(files); - const scrollerOffset = - _.get(this.props.globalNotifs, ['activeNotif', 'heightPx']) || 0; return (
@@ -321,7 +317,7 @@ export default class FileLoader extends Component { text="Replay Browser" history={this.props.history} /> - + {this.renderGlobalError()} {this.renderFilteredFilesNotif(processedFiles)} {this.renderFileSelection(processedFiles)} diff --git a/app/components/stats/GameProfile.js b/app/components/stats/GameProfile.js index b15799dbf..e2420c236 100644 --- a/app/components/stats/GameProfile.js +++ b/app/components/stats/GameProfile.js @@ -40,7 +40,7 @@ export default class GameProfile extends Component { // store data store: PropTypes.object.isRequired, errors: PropTypes.object.isRequired, - globalNotifs: PropTypes.object.isRequired, + topOffset: PropTypes.number.isRequired, }; refStats = null; @@ -232,11 +232,9 @@ export default class GameProfile extends Component { } renderStats() { - const scrollerOffset = - 120 + (_.get(this.props.globalNotifs, ['activeNotif', 'heightPx']) || 0); // 120 for game stats header return ( - + {this.renderErrorModal()}
diff --git a/app/containers/FileLoaderPage.js b/app/containers/FileLoaderPage.js index 64071b2aa..773d7a077 100644 --- a/app/containers/FileLoaderPage.js +++ b/app/containers/FileLoaderPage.js @@ -10,7 +10,7 @@ function mapStateToProps(state) { return { store: state.fileLoader, errors: state.errors, - globalNotifs: state.notifs, + topOffset: _.get(state.globalNotifs, ['activeNotif', 'heightPx']) || 0, }; } diff --git a/app/containers/GameProfilePage.js b/app/containers/GameProfilePage.js index 008a11ca1..ec2420e6d 100644 --- a/app/containers/GameProfilePage.js +++ b/app/containers/GameProfilePage.js @@ -1,3 +1,4 @@ +import _ from "lodash"; import { bindActionCreators } from 'redux'; import { connect } from 'react-redux'; import GameProfile from '../components/stats/GameProfile'; @@ -8,7 +9,7 @@ function mapStateToProps(state) { return { store: state.game, errors: state.errors, - globalNotifs: state.notifs, + topOffset: _.get(state.globalNotifs, ['activeNotif', 'heightPx']) || 0, }; } From 6e480c0dcf10c581fd6fb946f5acaccd9dbdd85d Mon Sep 17 00:00:00 2001 From: Jessica Bunyan Date: Thu, 2 May 2019 10:52:41 +0100 Subject: [PATCH 14/17] rename prop for clarity --- app/components/Console.js | 4 ++-- app/components/FileLoader.js | 6 +++--- app/components/Settings.js | 4 ++-- app/components/stats/GameProfile.js | 6 ++++-- app/containers/ConsolePage.js | 2 +- app/containers/FileLoaderPage.js | 2 +- app/containers/GameProfilePage.js | 2 +- app/containers/SettingsPage.js | 2 +- 8 files changed, 15 insertions(+), 13 deletions(-) diff --git a/app/components/Console.js b/app/components/Console.js index 7a5200be6..a5079bd3f 100644 --- a/app/components/Console.js +++ b/app/components/Console.js @@ -33,7 +33,7 @@ export default class Console extends Component { history: PropTypes.object.isRequired, store: PropTypes.object.isRequired, errors: PropTypes.object.isRequired, - topOffset: PropTypes.number.isRequired, + topNotifOffset: PropTypes.number.isRequired, }; state = { @@ -642,7 +642,7 @@ export default class Console extends Component { text="Console" history={this.props.history} /> - + {this.renderContent()} {this.renderEditModal()} diff --git a/app/components/FileLoader.js b/app/components/FileLoader.js index 94fdf7a74..6381106dd 100644 --- a/app/components/FileLoader.js +++ b/app/components/FileLoader.js @@ -38,7 +38,7 @@ export default class FileLoader extends Component { history: PropTypes.object.isRequired, store: PropTypes.object.isRequired, errors: PropTypes.object.isRequired, - topOffset: PropTypes.number.isRequired, + topNotifOffset: PropTypes.number.isRequired, }; componentDidMount() { @@ -75,7 +75,7 @@ export default class FileLoader extends Component { // Have to offset both the height and sticky position of the sidebar when a global notif is // active. Wish I knew a better way to do this. const customStyling = { - height: `calc(100vh - ${this.props.topOffset}px)`, + height: `calc(100vh - ${this.props.topNotifOffset}px)`, }; // We return a div that will serve as a placeholder for our column as well as a fixed @@ -317,7 +317,7 @@ export default class FileLoader extends Component { text="Replay Browser" history={this.props.history} /> - + {this.renderGlobalError()} {this.renderFilteredFilesNotif(processedFiles)} {this.renderFileSelection(processedFiles)} diff --git a/app/components/Settings.js b/app/components/Settings.js index 46d4d36a7..0dea54f7d 100644 --- a/app/components/Settings.js +++ b/app/components/Settings.js @@ -35,7 +35,7 @@ export default class Settings extends Component { history: PropTypes.object.isRequired, store: PropTypes.object.isRequired, errors: PropTypes.object.isRequired, - topOffset: PropTypes.number.isRequired, + topNotifOffset: PropTypes.number.isRequired, }; componentDidMount() { @@ -319,7 +319,7 @@ export default class Settings extends Component { infoText={`App v${currentVersion}`} history={this.props.history} /> - + {this.renderContent()}
diff --git a/app/components/stats/GameProfile.js b/app/components/stats/GameProfile.js index e2420c236..b8d17a118 100644 --- a/app/components/stats/GameProfile.js +++ b/app/components/stats/GameProfile.js @@ -40,7 +40,7 @@ export default class GameProfile extends Component { // store data store: PropTypes.object.isRequired, errors: PropTypes.object.isRequired, - topOffset: PropTypes.number.isRequired, + topNotifOffset: PropTypes.number.isRequired, }; refStats = null; @@ -233,8 +233,10 @@ export default class GameProfile extends Component { renderStats() { + const scrollerOffset = this.props.topNotifOffset + 120; // + 120 to account for game-specific header + return ( - + {this.renderErrorModal()}
diff --git a/app/containers/ConsolePage.js b/app/containers/ConsolePage.js index c4f3f92b1..51915a57a 100644 --- a/app/containers/ConsolePage.js +++ b/app/containers/ConsolePage.js @@ -9,7 +9,7 @@ function mapStateToProps(state) { return { store: state.console, errors: state.errors, - topOffset: _.get(state.globalNotifs, ['activeNotif', 'heightPx']) || 0, + topNotifOffset: _.get(state.notifs, ['activeNotif', 'heightPx']) || 0, }; } diff --git a/app/containers/FileLoaderPage.js b/app/containers/FileLoaderPage.js index 773d7a077..c271db301 100644 --- a/app/containers/FileLoaderPage.js +++ b/app/containers/FileLoaderPage.js @@ -10,7 +10,7 @@ function mapStateToProps(state) { return { store: state.fileLoader, errors: state.errors, - topOffset: _.get(state.globalNotifs, ['activeNotif', 'heightPx']) || 0, + topNotifOffset: _.get(state.notifs, ['activeNotif', 'heightPx']) || 0, }; } diff --git a/app/containers/GameProfilePage.js b/app/containers/GameProfilePage.js index ec2420e6d..6cd3c3f67 100644 --- a/app/containers/GameProfilePage.js +++ b/app/containers/GameProfilePage.js @@ -9,7 +9,7 @@ function mapStateToProps(state) { return { store: state.game, errors: state.errors, - topOffset: _.get(state.globalNotifs, ['activeNotif', 'heightPx']) || 0, + topNotifOffset: _.get(state.notifs, ['activeNotif', 'heightPx']) || 0, }; } diff --git a/app/containers/SettingsPage.js b/app/containers/SettingsPage.js index 8183e28b7..fb8bec8a5 100644 --- a/app/containers/SettingsPage.js +++ b/app/containers/SettingsPage.js @@ -9,7 +9,7 @@ function mapStateToProps(state) { return { store: state.settings, errors: state.errors, - topOffset: _.get(state.globalNotifs, ['activeNotif', 'heightPx']) || 0, + topNotifOffset: _.get(state.notifs, ['activeNotif', 'heightPx']) || 0, }; } From 618f4979cd58cb1bd1472956daeee34d88464e0d Mon Sep 17 00:00:00 2001 From: Jessica Bunyan Date: Thu, 2 May 2019 17:43:48 +0100 Subject: [PATCH 15/17] game header now spans whole screen --- app/components/stats/GameProfile.scss | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/app/components/stats/GameProfile.scss b/app/components/stats/GameProfile.scss index 639995f67..a872b50dc 100644 --- a/app/components/stats/GameProfile.scss +++ b/app/components/stats/GameProfile.scss @@ -3,8 +3,12 @@ $header-height: 97px; .stats-player-header { + position: relative; background: $background-lightest !important; border-radius: 4px; + width: calc(100% + 40px); + margin-left: -20px; + z-index: 2; // needed for shadow to show up box-shadow: 2px 3px 5px rgba(0, 0, 0, 0.2); .matchup-display { From fc9455eb1adff30feb5407a99f63475336030af1 Mon Sep 17 00:00:00 2001 From: Jessica Bunyan Date: Thu, 2 May 2019 17:52:10 +0100 Subject: [PATCH 16/17] remove rounded corners, added padding --- app/components/stats/GameProfile.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/components/stats/GameProfile.scss b/app/components/stats/GameProfile.scss index a872b50dc..ca718ab5d 100644 --- a/app/components/stats/GameProfile.scss +++ b/app/components/stats/GameProfile.scss @@ -5,8 +5,8 @@ $header-height: 97px; .stats-player-header { position: relative; background: $background-lightest !important; - border-radius: 4px; width: calc(100% + 40px); + padding: 0 40px 0 40px; margin-left: -20px; z-index: 2; // needed for shadow to show up box-shadow: 2px 3px 5px rgba(0, 0, 0, 0.2); From d35e0b1236cb3aaef49263b62eeebde128a99e42 Mon Sep 17 00:00:00 2001 From: Jessica Bunyan Date: Thu, 2 May 2019 18:01:11 +0100 Subject: [PATCH 17/17] corrected padding to align header content w/ body content --- app/components/stats/GameProfile.scss | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/app/components/stats/GameProfile.scss b/app/components/stats/GameProfile.scss index ca718ab5d..7a8020ff9 100644 --- a/app/components/stats/GameProfile.scss +++ b/app/components/stats/GameProfile.scss @@ -6,7 +6,7 @@ $header-height: 97px; position: relative; background: $background-lightest !important; width: calc(100% + 40px); - padding: 0 40px 0 40px; + padding: 0 40px 0 34px; margin-left: -20px; z-index: 2; // needed for shadow to show up box-shadow: 2px 3px 5px rgba(0, 0, 0, 0.2); @@ -42,7 +42,6 @@ $header-height: 97px; .play-button { justify-self: end; - margin-right: 14px; } }