From 0b212fd34d1bfeb02d4d1dabb45a9ced81c47617 Mon Sep 17 00:00:00 2001
From: Laura van Helvoort <105433238+liquidely@users.noreply.github.com>
Date: Thu, 12 Sep 2024 14:08:03 +0200
Subject: [PATCH] feat(matchticker): add match detail button for matchpages
 (#4714)

* wip

* wip

* wip

* wip

* wip

* stylelint
---
 .../match_ticker_display_components_new.lua   | 23 +++++++++-
 stylesheets/commons/MatchTicker.less          | 43 +++++++++++++++++++
 2 files changed, 65 insertions(+), 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
index 9b8625e5790..ebf215f2593 100644
--- 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
index a35482961ce..9b50b30e03d 100644
--- 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;