Merge pull request #1 from healthonnet/test-layout

Test layout
healthonnet · Oct 26, 2016 · 7e4ad41 · 7e4ad41
2 parents 2cf2171 + e0b8c31
commit 7e4ad41
Show file tree

Hide file tree

Showing 4 changed files with 62 additions and 36 deletions.
diff --git a/www/assets/tests/ishihara/plates.json b/www/assets/tests/ishihara/plates.json
@@ -22,10 +22,10 @@
  "colorBlind" : "NO_NUMBER",
  "type" : 1,
  "choices": [
+ "NO_NUMBER",
  "8",
  "5",
- "3",
- "NO_NUMBER"
+ "3"
  ]
  },
  {
@@ -36,10 +36,10 @@
  "colorBlind" : "NO_NUMBER",
  "type" : 1,
  "choices": [
+ "NO_NUMBER",
  "8",
  "5",
- "6",
- "NO_NUMBER"
+ "6"
  ]
  },
  {
@@ -50,8 +50,8 @@
  "colorBlind" : "NO_NUMBER",
  "type" : 1,
  "choices": [
- "29",
  "NO_NUMBER",
+ "29",
  "70",
  "79"
  ]
@@ -64,8 +64,8 @@
  "colorBlind" : "NO_NUMBER",
  "type" : 1,
  "choices": [
- "35",
  "NO_NUMBER",
+ "35",
  "37",
  "57"
  ]
@@ -78,10 +78,10 @@
  "colorBlind" : "NO_NUMBER",
  "type" : 1,
  "choices": [
+ "NO_NUMBER",
  "2",
  "5",
- "7",
- "NO_NUMBER"
+ "7"
  ]
  },
  {
@@ -120,10 +120,10 @@
  "colorBlind" : "NO_NUMBER",
  "type" : 1,
  "choices": [
+ "NO_NUMBER",
  "71",
  "74",
- "21",
- "NO_NUMBER"
+ "21"
  ]
  },
  {
@@ -148,10 +148,10 @@
  "colorBlind" : "NO_NUMBER",
  "type" : 1,
  "choices": [
+ "NO_NUMBER",
  "3",
  "6",
- "8",
- "NO_NUMBER"
+ "8"
  ]
  },
  {
@@ -162,10 +162,10 @@
  "colorBlind" : "NO_NUMBER",
  "type" : 1,
  "choices": [
+ "NO_NUMBER",
  "7",
  "97",
- "17",
- "NO_NUMBER"
+ "17"
  ]
  },
  {
@@ -176,9 +176,9 @@
  "colorBlind" : "NO_NUMBER",
  "type" : 1,
  "choices": [
+ "NO_NUMBER",
  "4",
  "25",
- "NO_NUMBER",
  "45"
  ]
  },
@@ -190,8 +190,8 @@
  "colorBlind" : "NO_NUMBER",
  "type" : 1,
  "choices": [
- "2",
  "NO_NUMBER",
+ "2",
  "5",
  "3"
  ]
@@ -204,9 +204,9 @@
  "colorBlind" : "NO_NUMBER",
  "type" : 1,
  "choices": [
+ "NO_NUMBER",
  "7",
  "2",
- "NO_NUMBER",
  "5"
  ]
  },
@@ -232,9 +232,9 @@
  "colorBlind" : "NO_NUMBER",
  "type" : 1,
  "choices": [
+ "NO_NUMBER",
  "13",
  "73",
- "NO_NUMBER",
  "3"
  ]
  },
@@ -246,8 +246,8 @@
  "colorBlind" : "NO_NUMBER",
  "type" : 1,
  "choices": [
- "5",
  "NO_NUMBER",
+ "5",
  "2",
  "7"
  ]
@@ -260,10 +260,10 @@
  "colorBlind" : "NO_NUMBER",
  "type" : 1,
  "choices": [
+ "NO_NUMBER",
  "12",
  "21",
- "2",
- "NO_NUMBER"
+ "2"
  ]
  },
  {
@@ -302,10 +302,10 @@
  "colorBlind" : "NO_NUMBER",
  "type" : 1,
  "choices": [
+ "NO_NUMBER",
  "2",
  "26",
- "6",
- "NO_NUMBER"
+ "6"
  ]
  },
  {
@@ -316,9 +316,9 @@
  "colorBlind" : "NO_NUMBER",
  "type" : 1,
  "choices": [
+ "NO_NUMBER",
  "4",
  "2",
- "NO_NUMBER",
  "42"
  ]
  },
@@ -330,8 +330,8 @@
  "colorBlind" : "NO_NUMBER",
  "type" : 1,
  "choices": [
- "35",
  "NO_NUMBER",
+ "35",
  "5",
  "3"
  ]

diff --git a/www/styles/app.css b/www/styles/app.css
@@ -110,6 +110,7 @@ ons-sliding-menu {
 .footer {
  text-align: center;
  line-height: 44px;
+ font-size: 0.95em;
  font-family: 'Helvetica Neue', Helvetica, Arial, 'Lucida Grande', sans-serif;
 }
 
@@ -337,6 +338,13 @@ video.stereo {
  margin-top: 20px;
 }
 
+#ishihara-land {
+ height: 100%;
+}
+#ishihara-land ons-col {
+ margin: auto;
+}
+
 #plateContainer {
  height: 100%;
  width: 40%;
@@ -352,17 +360,20 @@ video.stereo {
  position: relative;
 }
 
-#plateContainer.plate {
+#plateContainer .plate {
  display: block;
+ width: 100%;
 }
 
 #plateContainer.portrait ons-col {
  display: flex;
 }
 
 #plateContainer.portrait .plate {
+ margin-top: 44px;
  align-self: center;
  flex: 0 0 auto;
+ width: initial;
 }
 
 #anwserContainer{
@@ -404,10 +415,15 @@ video.stereo {
 }
 
 #anwserContainer .container .button {
- font-size: 2.2em;
+ font-size: 2em;
  margin-bottom: 10px;
- padding: 10px 0px;
+ padding: 10px 0;
 }
+#anwserContainer .container .button.small {
+ width: 32%;
+ font-size: 2.3em;
+}
+
 
 #ishiharaTest footer {
  position: absolute;

diff --git a/www/views/ishihara/ishihara-test.html b/www/views/ishihara/ishihara-test.html
@@ -6,7 +6,7 @@
  <div class="center">Ishihara - Quiz</div>
  </ons-toolbar>
  <ons-row id="plateContainer" ng-class="{true: 'portrait', false: ''}[orientation]">
- <ons-col width="90%" class="align-center center" style="overflow: hidden">
+ <ons-col width="90%" class="align-center center" style="overflow: hidden; position: relative;">
  <img src="{{quiz[currentQuestion].file}}" alt="plate" class="plate center">
  </ons-col>
  </ons-row>
@@ -16,11 +16,11 @@ <h3 class="align-center">{{"YOUR_ANSWER" | translate}}&nbsp;: </h3>
  <div class="container">
  <button class="button button--large" ng-click="answer(quiz[currentQuestion].choices[0])">
  {{quiz[currentQuestion].choices[0] | translate}}</button>
- <button class="button button--large" ng-click="answer(quiz[currentQuestion].choices[1])">
+ <button class="button small" ng-click="answer(quiz[currentQuestion].choices[1])">
  {{quiz[currentQuestion].choices[1] | translate}}</button>
- <button class="button button--large" ng-click="answer(quiz[currentQuestion].choices[2])">
+ <button class="button small" ng-click="answer(quiz[currentQuestion].choices[2])">
  {{quiz[currentQuestion].choices[2] | translate}}</button>
- <button class="button button--large" ng-show="quiz[currentQuestion].choices[3]"
+ <button class="button small" ng-show="quiz[currentQuestion].choices[3]"
  ng-click="answer(quiz[currentQuestion].choices[3])">
  {{quiz[currentQuestion].choices[3] | translate}}</button>
  </div>

diff --git a/www/views/ishihara/ishihara.html b/www/views/ishihara/ishihara.html
@@ -7,21 +7,31 @@
  </div>
  <div class="center">Ishihara</div>
  </ons-toolbar>
- <ons-row class="align-center">
+ <ons-row class="align-center" ons-if-orientation="portrait">
  <ons-col>
  <h1>Ishihara test</h1>
  </ons-col>
  </ons-row>
- <ons-row class="align-center">
+ <ons-row class="align-center" ons-if-orientation="portrait">
  <ons-col>
  <img src="assets/plates/plate-1.jpg" class="ishihara-example" alt="example">
  </ons-col>
- <ons-col width="60%" ons-if-orientation="landscape" ng-include="'explanations.html'"></ons-col>
  </ons-row>
- <ons-row class="align-center" ons-if-orientation="portrait" ng-include="'explanations.html'"></ons-row>
+ <ons-row class="align-center"  ons-if-orientation="portrait" ng-include="'explanations.html'"></ons-row>
 
+ <ons-row class="align-center" id="ishihara-land" ons-if-orientation="landscape">
+ <ons-col>
+ <img src="assets/plates/plate-1.jpg" class="ishihara-example" alt="example">
+ </ons-col>
+ <ons-col width="60%" ng-include="'explanations.html'"></ons-col>
+ </ons-row>
 
  <ons-template id="explanations.html">
+ <ons-row class="align-center" ons-if-orientation="landscape">
+ <ons-col>
+ <h1>Ishihara test</h1>
+ </ons-col>
+ </ons-row>
  <div id="explanations" class="center">
  <ons-row class="row-spacing">
  <ons-col>