Merge pull request #274 from ExtensionEngine/release/3.1

3.1 Silk 👔🔝

Author: underscope

client/App.vue

@@ -2,7 +2,7 @@
   <v-app id="app">
     <navbar v-if="user" :user="user"/>
     <v-content>
-      <router-view class="view"/>
+      <router-view class="view grey lighten-3"/>
     </v-content>
     <confirmation-modal/>
   </v-app>
@@ -40,12 +40,11 @@ html {
 
 #app {
   color: rgba(0,0,0,0.87);
-  font-family: Roboto, Helvetica, Arial, sans-serif;
+  font-family: Poppins, Helvetica, Arial, sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   text-align: center;
   overflow: hidden;
-  background-color: #e0e0e0 !important;
 }
 
 .v-content .view {

client/api/resource.js

@@ -18,7 +18,7 @@ export default class Resource {
   }
 
   url(path = '') {
-    return join(this.getBaseUrl(), path);
+    return join(this.getBaseUrl(), path.toString());
   }
 
   /**
@@ -106,7 +106,7 @@ export default class Resource {
       // if server id is not provided but exist inside resource cache
       if (!model.id && this.getKey(model._cid)) this.setKey(model);
       const action = model.id ? 'patch' : 'post';
-      const url = model.id ? this.url(model.id) : this.url('');
+      const url = model.id ? this.url(model.id) : this.url();
       return axios[action](url, this.clean(model))
         .then(response => {
           if (!model.id) this.map(model._cid, response.data.data.id);

client/assets/stylesheets/main.scss

@@ -2,8 +2,8 @@
 /* stylelint-disable function-comma-newline-after */
 @import '~sass-web-fonts/web-fonts';
 $web-font-path: web-fonts-url(
-  ('Catamaran': (300, 400, 500, 600, 700)),
-  ('Roboto': (300, 400, 500, 700))
+  ('Roboto': (300, 400, 500, 700)),
+  ('Poppins': (300, 400, 500, 700))
 );
 /* stylelint-enable */
 

client/components/catalog/Card/index.vue

@@ -1,19 +1,19 @@
 <template>
   <div class="col-lg-4">
-    <div @click="navigateTo" class="course-card">
+    <div @click="navigateTo" class="repo-card white elevation-2">
       <div class="body">
-        <div class="title">
-          <acronym :course="course"></acronym>
+        <div class="repo-title">
+          <acronym :course="course"/>
           {{ name }}
         </div>
         <div class="description">{{ description }}</div>
       </div>
       <div class="row">
         <span class="col-xs-6">
-          <stat :name="objectiveLabel" :value="objectives"></stat>
+          <stat :name="objectiveLabel" :value="objectives"/>
         </span>
         <span class="col-xs-6">
-          <stat :value="assessments" name="Knowledge checks"></stat>
+          <stat :value="assessments" name="Knowledge checks"/>
         </span>
       </div>
     </div>
@@ -68,20 +68,17 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.course-card {
+.repo-card {
   min-height: 300px;
   margin-top: 40px;
   padding: 30px 30px 20px;
   color: #555;
-  font-family: Roboto, 'Helvetica Neue', Helvetica, Arial, sans-serif;
   border-radius: 3px;
-  background-color: #fff;
-  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.54);
   transition: box-shadow 0.2s ease;
   cursor: pointer;
 
   &:hover {
-    box-shadow: 0 10px 20px rgba(0,0,0,0.2), 0 8px 8px rgba(0,0,0,0.18);
+    box-shadow: 0 10px 20px rgba(0,0,0,0.2), 0 8px 8px rgba(0,0,0,0.18) !important;
   }
 
   .body {
@@ -95,7 +92,7 @@ export default {
   }
 }
 
-.title {
+.repo-title {
   height: 100px;
   margin: 20px 0 10px;
   font-size: 20px;

client/components/catalog/Container.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="catalog" infinite-wrapper>
+  <div class="catalog grey lighten-2" infinite-wrapper>
     <div class="row">
       <div class="col-md-6 col-md-offset-3 col-sm-10 col-sm-offset-1">
         <search @change="search"></search>
@@ -8,15 +8,19 @@
         <create-course class="pull-right"/>
       </div>
     </div>
-    <div v-show="searching" class="search-spinner"><circular-progress/></div>
+    <div v-show="searching" class="search-spinner">
+      <v-progress-circular color="primary" indeterminate/>
+    </div>
     <div v-show="!searching" class="row course-list">
       <course-card
         v-for="course in orderedCourses"
         :key="course._cid"
         :course="course">
       </course-card>
       <infinite-loading ref="infiniteLoading" @infinite="loadMore">
-        <div slot="spinner" class="spinner"><circular-progress/></div>
+        <div slot="spinner" class="spinner">
+          <v-progress-circular color="primary" indeterminate/>
+        </div>
         <div slot="no-results" class="no-results">
           {{ orderedCourses.length ? '' : 'No courses found.' }}
         </div>
@@ -27,7 +31,6 @@
 </template>
 
 <script>
-import CircularProgress from 'components/common/CircularProgress';
 import CourseCard from './Card';
 import CreateCourse from './Create';
 import get from 'lodash/get';
@@ -81,7 +84,6 @@ export default {
     this.search();
   },
   components: {
-    CircularProgress,
     CourseCard,
     CreateCourse,
     InfiniteLoading,

client/components/catalog/Create.vue

@@ -44,7 +44,7 @@
         <v-card-actions>
           <v-spacer/>
           <v-btn :disabled="showLoader" @click="hide">Cancel</v-btn>
-          <v-btn :loading="showLoader" color="success" outline type="submit">
+          <v-btn :loading="showLoader" color="primary" outline type="submit">
             Create
           </v-btn>
         </v-card-actions>

client/components/catalog/Search.vue

@@ -81,7 +81,7 @@ export default {
   }
 
   .btn {
-    padding: 8px 12px 4px;
+    padding: 8px 12px 5px;
     color: #656565;
     font-size: 22px;
     background-color: white;

client/components/common/Acronym.vue

@@ -1,6 +1,6 @@
 <template>
   <div :style="{ color }" class="acronym">
-    <span>{{ acronym }}</span>
+    {{ acronym }}
   </div>
 </template>
 
@@ -31,13 +31,9 @@ export default {
   margin-right: 8px;
   font-size: 18px;
   font-weight: 400;
+  line-height: 45px;
   text-align: center;
   border-radius: 30px;
-  background-color: #eee;
-
-  span {
-    display: inline-block;
-    padding-top: 13px;
-  }
+  background: #f1f1f1;
 }
 </style>

client/components/common/Navbar.vue

@@ -92,7 +92,6 @@ $font-color: #333;
   color: $font-color;
   font-size: 16px;
   line-height: $container-height;
-  font-family: Roboto, 'Helvetica Neue', Helvetica, Arial, sans-serif;
   text-align: left;
   text-overflow: ellipsis;
   white-space: nowrap;

client/components/common/ProgressDialog.vue

@@ -7,10 +7,7 @@
       <v-card color="blue-grey darken-3" dark>
         <v-card-text>
           Please wait...
-          <v-progress-linear
-            indeterminate
-            color="white"
-            class="mb-0"/>
+          <v-progress-linear :value="status" color="white" class="mb-0"/>
         </v-card-text>
       </v-card>
     </v-dialog>
@@ -20,7 +17,8 @@
 <script>
 export default {
   props: {
-    show: { type: Boolean, default: false }
+    show: { type: Boolean, default: false },
+    status: { type: Number, default: 0 }
   }
 };
 </script>