udated layout

lichess-org · Dec 21, 2023 · 4ed60b9 · 4ed60b9
1 parent 2614dc6
commit 4ed60b9
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 3 deletions.
diff --git 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
@@ -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;