Liquipedia
fix: improve the rendering for overall stats table for smaller viewports
Summary
the player name & heroes rendering is currently always left-aligned even when the wrapping causes the name and heroes to wrap to 2 rows. IMO it looks better if the player name & heroes are centered for display sizes that force 2 rows.
Current:
Suggestion:
How did you test this change?
Dev env & overriding the css changes locally with browser dev tools.
Valorant (changes behavior on overall stats tab and individual games tab): https://liquipedia.net/valorant/User:Eetwalt/Match:ID_CHAMP25PLF_R01-M001
LoL (changes behavior on overall stats): https://liquipedia.net/leagueoflegends/User:Eetwalt/Match:ID_Wrd25KnOut_R01-M004
Dota2 (no changes here, needs to stay as is): https://liquipedia.net/dota2/User:Eetwalt
SCSS to CSS conversion of .match-bm-player-player for local testing:
.match-bm-players-player {
display: flex;
padding: 1rem;
align-items: stretch;
background: var(--clr-on-surface-light-primary-8);
border-radius: 0.5rem;
}
@media (max-width: 1199px), (min-width: 1320px) {
.match-bm-players-player {
flex-wrap: wrap;
justify-content: space-between;
}
}
@media (max-width: 1199px), (min-width: 1320px) {
.wiki-valorant .match-bm-players-player {
justify-content: center;
}
}
@media (min-width: 1200px) and (max-width: 1319px), (min-width: 1510px) {
.match-bm-players-player {
display: grid;
grid-template-columns: 9.375rem auto 9.5rem;
/* set as default */
grid-gap: 1rem;
}
}
@media (min-width: 1200px) and (max-width: 1319px), (min-width: 1510px) {
.match-bm-players-player.match-bm-players-player--col-1 {
grid-template-columns: minmax(0, 1fr);
}
}
@media (min-width: 1200px) and (max-width: 1319px), (min-width: 1510px) {
.match-bm-players-player.match-bm-players-player--col-2 {
grid-template-columns: 9.375rem 1fr;
}
}
@media (min-width: 1200px) and (max-width: 1319px), (min-width: 1510px) {
.match-bm-players-player.match-bm-players-player--col-3 {
grid-template-columns: 9.375rem auto 9.5rem;
}
}
.theme--dark .match-bm-players-player {
background-color: var(--clr-on-surface-dark-primary-8);
}
.match-bm-players-player-role {
width: 1.25rem;
height: 1.25rem;
position: absolute;
inset: auto 0 0 auto;
border-radius: 0.25rem;
background-color: var(--on-background);
overflow: hidden;
display: flex;
}
.wiki-dota2 .match-bm-players-player-role {
padding: 0.25rem;
}
.wiki-dota2 .match-bm-players-player-role.role--radiant {
background-color: var(--clr-atlantis-40);
}
.wiki-dota2 .match-bm-players-player-role.role--dire {
background-color: var(--clr-california-40);
}
.wiki-leagueoflegends .match-bm-players-player-role {
padding: 0.1rem;
}
.wiki-leagueoflegends .match-bm-players-player-role.role--blue {
background-color: #0d71bf;
}
.wiki-leagueoflegends .match-bm-players-player-role.role--red {
background-color: #b81414;
}
.match-bm-players-player-role > img {
width: 100%;
height: auto;
}
.match-bm-players-player-character {
display: flex;
align-items: center;
position: relative;
}
@media (max-width: 1199px), (min-width: 1320px) {
.match-bm-players-player-character {
flex: 1 0 auto;
}
}
@media (max-width: 1199px), (min-width: 1320px) {
.wiki-valorant .match-bm-players-player-character {
flex: 0 0 auto;
}
}
@media (min-width: 1200px) and (max-width: 1319px), (min-width: 1510px) {
.wiki-dota2 .match-bm-players-player-character {
order: 1;
}
}
.match-bm-players-player-avatar {
width: 3rem;
height: 3rem;
margin-right: 0.5rem;
position: relative;
}
@media (min-width: 768px) {
.match-bm-players-player-avatar {
width: 4rem;
height: 4rem;
}
}
.match-bm-players-player-name {
display: flex;
flex-direction: column;
align-items: flex-start;
font-size: 0.9375rem;
word-wrap: anywhere;
word-break: normal;
}
.match-bm-players-player-name > a {
font-weight: bold;
}
.match-bm-players-player-name-overall {
align-items: flex-start;
}
@media (max-width: 1199px), (min-width: 1320px) {
.match-bm-players-player-name-overall {
align-items: center;
}
}
@media (min-width: 1510px) {
.match-bm-players-player-name-overall {
align-items: flex-start;
}
}
.match-bm-players-player-icon {
overflow: hidden;
border-radius: 100%;
}
.match-bm-players-player-icon img {
width: auto;
height: 3rem;
position: relative;
left: 50%;
transform: translateX(-50%);
}
@media (min-width: 768px) {
.match-bm-players-player-icon img {
height: 4rem;
}
}
.match-bm-players-player-loadout {
display: flex;
gap: 1rem;
flex: 0 0 7.5rem;
}
@media (min-width: 768px) {
.match-bm-players-player-loadout {
flex: 0 0 9.5rem;
}
}
@media (min-width: 1200px) and (max-width: 1319px), (min-width: 1510px) {
.match-bm-players-player-loadout {
order: 3;
}
}
.match-bm-players-player-loadout-item {
display: flex;
flex-direction: row;
align-items: flex-start;
width: 1.5rem;
height: 1.5rem;
border-radius: 0.25rem;
overflow: hidden;
background-color: var(--clr-on-surface-light-primary-16);
}
.theme--dark .match-bm-players-player-loadout-item {
background-color: var(--clr-on-surface-dark-primary-16);
}
.match-bm-players-player-loadout-item.item--backpack img {
opacity: 0.4;
}
@media (min-width: 768px) {
.match-bm-players-player-loadout-item {
width: 2rem;
height: 2rem;
}
}
.match-bm-players-player-loadout-item img {
object-fit: cover;
height: 100%;
width: 100%;
}
.match-bm-players-player-loadout-item img[ title="Empty"] {
opacity: 0;
}
.match-bm-players-player-loadout-items {
display: flex;
align-items: flex-start;
gap: 0.25rem;
flex-wrap: wrap;
}
.match-bm-players-player-loadout-rs {
display: flex;
flex-direction: column;
align-items: flex-start;
width: 1.5rem;
height: 1.5rem;
border-radius: 100%;
overflow: hidden;
background-color: var(--clr-on-surface-light-primary-16);
}
@media (min-width: 768px) {
.match-bm-players-player-loadout-rs {
width: 2rem;
height: 2rem;
}
}
.theme--dark .match-bm-players-player-loadout-rs {
background-color: var(--clr-on-surface-dark-primary-16);
}
.match-bm-players-player-loadout-rs img {
object-fit: cover;
height: 100%;
width: 100%;
}
.match-bm-players-player-loadout-rs-wrap {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 0.25rem;
}
.match-bm-players-player-stat {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.25rem;
}
.match-bm-players-player-stat-title {
display: flex;
align-items: center;
font-size: 0.875rem;
}
@media (max-width: 413px) {
.wiki-leagueoflegends .match-bm-players-player-stat-title {
font-size: 0.6875rem;
}
}
.match-bm-players-player-stat-title i {
margin-right: 0.5rem;
}
.match-bm-players-player-stat-title img {
margin-right: 0.5rem;
}
.theme--dark .match-bm-players-player-stat-title img {
filter: invert(1);
}
.match-bm-players-player-stat-data {
font-weight: bold;
font-size: 0.9375rem;
}
@media (max-width: 413px) {
.wiki-leagueoflegends .match-bm-players-player-stat-data {
font-size: 0.75rem;
}
}
.match-bm-players-player-stats {
display: grid;
grid-gap: 0.5rem;
grid-template-columns: repeat(3, minmax(0, 1fr));
/* set as default */
grid-template-rows: 1fr 1fr;
}
@media (max-width: 1199px), (min-width: 1320px) {
.match-bm-players-player-stats {
flex: 1 0 100%;
margin-top: 1rem;
}
}
@media (min-width: 1200px) and (max-width: 1319px), (min-width: 1510px) {
.match-bm-players-player-stats {
order: 2;
margin-top: unset;
}
}
.match-bm-players-player-stats.match-bm-players-player-stats--col-4 {
grid-template-columns: repeat(4, minmax(0, 1fr));
grid-template-rows: 1fr;
align-items: center;
}
.match-bm-players-player-stats.match-bm-players-player-stats--col-5 {
grid-template-columns: repeat(5, minmax(0, 1fr));
grid-template-rows: 1fr;
align-items: center;
}
@media (max-width: 1023px) {
.match-bm-players-player-stats.match-bm-players-player-stats--col-5 {
grid-template-columns: repeat(3, minmax(0, 1fr));
grid-template-rows: 1fr 1fr;
}
}
hmm I agree that the current overall stats display is not ideal, but I am not quite sure whether centering is the right solution
personally I think putting names and characters in a longer single row could look better (haven't tested)
maybe this is something to get feedback from community first?
codewise lgtm (on phone)
hmm I agree that the current overall stats display is not ideal, but I am not quite sure whether centering is the right solution
personally I think putting names and characters in a longer single row could look better (haven't tested)
maybe this is something to get feedback from community first?
codewise lgtm (on phone)
You mean like this?
I don't think this helps much. The main problem to me is that the stats are center aligned, so I think it should be consistent. Granted, I think this whole table needs a redesign at some point, just looking for a better short term alternative
Ultimately, I think we should do something like vlr on desktop (header row for stat names up top instead of repeating them on every player), but have something nicer than horizontal scroll on mobile:
Personally, I strongly disagree with a table look. We are in general trying to move away from it, as it's not an engaging way of looking at data for users. It might work very well for expert users, but most users aren't those.
Also I do not think that the VLR table layout makes it any easier to consume. I still need to move my eyes between each number hte in ADR column back to the name at the start.
Really? To be honest I struggle to see any better way to display number statistics like this with a better layout than a table. To me the current way of having the same title displayed on every row is just waste of space, and I personally find a table would be easier to read. Different preferences I guess