diff --git a/resources/css/bem/mp-history-game.less b/resources/css/bem/mp-history-game.less index 3d6cbb49c73..c2a08c22bfb 100644 --- a/resources/css/bem/mp-history-game.less +++ b/resources/css/bem/mp-history-game.less @@ -113,8 +113,8 @@ border-radius: 0 0 @border-radius-base @border-radius-base; @media @desktop { - // shape name mods combo acc score rank - grid-template-columns: var(--shape-size) 1fr auto auto auto auto auto; + // shape name mods combo acc score rank menu + grid-template-columns: var(--shape-size) 1fr auto auto auto auto auto auto; column-gap: 0; } diff --git a/resources/css/bem/mp-history-player-score.less b/resources/css/bem/mp-history-player-score.less index 267344336b1..9a9fa27fdbe 100644 --- a/resources/css/bem/mp-history-player-score.less +++ b/resources/css/bem/mp-history-player-score.less @@ -60,8 +60,8 @@ &__main { padding: 10px 20px; display: grid; - // for mods and rank element (in mobile), using order and grid-column combination - grid-template-columns: 1fr auto; + // for mods, rank and menu element (in mobile), using order and grid-column combination + grid-template-columns: 1fr auto auto; gap: 5px; grid-column: 2 / -1; @@ -99,6 +99,18 @@ &--rank { order: 1; grid-column: 2 / 3; + @media @desktop { + order: 0; + grid-column: initial; + } + } + + &--menu { + position: relative; + width: 16px; + height: 100%; + order: 1; + grid-column: 3 / 4; @media @desktop { padding-right: 0; // TODO: replace with gap at __main if fixed in firefox order: 0; diff --git a/resources/js/legacy-match/score.tsx b/resources/js/legacy-match/score.tsx index 33e5e4cc7ce..ebedbc282fa 100644 --- a/resources/js/legacy-match/score.tsx +++ b/resources/js/legacy-match/score.tsx @@ -3,6 +3,7 @@ import FlagCountry from 'components/flag-country'; import Mods from 'components/mods'; +import { PlayDetailMenu } from 'components/play-detail-menu'; import UserLink from 'components/user-link'; import { PlaylistItemJsonForMultiplayerEvent } from 'interfaces/playlist-item-json'; import { rulesetNames } from 'interfaces/ruleset'; @@ -13,7 +14,7 @@ import * as React from 'react'; import { classWithModifiers } from 'utils/css'; import { formatNumber } from 'utils/html'; import { trans } from 'utils/lang'; -import { calculateStatisticsFor, rank } from 'utils/score-helper'; +import { calculateStatisticsFor, hasMenu, rank } from 'utils/score-helper'; import { Data } from './content'; interface Props { @@ -127,6 +128,9 @@ export default observer(function Score(props: Props) {