From 0fd3a4ecc68d92339b1e52f59cdac79a9d7de0e3 Mon Sep 17 00:00:00 2001 From: lunarkid Date: Thu, 26 May 2022 10:41:37 +0700 Subject: [PATCH 1/4] improvement(reskin): spacing details --- .../MySubmissions/SubmissionsList/styles.scss | 11 +++++++++-- .../challenge-detail/Submissions/style.scss | 19 ++++++++++--------- 2 files changed, 19 insertions(+), 11 deletions(-) diff --git a/src/shared/components/challenge-detail/MySubmissions/SubmissionsList/styles.scss b/src/shared/components/challenge-detail/MySubmissions/SubmissionsList/styles.scss index e9055398cc..de9640e3ef 100644 --- a/src/shared/components/challenge-detail/MySubmissions/SubmissionsList/styles.scss +++ b/src/shared/components/challenge-detail/MySubmissions/SubmissionsList/styles.scss @@ -96,10 +96,13 @@ flex-direction: column; font-size: 13px; line-height: 20px; - margin: 16px 40px 0 40px; + padding-top: 30px; + padding-bottom: 50px; + margin: 0 41px; @include xs-to-sm { - margin: 16px 0 0 0; + padding: 0; + margin: 0 16px; } } @@ -177,6 +180,10 @@ button.column-1-1, margin: 0 32px 0 16px; height: auto; } + + @include xs-to-sm { + margin-top: 24px; + } } .column-1 { diff --git a/src/shared/components/challenge-detail/Submissions/style.scss b/src/shared/components/challenge-detail/Submissions/style.scss index e186e80f70..a6155822aa 100644 --- a/src/shared/components/challenge-detail/Submissions/style.scss +++ b/src/shared/components/challenge-detail/Submissions/style.scss @@ -3,8 +3,14 @@ .container { @include roboto-regular; - margin-left: auto; - margin-right: auto; + padding-top: 30px; + padding-bottom: 50px; + margin: 0 41px; + + @include xs-to-sm { + padding: 0; + margin: 0 16px; + } div { white-space: nowrap; @@ -152,7 +158,7 @@ font-size: 13px; line-height: 15px; padding-bottom: 17px; - padding-top: 7px; + padding-top: 14px; color: $tc-gray-50; display: flex; border-bottom: 1px solid $tc-gray-10; @@ -215,13 +221,10 @@ } .container.dev { - margin: 0 46px; - padding-bottom: 0; line-height: 50px; text-align: center; @include xs-to-sm { - margin: 30px 0; line-height: 20px; } @@ -277,10 +280,8 @@ } &.mm { - margin: 28px 32px 0 32px; - @include xs-to-sm { - margin: 0; + margin: 0 16px; } } From 08b9e654b28408f99f900a916f3e41f54a946e43 Mon Sep 17 00:00:00 2001 From: yoution Date: Thu, 26 May 2022 12:28:41 +0800 Subject: [PATCH 2/4] feature: profile page show no rating mm entrance --- src/shared/containers/Profile.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/shared/containers/Profile.jsx b/src/shared/containers/Profile.jsx index fbfade7a9a..329d4c161b 100644 --- a/src/shared/containers/Profile.jsx +++ b/src/shared/containers/Profile.jsx @@ -185,7 +185,7 @@ ProfileContainer.propTypes = { const mapStateToProps = (state, ownProps) => ({ challenges: state.members[ownProps.match.params.handle] - ? state.members[ownProps.match.params.handle].subtrackChallenges : null, + ? state.members[ownProps.match.params.handle].userMarathons : null, achievements: state.profile.achievements, copilot: state.profile.copilot, country: state.profile.country, From 5e8eee9d129d25914ee64691d7cc612f2bd0d80a Mon Sep 17 00:00:00 2001 From: lunarkid Date: Thu, 26 May 2022 11:55:14 +0700 Subject: [PATCH 3/4] improvement(reskin): challenge listing part 4 f2f --- .../components/SortingSelectBar/style.scss | 95 +++++++++---------- src/shared/components/Tooltip/style.scss | 19 +++- .../Tooltips/ProgressBarTooltip/style.scss | 13 --- .../TrackAbbreviationTooltip/index.jsx | 2 + 4 files changed, 67 insertions(+), 62 deletions(-) diff --git a/src/shared/components/SortingSelectBar/style.scss b/src/shared/components/SortingSelectBar/style.scss index 3efb495444..ac4faa7a56 100644 --- a/src/shared/components/SortingSelectBar/style.scss +++ b/src/shared/components/SortingSelectBar/style.scss @@ -46,54 +46,7 @@ $down-arrow-size: $base-unit; @include xs-to-md { margin-right: 16px; } - } - - .view-options { - position: absolute; - right: $view-options-toggle-right-margin; - top: $base-unit * 10; - z-index: 1; - background: $tc-white; - border-radius: $base-unit; - padding: $base-unit; - box-shadow: 1px 5px 15px $tc-gray-20; - display: flex; - flex-direction: column; - } - - .view-option { - @extend %sorting-select-button; - - font-weight: 300; - font-size: 12px; - padding: $base-unit * 2; - outline: none; - border: 0; - color: $tc-black; - text-align: left; - } - - .view-options-toggle { - @extend %sorting-select-button; - - display: flex; - align-items: center; - color: $tc-gray-90; - border: 1px solid $tc-gray-neutral-dark; - font-size: 12px; - outline: none; - } - - .down-arrow { - width: 0; - height: 0; - border-left: $down-arrow-size solid transparent; - border-right: $down-arrow-size solid transparent; - border-top: $down-arrow-size solid $tc-gray-50; - margin-left: 3 * $base-unit; - } - - :global { + :global { // 'Sort by' dropdown .Select { @include roboto-regular; @@ -230,4 +183,50 @@ $down-arrow-size: $base-unit; padding: 8px 20px; } } + } + + .view-options { + position: absolute; + right: $view-options-toggle-right-margin; + top: $base-unit * 10; + z-index: 1; + background: $tc-white; + border-radius: $base-unit; + padding: $base-unit; + box-shadow: 1px 5px 15px $tc-gray-20; + display: flex; + flex-direction: column; + } + + .view-option { + @extend %sorting-select-button; + + font-weight: 300; + font-size: 12px; + padding: $base-unit * 2; + outline: none; + border: 0; + color: $tc-black; + text-align: left; + } + + .view-options-toggle { + @extend %sorting-select-button; + + display: flex; + align-items: center; + color: $tc-gray-90; + border: 1px solid $tc-gray-neutral-dark; + font-size: 12px; + outline: none; + } + + .down-arrow { + width: 0; + height: 0; + border-left: $down-arrow-size solid transparent; + border-right: $down-arrow-size solid transparent; + border-top: $down-arrow-size solid $tc-gray-50; + margin-left: 3 * $base-unit; + } } diff --git a/src/shared/components/Tooltip/style.scss b/src/shared/components/Tooltip/style.scss index 26c4735ae7..651af0c2ae 100644 --- a/src/shared/components/Tooltip/style.scss +++ b/src/shared/components/Tooltip/style.scss @@ -13,11 +13,28 @@ padding: 0; } + .rc-tooltip-arrow { + background: url(assets/images/tooltip-arrow.svg); + width: 30px; + height: 9px; + z-index: 10000; + } + .rc-tooltip-placement-top .rc-tooltip-arrow, .rc-tooltip-placement-topLeft .rc-tooltip-arrow, .rc-tooltip-placement-topRight .rc-tooltip-arrow { border-top-color: $tc-gray-80; - background: url(assets/images/tooltip-arrow.svg); + padding: 0; + bottom: 1px; + border-width: 0; + } + + .rc-tooltip-placement-top .rc-tooltip-arrow { + margin-left: -19px; + } + + .rc-tooltip-placement-topLeft .rc-tooltip-arrow { + margin-left: -13px; } .rc-tooltip-placement-right .rc-tooltip-arrow, diff --git a/src/shared/components/challenge-listing/Tooltips/ProgressBarTooltip/style.scss b/src/shared/components/challenge-listing/Tooltips/ProgressBarTooltip/style.scss index af38e9eebd..ae1b564573 100644 --- a/src/shared/components/challenge-listing/Tooltips/ProgressBarTooltip/style.scss +++ b/src/shared/components/challenge-listing/Tooltips/ProgressBarTooltip/style.scss @@ -8,19 +8,6 @@ $tip-space-95: $base-unit * 19; $tip-radius-15: $corner-radius * 7 + 1; $tip-radius-4: $corner-radius * 2; -:global { - .rc-tooltip-arrow { - background-color: url(assets/images/tooltip-arrow.svg); - width: 30px; - height: 9px; - position: absolute; - left: 41% !important; - z-index: 10000; - bottom: 0 !important; - border: 0; - } -} - div.progress-bar-tooltip { @include roboto-regular; diff --git a/src/shared/components/challenge-listing/Tooltips/TrackAbbreviationTooltip/index.jsx b/src/shared/components/challenge-listing/Tooltips/TrackAbbreviationTooltip/index.jsx index 9cae10edab..ffbfc5fc68 100644 --- a/src/shared/components/challenge-listing/Tooltips/TrackAbbreviationTooltip/index.jsx +++ b/src/shared/components/challenge-listing/Tooltips/TrackAbbreviationTooltip/index.jsx @@ -41,6 +41,8 @@ Tip.propTypes = { }; function placeArrow(TooltipNode) { + const rootLeftPos = parseInt(TooltipNode.style.left, 10); + TooltipNode.style.left = `${rootLeftPos - 5}px`; // eslint-disable-line no-param-reassign const arrow = TooltipNode.querySelector('.rc-tooltip-arrow'); arrow.style.left = '15px'; } From 1f5c3bfb6f173cd2769dfab3cd475978af44ae00 Mon Sep 17 00:00:00 2001 From: lunarkid Date: Thu, 26 May 2022 12:16:39 +0700 Subject: [PATCH 4/4] improvement(reskin): lint spacing issue --- .../components/SortingSelectBar/style.scss | 236 +++++++++--------- 1 file changed, 119 insertions(+), 117 deletions(-) diff --git a/src/shared/components/SortingSelectBar/style.scss b/src/shared/components/SortingSelectBar/style.scss index ac4faa7a56..178ed2c1ae 100644 --- a/src/shared/components/SortingSelectBar/style.scss +++ b/src/shared/components/SortingSelectBar/style.scss @@ -1,4 +1,5 @@ @import '~styles/mixins'; + $view-options-toggle-right-margin: $base-unit * 2; $down-arrow-size: $base-unit; @@ -46,144 +47,145 @@ $down-arrow-size: $base-unit; @include xs-to-md { margin-right: 16px; } - :global { - // 'Sort by' dropdown - .Select { - @include roboto-regular; - } - .is-focused { - font-weight: 700; - } + :global { + // 'Sort by' dropdown + .Select { + @include roboto-regular; + } - .Select-control { - line-height: 12px; - padding: 4px 35px 4px 10px; - width: 208px; - height: 40px; - background-color: $tc-white; - font-weight: 400; - font-size: 12px; - text-transform: none; - border: 1px solid #aaa; - color: $tc-gray-90; - position: relative; - overflow: hidden; - box-sizing: border-box; - } + .is-focused { + font-weight: 700; + } - .Select-input { - width: 100% !important; - height: 0; - padding: 0; - opacity: 0; - position: absolute; - } + .Select-control { + line-height: 12px; + padding: 4px 35px 4px 10px; + width: 208px; + height: 40px; + background-color: $tc-white; + font-weight: 400; + font-size: 12px; + text-transform: none; + border: 1px solid #aaa; + color: $tc-gray-90; + position: relative; + overflow: hidden; + box-sizing: border-box; + } - .Select--single > .Select-control .Select-value { - position: static; - padding: 0; - overflow: visible; - } + .Select-input { + width: 100% !important; + height: 0; + padding: 0; + opacity: 0; + position: absolute; + } - .Select.is-focused:not(.is-open) > .Select-control { - border-color: #137d60 !important; - } + .Select--single > .Select-control .Select-value { + position: static; + padding: 0; + overflow: visible; + } - .Select-value-label { - @include roboto-regular; + .Select.is-focused:not(.is-open) > .Select-control { + border-color: #137d60 !important; + } - font-size: 400; - font-size: 14px; - line-height: 22px; - color: $tco-black; - vertical-align: middle; - } + .Select-value-label { + @include roboto-regular; - .Select-arrow-zone { - content: ' '; - display: block; - height: 0; - position: absolute; - right: 17px; - top: 50%; - width: 0; + font-size: 400; + font-size: 14px; + line-height: 22px; + color: $tco-black; + vertical-align: middle; + } - svg { - width: 10px; - height: 10px; + .Select-arrow-zone { + content: ' '; + display: block; + height: 0; + position: absolute; + right: 17px; + top: 50%; + width: 0; + + svg { + width: 10px; + height: 10px; + } } - } - .Select-menu-outer { - width: 100%; - color: $tc-gray-90; - font-weight: 400; - font-size: 12px; - background-color: $tc-white; - box-sizing: border-box; - margin-top: 2px; - padding: 4px 0; - position: absolute; - top: 100%; - right: 0; - z-index: 1000; - -webkit-overflow-scrolling: touch; - border: none !important; - } + .Select-menu-outer { + width: 100%; + color: $tc-gray-90; + font-weight: 400; + font-size: 12px; + background-color: $tc-white; + box-sizing: border-box; + margin-top: 2px; + padding: 4px 0; + position: absolute; + top: 100%; + right: 0; + z-index: 1000; + -webkit-overflow-scrolling: touch; + border: none !important; + } - .Select-menu { - max-height: none; - overflow-y: visible; - height: 22px; - font-size: 14px; - } + .Select-menu { + max-height: none; + overflow-y: visible; + height: 22px; + font-size: 14px; + } - .Select-option { - box-sizing: border-box; - color: rgba(51, 51, 51, 0.8); - cursor: pointer; - display: block; - padding: 6px 16px; - border-left: 1px solid #aaa; - border-right: 1px solid #aaa; - } + .Select-option { + box-sizing: border-box; + color: rgba(51, 51, 51, 0.8); + cursor: pointer; + display: block; + padding: 6px 16px; + border-left: 1px solid #aaa; + border-right: 1px solid #aaa; + } - .Select-option:last-child { - border-bottom-right-radius: 5px !important; - border-bottom-left-radius: 5px !important; - border-bottom: 1px solid #aaa; - } + .Select-option:last-child { + border-bottom-right-radius: 5px !important; + border-bottom-left-radius: 5px !important; + border-bottom: 1px solid #aaa; + } - .Select-option:first-child { - border-top: 1px solid #aaa; - border-top-left-radius: $base-unit; - border-top-right-radius: $base-unit; - } + .Select-option:first-child { + border-top: 1px solid #aaa; + border-top-left-radius: $base-unit; + border-top-right-radius: $base-unit; + } - .Select-option:hover { - color: $tc-black; - } + .Select-option:hover { + color: $tc-black; + } - .Select-option.is-selected { - color: $tc-black; - font-weight: 500; - background: $tc-white; - } + .Select-option.is-selected { + color: $tc-black; + font-weight: 500; + background: $tc-white; + } - .Select-option.is-focused { - background: $tc-white; - } + .Select-option.is-focused { + background: $tc-white; + } - .Select-noresults { - box-sizing: border-box; - color: $tc-gray-90; - cursor: default; - display: block; - padding: 8px 20px; + .Select-noresults { + box-sizing: border-box; + color: $tc-gray-90; + cursor: default; + display: block; + padding: 8px 20px; + } } } - } .view-options { position: absolute;