Merge pull request #11482 from notbakaneko/feature/fix-spotlight-drop…

…down Fix spotlight dropdown height
ppy · Sep 11, 2024 · ae9fd8e · ae9fd8e
2 parents e154712 + 9d466fe
commit ae9fd8e
Show file tree

Hide file tree

Showing 8 changed files with 15 additions and 70 deletions.
diff --git a/app/Http/Controllers/RankingController.php b/app/Http/Controllers/RankingController.php
@@ -364,8 +364,9 @@ public function spotlight($mode)
 
         $selectOptionTransformer = new SelectOptionTransformer();
         $selectOptions = [
-            'selected' => json_item($spotlight, $selectOptionTransformer),
-            'options' => json_collection($spotlights, $selectOptionTransformer),
+            'currentItem' => json_item($spotlight, $selectOptionTransformer),
+            'items' => json_collection($spotlights, $selectOptionTransformer),
+            'type' => 'spotlight',
         ];
 
         return ext_view(

diff --git a/resources/css/bem/select-options.less b/resources/css/bem/select-options.less
@@ -9,29 +9,24 @@
   --option-padding: 5px 10px;
   --option-select-padding: 15px 10px;
   --selector-display: none;
-  --selector-max-height: auto;
+  --selector-max-height: 400px; // arbitrary
   --selector-overflow-y: auto;
 
-  &--basic {
-    --selector-max-height: 400px; // arbitrary
-    --selector-overflow-y: scroll;
-  }
-
   &--beatmap-discussions-user-filter {
     --decoration-colour: hsl(var(--hsl-c1));
+    --selector-max-height: auto;
 
     @media @desktop {
       width: 200px;
     }
   }
 
   &--ranking {
-    --selector-max-height: 400px; // arbitrary
-    --selector-overflow-y: scroll;
     --option-select-padding: 5px 10px;
   }
 
   &--report {
+    --selector-max-height: auto;
     width: 100%;
   }
 

diff --git a/resources/js/components/basic-select-options.tsx b/resources/js/components/basic-select-options.tsx
@@ -7,18 +7,18 @@ import { route } from 'laroute';
 import * as React from 'react';
 import { fail } from 'utils/fail';
 import { navigate } from 'utils/turbolinks';
+import { updateQueryString } from 'utils/url';
 
 interface Props {
   currentItem: SelectOptionJson;
   items: SelectOptionJson[];
-  type: 'daily_challenge' | 'judge_results' | 'multiplayer' | 'seasons';
+  type: 'daily_challenge' | 'judge_results' | 'multiplayer' | 'seasons' | 'spotlight';
 }
 
 export default class BasicSelectOptions extends React.PureComponent<Props> {
   render() {
     return (
       <SelectOptions
-        modifiers='basic'
         onChange={this.handleChange}
         options={this.props.items}
         renderOption={this.renderOption}
@@ -41,6 +41,8 @@ export default class BasicSelectOptions extends React.PureComponent<Props> {
         return route('multiplayer.rooms.show', { room: id ?? 'latest' });
       case 'seasons':
         return route('seasons.show', { season: id ?? 'latest' });
+      case 'spotlight':
+        return updateQueryString(null, { spotlight: id?.toString() });
     }
   }
 

diff --git a/resources/js/components/spotlight-select-options.tsx b/resources/js/components/spotlight-select-options.tsx
diff --git a/resources/js/register-components.tsx b/resources/js/register-components.tsx
@@ -14,7 +14,6 @@ import RankingCountryFilter from 'components/ranking-country-filter';
 import RankingUserFilter from 'components/ranking-user-filter';
 import RankingVariantFilter from 'components/ranking-variant-filter';
 import ScoringModeToggle from 'components/scoring-mode-toggle';
-import SpotlightSelectOptions from 'components/spotlight-select-options';
 import { UserCard } from 'components/user-card';
 import { startListening, UserCardTooltip } from 'components/user-card-tooltip';
 import { UserCards } from 'components/user-cards';
@@ -71,10 +70,6 @@ core.reactTurbolinks.register('basic-select-options', () => (
   <BasicSelectOptions {...parseJson('json-basic-select-options')} />
 ));
 
-core.reactTurbolinks.register('spotlight-select-options', () => (
-  <SpotlightSelectOptions {...parseJson('json-spotlight-select-options')} />
-));
-
 core.reactTurbolinks.register('chat-icon', (container) => (
   <ChatIcon type={container.dataset.type} />
 ));

diff --git a/resources/views/multiplayer/rooms/show.blade.php b/resources/views/multiplayer/rooms/show.blade.php
@@ -18,7 +18,7 @@
 @section('ranking-header')
     <div class="osu-page osu-page--ranking-info">
         <div class="js-react--basic-select-options">
-            <div class="select-options select-options--spotlight">
+            <div class="select-options">
                 <div class="select-options__select">
                     <span class="select-options__option">
                         {{ $room->name }}

diff --git a/resources/views/rankings/charts.blade.php b/resources/views/rankings/charts.blade.php
@@ -6,8 +6,8 @@
 
 @section('ranking-header')
     <div class="osu-page osu-page--ranking-info">
-        <div class="js-react--spotlight-select-options">
-            <div class="select-options select-options--spotlight">
+        <div class="js-react--basic-select-options">
+            <div class="select-options">
                 <div class="select-options__select">
                     <span class="select-options__option">
                         {{ $spotlight->name }}
@@ -16,7 +16,7 @@
             </div>
         </div>
 
-        <script id="json-spotlight-select-options" type="application/json">
+        <script id="json-basic-select-options" type="application/json">
             {!! json_encode($selectOptions) !!}
         </script>
 

diff --git a/resources/views/rankings/daily_challenge.blade.php b/resources/views/rankings/daily_challenge.blade.php
@@ -15,7 +15,7 @@
 @section('ranking-header')
     <div class="osu-page osu-page--ranking-info">
         <div class="js-react--basic-select-options">
-            <div class="select-options select-options--spotlight">
+            <div class="select-options">
                 <div class="select-options__select">
                     <span class="select-options__option">
                         {{ $currentRoomOption['text'] }}