From 2614dc65b378b82ac26c2b2c0bc642fa42f125b3 Mon Sep 17 00:00:00 2001 From: ross_heaney Date: Wed, 20 Dec 2023 19:30:05 +0000 Subject: [PATCH 1/3] feedback on qr code feature for #14173 --- app/views/challenge/mine.scala | 11 +++++++++++ modules/i18n/src/main/I18nKeys.scala | 1 + translation/source/site.xml | 1 + 3 files changed, 13 insertions(+) diff --git a/app/views/challenge/mine.scala b/app/views/challenge/mine.scala index af743da4ce413..98f8e524ad15f 100644 --- a/app/views/challenge/mine.scala +++ b/app/views/challenge/mine.scala @@ -83,6 +83,17 @@ object mine: ), error.map { p(cls := "error")(_) } ) + ), + div( + h2(cls := "ninja-title", trans.orLetYourOpponentScanQrCode(), ": "), + // display the challenge link as a QR code + br, + p(cls := "challenge-id-form")( + 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 index e0b65431044a1..22de1f406df7d 100644 --- 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 index 2246f3a13aead..85e8903dfe0fb 100644 --- a/translation/source/site.xml +++ b/translation/source/site.xml @@ -5,6 +5,7 @@ To invite someone to play, give this URL Game Over Waiting for opponent + Or let your opponent scan this QR code Waiting Your turn %1$s level %2$s From 4ed60b955e44da52de6dc6af18b2dcdd6c5009ef Mon Sep 17 00:00:00 2001 From: ross_heaney Date: Thu, 21 Dec 2023 16:46:24 +0000 Subject: [PATCH 2/3] udated layout --- app/views/challenge/mine.scala | 5 ++--- ui/challenge/css/_page.scss | 16 ++++++++++++++++ 2 files changed, 18 insertions(+), 3 deletions(-) diff --git a/app/views/challenge/mine.scala b/app/views/challenge/mine.scala index 98f8e524ad15f..3eafa362458ee 100644 --- a/app/views/challenge/mine.scala +++ b/app/views/challenge/mine.scala @@ -84,11 +84,10 @@ object mine: error.map { p(cls := "error")(_) } ) ), - div( + div(cls := "qr-code-invite")( h2(cls := "ninja-title", trans.orLetYourOpponentScanQrCode(), ": "), - // display the challenge link as a QR code br, - p(cls := "challenge-id-form")( + p(cls := "qr-code")( img( src := s"https://api.qrserver.com/v1/create-qr-code/?size=150x150&data=$challengeLink", alt := "QR Code" diff --git a/ui/challenge/css/_page.scss b/ui/challenge/css/_page.scss index 8578b5a7963d4..4aa52a42f97dd 100644 --- a/ui/challenge/css/_page.scss +++ b/ui/challenge/css/_page.scss @@ -7,6 +7,22 @@ } } + .qr-code-invite { + display: flex; + flex-flow: row wrap; + justify-content: center; + align-items: center; + margin: 1em 0; + + .qr-code { + @extend %box-radius; + @include padding-direction(2em, 2em, 1em, 2em); + background: $c-bg-zebra; + margin: 1em; + flex: 1 1 auto; + } + } + .invite { display: flex; flex-flow: row wrap; From b25bad112fd64ecb440f49c92e88c406cbbf18c5 Mon Sep 17 00:00:00 2001 From: Thibault Duplessis Date: Sat, 23 Dec 2023 10:31:09 +0100 Subject: [PATCH 3/3] simplify and redesign challenge page QR code --- app/views/challenge/mine.scala | 13 +++++-------- ui/challenge/css/_page.scss | 27 +++++++-------------------- 2 files changed, 12 insertions(+), 28 deletions(-) diff --git a/app/views/challenge/mine.scala b/app/views/challenge/mine.scala index 3eafa362458ee..46aef1e144977 100644 --- 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( @@ -85,13 +85,10 @@ object mine: ) ), div(cls := "qr-code-invite")( - h2(cls := "ninja-title", trans.orLetYourOpponentScanQrCode(), ": "), - br, - p(cls := "qr-code")( - img( - src := s"https://api.qrserver.com/v1/create-qr-code/?size=150x150&data=$challengeLink", - alt := "QR Code" - ) + 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/ui/challenge/css/_page.scss b/ui/challenge/css/_page.scss index 4aa52a42f97dd..44f8b3c085ada 100644 --- a/ui/challenge/css/_page.scss +++ b/ui/challenge/css/_page.scss @@ -8,32 +8,19 @@ } .qr-code-invite { - display: flex; - flex-flow: row wrap; - justify-content: center; - align-items: center; - margin: 1em 0; - - .qr-code { - @extend %box-radius; - @include padding-direction(2em, 2em, 1em, 2em); - background: $c-bg-zebra; - margin: 1em; - flex: 1 1 auto; - } + @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 {