Skip to content

Commit

Permalink
fix: make the privacy dialogue fully visible on smaller screens (#359)
Browse files Browse the repository at this point in the history 
* 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
  • Loading branch information
@joanise
joanise authored Oct 21, 2024
1 parent 239b25a commit b0b7756
Show file tree
Hide file tree
Showing 5 changed files with 42 additions and 33 deletions.
5 changes: 3 additions & 2 deletions packages/studio-web/src/app/app.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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",
});
}

Expand Down
58 changes: 33 additions & 25 deletions packages/studio-web/src/app/privacy-dialog.html
View file
Original file line number Diff line number Diff line change
@@ -1,31 +1,39 @@
<h1 i18n="Title for privacy dialog" mat-dialog-title>Privacy Policy</h1>
<div style="max-height: none" i18n="Text for privacy dialog" mat-dialog-content>
We have built this tool with the top goal of respecting your privacy and data
sovereignty. The audio that you use on this site
<b>does not get uploaded anywhere</b>. 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.
</div>
<div style="max-height: none" i18n="Text for analytics" mat-dialog-content>
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
<a target="_blank" href="https://plausible.io">Plausible Analytics</a>, 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
<a target="_blank" href="https://plausible.io/data-policy"
>Plausible's data policy</a
>. For a less jargon-y example of the kind of data we see, you can visit this
<a target="_blank" href="https://plausible.io/plausible.io"
>demonstration site here</a
>. In any case, you can opt out entirely by clicking the "Opt Out" button
below (you can always opt back in later).
<div style="max-height: none" mat-dialog-content>
<p i18n="Text for privacy dialog">
We have built this tool with the top goal of respecting your privacy and
data sovereignty. The audio that you use on this site
<b>does not get uploaded anywhere</b>. 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.
</p>
<p i18n="Text for analytics">
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
<a target="_blank" href="https://plausible.io">Plausible Analytics</a>,
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
<a target="_blank" href="https://plausible.io/data-policy"
>Plausible's data policy</a
>. For a less jargon-y example of the kind of data we see, you can visit
this
<a target="_blank" href="https://plausible.io/plausible.io"
>demonstration site here</a
>. In any case, you can opt out entirely by clicking the "Opt Out" button
below (you can always opt back in later).
</p>
</div>

<div mat-dialog-actions style="display: flex; justify-content: space-evenly">
<div
mat-dialog-actions
style="display: flex; justify-content: space-evenly; margin-top: 1em"
>
<div>
<button
color="accent"
Expand Down
4 changes: 2 additions & 2 deletions packages/studio-web/src/i18n/messages.es.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,8 +19,8 @@
"8793650218766282421": " ¡Lléveme al Inicio! ",
"6818717224121299397": "Ah, el fichero no se puede acceder. Intente otra vez más tarde.",
"8439955599488894226": "Política de privacidad",
"9145384756401372637": " Hemos creado esta herramienta con el objetivo fundamental de respetar su privacidad y la soberanía de sus datos. El audio que usted use en este sitio {$START_BOLD_TEXT}no es cargado a ninguna otra parte{$CLOSE_BOLD_TEXT}. Se queda en su computadora. El texto que usted use para este ReadAlong se cargará a un servidor mediante una conexión encriptada para pre-procesarlo. Su texto no se guarda en el servidor ni se usará para otros propósitos. Hacer uso de este sitio significa que usted está de acuerdo con que sus datos (audio + texto) se utilicen de la manera aquí indicada.",
"3354727320770003649": " Casi todos los sitios web que usted visita recogen información y datos sobre sus usuarios—en este caso, usted—utilizando herramientas de Web Analytics (análisis de la web) y esto conlleva a ciertas preocupaciones sobre la privacidad del usuario. Nosotros hemos optado por utilizar {$START_LINK}Plausible Analytics{$CLOSE_LINK}, lo que acarrea un costo para nosotros pero al mismo tiempo garantiza que la información recopilada en su visita al sitio no sea vendida y respeta su privacidad. Nuestro equipo utiliza esta información para determinar cuántas personas acceden al sitio, qué tipo de equipo utilizan para acceder y otros indicadores que utilizamos para mejorar el sitio. Para ver una lista completa de la información que recogemos, por favor ver {$START_LINK_1}la política de información de Plausible{$CLOSE_LINK}. Para un ejemplo de los datos que vemos en un lenguaje menos técnico, puede visitar este {$START_LINK_2}sitio de prueba{$CLOSE_LINK}. En cualquier caso, usted puede optar por no brindar ninguna información al sitio si hace clic en el botón «No aceptar» aquí debajo (siempre tiene la posibilidad de cambiar esta opción luego si usted lo desea).",
"3237237647979944914": " Hemos creado esta herramienta con el objetivo fundamental de respetar su privacidad y la soberanía de sus datos. El audio que usted use en este sitio {$START_BOLD_TEXT}no es cargado a ninguna otra parte{$CLOSE_BOLD_TEXT}. Se queda en su computadora. El texto que usted use para este ReadAlong se cargará a un servidor mediante una conexión encriptada para pre-procesarlo. Su texto no se guarda en el servidor ni se usará para otros propósitos. Hacer uso de este sitio significa que usted está de acuerdo con que sus datos (audio + texto) se utilicen de la manera aquí indicada. ",
"4295361982786629552": " Casi todos los sitios web que usted visita recogen información y datos sobre sus usuarios—en este caso, usted—utilizando herramientas de Web Analytics (análisis de la web) y esto conlleva a ciertas preocupaciones sobre la privacidad del usuario. Nosotros hemos optado por utilizar {$START_LINK}Plausible Analytics{$CLOSE_LINK}, lo que acarrea un costo para nosotros pero al mismo tiempo garantiza que la información recopilada en su visita al sitio no sea vendida y respeta su privacidad. Nuestro equipo utiliza esta información para determinar cuántas personas acceden al sitio, qué tipo de equipo utilizan para acceder y otros indicadores que utilizamos para mejorar el sitio. Para ver una lista completa de la información que recogemos, por favor ver {$START_LINK_1}la política de información de Plausible{$CLOSE_LINK}. Para un ejemplo de los datos que vemos en un lenguaje menos técnico, puede visitar este {$START_LINK_2}sitio de prueba{$CLOSE_LINK}. En cualquier caso, usted puede optar por no brindar ninguna información al sitio si hace clic en el botón «No aceptar» aquí debajo (siempre tiene la posibilidad de cambiar esta opción luego si usted lo desea). ",
"8754999798797911202": " Aceptar Analytics ",
"5348316094035024059": " No aceptar Analytics ",
"479660647798030606": " Estoy de acuerdo ",
Expand Down
4 changes: 2 additions & 2 deletions packages/studio-web/src/i18n/messages.fr.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,8 +19,8 @@
"8793650218766282421": " Ramenez-moi à la maison! ",
"6818717224121299397": "Hum, le fichier ne peut pas être téléchargé. Prière de réessayer plus tard.",
"8439955599488894226": "Politique de vie privée",
"9145384756401372637": " Cet outil a été conçu avec le but principal de respecter votre vie privée et la souveraineté de vos données. L'audio que vous rentrez sur ce site {$START_BOLD_TEXT}ne sera jamais téléversé{$CLOSE_BOLD_TEXT} mais restera sur votre ordinateur. Le texte que vous utilisez pour ce ReadAlong sera transféré à un serveur par une connection chiffrée pour accomplir le traitement nécessaire, mais ne sera ni sauvegardé ni utilisé à d'autres fins. Votre utilisation de ce site indique votre accord avec cette utilisation de vos données.\n",
"3354727320770003649": " Presque tous les sites web que vous visitez collectent des données d'utilisation à l'aide d'outils d'analytique Web, ce qui peut s'accompagner de divers probèmes de confidentialité. Nous avons choisi d'utiliser {$START_LINK}Plausible Analytics{$CLOSE_LINK}, ce qui entraîne des frais pour nous mais garantit que les données recueillies sur votre visite ici ne sont pas vendues et respectent votre vie privée. Nous utilisons ces données pour déterminer le nombre de personnes qui accèdent au site, les types appareils qu'elles utilisent et d'autres mesures utilisées pour apporter des améliorations au site. Pour une liste complète de ce qui est collecté, veuillez consulter la {$START_LINK_1}polique de données de Plausible{$CLOSE_LINK}. Pour un exemple plus simple du type de données que nous voyons, vous pouvez consulter ce {$START_LINK_2}site de démonstration{$CLOSE_LINK}. Dans tous les cas, vous pouvez désactiver l'analytique en cliquant sur le bouton ci-dessous (vous pourrez toujours la réactiver plus tard). ",
"3237237647979944914": " Cet outil a été conçu avec le but principal de respecter votre vie privée et la souveraineté de vos données. L'audio que vous rentrez sur ce site {$START_BOLD_TEXT}ne sera jamais téléversé{$CLOSE_BOLD_TEXT} mais restera sur votre ordinateur. Le texte que vous utilisez pour ce ReadAlong sera transféré à un serveur par une connection chiffrée pour accomplir le traitement nécessaire, mais ne sera ni sauvegardé ni utilisé à d'autres fins. Votre utilisation de ce site indique votre accord avec cette utilisation de vos données. ",
"4295361982786629552": " Presque tous les sites web que vous visitez collectent des données d'utilisation à l'aide d'outils d'analytique Web, ce qui peut s'accompagner de divers probèmes de confidentialité. Nous avons choisi d'utiliser {$START_LINK}Plausible Analytics{$CLOSE_LINK}, ce qui entraîne des frais pour nous mais garantit que les données recueillies sur votre visite ici ne sont pas vendues et respectent votre vie privée. Nous utilisons ces données pour déterminer le nombre de personnes qui accèdent au site, les types appareils qu'elles utilisent et d'autres mesures utilisées pour apporter des améliorations au site. Pour une liste complète de ce qui est collecté, veuillez consulter la {$START_LINK_1}polique de données de Plausible{$CLOSE_LINK}. Pour un exemple plus simple du type de données que nous voyons, vous pouvez consulter ce {$START_LINK_2}site de démonstration{$CLOSE_LINK}. Dans tous les cas, vous pouvez désactiver l'analytique en cliquant sur le bouton ci-dessous (vous pourrez toujours la réactiver plus tard). ",
"8754999798797911202": " Ré-activer l'analytique Web ",
"5348316094035024059": " Désactiver l'analytique Web ",
"479660647798030606": " D'accord ",
Expand Down
4 changes: 2 additions & 2 deletions packages/studio-web/src/i18n/messages.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,8 +21,8 @@
"8793650218766282421": " Take me home! ",
"6818717224121299397": "Hmm, the file is unreachable. Please try again later.",
"8439955599488894226": "Privacy Policy",
"9145384756401372637": " We have built this tool with the top goal of respecting your privacy and data sovereignty. The audio that you use on this site {$START_BOLD_TEXT}does not get uploaded anywhere{$CLOSE_BOLD_TEXT}. 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.\n",
"3354727320770003649": " 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 {$START_LINK}Plausible Analytics{$CLOSE_LINK}, 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 {$START_LINK_1}Plausible's data policy{$CLOSE_LINK}. For a less jargon-y example of the kind of data we see, you can visit this {$START_LINK_2}demonstration site here{$CLOSE_LINK}. In any case, you can opt out entirely by clicking the \"Opt Out\" button below (you can always opt back in later).\n",
"3237237647979944914": " We have built this tool with the top goal of respecting your privacy and data sovereignty. The audio that you use on this site {$START_BOLD_TEXT}does not get uploaded anywhere{$CLOSE_BOLD_TEXT}. 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. ",
"4295361982786629552": " 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 {$START_LINK}Plausible Analytics{$CLOSE_LINK}, 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 {$START_LINK_1}Plausible's data policy{$CLOSE_LINK}. For a less jargon-y example of the kind of data we see, you can visit this {$START_LINK_2}demonstration site here{$CLOSE_LINK}. In any case, you can opt out entirely by clicking the \"Opt Out\" button below (you can always opt back in later). ",
"8754999798797911202": " Opt in to Analytics ",
"5348316094035024059": " Opt out of Analytics ",
"479660647798030606": " I agree ",
Expand Down

0 comments on commit b0b7756

Please sign in to comment.