move the broadcast subscribe toggle

lichess-org · Mar 13, 2024 · ec4813a · ec4813a
1 parent 4545bc6
commit ec4813a
Show file tree

Hide file tree

Showing 2 changed files with 43 additions and 23 deletions.
diff --git a/ui/analyse/css/study/relay/_tour.scss b/ui/analyse/css/study/relay/_tour.scss
@@ -71,7 +71,7 @@
   &__header {
     @extend %flex-center-nowrap;
     background: $c-bg-zebra;
-    gap: 2em;
+    gap: calc(var(--box-padding) / 1.5);
     padding: 0 var(--box-padding);
     @include breakpoint($mq-x-small) {
       padding-left: 0;
@@ -98,13 +98,17 @@
 
     h1 {
       flex: auto;
-      @include fluid-size('font-size', 14px, 24px);
+      @include fluid-size('font-size', 14px, 32px);
+      color: $c-brag;
     }
 
     &__content {
       @extend %flex-column;
       flex: 1;
       gap: 1em;
+      @include breakpoint($mq-col3) {
+        gap: calc(var(--box-padding) / 3);
+      }
       margin: 1em 0;
     }
 
@@ -114,7 +118,7 @@
     }
     &__mselect {
       flex: auto;
-      @include fluid-size('font-size', 12px, 18px);
+      @include fluid-size('font-size', 12px, 20px);
       .mselect__list a {
         gap: 1em;
       }
@@ -172,9 +176,22 @@
     }
   }
 
+  &__nav {
+    @extend %flex-between;
+    margin: 2em var(--box-padding);
+    gap: 1em;
+    user-select: none;
+  }
+  &__subscribe {
+    @extend %flex-center-nowrap;
+    gap: 1ch;
+    label {
+      cursor: pointer;
+    }
+  }
+
   &__tabs {
     @extend %flex-center-nowrap;
-    margin: 2em var(--box-padding);
     gap: 1em;
     span {
       @extend %box-radius;

diff --git a/ui/analyse/src/study/relay/relayTourView.ts b/ui/analyse/src/study/relay/relayTourView.ts
@@ -181,30 +181,33 @@ const header = (relay: RelayCtrl, ctrl: AnalyseCtrl) => {
           group && groupSelect(relay, group),
           roundSelect(relay, study),
         ]),
-        ...(defined(d.isSubscribed)
-          ? [
-              toggle(
-                {
-                  name: 'Subscribe',
-                  id: 'tour-subscribe',
-                  checked: d.isSubscribed,
-                  change: (v: boolean) => {
-                    xhr.text(`/broadcast/${d.tour.id}/subscribe?set=${v}`, { method: 'post' });
-                    d.isSubscribed = v;
-                    ctrl.redraw();
-                  },
-                },
-                ctrl.trans,
-                ctrl.redraw,
-              ),
-            ]
-          : []),
       ]),
     ]),
-    makeTabs(ctrl),
+    h('div.relay-tour__nav', [makeTabs(ctrl), ...subscribe(relay, ctrl)]),
   ];
 };
 
+const subscribe = (relay: RelayCtrl, ctrl: AnalyseCtrl) =>
+  defined(relay.data.isSubscribed)
+    ? [
+        toggle(
+          {
+            name: 'Subscribe',
+            id: 'tour-subscribe',
+            cls: 'relay-tour__subscribe',
+            checked: relay.data.isSubscribed,
+            change: (v: boolean) => {
+              xhr.text(`/broadcast/${relay.data.tour.id}/subscribe?set=${v}`, { method: 'post' });
+              relay.data.isSubscribed = v;
+              ctrl.redraw();
+            },
+          },
+          ctrl.trans,
+          ctrl.redraw,
+        ),
+      ]
+    : [];
+
 const makeTabs = (ctrl: AnalyseCtrl) => {
   const study = ctrl.study,
     relay = study?.relay;