From b0b77560bb5a5a8f6ae1c29cbcec64df1416cff6 Mon Sep 17 00:00:00 2001 From: Eric Joanis Date: Mon, 21 Oct 2024 10:48:46 -0400 Subject: [PATCH] fix: make the privacy dialogue fully visible on smaller screens (#359) * fix: make the privacy dialogue fully visible on smaller screens With a maxHeight of 95vh, we now automatically get a scroll bar if needed, and the Opt out of/in to analytics button is always visible. Also up the width from 50vw to 60vw, which again is nicer on screens smaller than large monitors. Fixes #352 * chore: update translation IDs due to minor reformatting * fix: add a 1em marging above the opt in button for better appearance Based on Del's PR review comments --- packages/studio-web/src/app/app.component.ts | 5 +- .../studio-web/src/app/privacy-dialog.html | 58 +++++++++++-------- packages/studio-web/src/i18n/messages.es.json | 4 +- packages/studio-web/src/i18n/messages.fr.json | 4 +- packages/studio-web/src/i18n/messages.json | 4 +- 5 files changed, 42 insertions(+), 33 deletions(-) diff --git a/packages/studio-web/src/app/app.component.ts b/packages/studio-web/src/app/app.component.ts index daffe2b6..af66666e 100644 --- a/packages/studio-web/src/app/app.component.ts +++ b/packages/studio-web/src/app/app.component.ts @@ -27,8 +27,9 @@ export class AppComponent implements OnDestroy, OnInit { openPrivacyDialog(): void { this.dialog.open(PrivacyDialog, { width: "50vw", - maxWidth: "50vw", // maxWidth is required to force material to use justify-content: flex-start - minWidth: "50vw", + maxWidth: "60vw", // maxWidth is required to force material to use justify-content: flex-start + minWidth: "60vw", + maxHeight: "95vh", }); } diff --git a/packages/studio-web/src/app/privacy-dialog.html b/packages/studio-web/src/app/privacy-dialog.html index 352e0cd8..a753065f 100644 --- a/packages/studio-web/src/app/privacy-dialog.html +++ b/packages/studio-web/src/app/privacy-dialog.html @@ -1,31 +1,39 @@

Privacy Policy

-
- We have built this tool with the top goal of respecting your privacy and data - sovereignty. The audio that you use on this site - does not get uploaded anywhere. It will stay on your computer. The text - you use for this Read Along will be uploaded over an encrypted connection to a - server for preprocessing. The text is not saved and is not used for any other - purpose. Using this site means that you agree for your data to be used in this - way. -
-
- Almost every website you visit will collect data about you using Web Analytics - tools which can come with a variety of privacy concerns. We have opted to use - Plausible Analytics, which - incurs a cost for us but ensures that the data gathered about your visit here - is not sold and respects your privacy. We use this data to determine how many - people access the site, which devices they use, and other metrics used to make - improvements to the site. For a full list of what is collected, please view - Plausible's data policy. For a less jargon-y example of the kind of data we see, you can visit this - demonstration site here. In any case, you can opt out entirely by clicking the "Opt Out" button - below (you can always opt back in later). +
+

+ We have built this tool with the top goal of respecting your privacy and + data sovereignty. The audio that you use on this site + does not get uploaded anywhere. It will stay on your computer. The + text you use for this Read Along will be uploaded over an encrypted + connection to a server for preprocessing. The text is not saved and is not + used for any other purpose. Using this site means that you agree for your + data to be used in this way. +

+

+ Almost every website you visit will collect data about you using Web + Analytics tools which can come with a variety of privacy concerns. We have + opted to use + Plausible Analytics, + which incurs a cost for us but ensures that the data gathered about your + visit here is not sold and respects your privacy. We use this data to + determine how many people access the site, which devices they use, and other + metrics used to make improvements to the site. For a full list of what is + collected, please view + Plausible's data policy. For a less jargon-y example of the kind of data we see, you can visit + this + demonstration site here. In any case, you can opt out entirely by clicking the "Opt Out" button + below (you can always opt back in later). +

-
+