Main game layout

martinalexrolph · Jul 17, 2021 · 2613b12 · 2613b12
1 parent 3cfb2d8
commit 2613b12
Show file tree

Hide file tree

Showing 5 changed files with 38 additions and 32 deletions.
diff --git a/src/components/Compose.vue b/src/components/Compose.vue
@@ -66,13 +66,11 @@ export default {
 <!-- Add "scoped" attribute to limit CSS to this component only -->
 <style scoped>
 .compose {
-  width: 90%;
-  height: 122px;
-  max-width: 800px;
+  width: 100%;
+  height: 180px;
   font-size: 20px;
   font-weight: 400;
   text-align: left;
-  margin: 0 auto;
   display: flex;
 }
 

diff --git a/src/components/Introduction.vue b/src/components/Introduction.vue
@@ -18,7 +18,6 @@ export default {
 <style scoped>
 .title {
   font-size: 40px;
-  margin-top: 30px;
   margin-bottom: 40px;
   line-height: 1.15;
   font-weight: 700;

diff --git a/src/components/NextQuestion.vue b/src/components/NextQuestion.vue
@@ -1,11 +1,11 @@
 <template>
   <div class="next-question outline">
-    <div class="heading">Next questions</div>
+    <div class="heading">Upcoming questions</div>
     <div class="first-question" v-if="questions[0]">
-      <b>- {{ questions[0] }}</b>
+      <b>{{ questions[0] }}</b>
     </div>
     <div v-if="questions[1]">
-      <b>- {{ questions[1] }}</b>
+      <b>{{ questions[1] }}</b>
     </div>
     <div class="end-of-interview" v-if="!questions[1]">
       --- END OF INTERVIEW ---
@@ -25,23 +25,21 @@ export default {
 <!-- Add "scoped" attribute to limit CSS to this component only -->
 <style scoped>
 .next-question {
-  width: 90%;
-  max-width: 800px;
+  width: 100%;
   text-align: left;
-  margin: 10px auto -20px;
-  padding-bottom: 30px;
+  margin: 10px auto;
 }
 
 .first-question {
-  margin-bottom: 6px;
+  margin-bottom: 15px;
 }
 
 .end-of-interview {
   text-align: center;
 }
 
 .heading {
-  margin-bottom: 6px;
+  margin-bottom: 8px;
   font-size: 14px;
   background: #222;
   width: 200px;

diff --git a/src/components/ThisQuestion.vue b/src/components/ThisQuestion.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="next-question outline">
-    <div class="heading">Question:</div>
-    <b>- {{ question }}</b>
+    <div class="heading">Current question:</div>
+    <b>{{ question }}</b>
   </div>
 </template>
 
@@ -17,8 +17,7 @@ export default {
 <!-- Add "scoped" attribute to limit CSS to this component only -->
 <style scoped>
 .next-question {
-  width: 90%;
-  max-width: 800px;
+  width: 100%;
   text-align: left;
   margin: 10px auto;
 }
@@ -32,7 +31,7 @@ export default {
 }
 
 .heading {
-  margin-bottom: 6px;
+  margin-bottom: 8px;
   font-size: 14px;
   background: #222;
   width: 200px;

diff --git a/src/views/Game.vue b/src/views/Game.vue
@@ -3,7 +3,8 @@
     <button class="home-button" @click="goHome()">
       &lt; HOME
     </button>
-    <div class="main-container">
+
+    <div class="main-container outline">
       <div class="messages">
         <Introduction v-bind:introduction="gameState.introduction"/>
         <div v-for="(message, index) in gameState.messages" v-bind:key="index">
@@ -13,12 +14,15 @@
         <div class="end-of-messages"></div>
       </div>
     </div>
-    <ThisQuestion v-if="!gameState.completed" v-bind:question="gameState.questions[0]"/>
-    <Compose v-if="!gameState.completed" v-bind:onSubmit="submitAnswer" v-bind:onUndo="undo" v-bind:canUndo="gameState.messages.length > 2" />
-    <NextQuestion v-if="!gameState.completed" v-bind:questions="gameState.questions"/>
-    <div class="outline game-complete" v-if="gameState.completed">
-      <div class="interview-over">--- INTERVIEW OVER ---</div>
-      <div>Start a <router-link to='/new'>new game</router-link> or go to the <router-link to='/'>main menu</router-link></div>
+
+    <div class="controls">
+      <ThisQuestion v-if="!gameState.completed" v-bind:question="gameState.questions[0]"/>
+      <Compose v-if="!gameState.completed" v-bind:onSubmit="submitAnswer" v-bind:onUndo="undo" v-bind:canUndo="gameState.messages.length > 2" />
+      <NextQuestion v-if="!gameState.completed" v-bind:questions="gameState.questions"/>
+      <div class="outline game-complete" v-if="gameState.completed">
+        <div class="interview-over">--- INTERVIEW OVER ---</div>
+        <div>Start a <router-link to='/new'>new game</router-link> or go to the <router-link to='/'>main menu</router-link></div>
+      </div>
     </div>
   </div>
 </template>
@@ -99,23 +103,23 @@ export default {
 .game {
   height: 100%;
   display: flex;
-  flex-direction: column;
-  justify-content: space-between;
+  flex-direction: row;
+  justify-content: space-evenly;
   overflow: hidden;
 }
 
 .messages {
   font-size: 20px;
-  width: 90%;
-  max-width: 800px;
-  margin: 0 auto;
+  width: 100%;
 }
 
 .main-container {
   width: 100%;
+  max-width: 750px;
+  height: calc(100vh - 60px);
+  margin: 30px;
   overflow: auto;
   flex-grow: 1;
-  padding-top: 80px;
   padding-bottom: 20px;
 }
 
@@ -143,6 +147,14 @@ export default {
   margin-bottom: 12px;
 }
 
+.controls {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  width: 550px;
+  margin-right: 30px;
+}
+
 @media screen and (max-width: 700px) {
   .main-container {
     padding-top: 40px;