Merge pull request #11714 from nanaya/leaderboard-card-alignment

Adjust flag size on leaderboard top card
ppy · Dec 9, 2024 · 0f23321 · 0f23321
2 parents 0f14bc3 + 1b18ee2
commit 0f23321
Show file tree

Hide file tree

Showing 6 changed files with 29 additions and 20 deletions.
diff --git a/resources/css/bem/beatmap-score-top.less b/resources/css/bem/beatmap-score-top.less
@@ -9,7 +9,7 @@
   flex-direction: column;
 
   &__achieved {
-    margin: 2px 0;
+    margin-bottom: 2px; // more balanced margin
     font-size: @font-size--small;
   }
 
@@ -18,6 +18,12 @@
     margin: 0px 10px;
   }
 
+  &__flags {
+    display: flex;
+    gap: 5px;
+    font-size: @flag-size-medium; // icon size
+  }
+
   &__link-container {
     .full-size();
   }
@@ -130,6 +136,8 @@
 
   &__user-box {
     flex: none;
+    display: grid;
+    gap: 4px;
 
     @media @desktop {
       margin-right: 10px;
@@ -139,7 +147,6 @@
   &__username {
     font-size: 18px;
     font-weight: 700;
-    margin-bottom: 2px;
     display: block;
     .link-inverted();
   }

diff --git a/resources/css/bem/flag-country.less b/resources/css/bem/flag-country.less
@@ -32,7 +32,7 @@
   }
 
   &--medium {
-    --height: 20px;
+    --height: @flag-size-medium;
   }
 
   &--small {

diff --git a/resources/css/bem/forum-post-info.less b/resources/css/bem/forum-post-info.less
@@ -37,6 +37,7 @@
       width: 100%;
       display: flex;
       justify-content: center;
+      font-size: @flag-size-medium;
     }
 
     &--group-badge {

diff --git a/resources/css/variables.less b/resources/css/variables.less
@@ -324,3 +324,5 @@
 @user-card-height: 120px;
 
 @user-list-icon-size: 20px;
+
+@flag-size-medium: 20px;
diff --git a/resources/js/beatmapsets-show/scoreboard/top-card.tsx b/resources/js/beatmapsets-show/scoreboard/top-card.tsx
@@ -80,19 +80,21 @@ export default class TopCard extends React.PureComponent<Props> {
                 />
               </div>
 
-              <a
-                className='u-hover'
-                href={route('rankings', {
-                  country: this.props.score.user.country_code,
-                  mode: ruleset,
-                  type: 'performance',
-                })}
-              >
-                <FlagCountry
-                  country={this.props.score.user.country}
-                  modifiers='flat'
-                />
-              </a>
+              <div className='beatmap-score-top__flags'>
+                <a
+                  className='u-hover'
+                  href={route('rankings', {
+                    country: this.props.score.user.country_code,
+                    mode: ruleset,
+                    type: 'performance',
+                  })}
+                >
+                  <FlagCountry
+                    country={this.props.score.user.country}
+                    modifiers='flat'
+                  />
+                </a>
+              </div>
             </div>
           </div>
 

diff --git a/resources/views/forum/topics/_post_info.blade.php b/resources/views/forum/topics/_post_info.blade.php
@@ -78,10 +78,7 @@ class="forum-post-info__row forum-post-info__row--title"
                 'type' => 'performance',
                 'country' => $user->country->getKey(),
             ])}}">
-                @include('objects._flag_country', [
-                    'country' => $user->country,
-                    'modifiers' => 'medium',
-                ])
+                @include('objects._flag_country', ['country' => $user->country])
             </a>
         </div>
     @endif
Original file line number	Diff line number	Diff line change
Expand Up		@@ -324,3 +324,5 @@
		@user-card-height: 120px;

		@user-list-icon-size: 20px;

		@flag-size-medium: 20px;