feat(matchTicker): add matchPage link if applicable

[hjpalpha]

Summary

requested by elisa

Adds a link to the matchPage on the score elements if the match has a match page stored in match2bracketdata.

regarding the css change: can not remove/replace the old classes due to them still being used on several wikis

How did you test this change?

dev + browser dev tools
https://liquipedia.net/leagueoflegends/Liquipedia:Matches/mainpage/dynamic/dev

[hjpalpha]

question: should bestof link or not?

[mbergen]

question: should bestof link or not?

I don't like the looks of it at all, but i think the bigger the area to click on the better for the UX

[hjpalpha]

question: should bestof link or not?

I don't like the looks of it at all, but i think the bigger the area to click on the better for the UX

mind there is a design rework ongoing for this (PR #4363), so looks of it will change in the forseeable future anyways
this is more of a quick shot to support what lol wants

[mbergen]

mind there is a design rework ongoing for this (PR #4363), so looks of it will change in the forseeable future anyways this is more of a quick shot to support what lol wants

IIRC that redesign also does not have a dedicated thing for match pages. I think it can be quite confusing as well as not be visually appealing to have a link behind non-text/image/icon things like scores, as it's not obvious where it links to

[iMarbot]

Personally, I would just make the whole match "card" clickable which takes you to the match, i.e., making the card more of a button instead. Would retain clicking on specific items such as a team name or logo or tournament/icon to go to where they go now though.

Probably a lot more work though and this is fine too.

[hjpalpha]

Personally, I would just make the whole match "card" clickable which takes you to the match, i.e., making the card more of a button instead. Would retain clicking on specific items such as a team name or logo or tournament/icon to go to where they go now though.

Probably a lot more work though and this is fine too.

lot more work and would make the already clickable elements (streams, tournament page) useless

[hjpalpha]

alternatively we could add a matchpage icon like the streams via countdown

[FenrirWulf]

alternatively we could add a matchpage icon like the streams via countdown

I like this idea a lot more. Using the Best of text as the match page would break the site norms already established via stuff like {{Abbr/Bo3}} (not really what i mean but you get the idea). Things like this with the formatting that the match ticker already uses will be treated completely different

[mbergen]

alternatively we could add a matchpage icon like the streams via countdown

That would be ideal, but IMO align it with the tournament name, not the stream icons

[hjpalpha]

if someone provides an icon for it i can look into that

[FenrirWulf]

if someone provides an icon for it i can look into that

What about just using the same icon as the Infobox for websites (maybe not this exact icon but you get the idea) https://liquipedia.net/commons/File:InfoboxIcon_Homepage.png

[mbergen]

https://liquipedia.net/commons/File:Icon_Matchpage.png
(can be converted into an InfoboxIcon if necessary)

[hjpalpha]

which order do we prefer?

• Version 1:
  
• Version 2:
  

[hjpalpha]

https://liquipedia.net/commons/File:Icon_Matchpage.png (can be converted into an InfoboxIcon if necessary)

imo icon needs to be a bit darker on lightmode

fwiw we can easily add light/darkmode versiosn in the code too (using LIS display for it)

[hjpalpha]

martin on discord:
probably gonna get hate for this, but how about in the middle of that row (so directly below the score/BoX)?

remark for my later self:

• have to adjust css for that some more (widths of the elements) to make sure it is centered

[iMarbot]

• have to adjust css for that some more (widths of the elements) to make sure it is centered

Adjusted existing HTML/CSS from CS wiki to produce this:

<td class="match-filler" colspan="3">
  <div style="display:flex;justify-content: space-between;">
    <div style="display:flex;gap:5px;align-items:center;width: calc(50% + 13px);justify-content: space-between;">
      <span class="match-countdown"><span class="timer-object timer-object-countdown-only" data-timestamp="1720260000" data-separator="&amp;#8203;"><span class="timer-object-date">July 6, 2024 - 10:00 <abbr data-tz="+0:00" title="Coordinated Universal Time (UTC+0)">UTC</abbr></span><span class="timer-object-separator">&amp;#8203;</span><span class="timer-object-countdown"><span class="timer-object-countdown-time"><span class="timer-object-countdown-live">LIVE!</span></span></span></span></span>
      <span class="league-icon-small-image"><a href="/leagueoflegends/Match:ID_YMcIp0UT5g_0008" title="Match Page"><img alt="Match Page" src="/commons/images/thumb/f/fd/Icon_Matchpage.png/39px-Icon_Matchpage.png" decoding="async" width="39" height="50" srcset="/commons/images/thumb/f/fd/Icon_Matchpage.png/59px-Icon_Matchpage.png 1.5x, /commons/images/thumb/f/fd/Icon_Matchpage.png/79px-Icon_Matchpage.png 2x" style="image-rendering: -webkit-optimize-contrast;"></a></span>
    </div>
    <div style="width: min(calc(50% - 13px), 185px);display:flex;">
      <div class="text-nowrap" style="overflow:hidden; text-overflow:ellipsis; width:100%; font-size:11px; height:16px; margin:auto;text-align:center;"><a href="/counterstrike/IESF/World_Esports_Championships/2024/Western_Europe" title="IESF/World Esports Championships/2024/Western Europe">IESF ERQ West 2024</a></div>
      <span class="league-icon-small-image"><a href="/counterstrike/IESF/World_Esports_Championships/2024/Western_Europe" title="IESF World Esports Championship 2024: West European Qualifier"><img alt="IESF World Esports Championship 2024: West European Qualifier" src="/commons/images/thumb/0/07/IESF_World_Esports_Championships_2024_alt_icon_allmode.png/50px-IESF_World_Esports_Championships_2024_alt_icon_allmode.png" decoding="async" width="50" height="31" srcset="/commons/images/thumb/0/07/IESF_World_Esports_Championships_2024_alt_icon_allmode.png/75px-IESF_World_Esports_Championships_2024_alt_icon_allmode.png 1.5x, /commons/images/thumb/0/07/IESF_World_Esports_Championships_2024_alt_icon_allmode.png/100px-IESF_World_Esports_Championships_2024_alt_icon_allmode.png 2x"></a></span>
    </div>
  </div>
</td>

(desktop)

(mobile)

[hjpalpha]

• have to adjust css for that some more (widths of the elements) to make sure it is centered

Adjusted existing HTML/CSS from CS wiki to produce this:

<td class="match-filler" colspan="3">
  <div style="display:flex;justify-content: space-between;">
    <div style="display:flex;gap:5px;align-items:center;width: calc(50% + 13px);justify-content: space-between;">
      <span class="match-countdown"><span class="timer-object timer-object-countdown-only" data-timestamp="1720260000" data-separator="&amp;#8203;"><span class="timer-object-date">July 6, 2024 - 10:00 <abbr data-tz="+0:00" title="Coordinated Universal Time (UTC+0)">UTC</abbr></span><span class="timer-object-separator">&amp;#8203;</span><span class="timer-object-countdown"><span class="timer-object-countdown-time"><span class="timer-object-countdown-live">LIVE!</span></span></span></span></span>
      <span class="league-icon-small-image"><a href="/leagueoflegends/Match:ID_YMcIp0UT5g_0008" title="Match Page"><img alt="Match Page" src="/commons/images/thumb/f/fd/Icon_Matchpage.png/39px-Icon_Matchpage.png" decoding="async" width="39" height="50" srcset="/commons/images/thumb/f/fd/Icon_Matchpage.png/59px-Icon_Matchpage.png 1.5x, /commons/images/thumb/f/fd/Icon_Matchpage.png/79px-Icon_Matchpage.png 2x" style="image-rendering: -webkit-optimize-contrast;"></a></span>
    </div>
    <div style="width: min(calc(50% - 13px), 185px);display:flex;">
      <div class="text-nowrap" style="overflow:hidden; text-overflow:ellipsis; width:100%; font-size:11px; height:16px; margin:auto;text-align:center;"><a href="/counterstrike/IESF/World_Esports_Championships/2024/Western_Europe" title="IESF/World Esports Championships/2024/Western Europe">IESF ERQ West 2024</a></div>
      <span class="league-icon-small-image"><a href="/counterstrike/IESF/World_Esports_Championships/2024/Western_Europe" title="IESF World Esports Championship 2024: West European Qualifier"><img alt="IESF World Esports Championship 2024: West European Qualifier" src="/commons/images/thumb/0/07/IESF_World_Esports_Championships_2024_alt_icon_allmode.png/50px-IESF_World_Esports_Championships_2024_alt_icon_allmode.png" decoding="async" width="50" height="31" srcset="/commons/images/thumb/0/07/IESF_World_Esports_Championships_2024_alt_icon_allmode.png/75px-IESF_World_Esports_Championships_2024_alt_icon_allmode.png 1.5x, /commons/images/thumb/0/07/IESF_World_Esports_Championships_2024_alt_icon_allmode.png/100px-IESF_World_Esports_Championships_2024_alt_icon_allmode.png 2x"></a></span>
    </div>
  </div>
</td>

(desktop) (mobile)

thx

will check how it looks for finished matches in september (longest month display) with 2 streams on it when building it
(probably monday)

[liquidely]

I had a brief talk about it with Kevin and he suggested to use a button "Match details" instead of an icon, since the current chosen icon doesn't seem very clear. Let me know what you think

[hjpalpha]

I had a brief talk about it with Kevin and he suggested to use a button "Match details" instead of an icon, since the current chosen icon doesn't seem very clear. Let me know what you think

imo that would take up way too much space
if we actually want a button best solution i see would be to add an additional row in the table to add it

for the row something like this (untested and am on phone atm)

<tr>
	<td colspan=3>
		<div class="center the button here">
			[[matchPageLink|
				<div class="btn btn-secondary">
					<i class="fad fa-link" aria-hidden="true" />
					&nbsp;&nbsp;&nbsp;Match details
				</div>
			]]
		</div>
	</td>
</tr>

[liquidely]

Would it? Can't it be something like this?

[liquidely]

Ah I see on mobile that would become a problem

[hjpalpha]

Ah I see on mobile that would become a problem

not only on mobile
if you have a finished match, i.e. the date displayed on the left and hence the element on the left being way longer
or if the countdown is a bit longer
or there are more streams
or if the tournament name is longer

[liquidely]

That's indeed not making it easier. What about this icon suggestion from Kevin: https://fontawesome.com/v5/icons/info-circle?f=classic&s=solid ?

[hjpalpha]

That's indeed not making it easier. What about this icon suggestion from Kevin: https://fontawesome.com/v5/icons/info-circle?f=classic&s=solid ?

tbh i am fine with almost any icon :P

[hjpalpha]

@liquidely

[mbergen]

Could we make the icon the same color that it has on brackets for popups? For long tournament names it looks like it belongs to the name, not like a separate thing to click on

[iMarbot]

imo the button is the only one that's clear is a link (especially on mobile). How about putting the "i" in a button?

[hjpalpha]

[elisazanatta]

Both "i" solutions looks good to me tbh

[liquidely]

I like this too!

[mbergen]

Not entirely convinced on the display, but i don't have a better suggestion

[elisazanatta]

Between those I prefer the first one. But both looks fine for me. I can't think of anything better too. I'd just keep the "i" cause we already use it on the brackets.

The score being clickable is not a thing anymore?

[Rathoz]

Not entirely convinced on the display, but i don't have a better suggestion

This for me too