From 6e040151fc284358454938ba128485c944effe12 Mon Sep 17 00:00:00 2001
From: bat <bat@noreply.codeberg.org>
Date: Fri, 28 Apr 2023 06:51:25 +0000
Subject: [PATCH] simplify and clean up layout

---
 page-settings.js | 49 ++++++++++++++++++++++++++++++++++--------------
 1 file changed, 35 insertions(+), 14 deletions(-)

diff --git a/page-settings.js b/page-settings.js
index 8899a30..d3559cf 100644
--- a/page-settings.js
+++ b/page-settings.js
@@ -1,10 +1,12 @@
 export class PageSettings extends HTMLElement {
   textEn = {
-    networkAccess: 'Direct network access (Content Security Policy)',
+    networkAccess: 'Direct network access (CSP)',
+    csp: 'Content Security Policy',
   }
 
   textEs = {
-    networkAccess: 'Acceso directo a la red (Política de Seguridad del Contenido)',
+    networkAccess: 'Acceso directo a la red (CSP)',
+    csp: 'Política de Seguridad de Contenido',
   }
 
   networkAccessOptions = {
@@ -22,18 +24,18 @@ export class PageSettings extends HTMLElement {
         es: "El acceso directo a la red está desactivado y la página no puede enviar datos. Esto evita que los datos queden expuestos incluso si el código de la página no es de confianza. Es una buena opción si esta página contendrá datos privados.",
       },
     },
-    jsCdns: {
+    unpkg: {
       option: {
-        en: 'jsDelivr and UNPKG',
-        es: 'jsDelivr y UNPKG',
+        en: 'UNPKG',
+        es: 'UNPKG',
       },
       text: {
-        en: 'access to jsDelivr and UNPKG only',
-        es: 'acceso a jsDelivr y UNPKG solamente',
+        en: 'access to UNPKG only',
+        es: 'acceso a UNPKG solamente',
       },
       details: {
-        en: "The page can make requests to jsDelivr and UNPKG. This could allow data from your page to be sent to the servers if the code in the page sends it. This means that if you have private data in the page, you should either trust the code on the page not to send it to these servers, or you should trust these servers, or both.",
-        es: "La página puede realizar solicitudes a jsDelivr y UNPKG. Esto podría permitir que los datos de su página se envíen a los servidores si el código de la página los envía. Esto significa que si tiene datos privados en la página, debe confiar en el código de la página para no enviarlos a estos servidores, o debe confiar en estos servidores, o en ambos.",
+        en: "The page can make requests to UNPKG. This could allow data from your page to be sent to the servers if the code in the page sends it. This means that if you have private data in the page, you should either trust the code on the page not to send it to these servers, or you should trust these servers, or both.",
+        es: "La página puede realizar solicitudes a UNPKG. Esto podría permitir que los datos de su página se envíen a los servidores si el código de la página los envía. Esto significa que si tiene datos privados en la página, debe confiar en el código de la página para no enviarlos a estos servidores, o debe confiar en estos servidores, o en ambos.",
       },
     },
     open: {
@@ -59,9 +61,13 @@ export class PageSettings extends HTMLElement {
     const netSelectLabel = document.createElement('div')
     netSelectLabel.classList.add('label')
     netSelectLabel.innerText = this.text.networkAccess
-    const netSelectField = document.createElement('div')
+    const netSelectField = (
+      document.createElement('div')
+    )
     netSelectField.classList.add('field')
-    this.netSelect = document.createElement('select')
+    this.netSelect = document.createElement(
+      'select'
+    )
     this.netSelect.addEventListener(
       'change', () => this.display()
     )
@@ -75,8 +81,17 @@ export class PageSettings extends HTMLElement {
       return el
     })
     this.netSelect.append(...netOptions)
-    this.netHeading = document.createElement('h3')
+    this.netHeading = document.createElement(
+      'h3'
+    )
     this.netText = document.createElement('p')
+    this.cspLabel = document.createElement(
+      'div'
+    )
+    this.cspLabel.classList.add('csp-label')
+    this.cspLabel.innerText = (
+      this.text.csp + ' (CSP):'
+    )
     this.netCsp = document.createElement('div')
     this.netCsp.classList.add('csp')
     this.shadowRoot.append(
@@ -84,6 +99,7 @@ export class PageSettings extends HTMLElement {
       netSelectField,
       this.netHeading,
       this.netText,
+      this.cspLabel,
       this.netCsp,
     )
   }
@@ -102,9 +118,11 @@ export class PageSettings extends HTMLElement {
         display: flex;
         flex-direction: row;
         justify-content: flex-start;
-        background: #eee;
-        padding: 3px;
+        background: #ddd;
+        padding: 5px;
+        border-radius: 3px;
         margin-bottom: 5px;
+        font-weight: bold;
       }
       div.field {
         display: flex;
@@ -113,6 +131,9 @@ export class PageSettings extends HTMLElement {
       h1, h2, h3, p {
         margin: 3px 0;
       }
+      .csp-label {
+        font-weight: bold;
+      }
       .csp {
         font-family: monospace;
       }