make the broadcast tournament form less scary

lichess-org · Jun 20, 2024 · efa8edc · efa8edc
1 parent 4501321
commit efa8edc
Show file tree

Hide file tree

Showing 3 changed files with 120 additions and 112 deletions.
diff --git a/app/controllers/RelayTour.scala b/app/controllers/RelayTour.scala
@@ -115,7 +115,7 @@ final class RelayTour(env: Env, apiC: => Api) extends LilaController(env):
  setup =>
  env.relay.api.tourUpdate(nav.tour, setup) >>
  negotiate(
- Redirect(routes.RelayTour.show(nav.tour.slug, nav.tour.id)),
+ Redirect(routes.RelayTour.edit(nav.tour.id)).flashSuccess,
  jsonOkResult
  )
  )

diff --git a/modules/relay/src/main/ui/FormUi.scala b/modules/relay/src/main/ui/FormUi.scala
@@ -321,6 +321,7 @@ final class FormUi(helpers: Helpers, ui: RelayUi, tourUi: RelayTourUi):
  page(nav.tour.name.value, menu = Right(nav)):
  frag(
  boxTop(h1(a(href := routes.RelayTour.show(nav.tour.slug, nav.tour.id))(nav.tour.name))),
+ standardFlash,
  image(nav.tour),
  postForm(cls := "form3", action := routes.RelayTour.update(nav.tour.id))(
  inner(form, nav.tourWithGroup.some),
@@ -354,19 +355,7 @@ final class FormUi(helpers: Helpers, ui: RelayUi, tourUi: RelayTourUi):
  frag(
  (!Granter.opt(_.StudyAdmin)).option(div(cls := "form-group")(ui.howToUse)),
  form3.globalError(form),
- form3.split(
- form3.group(form("name"), trb.tournamentName(), half = true)(form3.input(_)(autofocus)),
- Granter
- .opt(_.StudyAdmin)
- .option(
- form3.group(
- form("spotlight.title"),
- "Homepage spotlight custom tournament name",
- help = raw("Leave empty to use the tournament name").some,
- half = true
- )(form3.input(_))
- )
- ),
+ form3.group(form("name"), trb.tournamentName())(form3.input(_)(autofocus)),
  form3.group(form("description"), trb.tournamentDescription())(form3.textarea(_)(rows := 2)),
  form3.group(
  form("markdown"),
@@ -393,116 +382,136 @@ final class FormUi(helpers: Helpers, ui: RelayUi, tourUi: RelayTourUi):
  help = frag("Show a team leaderboard. Requires WhiteTeam and BlackTeam PGN tags.").some
  )
  ),
- form3.split(
- form3.group(
- form("players"),
- trb.replacePlayerTags(),
- help = frag( // do not translate
- "One line per player, formatted as such:",
- pre("player name = FIDE ID"),
- "Example:",
- pre("""Magnus Carlsen = 1503014"""),
- "Player names ignore case and punctuation, and match all possible combinations of 2 words:",
- br,
- """"Jorge Rick Vito" will match "Jorge Rick", "jorge vito", "Rick, Vito", etc.""",
- br,
- "If the player is NM or WNM, you can:",
- pre("""Player Name = FIDE ID / Title"""),
- "Alternatively, you may set tags manually, like so:",
- pre("player name / rating / title / new name"),
- "All values are optional. Example:",
- pre("""Magnus Carlsen / 2863 / GM
+ form3.fieldset(
+ "Players & Teams",
+ toggle = (form("players").value.isDefined || form("teams").value.isDefined).some
+ )(
+ form3.split(
+ form3.group(
+ form("players"),
+ trb.replacePlayerTags(),
+ help = frag( // do not translate
+ "One line per player, formatted as such:",
+ pre("player name = FIDE ID"),
+ "Example:",
+ pre("""Magnus Carlsen = 1503014"""),
+ "Player names ignore case and punctuation, and match all possible combinations of 2 words:",
+ br,
+ """"Jorge Rick Vito" will match "Jorge Rick", "jorge vito", "Rick, Vito", etc.""",
+ br,
+ "If the player is NM or WNM, you can:",
+ pre("""Player Name = FIDE ID / Title"""),
+ "Alternatively, you may set tags manually, like so:",
+ pre("player name / rating / title / new name"),
+ "All values are optional. Example:",
+ pre("""Magnus Carlsen / 2863 / GM
 YouGotLittUp / 1890 / / Louis Litt""")
- ).some,
- half = true
- )(form3.textarea(_)(rows := 3, spellcheck := "false")),
- form3.group(
- form("teams"),
- "Optional: assign players to teams",
- help = frag( // do not translate
- "One line per player, formatted as such:",
- pre("Team name; Fide Id or Player name"),
- "Example:",
- pre("""Team Cats ; 3408230
+  ).some,
+  half = true
+  )(form3.textarea(_)(rows := 3, spellcheck := "false")),
+  form3.group(
+  form("teams"),
+  "Optional: assign players to teams",
+  help = frag( // do not translate
+  "One line per player, formatted as such:",
+  pre("Team name; Fide Id or Player name"),
+  "Example:",
+  pre("""Team Cats ; 3408230
 Team Dogs ; Scooby Doo"""),
- "By default the PGN tags WhiteTeam and BlackTeam are used."
- ).some,
- half = true
- )(form3.textarea(_)(rows := 3, spellcheck := "false"))
+ "By default the PGN tags WhiteTeam and BlackTeam are used."
+ ).some,
+ half = true
+ )(form3.textarea(_)(rows := 3, spellcheck := "false"))
+ )
  ),
  if Granter.opt(_.Relay) then
  frag(
- tg.isDefined.option(grouping(form)),
- form3.split(
- form3.group(
- form("tier"),
- raw("Official Lichess broadcast tier"),
- help = raw("Feature on /broadcast - for admins only").some,
- half = true
- )(form3.select(_, RelayTour.Tier.options))
- )
- )
- else form3.hidden(form("tier")),
- Granter
- .opt(_.StudyAdmin)
- .option(
- frag(
+ form3.fieldset("Broadcast admin")(
+ tg.isDefined.option(grouping(form)),
  form3.split(
- form3.checkbox(
- form("spotlight.enabled"),
- "Show a homepage spotlight",
- help = raw("As a Big Blue Button - for admins only").some,
- half = true
- ),
  form3.group(
- form("spotlight.lang"),
- "Homepage spotlight language",
- help =
- raw("Only show to users who speak this language. English is shown to everyone.").some,
+ form("tier"),
+ raw("Official Lichess broadcast tier"),
+ help = raw("Feature on /broadcast - for admins only").some,
  half = true
- ):
- form3.select(_, langList.popularLanguagesForm.choices)
+ )(form3.select(_, RelayTour.Tier.options)),
+ Granter
+ .opt(_.StudyAdmin)
+ .option(
+ form3.checkbox(
+ form("spotlight.enabled"),
+ "Show a homepage spotlight",
+ help = raw("As a Big Blue Button - for admins only").some,
+ half = true
+ )
+ )
  ),
- tg.map: t =>
- details(
- summary("Pinned streamer"),
- div(
- cls := "relay-pinned-streamer-edit",
- data("post-url") := routes.RelayTour.image(t.tour.id, "pinnedStreamerImage".some)
- )(
- div(
+ Granter
+ .opt(_.StudyAdmin)
+ .option(
+ frag(
+ form3.split(
  form3.group(
- form("pinnedStreamer"),
- "Pinned streamer",
- help = frag(
- p("The pinned streamer is featured even when they're not watching the broadcast."),
- p("An optional placeholder image will embed their stream when clicked."),
- p(
- "To upload one, you must first submit this form with a pinned streamer. "
- + "Then return to this page and choose an image."
- )
- ).some
+ form("spotlight.title"),
+ "Homepage spotlight custom tournament name",
+ help = raw("Leave empty to use the tournament name").some,
+ half = true
  )(form3.input(_)),
- span(
- button(tpe := "button", cls := "button streamer-select-image")("select image"),
- button(
- tpe := "button",
- cls := "button button-empty button-red streamer-delete-image",
+ form3.group(
+ form("spotlight.lang"),
+ "Homepage spotlight language",
+ help = raw(
+ "Only show to users who speak this language. English is shown to everyone."
+ ).some,
+ half = true
+ ):
+ form3.select(_, langList.popularLanguagesForm.choices)
+ ),
+ tg.map: t =>
+ form3.fieldset("Pinned streamer", toggle = form("pinnedStreamer").value.isDefined.some)(
+ div(
+ cls := "relay-pinned-streamer-edit",
  data("post-url") := routes.RelayTour.image(t.tour.id, "pinnedStreamerImage".some)
- )("delete image")
+ )(
+ div(
+ form3.group(
+ form("pinnedStreamer"),
+ "Pinned streamer",
+ help = frag(
+ p(
+ "The pinned streamer is featured even when they're not watching the broadcast."
+ ),
+ p("An optional placeholder image will embed their stream when clicked."),
+ p(
+ "To upload one, you must first submit this form with a pinned streamer. "
+ + "Then return to this page and choose an image."
+ )
+ ).some
+ )(form3.input(_)),
+ span(
+ button(tpe := "button", cls := "button streamer-select-image")("select image"),
+ button(
+ tpe := "button",
+ cls := "button button-empty button-red streamer-delete-image",
+ data("post-url") := routes.RelayTour
+ .image(t.tour.id, "pinnedStreamerImage".some)
+ )("delete image")
+ )
+ ),
+ ui.thumbnail(t.tour.pinnedStreamerImage, _.Size.Small16x9)(
+ cls := List(
+ "streamer-drop-target" -> true,
+ "user-image" -> t.tour.pinnedStreamerImage.isDefined
+ ),
+ attr("draggable") := "true"
+ )
+ )
  )
- ),
- ui.thumbnail(t.tour.pinnedStreamerImage, _.Size.Small16x9)(
- cls := List(
- "streamer-drop-target" -> true,
- "user-image" -> t.tour.pinnedStreamerImage.isDefined
- ),
- attr("draggable") := "true"
- )
  )
  )
  )
  )
+ else form3.hidden(form("tier"))
  )
 
  private def image(t: RelayTour)(using ctx: Context) =

diff --git a/ui/bits/css/relay/_form.scss b/ui/bits/css/relay/_form.scss
@@ -52,14 +52,13 @@
 
 .relay-image-edit {
  @extend %image-preview-and-upload, %box-neat;
- margin-bottom: 2em;
+ margin-bottom: 3em;
 }
 
 .relay-pinned-streamer-edit {
- @extend %image-preview-and-upload, %box-neat;
- > div {
- flex-basis: 300px;
- }
+ @extend %image-preview-and-upload;
+ background: none;
+ padding: 0;
  span {
  @extend %flex-between;
  }