reduce churn and improve css

lichess-org · Nov 14, 2024 · 2b38a13 · 2b38a13
1 parent 0849332
commit 2b38a13
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 27 deletions.
diff --git a/modules/challenge/src/main/ui/ChallengeUi.scala b/modules/challenge/src/main/ui/ChallengeUi.scala
@@ -52,7 +52,7 @@ final class ChallengeUi(helpers: Helpers):
     s"$speed$variant ${c.mode.name} Chess • $players"
 
   private def details(c: Challenge, requestedColor: Option[Color])(using ctx: Context) =
-    div(cls := "details-wrapper", attr("data-url") := challengeLink(c))(
+    div(cls := "details-wrapper")(
       div(cls := "content")(
         div(
           cls      := "variant",
@@ -81,7 +81,7 @@ final class ChallengeUi(helpers: Helpers):
           div(fragList(c.rules.toList.map(showRule), "/"))
         )
       ),
-      div(cls := "mobile-instructions")("Tap here to share")
+      div(cls := "mobile-instructions none")("Tap here to share")
     )
 
   private def showRule(r: GameRule) =
@@ -112,6 +112,7 @@ final class ChallengeUi(helpers: Helpers):
         submitButton(cls := "button button-red text", dataIcon := Icon.X)(trans.site.cancel())
 
     page(c, json, owner = true):
+      val challengeLink = s"$netBaseUrl${routes.Round.watcher(c.gameId, Color.white).url}"
       main(cls := s"page-small challenge-page box box-pad challenge--${c.status.name}")(
         c.status match
           case Status.Created | Status.Offline =>
@@ -142,7 +143,7 @@ final class ChallengeUi(helpers: Helpers):
                       div(cls := "invite__url")(
                         h2(cls := "ninja-title", trans.site.toInviteSomeoneToPlayGiveThisUrl()),
                         br,
-                        copyMeInput(challengeLink(c)),
+                        copyMeInput(challengeLink),
                         br,
                         p(trans.site.theFirstPersonToComeOnThisUrlWillPlayWithYou())
                       ),
@@ -172,7 +173,7 @@ final class ChallengeUi(helpers: Helpers):
                       ),
                       div(cls := "invite__qrcode")(
                         h2(cls := "ninja-title", trans.site.orLetYourOpponentScanQrCode()),
-                        qrcode(challengeLink(c), width = 150)
+                        qrcode(challengeLink, width = 150)
                       )
                     )
                 },
@@ -290,6 +291,3 @@ final class ChallengeUi(helpers: Helpers):
               details(c, color),
               a(cls := "button button-fat", href := routes.Lobby.home)(trans.site.newOpponent())
             )
-
-  private def challengeLink(c: Challenge) =
-    s"$netBaseUrl${routes.Round.watcher(c.gameId, Color.white).url}"
diff --git a/ui/bits/src/bits.challengePage.ts b/ui/bits/src/bits.challengePage.ts
@@ -66,14 +66,20 @@ export function initModule(opts: ChallengeOpts): void {
             this.submit();
           });
       });
-    const inviteUrl = document.querySelector<HTMLElement>('.invite__url');
-    if (inviteUrl && isTouchDevice() && typeof navigator.share === 'function') {
+    if (isTouchDevice() && typeof navigator.share === 'function') {
+      const inviteUrl = document.querySelector<HTMLElement>('.invite__url');
+      if (!inviteUrl) return;
+      const instructions = document.querySelector<HTMLElement>(`.mobile-instructions`)!;
+      instructions.classList.remove('none');
       inviteUrl.classList.add('none');
-      const details = document.querySelector<HTMLElement>(`.details-wrapper`)!;
-      details.classList.add('mobile');
-      details.onclick = () =>
-        navigator.share({ title: `Fancy a game of chess?`, url: details.dataset.url }).catch(() => {});
-      if (isIOS()) details.classList.add('ios');
+      instructions.closest<HTMLElement>('.details-wrapper')!.onclick = () =>
+        navigator
+          .share({
+            title: `Fancy a game of chess?`,
+            url: inviteUrl.querySelector<HTMLInputElement>('input')?.value,
+          })
+          .catch(() => {});
+      if (isIOS()) instructions.classList.add('is-ios');
     }
   }
 

diff --git a/ui/challenge/css/_page.scss b/ui/challenge/css/_page.scss
@@ -140,23 +140,22 @@
     }
 
     .mobile-instructions {
-      display: none;
-    }
-
-    &.mobile .mobile-instructions {
-      @extend %flex-center;
+      display: flex;
+      flex-flow: row wrap;
       justify-content: center;
+      align-items: center;
       font-size: 1.5rem;
-      &::after {
-        font-family: 'lichess';
-        font-size: 6rem;
-        padding-inline-start: 1rem;
-        color: $c-primary;
-        content: $licon-ShareAndroid;
-      }
     }
 
-    &.ios .mobile-instructions::after {
+    .mobile-instructions::after {
+      font-family: 'lichess';
+      font-size: 6rem;
+      padding-inline-start: 1rem;
+      color: $c-primary;
+      content: $licon-ShareAndroid;
+    }
+
+    &.is-ios .mobile-instructions::after {
       content: $licon-ShareIos;
     }
   }