changeset 2768:789ce0944e4d

#162 #126. Redesigned AB to use flex-boxes

--- a/interfaces/AB.css	Wed Apr 19 10:59:49 2017 +0100
+++ b/interfaces/AB.css	Wed Apr 19 11:22:43 2017 +0100
@@ -2,6 +2,10 @@
     /* Set the background colour (note US English spelling) to grey*/
     background-color: #fff
 }
+div#feedbackHolder {
+    display: flex;
+    flex-direction: column;
+}
 div.pageTitle {
     width: auto;
     height: 20px;
@@ -34,13 +38,25 @@
     position: inherit;
     margin: 0px 5px;
 }
+div#box-holders {
+    width: 100%;
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    flex-wrap: wrap;
+}
+div#playback-holder{
+    float:none;
+}
 div.comparator-holder {
     width: 260px;
     height: 300px;
     border: black 1px solid;
-    float: left;
     padding-top: 5px;
     margin: 25px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
 }
 div.comparator-selector {
     width: 248px;
@@ -49,6 +65,7 @@
     position: relative;
     background-color: #FF0000;
     border-radius: 20px;
+    text-align: center;
 }
 div.disabled {
     background-color: #AAA;

--- a/interfaces/AB.js	Wed Apr 19 10:59:49 2017 +0100
+++ b/interfaces/AB.js	Wed Apr 19 11:22:43 2017 +0100
@@ -73,9 +73,7 @@
 
     // Construct the AB Boxes
     var boxes = document.createElement('div');
-    boxes.align = "center";
     boxes.id = "box-holders";
-    boxes.style.float = "left";
 
     var submit = document.createElement('button');
     submit.id = "submit";
@@ -375,9 +373,6 @@
         boxW = numObj * 312;
         diff = window.innerWidth - boxW;
     }
-    document.getElementById('box-holders').style.marginLeft = diff / 2 + 'px';
-    document.getElementById('box-holders').style.marginRight = diff / 2 + 'px';
-    document.getElementById('box-holders').style.width = boxW + 'px';
 
     var outsideRef = document.getElementById('outside-reference');
     if (outsideRef !== null) {