Make QRCODE displayed on the webpage mobile friendly

[shaileshp0110]

The QR code on the webpage is overly large, taking up a substantial portion of the screen and making it challenging to scan with a mobile device. Currently, it has a width and height of 776 pixels each

Please refer to this screenshot

Something around this size will be acceptable

[JanaganSaravanan]

Hi! I would like to work on this issue. Where can i find the related files ?

[FabioPinheiro]

Hey @JanaganSaravanan Thx for the help

So we are using ScalaJs on this project with some libraries that make the syntax similar to JavaScript.

Unless you need media queries all the solutions will be in this file https://github.com/input-output-hk/atala-prism-mediator/blob/main/webapp/src/main/scala/io/iohk/atala/mediator/MediatorInfo.scala

In line 30 (divQRCode.ref.innerHTML = aux.createSvgTag(8d)) we set a fixed size.
But I checked the library that generates QR codes, and there is a way to make it scalable.

So this should work:

val cellSize = CellSize().setScalable(true)
divQRCode.ref.innerHTML = aux.createSvgTag(cellSize)

You also need to import the CellSize with import typings.qrcodeGenerator.anon._

Then you can control the size on the outside div. Ex: val divQRCode = div(width := "50%")

Play around a bit and try to make it more appealing for mobile screens and desktops.

For that, you need to compile and start the service. For now, you can ignore everything related to the database/MongoDB. Since the webpage will still show on http://localhost:8080.
If anything on the README is not clear on how to do it please ask. That would help us document better for future developers.

[FabioPinheiro]

Hey, @JanaganSaravanan are you still planning to work on this ticket?
(just asking if anyone else wants to pick up)