From 7f2c8b0ef2f8c3914954065577726b9f0fac2baa Mon Sep 17 00:00:00 2001
From: Jennifer Taylor <dragonminded@dragonminded.com>
Date: Sat, 8 Oct 2022 21:46:46 +0000
Subject: [PATCH] Roll out fragments to MGA and Jubeat frontends.

---
 .../static/controllers/jubeat/allplayers.react.js    |  6 +++---
 .../static/controllers/jubeat/records.react.js       | 12 ++++++------
 .../static/controllers/jubeat/rivals.react.js        |  4 ++--
 .../static/controllers/jubeat/scores.react.js        |  4 ++--
 .../static/controllers/jubeat/settings.react.js      |  4 ++--
 .../static/controllers/mga/settings.react.js         |  4 ++--
 bemani/frontend/static/themes/dark/section.css       |  4 ++++
 bemani/frontend/static/themes/default/section.css    |  4 ++++
 8 files changed, 25 insertions(+), 17 deletions(-)

diff --git a/bemani/frontend/static/controllers/jubeat/allplayers.react.js b/bemani/frontend/static/controllers/jubeat/allplayers.react.js
index d398b13..2aedfed 100644
--- a/bemani/frontend/static/controllers/jubeat/allplayers.react.js
+++ b/bemani/frontend/static/controllers/jubeat/allplayers.react.js
@@ -71,18 +71,18 @@ var all_players = createReactClass({
                                 reverse: true,
                             },
                             {
-                                name: <span>
+                                name: <>
                                     Jubility
-                                    <span className="separator" />
                                     <Slider
                                         on="new"
                                         off="old"
+                                        className="spaced"
                                         value={this.state.jubility}
                                         onChange={function(value) {
                                             this.setState({jubility: value});
                                         }.bind(this)}
                                     />
-                                </span>,
+                                </>,
                                 render: function(userid) {
                                     var player = this.state.players[userid];
                                     if (this.state.jubility && (player.common_jubility != 0 || player.pick_up_jubility != 0)) {
diff --git a/bemani/frontend/static/controllers/jubeat/records.react.js b/bemani/frontend/static/controllers/jubeat/records.react.js
index 77b94c8..1ca758a 100644
--- a/bemani/frontend/static/controllers/jubeat/records.react.js
+++ b/bemani/frontend/static/controllers/jubeat/records.react.js
@@ -196,7 +196,7 @@ var network_records = createReactClass({
         }
 
         return (
-            <span>
+            <>
                 { paginate ?
                     <div className="section">
                         {songids.map(function(songid) {
@@ -323,7 +323,7 @@ var network_records = createReactClass({
                         </tbody>
                     </table>
                 </div>
-            </span>
+            </>
         );
     },
 
@@ -395,7 +395,7 @@ var network_records = createReactClass({
         }
 
         return (
-            <span>
+            <>
                 <div className="section">
                     {window.valid_charts.map(function(chartname, index) {
                         return (
@@ -412,7 +412,7 @@ var network_records = createReactClass({
                     }.bind(this))}
                 </div>
                 { this.renderBySongIDList(songids, false) }
-            </span>
+            </>
         );
     },
 
@@ -445,7 +445,7 @@ var network_records = createReactClass({
         }
 
         return (
-            <span>
+            <>
                 <div className="section">
                     {window.valid_charts.map(function(chartname, index) {
                         return (
@@ -462,7 +462,7 @@ var network_records = createReactClass({
                     }.bind(this))}
                 </div>
                 { this.renderBySongIDList(songids, false) }
-            </span>
+            </>
         );
     },
 
diff --git a/bemani/frontend/static/controllers/jubeat/rivals.react.js b/bemani/frontend/static/controllers/jubeat/rivals.react.js
index 611d50e..9f6efe3 100644
--- a/bemani/frontend/static/controllers/jubeat/rivals.react.js
+++ b/bemani/frontend/static/controllers/jubeat/rivals.react.js
@@ -111,7 +111,7 @@ var rivals_view = createReactClass({
         if (count >= 3) { avail = false; }
 
         return (
-            <span>
+            <>
                 {avail ?
                     <Add
                         title="Add Rival"
@@ -121,7 +121,7 @@ var rivals_view = createReactClass({
                     /> :
                     null
                 }
-            </span>
+            </>
         );
     },
 
diff --git a/bemani/frontend/static/controllers/jubeat/scores.react.js b/bemani/frontend/static/controllers/jubeat/scores.react.js
index 9022a32..5145d80 100644
--- a/bemani/frontend/static/controllers/jubeat/scores.react.js
+++ b/bemani/frontend/static/controllers/jubeat/scores.react.js
@@ -66,10 +66,10 @@ var network_scores = createReactClass({
                     <span className="score">{score.points}</span>
                     <span className="label">Combo</span>
                     <span className="score">{score.combo < 0 ? '-' : score.combo}</span>
-                    {score.music_rate >= 0 ? <span>
+                    {score.music_rate >= 0 ? <>
                         <span className="label">Music Rate</span>
                         <span className="score">{score.music_rate <= 0 ? '-' : score.music_rate}%</span>
-                    </span> : null}
+                    </> : null}
                 </div>
                 {has_stats ? <div title="perfect / great / good / poor / miss">
                     {score.stats.perfect}
diff --git a/bemani/frontend/static/controllers/jubeat/settings.react.js b/bemani/frontend/static/controllers/jubeat/settings.react.js
index c155bcb..2b10607 100644
--- a/bemani/frontend/static/controllers/jubeat/settings.react.js
+++ b/bemani/frontend/static/controllers/jubeat/settings.react.js
@@ -109,14 +109,14 @@ var settings_view = createReactClass({
         return (
             <LabelledSection vertical={true} label="Name">{
                 !this.state.editing_name ?
-                    <span>
+                    <>
                         <span>{player.name}</span>
                         <Edit
                             onClick={function(event) {
                                 this.setState({editing_name: true});
                             }.bind(this)}
                         />
-                    </span> :
+                    </> :
                     <form className="inline" onSubmit={this.saveName}>
                         <input
                             type="text"
diff --git a/bemani/frontend/static/controllers/mga/settings.react.js b/bemani/frontend/static/controllers/mga/settings.react.js
index 8a815a9..c15195f 100644
--- a/bemani/frontend/static/controllers/mga/settings.react.js
+++ b/bemani/frontend/static/controllers/mga/settings.react.js
@@ -54,14 +54,14 @@ var settings_view = createReactClass({
         return (
             <LabelledSection vertical={true} label="Name">{
                 !this.state.editing_name ?
-                    <span>
+                    <>
                         <span>{player.name}</span>
                         <Edit
                             onClick={function(event) {
                                 this.setState({editing_name: true});
                             }.bind(this)}
                         />
-                    </span> :
+                    </> :
                     <form className="inline" onSubmit={this.saveName}>
                         <input
                             type="text"
diff --git a/bemani/frontend/static/themes/dark/section.css b/bemani/frontend/static/themes/dark/section.css
index dd809bd..64f7353 100644
--- a/bemani/frontend/static/themes/dark/section.css
+++ b/bemani/frontend/static/themes/dark/section.css
@@ -184,6 +184,10 @@ span.filter:not(:last-child) {
     margin-bottom: 2px;
 }
 
+.slider.spaced {
+    margin-left: 5px;
+}
+
 span.slider-label {
     position: relative;
     top: -3px;
diff --git a/bemani/frontend/static/themes/default/section.css b/bemani/frontend/static/themes/default/section.css
index 1ebe888..7d51e0e 100644
--- a/bemani/frontend/static/themes/default/section.css
+++ b/bemani/frontend/static/themes/default/section.css
@@ -184,6 +184,10 @@ span.filter:not(:last-child) {
     margin-bottom: 2px;
 }
 
+.slider.spaced {
+    margin-left: 5px;
+}
+
 span.slider-label {
     position: relative;
     top: -3px;