improve UI

Author: rockstarr-programmerr

src/App.vue

@@ -75,4 +75,8 @@ export default class App extends Vue {
 .cursor-pointer {
   cursor: pointer;
 }
+
+.container-sm {
+  width: 1140px;
+}
 </style>

src/layouts/LayoutClassroomStudent.vue

@@ -13,9 +13,9 @@
         <h1 v-text="classroom.name"></h1>
         <v-divider></v-divider>
         <p
-          class="mt-5"
+          class="mt-5 description"
           v-text="classroom.description"
-        ></p>  <!-- TODO: multiline -->
+        ></p>
 
         <v-tabs>
           <v-tab
@@ -108,5 +108,7 @@ export default class LayoutClassroomStudent extends Vue {
 </script>
 
 <style scoped lang="scss">
-
+.description {
+  white-space: pre-wrap;
+}
 </style>

src/layouts/LayoutClassroomTeacher.vue

@@ -13,9 +13,9 @@
         <h1 v-text="classroom.name"></h1>
         <v-divider></v-divider>
         <p
-          class="mt-5"
+          class="mt-5 description"
           v-text="classroom.description"
-        ></p>  <!-- TODO: multiline -->
+        ></p>
 
         <v-tabs>
           <v-tab
@@ -110,5 +110,7 @@ export default class LayoutClassroomTeacher extends Vue {
 </script>
 
 <style scoped lang="scss">
-
+.description {
+  white-space: pre-wrap;
+}
 </style>

src/views/Home.vue

@@ -1,6 +1,29 @@
 <template>
   <v-container>
     <v-breadcrumbs :items="breadcrumbs"></v-breadcrumbs>
+
+    <v-row>
+      <v-col
+        cols="3"
+        v-for="link of links"
+        :key="link.text"
+      >
+        <v-card
+          link
+          :to="link.to"
+          hover
+        >
+          <v-card-title>
+            {{ link.text }}
+          </v-card-title>
+          <v-card-subtitle>
+            {{ link.description }}
+          </v-card-subtitle>
+        </v-card>
+      </v-col>
+    </v-row>
+
+    <!--
     <v-list>
       <v-list-item
         v-for="link of links"
@@ -11,6 +34,7 @@
         </router-link>
       </v-list-item>
     </v-list>
+    -->
   </v-container>
 </template>
 
@@ -42,12 +66,23 @@ export default class Home extends Vue {
 
   // eslint-disable-next-line
   get links () {
+    const classroomTeacherDescription = 'Create classrooms, add students, track their progress.'
+    const classroomStudentDescription = 'Join classrooms, practice exercises and get instant feedback.'
+
     const links = [
-      { text: 'Classrooms', to: { name: 'ClassroomList' } }
+      {
+        text: 'Classrooms',
+        to: { name: 'ClassroomList' },
+        description: this.isTeacher ? classroomTeacherDescription : classroomStudentDescription
+      }
     ]
     if (this.isTeacher) {
       links.push(
-        { text: 'Reading exercises', to: { name: 'ReadingExerciseList' } }
+        {
+          text: 'Reading exercises',
+          to: { name: 'ReadingExerciseList' },
+          description: 'Create reading exercises for using in your classrooms.'
+        }
       )
     }
     return links

src/views/auth/Login.vue

@@ -105,29 +105,6 @@ export default class Login extends Vue {
     } finally {
       this.loading = false
     }
-
-    // this.$store.dispatch('account/login', payload)
-    //   .then(() => {
-    //     this.$store.dispatch('account/getInfo')
-    //       .then(() => {
-    //         // TODO: implement ?next
-    //         if (this.isTeacher) {
-    //           this.$router.push({ name: 'Home' })
-    //         } else {
-    //           this.$router.push({ name: 'ClassroomList' })
-    //         }
-    //       })
-    //   })
-    //   .catch(error => {
-    //     if (assertErrCode(error, status.HTTP_401_UNAUTHORIZED)) {
-    //       this.errorMsg = error.response.data.detail
-    //     } else {
-    //       unexpectedExc(error)
-    //     }
-    //   })
-    //   .finally(() => {
-    //     this.loading = false
-    //   })
   }
 
   @Emit('change-page')

src/views/classroom/ClassroomCreate.vue

@@ -1,30 +1,39 @@
 <template>
-  <v-container>
+  <v-container class="container-sm">
     <v-breadcrumbs :items="breadcrumbs"></v-breadcrumbs>
 
-    <h1>New classroom</h1>
+    <v-card>
+      <v-card-title>
+        New classroom
+      </v-card-title>
 
-    <v-form>
-      <v-text-field
-        v-model="name"
-        label="Name *"
-        autofocus
-        :error-messages="nameErrs"
-        :error-count="nameErrs.length"
-      ></v-text-field>
-      <v-textarea
-        v-model="description"
-        label="Description"
-      ></v-textarea>
-    </v-form>
+      <v-card-text>
+        <v-form>
+          <v-text-field
+            v-model="name"
+            label="Name *"
+            autofocus
+            :error-messages="nameErrs"
+            :error-count="nameErrs.length"
+          ></v-text-field>
+          <v-textarea
+            v-model="description"
+            label="Description"
+          ></v-textarea>
+        </v-form>
+      </v-card-text>
 
-    <v-btn
-      color="primary"
-      @click="submit"
-      :loading="loading"
-    >
-      Create
-    </v-btn>
+      <v-card-actions>
+        <v-btn
+          color="primary"
+          @click="submit"
+          :loading="loading"
+          min-width="110"
+        >
+          Create
+        </v-btn>
+      </v-card-actions>
+    </v-card>
   </v-container>
 </template>
 

src/views/reading-exercise/ReadingExerciseEditAnswers.vue

@@ -207,8 +207,6 @@ declare interface LocalQuestion extends ReadingQuestion {
 
 @Component
 export default class ReadingExerciseEditAnswers extends Mixins(ReadingExerciseMixin) {
-  // TODO: make convenient
-
   // eslint-disable-next-line no-undef
   [key: string]: unknown
 
@@ -230,12 +228,6 @@ export default class ReadingExerciseEditAnswers extends Mixins(ReadingExerciseMi
   ]
 
   allChoices = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z']
-  commonChoices = { // TODO: remember user's input
-    'A, B, C, D': ['A', 'B', 'C', 'D'],
-    'A, B, C, D, E': ['A', 'B', 'C', 'D', 'E'],
-    'A, B, C, D, E, F': ['A', 'B', 'C', 'D', 'E', 'F'],
-    'A, B, C, D, E, F, G, H': ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H']
-  }
 
   localQuestions: LocalQuestion[] = []