Merge pull request lichess-org#14260 from ross39/qr_14173

WIP on qr code feature for lichess-org#14173
M-DinhHoangViet · Dec 23, 2023 · 3754b00 · 3754b00
2 parents 781e9e1 + b25bad1
commit 3754b00
Show file tree

Hide file tree

Showing 4 changed files with 20 additions and 8 deletions.
diff --git a/app/views/challenge/mine.scala b/app/views/challenge/mine.scala
@@ -49,7 +49,7 @@ object mine:
                 else
                   div(cls := "invite")(
                     div(
-                      h2(cls := "ninja-title", trans.toInviteSomeoneToPlayGiveThisUrl(), ": "),
+                      h2(cls := "ninja-title", trans.toInviteSomeoneToPlayGiveThisUrl()),
                       br,
                       p(cls := "challenge-id-form")(
                         input(
@@ -83,6 +83,13 @@ object mine:
                         ),
                         error.map { p(cls := "error")(_) }
                       )
+                    ),
+                    div(cls := "qr-code-invite")(
+                      h2(cls := "ninja-title", trans.orLetYourOpponentScanQrCode()),
+                      img(
+                        src := s"https://api.qrserver.com/v1/create-qr-code/?size=150x150&data=$challengeLink",
+                        alt := "QR Code"
+                      )
                     )
                   )
               },

diff --git a/modules/i18n/src/main/I18nKeys.scala b/modules/i18n/src/main/I18nKeys.scala
@@ -8,6 +8,7 @@ object I18nKeys:
   val `toInviteSomeoneToPlayGiveThisUrl` = I18nKey("toInviteSomeoneToPlayGiveThisUrl")
   val `gameOver` = I18nKey("gameOver")
   val `waitingForOpponent` = I18nKey("waitingForOpponent")
+  val `orLetYourOpponentScanQrCode` = I18nKey("orLetYourOpponentScanQrCode")
   val `waiting` = I18nKey("waiting")
   val `yourTurn` = I18nKey("yourTurn")
   val `aiNameLevelAiLevel` = I18nKey("aiNameLevelAiLevel")

diff --git a/translation/source/site.xml b/translation/source/site.xml
@@ -5,6 +5,7 @@
   <string name="toInviteSomeoneToPlayGiveThisUrl">To invite someone to play, give this URL</string>
   <string name="gameOver">Game Over</string>
   <string name="waitingForOpponent">Waiting for opponent</string>
+  <string name="orLetYourOpponentScanQrCode">Or let your opponent scan this QR code</string>
   <string name="waiting">Waiting</string>
   <string name="yourTurn">Your turn</string>
   <string name="aiNameLevelAiLevel">%1$s level %2$s</string>

diff --git a/ui/challenge/css/_page.scss b/ui/challenge/css/_page.scss
@@ -7,17 +7,20 @@
     }
   }
 
+  .qr-code-invite {
+    @extend %flex-between-nowrap;
+    gap: $block-gap;
+  }
+
   .invite {
-    display: flex;
-    flex-flow: row wrap;
+    display: grid;
+    gap: $block-gap;
+    grid-template-columns: repeat(auto-fill, minmax(25em, 1fr));
 
     > div {
-      @extend %box-radius;
-      @include padding-direction(2em, 2em, 1em, 2em);
-
+      @extend %box-neat;
+      padding: $block-gap;
       background: $c-bg-zebra;
-      margin: 1em;
-      flex: 1 1 auto;
     }
 
     p.error {