refactor Quiz.vue SpeechArea.vue for responsiveness, add Nym, reskin QuizAnswer.vue, update buttons therein

Author: jeffreywhitaker

public/images/nym-on-platform.svg

@@ -51,7 +51,7 @@ export default {
  z-index: 1
  position: relative
  text-align: left
- margin-left: 58px
+ margin-left: 48px
  width: 560px
  top: 55px
  height: 495px

src/components/SpeechArea.vue

@@ -1,25 +1,29 @@
 .quiz-answer {
+ display: flex;
+ align-items: center;
+
  .v-card {
  position: relative;
  background-size: contain;
  width: 826px;
- height: 272px;
- top: 230px;
- background: #1C1F34;
+ height: 230px;
+ background: url('/images/module-background.png');
  border: 8px solid #C2CFE1;
  margin-left: -45px;
 
- @media screen and (max-width: 1450px) {
+ @media only screen and (max-width: 1500px) {
  margin-left: 0;
+ margin-top: 150px;
  }
 
  .mascot {
- height: 50px;
- width: 50px;
- background: red;
+ height: 100%;
+ width: 200px;
+ background: url("/images/nym-on-platform.svg");
+ background-repeat: no-repeat !important;
  position: absolute;
- top: -20px;
- left: 320px;
+ top: -170px;
+ left: 243px;
  }
 
  .attempts-remaining {
@@ -31,38 +35,38 @@
  width: 142px;
  height: 142px !important;
  color: $dark !important;
- background-color: gray !important;
+ background-color: #505895 !important;
  font-family: "Oxygen", sans-serif;
- font-size: 40px;
+ font-size: 100px;
  letter-spacing: 12px;
- margin-top: 30px;
+ margin-left: 5px;
  }
 
  .buttons {
  position: absolute;
- top: 160px;
+ top: 146px;
  left: 100px;
 
  .hint-button {
  font-size: 20px;
+ font-weight: bold;
  letter-spacing: normal;
  height: 60px !important;
  }
  }
 
  .v-form {
- margin-top: 20px;
  display: flex;
+ align-items: center;
 
  .text-field {
  width: 486px;
  height: 100px;
- margin-top: 50px;
  margin-left: 70px;
  background-color: #dbe6ea;
  opacity: 0.8;
  padding-top: 20px;
- border: solid thick $primary;
+ border: solid thick #C2CFE1;
 
  .theme--dark.v-label {
  color: #031e41 !important;

src/styles/quiz-answer.scss

@@ -6,9 +6,14 @@
  height: 281px;
  position: fixed;
  right: -250px;
- bottom: 80px;
+ bottom: 50px;
  z-index: 100;
 
+ @media screen and (max-width: 1200px) {
+ // not a perfect fix, but keeps this component from covering answer box button on small screens
+ bottom: 250px;
+ }
+
  /*
  transition: all 1000ms;
 

src/styles/quiz-need-help.scss

@@ -1,20 +1,20 @@
 <template>
  <v-container fluid class="container">
- <v-row justify="center" class="container-row">
-  <speech-area>
-  <template v-slot:title style="font-size:25px;"
-  >Nym's Crystal Chase</template
-  >
-  <template v-slot:default>
-  <!--
+ <!-- <v-row justify="center" class="container-row"> -->
+ <speech-area>
+ <template v-slot:title style="font-size:25px;"
+ >Nym's Crystal Chase</template
+ >
+ <template v-slot:default>
+ <!--
  <img class="asset" :src="'/' + asset" v-if="!!asset" />
  -->
-  <div v-html="question" />
-  </template>
-  </speech-area>
+ <div v-html="question" />
+ </template>
+ </speech-area>
 
-  <quiz-answer :rank="rank" @next="onNext" />
- </v-row>
+ <quiz-answer :rank="rank" @next="onNext" />
+ <!-- </v-row> -->
  <quiz-need-help />
  </v-container>
 </template>
@@ -59,5 +59,12 @@ export default {
 <style lang="scss" scoped>
 .container {
  overflow: auto;
+ display: flex;
+ justify-content: center;
+
+ @media screen and (max-width: 1500px) {
+ flex-direction: column;
+ align-items: center;
+ }
 }
 </style>

src/views/Quiz/Quiz.vue

@@ -17,7 +17,7 @@
  </div>
 
  <v-btn x-large color="primary" :disabled="isDisabled" type="submit"
- >X</v-btn
+ >&#10003;</v-btn
  >
  </v-form>
  </v-card-text>