From a3ebfe46a2efe12920ce56848447256c020d7fc2 Mon Sep 17 00:00:00 2001
From: om <om@nospam>
Date: Sun, 3 Sep 2023 19:43:57 +0200
Subject: [PATCH] Make more things clickable so that it is easier to use the
 app.

Also disable the automatic swipe to the right at the very beginning,
because people tend to not notice it. Also change the background color
of the contact list contacts to make it a bit more obvious that you can
click on things.

And remove help text about blue arrow because the user will start from
the contact list.
---
 da/index.html   |  8 --------
 en/index.html   |  9 ---------
 img/chatapp.svg | 18 +++++++++++++++---
 style.css       |  5 -----
 4 files changed, 15 insertions(+), 25 deletions(-)

diff --git a/da/index.html b/da/index.html
index a489e18..2d46d2b 100644
--- a/da/index.html
+++ b/da/index.html
@@ -47,14 +47,6 @@
           Lær mere om ChatControllen og hvorfor det er en dårlig idé, i vores interaktive ChatControl film ude til
           venstre.
         </p>
-        <div id="backarrow">
-          <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="20" height="40" viewBox="0 0 20 40">
-            <polyline points="0,20 20,0 20,40" fill="#0084FF" onclick="swipe_viewport()" />
-          </svg>
-          <p>
-            Du kan bruge den blå pil for at åbne kontaktlisten
-          </p>
-        </div>
         <p>
           <input type="range" name="typing_speed" id="typing_speed" title="typing speed"
             onChange="adjust_typing_speed(this.value)" value="50" min="0" max="100" />
diff --git a/en/index.html b/en/index.html
index 0bbd2ef..93dcf3c 100644
--- a/en/index.html
+++ b/en/index.html
@@ -43,15 +43,6 @@
           Discover how the chatcontrol proposal would affect you by watching our
           interactive film on the left.
         </p>
-        <div id="backarrow">
-          <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="20" height="40" viewBox="0 0 20 40">
-            <polyline points="0,20 20,0 20,40" fill="#0084FF" onclick="swipe_viewport()" />
-          </svg>
-          <p>
-            Check out how chatcontrol could affect you in different conversations using the blue back arrow on the
-            phone.
-          </p>
-        </div>
         <p>
           <input type="range" name="typing_speed" id="typing_speed" title="typing speed"
             onChange="adjust_typing_speed(this.value)" value="50" min="0" max="100" />
diff --git a/img/chatapp.svg b/img/chatapp.svg
index 24fe2b4..77270fc 100644
--- a/img/chatapp.svg
+++ b/img/chatapp.svg
@@ -1245,27 +1245,37 @@ const contact_list = {
 function fill_contact_list(lang) {
   let x = 15;
   let y = 75;
-  let y_step = 25;
+  let y_step = 30;
   let group = document.getElementById('contacts');
   removeAllChildren(group);
 
   let contacts = contact_list[lang];
   for(let i=0; i < contacts.length; i++) {
+    let box = create_svg_node('rect', {x: x - 10,
+                                       y: y - y_step / 2,
+                                       width: 300 - 10,
+                                       height: y_step - 2,
+                                       rx: "3px",
+                                       ry: "3px",
+                                       "stroke-linejoin":"round",
+                                       fill: '#8042ef'});
+    
     let text = create_svg_node('text', {
       x: x,
-      y: y
+      y: y + 2,
     });
     y += y_step;
     let contact = contacts[i];
+    box.onclick = function() { start_chat(i) };
     text.onclick = function() { start_chat(i) };
     text.appendChild(document.createTextNode(contact.name));
+    group.appendChild(box);
     group.appendChild(text);
   }
 }
 
 function run() {
    fill_contact_list(current_language);
-   start_chat(current_discussion_index);
 }
 ]]></script>
   <!-- [right] contact name view -->
@@ -1277,6 +1287,7 @@ function run() {
        width="300"
        height="50"
        fill="#F5F5F5"
+       onclick="swipe_viewport()"
        id="rect59" />
     <polyline
        points="300,20 320,0 320,40"
@@ -1288,6 +1299,7 @@ function run() {
        x="343"
        y="28"
        id="contact_indicator"
+       onclick="swipe_viewport()"
        inkscape:label="contact_indicator">loading...</text>
     <g
        transform="scale(0.5,0.5)"
diff --git a/style.css b/style.css
index 493cc9d..718b2b3 100644
--- a/style.css
+++ b/style.css
@@ -113,11 +113,6 @@ p{
   grid-row: 1;
 }
 
-#backarrow{
-  display: flex;
-  align-items: center;
-}
-
 a[href="#more"]{
   display:inline-block;
   padding: 6px 8px;