feat(matchticker): add match detail button for matchpages (#4714)

* wip * wip * wip * wip * wip * stylelint
Liquipedia · Sep 12, 2024 · 0b212fd · 0b212fd
1 parent 7642e5a
commit 0b212fd
Show file tree

Hide file tree

Showing 2 changed files with 65 additions and 1 deletion.
diff --git a/components/match_ticker/commons/match_ticker_display_components_new.lua b/components/match_ticker/commons/match_ticker_display_components_new.lua
@@ -117,12 +117,33 @@ function Details:create()
 		self.root:addClass(HIGHLIGHT_CLASS)
 	end
 
+	local matchBottomBar = mw.html.create('div'):addClass('match-bottom-bar')
+	matchBottomBar:node(self:countdown())
+
+	if self.match.match2bracketdata.matchpage then
+		matchBottomBar:node(Page.makeInternalLink(tostring(mw.html.create('div')
+			:addClass('btn btn-secondary btn-new btn--match-details')
+			:attr('title', 'View Match Page')
+			:node(mw.html.create('i')
+				:addClass('fas fa-external-link')
+			)
+			:wikitext('  Details')
+		), self.match.match2bracketdata.matchpage))
+	elseif self.match.match2id then
+		local link = 'Match:ID ' .. self.match.match2id
+		matchBottomBar:node(Page.makeInternalLink(tostring(mw.html.create('div')
+			:addClass('btn btn-new btn--add-match-details show-when-logged-in')
+			:attr('title', 'Add Match Page')
+			:wikitext('+ Add details')
+		), link))
+	end
+
 	return self.root
 		:node(mw.html.create('div'):addClass('match-links')
 			:node(self:tournament())
 			:node(self:streams())
 		)
-		:node(self:countdown())
+		:node(matchBottomBar)
 end
 
 ---It will display both countdown and date of the match so the user can select which one to show

diff --git a/stylesheets/commons/MatchTicker.less b/stylesheets/commons/MatchTicker.less
@@ -99,6 +99,49 @@ Author(s): Nadox
 				}
 			}
 
+			.match-bottom-bar {
+				display: flex;
+				align-items: center;
+				justify-content: space-between;
+
+				> a {
+					flex-shrink: 0;
+				}
+
+				> a:hover {
+					.btn--add-match-details {
+						.theme--light & {
+							background-color: rgba( 0, 0, 0, 0.4 );
+							color: #0d61a4;
+						}
+
+						.theme--dark & {
+							background-color: rgba( 255, 255, 255, 0.4 );
+							color: var( --clr-primary-80 );
+						}
+					}
+				}
+
+				.btn--match-details,
+				.btn--add-match-details {
+					padding: 0.3125rem 0.75rem;
+				}
+
+				.btn--match-details {
+					background-color: transparent;
+				}
+
+				.btn--add-match-details {
+					.theme--light & {
+						color: #0d61a4;
+					}
+
+					.theme--dark & {
+						color: var( --clr-primary-80 );
+					}
+				}
+			}
+
 			.match-countdown {
 				display: flex;
 				justify-content: center;