From 8892d347dd5578dd0fb3804d30ef75a3b11f67ff Mon Sep 17 00:00:00 2001
From: Matthew Conlen <matthew.conlen@nytimes.com>
Date: Sun, 16 Aug 2020 16:37:38 -0700
Subject: [PATCH] more fixes re #13

---
 src/diagrams/details-illustration.svelte |  9 ++--
 src/diagrams/horse.svelte                |  6 ++-
 src/diagrams/simulation-vis.svelte       | 56 ++++++++++++++++++++----
 3 files changed, 57 insertions(+), 14 deletions(-)

diff --git a/src/diagrams/details-illustration.svelte b/src/diagrams/details-illustration.svelte
index a9ffc3b..6413638 100644
--- a/src/diagrams/details-illustration.svelte
+++ b/src/diagrams/details-illustration.svelte
@@ -56,6 +56,7 @@
         annotationDisplay = true
         selectedPoint = i-1
         hideFakeImage()
+        tapBackgroundToHideAnnotation();
     }
 
     function changeSelectedImage(i) {
@@ -68,7 +69,7 @@
     }
 
     function tapBackgroundToHideAnnotation() {
-        document.getElementById('fake-image').onclick = () => changeAnnotationDisplay()
+        document.getElementById('fake-image-svg-container').onclick = () => changeAnnotationDisplay()
     }
 
     function hideFakeImage() {
@@ -165,7 +166,7 @@
         color: var(--gray);
         padding-bottom: 5px;
     }
-    
+
     #caption-wrapper {
         display: flex;
         /* flex-direction: column; */
@@ -201,7 +202,7 @@
         opacity: 0;
     }
 
-    
+
     @media(max-width: 768px) {
 
         #grid-wrapper {
@@ -239,7 +240,7 @@
 
         <div id="grid-wrapper">
             <div>
-                <div>
+                <div id="fake-image-svg-container">
                     {@html fakeImages[selectedImage-1]}
                 </div>
             </div>
diff --git a/src/diagrams/horse.svelte b/src/diagrams/horse.svelte
index c826001..2fb82a8 100644
--- a/src/diagrams/horse.svelte
+++ b/src/diagrams/horse.svelte
@@ -43,6 +43,7 @@
         /* border-radius: var(--border-radius); */
         /* padding-top: 0em; */
         grid-column: page;
+        max-width: calc(100vw - 2em);
     }
 
     #frames {
@@ -69,6 +70,7 @@
         display: grid;
         grid-template-columns: repeat(12, 1fr);
         grid-column-gap: 2em;
+        max-width: calc(100vw - 2em);
     }
 
     #horse {
@@ -76,6 +78,7 @@
         grid-column-end: 7;
         width: 100%;
         border-radius: var(--border-radius);
+        max-width: calc(100vw - 2em);
     }
 
     #horse-controls {
@@ -85,6 +88,7 @@
         flex-direction: column;
         justify-content: center;
         text-align: left;
+        max-width: calc(100vw - 2em);
     }
 
     .slider {
@@ -152,7 +156,7 @@
 	}
 
     @media(max-width: 1000px) {
-        
+
         #horse-controls {
             grid-column-start: 1;
             grid-column-end: 13;
diff --git a/src/diagrams/simulation-vis.svelte b/src/diagrams/simulation-vis.svelte
index 1e38a63..50768d6 100644
--- a/src/diagrams/simulation-vis.svelte
+++ b/src/diagrams/simulation-vis.svelte
@@ -117,6 +117,19 @@
     justify-content: space-around;
   }
 
+  .controls-bottom {
+    display: flex;
+    flex-direction: row;
+    margin: 0 auto;
+    font-size: 10px;
+    text-transform: uppercase;
+    text-align: center;
+    justify-content: space-between;
+  }
+
+  .controls-bottom {
+    margin-bottom: 1.5em;
+  }
   .slider {
       -webkit-appearance: none;
       appearance: none;
@@ -154,10 +167,35 @@
       cursor: pointer;
   }
 
+  .control {
+    line-height: 1.3;
+  }
+
+  .control-label {
+    user-select: none;
+  }
   @media(max-width: 768px) {
     #wrapper {
       grid-column: screen !important;
-		}
+      width: calc(100% - 2em);
+    }
+
+    .control {
+      width: 30vw;
+      /* flex: 1; */
+    }
+
+    .control input {
+      width: 30vw;
+      display: block;
+      margin-top: 0.5em;
+      /* flex: 1; */
+    }
+
+    .control-label {
+      width: 25vw;
+    }
+
   }
 
   @media(max-width: 1000px) {
@@ -190,31 +228,31 @@
         width={CANVAS_WIDTH}
         height={CANVAS_HEIGHT}
       ></canvas>
-      <div class="controls">
+      <div class="controls-bottom">
         <div class="control">
-          Separation Distance<br/>
+          <div class="control-label">Separation Distance</div>
             <input type=range bind:value={separationDistance} min=1 max=500 class="slider" />
         </div>
         <div class="control">
-          Alignment Distance<br/>
+          <div class="control-label">Alignment Distance</div>
             <input type=range bind:value={alignmentDistance} min=1 max=500 class="slider" />
         </div>
         <div class="control">
-          Cohesion Distance<br/>
+          <div class="control-label">Cohesion Distance</div>
             <input type=range bind:value={cohesionDistance} min=1 max=500 class="slider" />
         </div>
       </div>
-      <div class="controls">
+      <div class="controls-bottom">
         <div class="control">
-          Separation Force<br/>
+          <div class="control-label">Separation Force</div>
             <input type=range bind:value={separationForce} min=0.01 max=500 step=0.01 class="slider" />
         </div>
         <div class="control">
-          Alignment Force<br/>
+          <div class="control-label">Alignment Force</div>
             <input type=range bind:value={alignmentForce} min=0.01 max=500 step=0.01 class="slider" />
         </div>
         <div class="control">
-          Cohesion Force<br/>
+          <div class="control-label">Cohesion Force</div>
             <input type=range bind:value={cohesionForce} min=0.01 max=500 step=0.01 class="slider" />
         </div>
       </div>