User profile design (elements position) suggestion

[cyperdark]

Current

Suggestion

css style that i used to change user profile

```css .profile-info__title { text-shadow: 0px 1px 1px black, 0px 1px 2px black; filter: brightness(2) saturate(0.5); } .profile-info__flag-flag { font-size: calc(var(--icon-height) / 1.2); } .profile-info__flags { margin-top: 5px; } .profile-info__flag-text { padding-left: 6px; } .profile-detail__stats { justify-content: center; align-items: center; } .bar--user-profile { height: 22px; overflow: hidden; } .bar__text { top: 50%; right: 10px; transform: translate(0, -50%); margin-top: 0; } .profile-info__bg::before { content: ''; position: absolute; top: 0px; left: 0px; right: 0px; bottom: 0px; background: linear-gradient(0deg, rgba(0, 0, 0, 0.2) 0%, transparent 5%, transparent 95%, rgba(0, 0, 0, 0.2)); } .profile-info__avatar { border-radius: calc(var(--cover-radius) / 1.5); } .profile-detail { position: relative; grid-template-areas: "stats" "badges"; } .profile-detail .profile-badges {grid-area: badges;} .profile-detail .profile-detail__stats {grid-area: stats;} .profile-detail__stats>div:nth-child(1) { display: grid; grid-template-areas: "stats" "rank" "ranks"; } .profile-detail__stats>div:nth-child(1)>div:nth-child(1) {grid-area: ranks;position: absolute;top: 0;right: 0;transform: translate(-40%, -145%);} .profile-detail__stats>div:nth-child(1)>div:nth-child(2) {grid-area: rank;} .profile-detail__stats>div:nth-child(1)>div:nth-child(3) {grid-area: stats;} .profile-detail__stats>div:nth-child(1)>div:nth-child(3)>div:nth-child(1) { display: grid; gap: 0px 30px; grid-template-areas: "time medals pp"; } .profile-detail__stats>div:nth-child(1)>div:nth-child(3)>div:nth-child(1)>div:nth-child(1) {grid-area: medals;min-width: fit-content;} .profile-detail__stats>div:nth-child(1)>div:nth-child(3)>div:nth-child(1)>div:nth-child(2) {grid-area: pp;min-width: fit-content;} .profile-detail__stats>div:nth-child(1)>div:nth-child(3)>div:nth-child(1)>div:nth-child(3) {grid-area: time;min-width: fit-content;} .profile-info__icon--supporter { color: hsl(main_color,20%,25%); } .profile-badges { padding: 15px; overflow-y: auto; flex-wrap: nowrap; if enable_colors { background: hsl(main_color,10%,20%); } else { background: hsl(333,10%,20%); } border-radius: 4px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25); } ```

[peppy]

@arflyte

[cyperdark]

@arflyte any thoughts?

[cl8n]

i put it on our list to address when looking over the profile page again, but I'll leave my initial thoughts here

• the global rank needs to be somewhere that acts like a header for the graph, otherwise it has no context until you hover over the line to see what it's for
• user colors have been updated since this issue was posted and should be a little more legible on titles now. going forward we probably won't be using them to color titles in the first place, though
• I think all badges need to be shown at all times, that's part of what makes them such a prestigious award

so I don't think most of the individual changes are great here, but agree with (what I assume to be) the general idea of cleaning up the layout to leave less awkward gaps and misaligned grid items