Refactor: mobile layout

components/CourseList.vue

@@ -3,7 +3,7 @@
     <v-col v-for="(course, id) in courses" :key="id" cols="12" lg="6">
       <v-card width="100%" @click="openCourse(id)">
         <v-row no-gutters class="flex-nowrap">
-          <v-col cols="auto">
+          <v-col class="flex-grow-0 flex-shrink-1">
             <v-img
               src="https://www.onlinecollegeplan.com/wp-content/uploads/2018/05/computer-programming.jpg"
               :width="imgSize"
@@ -11,11 +11,11 @@
               class="rounded-l-lg"
             ></v-img>
           </v-col>
-          <v-col cols="auto" class="flex-grow-1 flex-shrink-0">
+          <v-col class="flex-grow-1 flex-shrink-0">
             <v-card-title class="text--secondary text-subtitle-1">{{ id.toUpperCase() }}</v-card-title>
-            <v-card-subtitle class="text--primary text-h6 text-wrap">{{ course.name }}</v-card-subtitle>
+            <v-card-subtitle class="text--primary text-h6">{{ course.name }}</v-card-subtitle>
           </v-col>
-          <v-col cols="auto">
+          <v-col class="flex-grow-0 flex-shrink-1">
             <v-btn icon @click.stop="isFavoriteCourse(id) ? addToFavorites(id, false) : addToFavorites(id, true)">
               <v-icon>{{ isFavoriteCourse(id) ? 'mdi-heart' : 'mdi-heart-outline' }}</v-icon>
             </v-btn>
@@ -51,16 +51,15 @@ export default {
       return this.$store.state.user.courses && this.$store.state.user.courses.includes(courseID)
     },
     addToFavorites (courseID, add) {
-      const gameRef = doc(this.$db, `benutzer/${this.$auth.currentUser.uid}`)
+      const userRef = doc(this.$db, `benutzer/${this.$auth.currentUser.uid}`)
 
-      // Atomically add a new answer to the "player[ID]answers" array field.
+      updateDoc(userRef, {
-      updateDoc(gameRef, {
         kurse: add ? arrayUnion(courseID) : arrayRemove(courseID)
       }).then((empty) => {
         // Query execution was successful
         add ? this.$store.commit('addFavoriteCourse', courseID) : this.$store.commit('removeFavoriteCourse', courseID)
       }).catch((error) => {
-        // Failed to update the game; display error message
+        // Failed; display error message
         this.$toast({ content: error, color: 'error' })
       })
     }

components/DemoInfoDialog.vue

@@ -3,7 +3,7 @@
 <template>
   <v-dialog v-model="show" width="500">
     <template #activator="{ on, attrs }">
-      <v-btn fixed top dark color="red lighten-2" :style="{left: '50%', transform:'translateX(-50%)'}" v-bind="attrs" v-on="on">
+      <v-btn dark color="red lighten-2" :style="{left: '50%', transform:'translateX(-50%)'}" v-bind="attrs" v-on="on">
         <v-icon left>mdi-alert-circle-outline</v-icon>
         Mit Demo-Account Anmelden
       </v-btn>
@@ -12,23 +12,17 @@
       <v-card-title>Information zu Demo-Accounts</v-card-title>
       <v-card-text>
         <p>
-          Folgende Features funktionieren:
+          Da die E-Mails zur <strong>Kontoverifizierung</strong> und Passwortrücksetzung meist vom Spam-Filter
-          <ul>
+          der IU-Mailserver geblockt werden, kann im Rahmen dieser Demo alternativ mit einem Demo-Account angemeldet werden.
-            <li>Registrierung</li>
-            <li>Anmeldung</li>
-            <li>Verifizierung per E-Mail</li>
-            <li>Passwortrücksetzung per E-Mail</li>
-          </ul>
         </p>
-        <p>Alternativ zur Registrierung kann mit einem Demo-Account angemeldet werden:</p>
+        <v-row>
-        <v-row dense>
+          <v-col cols="12" sm="4">
-          <v-col cols="4">
             <v-btn depressed block color="primary" @click="signIn('student')">Student</v-btn>
           </v-col>
-          <v-col cols="4">
+          <v-col cols="12" sm="4">
             <v-btn depressed block color="primary" @click="signIn('tutor')">Tutor</v-btn>
           </v-col>
-          <v-col cols="4">
+          <v-col cols="12" sm="4">
             <v-btn depressed block color="primary" @click="signIn('admin')">Admin</v-btn>
           </v-col>
         </v-row>

pages/courses/_course/play.vue

@@ -3,7 +3,7 @@
     <GameResultDialog ref="resultDialog" :game="game" :course-id="courseID" />
     <v-row dense>
       <v-col cols="12">
-        <p class="text-h6 text-center">{{ game.player1name }} vs. {{ game.player2name || '???' }}</p>
+        <p class="text-h6 text-center">{{ game.player1name }} vs. {{ game.player2name || '?' }}</p>
       </v-col>
       <v-col cols="12">
         <v-icon
@@ -13,7 +13,7 @@
       </v-col>
       <v-col cols="12">
         <v-card class="d-flex align-center" height="250" :disabled="submittedAnswer === null" @click="nextQuestion">
-          <span class="flex-grow-1 text-h5 font-weight-medium text-center">{{ selectedQuestion.question }}</span>
+          <span class="flex-grow-1 text-h5 text--primary font-weight-medium text-center">{{ selectedQuestion.question }}</span>
         </v-card>
       </v-col>
       <v-col v-for="answer, i in answersShuffled" :key="i" cols="6">
@@ -21,8 +21,7 @@
           :color="selectedQuestion.correctAnswer === answer ? answerColor : ''"
           class="d-flex align-center"
           height="150"
-          :disabled="submittedAnswer !== null"
+          @click="submittedAnswer === null ? submitAnswer(answer) : nextQuestion()"
-          @click="submitAnswer(answer)"
         >
           <div class="flex-grow-1 text-h6 text-center">{{ answer }}</div>
         </v-card>
@@ -378,3 +377,9 @@ export default {
   }
 }
 </script>
+
+<style scoped>
+.v-card--disabled {
+  opacity: 0.87 !important; /* same as text--primary */
+}
+</style>

pages/login.vue

@@ -1,12 +1,14 @@
 <template>
   <v-container fill-height>
     <!-- TODO: For demo purposes only. Delete in production. -->
-    <DemoInfoDialog />
+    <v-row justify="center" align="center">
+    <v-col cols="12"><DemoInfoDialog /></v-col>
+    <v-col cols="12">
     <!-- -->
     <v-card width="500" elevation="12" class="mx-auto">
       <v-card-title class="mb-3">
-        <span class="text-h3 font-weight-black flex-grow-1 flex-shrink-0">Quiz App</span>
+        <span class="text-h4 text-md-h3 font-weight-black flex-grow-1 flex-shrink-0">Quiz App</span>
-        <v-img src="/iu-logo.svg" height="40" contain class="flex-grow-0 flex-shrink-1"></v-img>
+        <v-img src="/iu-logo.svg" :height="$vuetify.breakpoint.mdAndUp ? 40 : 30" contain class="flex-grow-0 flex-shrink-1"></v-img>
       </v-card-title>
       <v-card-text v-if="existingUser">
         <v-form ref="loginForm" v-model="valid">
@@ -102,6 +104,8 @@
         </v-btn>
       </v-card-text>
     </v-card>
+    </v-col>
+    </v-row>
     <v-dialog v-model="showPwResetDialog" width="500px">
       <v-card>
         <v-card-title>