diff --git a/ui/analyse/css/study/relay/_tour.scss b/ui/analyse/css/study/relay/_tour.scss index efbc89c9a258..5f1ceaccc0db 100644 --- 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 index 5cd04857deb2..d344a3b2ae22 100644 --- 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;