broadcast group selector render on demand

lichess-org · Mar 15, 2024 · a0b9577 · a0b9577
1 parent 7808e07
commit a0b9577
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 22 deletions.
diff --git a/ui/analyse/css/study/relay/_tour.scss b/ui/analyse/css/study/relay/_tour.scss
@@ -119,23 +119,25 @@
     &__mselect {
       flex: auto;
       @include fluid-size('font-size', 12px, 20px);
-      .mselect__list a {
-        gap: 1em;
-      }
-    }
-    &__round-select {
       .fullscreen-mask {
         display: block;
       }
       .mselect__list {
-        display: table;
-        left: unset;
-        right: 0;
-        overflow: hidden;
         transform: unset;
         > * {
           opacity: unset;
         }
+        a {
+          gap: 1em;
+        }
+      }
+    }
+    &__round-select {
+      .mselect__list {
+        display: table;
+        left: unset;
+        right: 0;
+        overflow: hidden;
         tr {
           display: table-row;
           &.current-round {

diff --git a/ui/analyse/src/study/relay/relayCtrl.ts b/ui/analyse/src/study/relay/relayCtrl.ts
@@ -16,6 +16,7 @@ export default class RelayCtrl {
   cooldown = false;
   tourShow: Toggle;
   roundSelectShow = toggle(false);
+  groupSelectShow = toggle(false);
   tab: Prop<RelayTab>;
   teams?: RelayTeams;
   leaderboard?: RelayLeaderboard;

diff --git a/ui/analyse/src/study/relay/relayTourView.ts b/ui/analyse/src/study/relay/relayTourView.ts
@@ -70,23 +70,26 @@ const overview = (relay: RelayCtrl, ctrl: AnalyseCtrl) => [
 
 const groupSelect = (relay: RelayCtrl, group: RelayGroup) =>
   h('div.mselect.relay-tour__header__mselect.relay-tour__group-select', [
-    h('input#mselect-relay-group.mselect__toggle.fullscreen-toggle', { attrs: { type: 'checkbox' } }),
     h(
       'label.mselect__label',
-      { attrs: { for: 'mselect-relay-group' } },
+      { hook: bind('click', relay.groupSelectShow.toggle, relay.redraw) },
       group.tours.find(t => t.id == relay.data.tour.id)?.name || relay.data.tour.name,
     ),
-    h('label.fullscreen-mask', { attrs: { for: 'mselect-relay-group' } }),
-    h(
-      'nav.mselect__list',
-      group.tours.map(tour =>
-        h(
-          `a${tour.id == relay.data.tour.id ? '.current' : ''}`,
-          { attrs: { href: `/broadcast/-/${tour.id}` } },
-          tour.name,
-        ),
-      ),
-    ),
+    ...(relay.groupSelectShow()
+      ? [
+          h('label.fullscreen-mask', { hook: bind('click', relay.groupSelectShow.toggle, relay.redraw) }),
+          h(
+            'nav.mselect__list',
+            group.tours.map(tour =>
+              h(
+                `a${tour.id == relay.data.tour.id ? '.current' : ''}`,
+                { attrs: { href: `/broadcast/-/${tour.id}` } },
+                tour.name,
+              ),
+            ),
+          ),
+        ]
+      : []),
   ]);
 
 const roundSelect = (relay: RelayCtrl, study: StudyCtrl) =>