Merge pull request #11720 from notbakaneko/feature/multiple-mappers-f…

…ix-sizing Support displaying longer guest mapper lists in Beatmap Discussions
ppy · Dec 6, 2024 · a0c02ab · a0c02ab
2 parents 85ec033 + 07fa111
commit a0c02ab
Show file tree

Hide file tree

Showing 5 changed files with 45 additions and 41 deletions.
diff --git a/resources/css/bem/beatmap-basic-stats.less b/resources/css/bem/beatmap-basic-stats.less
@@ -3,16 +3,15 @@
 
 .beatmap-basic-stats {
   display: flex;
+  gap: 10px;
   justify-content: space-between;
-  margin: -5px -5px;
   font-weight: 600;
   font-size: @font-size--normal;
   color: @yellow-light;
 
   &__entry {
     display: flex;
     flex: none;
-    padding: 5px 5px;
     align-items: center;
   }
 

diff --git a/resources/css/bem/beatmap-discussions-header-top.less b/resources/css/bem/beatmap-discussions-header-top.less
@@ -11,22 +11,27 @@
     --gutter: @gutter-beatmapset-desktop;
   }
 
-  &__beatmap-stats {
-    position: absolute;
-
-    right: 0;
-    top: 0;
-    width: 100%;
+  &__basic-stats {
+    grid-area: stats;
     padding: 10px 10px 0;
-    flex-direction: column;
-    display: flex;
+  }
 
-    @media @narrow-up {
-      flex-direction: row;
-      justify-content: space-between;
+  &__beatmap-stats {
+    position: relative;
+    display: grid;
+    grid-template-areas: "owners stats" "chart chart";
+    grid-template-columns: 1fr auto;
+    background-color: hsl(var(--hsl-b4));
+
+    @media @narrow {
+      grid-template-areas: "stats" "owners" "chart";
     }
   }
 
+  &__chart {
+    grid-area: chart;
+  }
+
   &__content {
     position: relative;
     padding: 70px var(--gutter) 0;
@@ -81,10 +86,10 @@
     }
   }
 
-  &__guest {
+  &__owners {
+    grid-area: owners;
     font-size: @font-size--title-small;
-    display: flex;
-    align-items: center;
+    padding: 10px 10px 0;
   }
 
   &__stats {

diff --git a/resources/css/bem/beatmap-list.less b/resources/css/bem/beatmap-list.less
@@ -86,7 +86,7 @@
     padding: 10px 0;
     min-width: 100%;
     width: max-content;
-    max-width: ~"max(90vw, 100%)";
+    max-width: min(max(90vw, 100%), @container-sm);
 
     display: none;
     .@{top}--selecting & {

diff --git a/resources/css/bem/beatmapset-discussions-chart.less b/resources/css/bem/beatmapset-discussions-chart.less
@@ -5,11 +5,9 @@
   @_top: beatmapset-discussions-chart;
 
   --icon-area-height: 30px;
-  width: 100%;
-  height: 150px;
+  height: 115px;
   position: relative;
   padding: 0 40px;
-  background-color: @osu-colour-b4;
 
   &::before {
     --border-size: 2px;
@@ -32,7 +30,7 @@
   &__item {
     .link-plain();
     position: absolute;
-    top: 0;
+    bottom: 0;
     height: 100%;
     width: 6px;
     transform: translateX(-3px);
@@ -49,8 +47,8 @@
       background-image: linear-gradient(
         to top,
         hsl(var(--hsl-c1)),
-        hsl(var(--hsl-c1)) 10%,
-        hsla(var(--hsl-c1), 0) 70%
+        hsl(var(--hsl-c1)) 14%,
+        hsla(var(--hsl-c1), 0) 98%
       );
       transform: scaleX(var(--line-scale));
     }

diff --git a/resources/js/beatmap-discussions/header.tsx b/resources/js/beatmap-discussions/header.tsx
@@ -174,26 +174,28 @@ export class Header extends React.Component<Props> {
               </div>
             </div>
           </div>
-          <div className='u-relative'>
-            <Chart
-              discussions={this.timelineDiscussions}
-              duration={this.currentBeatmap.total_length * 1000}
-            />
-            <div className={`${bn}__beatmap-stats`}>
-              <div className={`${bn}__guest`}>
-                {hasGuestOwners(this.currentBeatmap, this.beatmapset) && (
-                  <span>
-                    <StringWithComponent
-                      mappings={{
-                        user: <UserLinkList users={this.currentBeatmap.owners ?? []} />,
-                      }}
-                      pattern={trans('beatmaps.discussions.guest')}
-                    />
-                  </span>
-                )}
-              </div>
+          <div className={`${bn}__beatmap-stats`}>
+            <div className={`${bn}__owners`}>
+              {hasGuestOwners(this.currentBeatmap, this.beatmapset) && (
+                <span>
+                  <StringWithComponent
+                    mappings={{
+                      user: <UserLinkList users={this.currentBeatmap.owners ?? []} />,
+                    }}
+                    pattern={trans('beatmaps.discussions.guest')}
+                  />
+                </span>
+              )}
+            </div>
+            <div className={`${bn}__basic-stats`}>
               <BeatmapBasicStats beatmap={this.currentBeatmap} beatmapset={this.beatmapset} />
             </div>
+            <div className={`${bn}__chart`}>
+              <Chart
+                discussions={this.timelineDiscussions}
+                duration={this.currentBeatmap.total_length * 1000}
+              />
+            </div>
           </div>
         </div>
       </div>