Refactor: layout

assets/variables.scss

@@ -2,3 +2,11 @@
 //
 // The variables you want to modify
 // $font-size-root: 20px;
+
+@use "sass:map";
+@import '~vuetify/src/styles/styles.sass';
+
+.v-card {
+  border-radius: map.get($rounded, "lg") !important;
+  box-shadow: 0px 0px 0px 0px rgb(0 0 0 / 20%) !important;
+}

components/AddCourse.vue

@@ -1,7 +1,7 @@
 <template>
   <v-dialog v-model="show" max-width="500" persistent>
     <template #activator="{ on, attrs }">
-      <v-card flat width="100%" class="rounded-lg" v-bind="attrs" v-on="on">
+      <v-card width="100%" v-bind="attrs" v-on="on">
         <v-card-text class="text-h6">
           <v-icon left x-large>mdi-plus</v-icon>
           Kurs hinzufügen

components/NavigationDrawer.vue

@@ -1,5 +1,12 @@
 <template>
-  <v-navigation-drawer v-if="$store.state.user" app dark clipped :mini-variant="miniVariant">
+  <v-navigation-drawer
+    v-if="$store.state.user"
+    v-model="drawer"
+    app dark clipped
+    :mini-variant="mini"
+    :permanent="!mobile"
+    :touchless="!mobile"
+  >
     <v-list>
       <v-list-item link class="px-2" :to="{ name: 'user' }">
         <v-list-item-avatar>
@@ -7,7 +14,6 @@
         </v-list-item-avatar>
           <v-list-item-content>
           <v-list-item-title>{{ $store.state.user.displayName }}</v-list-item-title>
-          <v-list-item-subtitle>{{ $auth.currentUser.email }}</v-list-item-subtitle>
         </v-list-item-content>
       </v-list-item>
     </v-list>
@@ -33,12 +39,23 @@
 export default {
   data () {
     return {
+      drawer: true,
       miniVariant: false
     }
   },
+  computed: {
+    mobile () {
+      return this.$vuetify.breakpoint.smAndDown
+    },
+    mini () {
+      if (this.mobile) return false
+      else return this.miniVariant
+    }
+  },
   methods: {
     toggle () {
-      this.miniVariant = !this.miniVariant
+      if (this.mobile) this.drawer = !this.drawer
+      else this.miniVariant = !this.miniVariant
     }
   }
 }

components/TutorPanel.vue

@@ -1,12 +1,11 @@
 <template>
   <v-container v-if="newQuestions.length > 0" fluid>
-    <v-subheader class="text-h5 text--primary">
+    <v-card class="my-3">
+      <v-card-title class="text-h5 text--primary">
         <v-badge color="primary" offset-x="-5" offset-y="10" :content="newQuestions.length">
           Neue Fragen
         </v-badge>
-    </v-subheader>
+      </v-card-title>
-    <v-divider></v-divider>
-    <v-card flat class="my-3">
       <v-window
         continuous
         show-arrows
@@ -14,7 +13,7 @@
         <v-window-item
           v-for="question, index in newQuestions" :key="index"
         >
-          <v-card flat max-width="500" class="mx-auto">
+          <v-card max-width="500" class="mx-auto">
             <v-card-title>{{ question.question }}</v-card-title>
             <v-card-text>
               <p>

layouts/default.vue

@@ -10,9 +10,7 @@
         <v-icon>mdi-theme-light-dark</v-icon>
       </v-btn>
       -->
-      <v-btn v-if="loggedIn" icon @click="logout">
+      <v-img src="/iu-logo.svg" contain class="svg flex-grow-0 flex-shrink-1"></v-img>
-        <v-icon>mdi-logout-variant</v-icon>
-      </v-btn>
     </v-app-bar>
     <v-main>
       <Nuxt />
@@ -23,8 +21,6 @@
 </template>
 
 <script>
-import { signOut } from 'firebase/auth'
-
 export default {
   name: 'DefaultLayout',
   data() {
@@ -44,17 +40,13 @@ export default {
   methods: {
     toggleNavDrawer () {
       this.$refs.navDrawer.toggle()
-    },
-    logout () {
-      signOut(this.$auth).then(() => {
-        // Sign-out successful
-        // The authentication state observer will redirect the user to the main page (dashboard),
-        // see pages/index.vue
-      }).catch((error) => {
-        // An error happened.
-        this.$toast({ content: error, color: 'error' })
-      })
     }
   }
 }
 </script>
+
+<style scoped>
+.svg {
+  filter: brightness(0) invert(1);
+}
+</style>

nuxt.config.js

@@ -21,7 +21,9 @@ export default {
   },
 
   // Global CSS: https://go.nuxtjs.dev/config-css
-  css: [],
+  css: [
+    '~/assets/variables.scss'
+  ],
 
   // Plugins to run before rendering page: https://go.nuxtjs.dev/config-plugins
   plugins: [
@@ -67,13 +69,13 @@ export default {
 
   // Vuetify module configuration: https://go.nuxtjs.dev/config-vuetify
   vuetify: {
-    customVariables: ['~/assets/variables.scss'],
     theme: {
       dark: false,
       themes: {
         light: {
           // Vuetify default light theme colors
-          primary: colors.blue.darken2,
+          // primary: colors.blue.darken2,
+          primary: '#3772ff', // same as iu.de
           secondary: colors.grey.darken3,
           accent: colors.blue.accent1,
           error: colors.red.accent2,

pages/courses/_course/index.vue

@@ -1,10 +1,37 @@
 <template>
   <v-container fluid class="pa-0">
-    <v-sheet class="rounded-lg pa-2">
+    <v-row>
-      <span class="text-h4 text--secondary">{{ courseID.toUpperCase() }}</span>
+      <v-col cols="12" sm="6">
-      <span class="text-h4">{{ $store.getters.getCourseByID(courseID).name }}</span>
+        <v-card height="100%" class="d-flex align-center pa-2">
-    </v-sheet>
+          <v-row no-gutters>
-    <v-container>
+            <v-col cols="12">
+              <span class="text-h5 text--secondary">{{ courseID.toUpperCase() }}</span>
+            </v-col>
+            <v-col cols="12">
+              <span class="text-h5">{{ $store.getters.getCourseByID(courseID).name }}</span>
+            </v-col>
+          </v-row>
+        </v-card>
+      </v-col>
+      <v-col cols="12" sm="6">
+        <v-card>
+          <v-card-title>Tutor</v-card-title>
+          <v-card-text>
+            <v-row align="center">
+              <v-col cols="auto">
+                <v-avatar size="64">
+                  <img src="https://www.w3schools.com/howto/img_avatar.png" />
+                </v-avatar>
+              </v-col>
+              <v-col>
+                <div>{{ tutorName }}</div>
+                <div>{{ tutorEmail }}</div>
+              </v-col>
+            </v-row>
+          </v-card-text>
+        </v-card>
+      </v-col>
+      <v-col cols="12">
         <v-row>
           <v-col v-if="isAuthorized" cols="12">
             <TutorPanel :course-id="courseID" />
@@ -16,11 +43,14 @@
             <Coop :course-id="courseID" />
           </v-col>
         </v-row>
-    </v-container>
+      </v-col>
+    </v-row>
   </v-container>
 </template>
 
 <script>
+import _capitalize from 'lodash-es/capitalize'
+
 export default {
   name: 'CourseIndexPage',
   data() {
@@ -33,6 +63,17 @@ export default {
       const isTutor = this.$auth.currentUser.email.endsWith('@iu.org')
       const isAdmin = this.$store.getters.isAdmin
       return isTutor || isAdmin
+    },
+    tutorEmail () {
+      return this.$store.getters.getCourseByID(this.courseID).tutor
+    },
+    tutorName () {
+      const nameParsed = this.tutorEmail.split('@')[0]
+      const nameParts = []
+      for (const namePart of nameParsed.split('.')) {
+        nameParts.push(_capitalize(namePart))
+      }
+      return nameParts.join(' ')
     }
   },
   created () {

pages/courses/_course/play.vue

@@ -27,7 +27,7 @@
     </v-row>
   </v-container>
   <v-container v-else fluid class="fill-height">
-    <v-card flat color="transparent" class="mx-auto">
+    <v-card color="transparent" class="mx-auto">
       <v-progress-circular indeterminate color="primary" size="64"></v-progress-circular>
     </v-card>
   </v-container>

pages/index.vue

@@ -53,7 +53,7 @@ export default {
     },
     createUser () {
       const displayName = _capitalize(this.$auth.currentUser.email.split('.')[0])
-      const user = new User(displayName, [])
+      const user = new User(displayName, [], [])
 
       // Add a new document in collection "users"
       setDoc(doc(this.$db, 'benutzer', this.$auth.currentUser.uid).withConverter(UserConverter), user)

pages/login.vue

@@ -3,8 +3,12 @@
     <!-- TODO: For demo purposes only. Delete in production. -->
     <DemoInfoDialog />
     <!-- -->
-    <v-card v-if="existingUser" width="500px" elevation="12" class="mx-auto">
+    <v-card width="500" elevation="12" class="mx-auto">
-      <v-card-text>
+      <v-card-title class="mb-3">
+        <span class="text-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-card-title>
+      <v-card-text v-if="existingUser">
         <v-form ref="loginForm" v-model="valid">
           <v-text-field
             v-model="email"
@@ -28,18 +32,15 @@
           color="primary"
           :loading="loading"
           :disabled="loading"
+          class="mt-3"
           @click="signIn"
         >
           Anmelden
         </v-btn>
-      </v-card-text>
+        <v-btn text block color="primary" class="mt-3" @click="existingUser = false">Noch kein Konto?</v-btn>
-      <v-card-text>
-        <v-btn text block color="primary" @click="existingUser = false">Noch kein Konto?</v-btn>
         <v-btn text block color="primary" @click="showPwResetDialog = true">Passwort vergessen?</v-btn>
       </v-card-text>
-    </v-card>
+      <v-card-text v-else>
-    <v-card v-else width="500px" elevation="12" class="mx-auto">
-      <v-card-text>
         <v-form ref="signupForm" v-model="valid">
           <v-text-field
             v-model="email"
@@ -113,7 +114,7 @@
         </v-card-text>
         <v-card-actions>
           <v-spacer></v-spacer>
-          <v-btn color="primary" outlined @click="showPwResetDialog = false">Abbrechen</v-btn>
+          <v-btn color="primary" text @click="showPwResetDialog = false">Abbrechen</v-btn>
           <v-btn color="primary" depressed :loading="loading" :disabled="loading" @click="resetPassword">Link senden</v-btn>
         </v-card-actions>
       </v-card>
@@ -139,7 +140,7 @@ export default {
       valid: false,
       showPassword: false,
       showPwResetDialog: false,
-      defaultErrorReqField: 'Feld darf nicht leer sein',
+      defaultErrorReqField: 'Pflichtfeld',
       email: '',
       emailRules: [
         v => !!v || this.defaultErrorReqField,

pages/user.vue

@@ -1,6 +1,6 @@
 <template>
   <v-container>
-    <v-sheet class="rounded-lg pa-4">
+    <v-card class="pa-4">
       <v-row align="center">
         <v-col cols="auto" style="position: relative">
           <v-avatar size="200">
@@ -35,7 +35,7 @@
           </v-btn>
         </v-col>
       </v-row>
-    </v-sheet>
+    </v-card>
   </v-container>
 </template>