Fix text scaling on Paywall Page for devices with different screen sizes.

[criticaltv]

Describe the problem

Currently, the paywall page for the Gorli TV app is unable to gracefully scale the font in order to fit conveniently on any size of screen.

Describe your proposed solution

My proposed solution would be to rebuild the software layout for the paywall page to be responsive to the screen's precise dimensions, based on this design:

So, in the above image,

• X is the length of the longer edge of the screen, in pixels
• Y is the length of the shorter edge of the screen, in pixels.

Please read the notes in the design, and leave comments below.

Describe other solutions you have considered

A more complex option would be to split the screen like this:

Screenshots

For example, this is how it works on a device with 1280x720 screen size (thank you Parth!)

It seems to work OK on screens with larger resolution (e.g. on a device with a 2160x1080):

Specific Deliverables

1. Please upload screenshot the paywall page loading on devices with at least 4 different screen sizes:

• small screen e.g. 640x360
• medium screen e.g. 1280x720
• big screen e.g. 2160x1080
• very big screen e.g. 3840x2160 / 4k

2. Publish PR with new code to this repository.

3. Generate new APK file com.videodac.hls and publish in this issue, so that Goerli TV app on Google Play can be updated

[gitcoinbot]

Issue Status: 1. Open 2. Started 3. Submitted 4. Done

---

This issue now has a funding of 40.0 LPT (63.2 USD @ $1.58/LPT) attached to it.

• If you would like to work on this issue you can 'start work' on the Gitcoin Issue Details page.
  • Want to chip in? Add your own contribution here.
  • Questions? Checkout Gitcoin Help or the Gitcoin Slack
  • $78,528.44 more funded OSS Work available on the Gitcoin Issue Explorer

[gitcoinbot]

Issue Status: 1. Open 2. Cancelled

---

Work has been started.

These users each claimed they can complete the work by 2 weeks, 5 days ago. Please review their action plans below:

1) mul1sh has been approved to start work.

Will sort this promptly with an android co-ordinator layout

Learn more on the Gitcoin Issue Details page.

[criticaltv]

[mul1sh]

New screenshots

640x360

1280x720

2160x1080

3840x2160 / 4k

[gitcoinbot]

Issue Status: 1. Open 2. Started 3. Submitted 4. Done

---

Work for 40.0 LPT (61.04 USD @ $1.53/LPT) has been submitted by:

1. @mul1sh

@criticaltv please take a look at the submitted work:

• PR by @mul1sh

---

• Learn more on the Gitcoin Issue Details page
• Want to chip in? Add your own contribution here.
• Questions? Checkout Gitcoin Help or the Gitcoin Slack
• $81,404.96 more funded OSS Work available on the Gitcoin Issue Explorer

[criticaltv]

Further to some confusion during this bounty being worked on, here are some calculations which will assist in developing this as per the specification:

Let's say the screen size is X by Y.

And let's say that Y < X (although the opposite would still work)

Section 1 (left): Size: X-0.8*Y by Y Top-left corner is at coordinates (0, 0)

Section 2 (top right) is: Size: 0.8*Y by 0.8*Y Top-left corner is at coordinates (X-0.8*Y, 0)

Section 3 (bottom right) is: Size: 0.8*Y by 0.2*Y Top-left corner is at coordinates (X-0.8*Y, 0.8*Y)

[gitcoinbot]

Issue Status: 1. Open 2. Cancelled

---

The funding of 40.0 LPT (19.61 USD @ $0.49/LPT) attached to this issue has been cancelled by the bounty submitter

• Questions? Checkout Gitcoin Help or the Gitcoin Slack
• $97,098.98 more funded OSS Work available on the Gitcoin Issue Explorer