feat(match2): on FFA, hide Navigation Button if there's only 1 Match (#…

…5265)

* feat(match2): on FFA, hide Navigation Button if there's only 1 Match

* ensure "overall standings" is clicked

* Revert "ensure "overall standings" is clicked"

This reverts commit b1d5a8d.

* change approach

* comment etc

* updategolden

components/match2/commons/match_group_display_horizontallist.lua

@@ -90,6 +90,8 @@ function HorizontallistDisplay.Bracket(props)
 
 	local bracketNode = mw.html.create('div')
 			:addClass('navigation-tabs')
+			-- Do not show the tabs if there is only one match
+			:addClass(#sortedBracket == 1 and 'is--hidden' or nil)
 			:attr('data-js-battle-royale', 'navigation')
 			:attr('role', 'tabpanel')
 			:node(list)

spec/golden_masters/match2_matchlist_smoke_apexlegends.txt

@@ -1 +1 @@
-<div class="brkts-br-wrapper battle-royale" data-js-battle-royale-id="apexlegend" data-js-battle-royale-init-tab="0"><div class="navigation-tabs" data-js-battle-royale="navigation" role="tabpanel"><ul class="navigation-tabs__list" role="tablist"><li class="navigation-tabs__list-item" data-target-id="navigationContent1" role="tab" tabindex="0" data-js-battle-royale="navigation-tab" data-js-battle-royale-matchid="0001"><i class="fas fa-check icon--green navigation-tabs__list-item-icon"></i>Match</li></ul></div><div class="navigation-content-container"><div class="navigation-content" data-js-battle-royale-content-id="navigationContent1"><div class="panel-tabs" role="tabpanel"><ul class="panel-tabs__list" role="tablist"><li class="panel-tabs__list-item" data-js-battle-royale="panel-tab" role="tab" data-js-battle-royale-content-target-id="apexlegend_0001panel0" tabindex="0"><i class="fad fa-list-ol panel-tabs__list-icon"></i><h4 class="panel-tabs__title">Overall standings</h4></li></ul></div><div class="panel-content" id="apexlegend_0001panel0" data-js-battle-royale="panel-content"><div class="panel-content__collapsible is--collapsed" data-js-battle-royale="collapsible"><h5 class="panel-content__button" data-js-battle-royale="collapsible-button" tabindex="0"><i class="far fa-chevron-up panel-content__button-icon"></i><span>Points Distribution</span></h5><div class="panel-content__container" data-js-battle-royale="collapsible-container" role="tabpanel"><ul class="panel-content__points-distribution"><li class="panel-content__points-distribution__list-item"><span class="panel-content__points-distribution__icon"></span><span class="panel-content__points-distribution__title">Placement</span><div class="panel-content__points-distribution__container"><span><b>Placement Points</b></span></div></li><li class="panel-content__points-distribution__list-item"><span class="panel-content__points-distribution__icon"><i class="fas fa-trophy icon--gold"></i></span><span class="panel-content__points-distribution__title">1st - 4th</span><div class="panel-content__points-distribution__container"><span>0 points</span></div></li></ul></div></div><div class="panel-table" data-js-battle-royale="table"><div class="panel-table__row row--header" data-js-battle-royale="header-row"><div class="panel-table__cell cell--rank" data-sort-type="rank"><div class="panel-table__cell-grouped"><i class="fas fa-hashtag panel-table__cell-icon"></i><span>Rank</span><div class="panel-table__sort"><i class="far fa-arrows-alt-v" data-js-battle-royale="sort-icon"></i></div></div></div><div class="panel-table__cell cell--team" data-sort-type="team"><div class="panel-table__cell-grouped"><i class="fas fa-users panel-table__cell-icon"></i><span>Participant</span><div class="panel-table__sort"><i class="far fa-arrows-alt-v" data-js-battle-royale="sort-icon"></i></div></div></div><div class="panel-table__cell cell--total-points" data-sort-type="total-points"><div class="panel-table__cell-grouped"><i class="fas fa-star panel-table__cell-icon"></i><span class="d-none d-md-block">Total Points</span><span class="d-block d-md-none">Pts.</span><div class="panel-table__sort"><i class="far fa-arrows-alt-v" data-js-battle-royale="sort-icon"></i></div></div></div><div class="panel-table__cell cell--game-container-nav-holder" data-js-battle-royale="game-nav-holder"><div class="panel-table__cell cell--game-container" data-js-battle-royale="game-container"></div></div></div><div class="panel-table__row" data-js-battle-royale="row"><div class="panel-table__cell cell--rank " data-sort-val="1" data-sort-type="rank"><div class="panel-table__cell-grouped"><i class="fas fa-trophy panel-table__cell-icon icon--gold"></i><span>1st</span></div></div><div class="panel-table__cell cell--team " data-sort-val="C" data-sort-type="team"><div class="panel-table__cell-grouped"><div class="block-players-wrapper"><div class="block-player has-team"><span class="name" style="overflow:hidden;text-overflow:ellipsis;white-space:pre">[[C|C]]</span></div></div></div></div><div class="panel-table__cell cell--total-points " data-sort-val="4" data-sort-type="total-points"><div class="panel-table__cell-grouped">4</div></div><div class="panel-table__cell cell--game-container" data-js-battle-royale="game-container"></div></div><div class="panel-table__row" data-js-battle-royale="row"><div class="panel-table__cell cell--rank " data-sort-val="2" data-sort-type="rank"><div class="panel-table__cell-grouped"><i class="fas fa-trophy panel-table__cell-icon icon--silver"></i><span>2nd</span></div></div><div class="panel-table__cell cell--team " data-sort-val="abc" data-sort-type="team"><div class="panel-table__cell-grouped"><div class="block-players-wrapper"><div class="block-player has-team"><span class="name" style="overflow:hidden;text-overflow:ellipsis;white-space:pre">[[abc|A]]</span></div></div></div></div><div class="panel-table__cell cell--total-points " data-sort-val="3" data-sort-type="total-points"><div class="panel-table__cell-grouped">3</div></div><div class="panel-table__cell cell--game-container" data-js-battle-royale="game-container"></div></div><div class="panel-table__row" data-js-battle-royale="row"><div class="panel-table__cell cell--rank " data-sort-val="3" data-sort-type="rank"><div class="panel-table__cell-grouped"><i class="fas fa-trophy panel-table__cell-icon icon--bronze"></i><span>3rd</span></div></div><div class="panel-table__cell cell--team " data-sort-val="B" data-sort-type="team"><div class="panel-table__cell-grouped"><div class="block-players-wrapper"><div class="block-player has-team"><span class="name" style="overflow:hidden;text-overflow:ellipsis;white-space:pre">[[B|B]]</span></div></div></div></div><div class="panel-table__cell cell--total-points " data-sort-val="2" data-sort-type="total-points"><div class="panel-table__cell-grouped">2</div></div><div class="panel-table__cell cell--game-container" data-js-battle-royale="game-container"></div></div><div class="panel-table__row" data-js-battle-royale="row"><div class="panel-table__cell cell--rank " data-sort-val="4" data-sort-type="rank"><div class="panel-table__cell-grouped"><i class="fas fa-trophy panel-table__cell-icon icon--copper"></i><span>4th</span></div></div><div class="panel-table__cell cell--team " data-sort-val="D" data-sort-type="team"><div class="panel-table__cell-grouped"><div class="block-players-wrapper"><div class="block-player has-team"><span class="name" style="overflow:hidden;text-overflow:ellipsis;white-space:pre">[[D|D]]</span></div></div></div></div><div class="panel-table__cell cell--total-points " data-sort-val="1" data-sort-type="total-points"><div class="panel-table__cell-grouped">1</div></div><div class="panel-table__cell cell--game-container" data-js-battle-royale="game-container"></div></div></div></div></div></div></div>
+<div class="brkts-br-wrapper battle-royale" data-js-battle-royale-id="apexlegend" data-js-battle-royale-init-tab="0"><div class="navigation-tabs is--hidden" data-js-battle-royale="navigation" role="tabpanel"><ul class="navigation-tabs__list" role="tablist"><li class="navigation-tabs__list-item" data-target-id="navigationContent1" role="tab" tabindex="0" data-js-battle-royale="navigation-tab" data-js-battle-royale-matchid="0001"><i class="fas fa-check icon--green navigation-tabs__list-item-icon"></i>Match</li></ul></div><div class="navigation-content-container"><div class="navigation-content" data-js-battle-royale-content-id="navigationContent1"><div class="panel-tabs" role="tabpanel"><ul class="panel-tabs__list" role="tablist"><li class="panel-tabs__list-item" data-js-battle-royale="panel-tab" role="tab" data-js-battle-royale-content-target-id="apexlegend_0001panel0" tabindex="0"><i class="fad fa-list-ol panel-tabs__list-icon"></i><h4 class="panel-tabs__title">Overall standings</h4></li></ul></div><div class="panel-content" id="apexlegend_0001panel0" data-js-battle-royale="panel-content"><div class="panel-content__collapsible is--collapsed" data-js-battle-royale="collapsible"><h5 class="panel-content__button" data-js-battle-royale="collapsible-button" tabindex="0"><i class="far fa-chevron-up panel-content__button-icon"></i><span>Points Distribution</span></h5><div class="panel-content__container" data-js-battle-royale="collapsible-container" role="tabpanel"><ul class="panel-content__points-distribution"><li class="panel-content__points-distribution__list-item"><span class="panel-content__points-distribution__icon"></span><span class="panel-content__points-distribution__title">Placement</span><div class="panel-content__points-distribution__container"><span><b>Placement Points</b></span></div></li><li class="panel-content__points-distribution__list-item"><span class="panel-content__points-distribution__icon"><i class="fas fa-trophy icon--gold"></i></span><span class="panel-content__points-distribution__title">1st - 4th</span><div class="panel-content__points-distribution__container"><span>0 points</span></div></li></ul></div></div><div class="panel-table" data-js-battle-royale="table"><div class="panel-table__row row--header" data-js-battle-royale="header-row"><div class="panel-table__cell cell--rank" data-sort-type="rank"><div class="panel-table__cell-grouped"><i class="fas fa-hashtag panel-table__cell-icon"></i><span>Rank</span><div class="panel-table__sort"><i class="far fa-arrows-alt-v" data-js-battle-royale="sort-icon"></i></div></div></div><div class="panel-table__cell cell--team" data-sort-type="team"><div class="panel-table__cell-grouped"><i class="fas fa-users panel-table__cell-icon"></i><span>Participant</span><div class="panel-table__sort"><i class="far fa-arrows-alt-v" data-js-battle-royale="sort-icon"></i></div></div></div><div class="panel-table__cell cell--total-points" data-sort-type="total-points"><div class="panel-table__cell-grouped"><i class="fas fa-star panel-table__cell-icon"></i><span class="d-none d-md-block">Total Points</span><span class="d-block d-md-none">Pts.</span><div class="panel-table__sort"><i class="far fa-arrows-alt-v" data-js-battle-royale="sort-icon"></i></div></div></div><div class="panel-table__cell cell--game-container-nav-holder" data-js-battle-royale="game-nav-holder"><div class="panel-table__cell cell--game-container" data-js-battle-royale="game-container"></div></div></div><div class="panel-table__row" data-js-battle-royale="row"><div class="panel-table__cell cell--rank " data-sort-val="1" data-sort-type="rank"><div class="panel-table__cell-grouped"><i class="fas fa-trophy panel-table__cell-icon icon--gold"></i><span>1st</span></div></div><div class="panel-table__cell cell--team " data-sort-val="C" data-sort-type="team"><div class="panel-table__cell-grouped"><div class="block-players-wrapper"><div class="block-player has-team"><span class="name" style="overflow:hidden;text-overflow:ellipsis;white-space:pre">[[C|C]]</span></div></div></div></div><div class="panel-table__cell cell--total-points " data-sort-val="4" data-sort-type="total-points"><div class="panel-table__cell-grouped">4</div></div><div class="panel-table__cell cell--game-container" data-js-battle-royale="game-container"></div></div><div class="panel-table__row" data-js-battle-royale="row"><div class="panel-table__cell cell--rank " data-sort-val="2" data-sort-type="rank"><div class="panel-table__cell-grouped"><i class="fas fa-trophy panel-table__cell-icon icon--silver"></i><span>2nd</span></div></div><div class="panel-table__cell cell--team " data-sort-val="abc" data-sort-type="team"><div class="panel-table__cell-grouped"><div class="block-players-wrapper"><div class="block-player has-team"><span class="name" style="overflow:hidden;text-overflow:ellipsis;white-space:pre">[[abc|A]]</span></div></div></div></div><div class="panel-table__cell cell--total-points " data-sort-val="3" data-sort-type="total-points"><div class="panel-table__cell-grouped">3</div></div><div class="panel-table__cell cell--game-container" data-js-battle-royale="game-container"></div></div><div class="panel-table__row" data-js-battle-royale="row"><div class="panel-table__cell cell--rank " data-sort-val="3" data-sort-type="rank"><div class="panel-table__cell-grouped"><i class="fas fa-trophy panel-table__cell-icon icon--bronze"></i><span>3rd</span></div></div><div class="panel-table__cell cell--team " data-sort-val="B" data-sort-type="team"><div class="panel-table__cell-grouped"><div class="block-players-wrapper"><div class="block-player has-team"><span class="name" style="overflow:hidden;text-overflow:ellipsis;white-space:pre">[[B|B]]</span></div></div></div></div><div class="panel-table__cell cell--total-points " data-sort-val="2" data-sort-type="total-points"><div class="panel-table__cell-grouped">2</div></div><div class="panel-table__cell cell--game-container" data-js-battle-royale="game-container"></div></div><div class="panel-table__row" data-js-battle-royale="row"><div class="panel-table__cell cell--rank " data-sort-val="4" data-sort-type="rank"><div class="panel-table__cell-grouped"><i class="fas fa-trophy panel-table__cell-icon icon--copper"></i><span>4th</span></div></div><div class="panel-table__cell cell--team " data-sort-val="D" data-sort-type="team"><div class="panel-table__cell-grouped"><div class="block-players-wrapper"><div class="block-player has-team"><span class="name" style="overflow:hidden;text-overflow:ellipsis;white-space:pre">[[D|D]]</span></div></div></div></div><div class="panel-table__cell cell--total-points " data-sort-val="1" data-sort-type="total-points"><div class="panel-table__cell-grouped">1</div></div><div class="panel-table__cell cell--game-container" data-js-battle-royale="game-container"></div></div></div></div></div></div></div>

stylesheets/commons/BattleRoyale/NavigationTabs.less

@@ -14,6 +14,12 @@ Author(s): Elysienna
 		padding: 0.75rem 0;
 	}
 
+	&.is--hidden {
+		visibility: hidden;
+		padding: 0;
+		height: 0;
+	}
+
 	ul&__list {
 		list-style: none;
 		margin: 0;