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

@@ -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" />

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" />

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)"

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;