Merge pull request #38 from mattbk/fix-bad-files

Fix css change

css/style.css

@@ -2,15 +2,28 @@ body {
     padding-top: 40px;
 }
 
-#rotator {
-    background: #dddddd;
-    width: 960px;
-    height: 627px;
-    overflow: hidden;
+#outside {
     cursor: pointer;
+	z-index:10; 
+	position:relative;
+}
+
+#rotator {
+	background: #ffffff;
+	// 90vh is 90% of viewer height: http://stackoverflow.com/a/16837667/2152245
+    height:80vh;
+	width:auto;
+    //overflow: hidden;
+    cursor: pointer;
+	z-index:0; 
+	position: absolute;
+    left: 0px;
+    top: 0px;
 }
 
 #rotator img {
     display: block;
+    max-height:80vh;	
+	width:auto;
     margin: 0;
 }

views/change.html.twig

@@ -2,15 +2,19 @@
 
 {% block content %}
     <header class="page-header">
-        <h1>Change blindness test (step {{ step_count }} of 3)</h1>
+        <h1>Change blindness test (step {{ step_count }} of {{ step_total }})</h1>
     </header>
     <div id="placeholder" class="well">
         <p>Please wait while the images are loaded.</p>
     </div>
+	<div id="outside">
+		<!-- This hidden image keeps the div open and the right size, even when #rotator is hidden in change.js. -->
+		<img src="{{ imageWithElement}}" style="visibility:hidden; position:relative;">
     <div id="rotator" class="hide">
         <img src="{{ imageWithElement}}">
         <img src="{{ imageWithoutElement}}">
     </div>
+	</div>
     <form method="post" action="" name="changeform" id="changeform">
         <input type="hidden" name="xcoordinate" id="xcoordinate" value="0">
         <input type="hidden" name="ycoordinate" id="ycoordinate" value="0">

views/next.html.twig

@@ -2,8 +2,8 @@
 
 {% block content %}
     <header class="page-header">
-        <h1>Change blindness test (step {{ step_count }} of 3)</h1>
+        <h1>Change blindness test (step {{ step_count }} of {{ step_total }})</h1>
     </header>
     <p>Your response has been recorded.</p>
-    <p><a class="btn">&laquo; Retry</a> <a class="btn btn-primary" href="{{ next_url }}">Continue to step {{ step_count + 1 }} &raquo;</a></p>
+    <p><a class="btn" href="{{ prev_url }}">&laquo; Retry</a> <a class="btn btn-primary" href="{{ next_url }}">Continue to step {{ step_count + 1 }} &raquo;</a></p>
 {% endblock %}