Courses: Update course UI + update js libs add @tailwindcss/line-clamp

assets/vue/components/course/CourseCard.vue

@@ -12,19 +12,45 @@
 <!--  </q-card>-->
 
   <q-card class="my-card">
-    <img src="/img/session_default.png" />
-    <q-card-section>
-      <div class="text-h7">
-        <router-link :to="{ name: 'CourseHome', params: {id: course._id, course: course}}">
-          {{ course.title }}
-          <span v-if="course.users.edges.length">
-            <div v-for="courseRelUser in course.users.edges">
-              {{ courseRelUser.node.user.username }}
+    <div class="">
+      <img class="object-cover w-full h-44" src="/img/session_default.png" />
+    </div>
+    <div class="p-4">
+      <div class="h-10 flex flex-row justify-between">
+        <div class="line-clamp-2 text-md w-5/6">
+          <router-link :to="{ name: 'CourseHome', params: {id: course._id, course: course}}">
+            {{ course.title }}
+          </router-link>
+        </div>
+        <div>
+          <v-icon>
+            mdi-dots-vertical
+          </v-icon>
+        </div>
+      </div>
+
+      <div class="pt-6 ">
+        <div class="flex flex-row" v-if="course.users.edges.length">
+          <div class="flex flex-row pr-3" v-for="courseRelUser in course.users.edges">
+            <div class="pr-2">
+              <v-avatar
+                  color="primary"
+                  size="32"
+              ></v-avatar>
+            </div>
+
+            <div v-if="course.users.edges.length < 3 " class="text-xs flex-col">
+              <div>
+              {{ courseRelUser.node.user.firstname }} {{ courseRelUser.node.user.lastname }}
+              </div>
+              <div>
+                Teacher
+              </div>
             </div>
-          </span>
-        </router-link>
+          </div>
+        </div>
+
       </div>
-    </q-card-section>
 <!--    <q-card-actions>-->
 <!--        <q-btn-->
 <!--            type="a"-->
@@ -34,6 +60,8 @@
 <!--            label="Go"-->
 <!--        />-->
 <!--      </q-card-actions>-->
+
+    </div>
   </q-card>
 </template>
 

assets/vue/views/user/courses/List.vue

@@ -1,6 +1,6 @@
 <template>
 <!--  {{ loading }}-->
-  <div class="grid gap-4 grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-3 mt-2">
+  <div class="grid gap-4 grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 mt-2">
       <CourseCardList
           :courses="courses"
       />
@@ -55,7 +55,9 @@ export default {
                           id
                           status
                           user {
-                            username
+                            username,
+                            firstname,
+                            lastname
                           }
                         }
                       }

package.json

@@ -17,6 +17,7 @@
     "@popperjs/core": "^2.9.2",
     "@quasar/extras": "latest",
     "@tailwindcss/forms": "^0.3.3",
+    "@tailwindcss/line-clamp": "^0.2.1",
     "@tailwindcss/typography": "^0.4.1",
     "@tailwindcss/ui": "^0.7.2",
     "@tinymce/tinymce-vue": "^4.0.3",

tailwind.config.js

@@ -14,6 +14,7 @@ module.exports = {
     },
   },
   plugins: [
+    require('@tailwindcss/line-clamp'),
     require('@tailwindcss/forms'),
     require("@tailwindcss/typography")
   ],

yarn.lock

@@ -1965,6 +1965,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@tailwindcss/line-clamp@npm:^0.2.1":
+  version: 0.2.1
+  resolution: "@tailwindcss/line-clamp@npm:0.2.1"
+  peerDependencies:
+    tailwindcss: ">=2.0.0"
+  checksum: 4975660111876e351832e737eced18925b1d11c402fbef014866bb8ffea6d62d4b50af3beab9f021721bd89414b167240631cb5d7d9fe892afece9e70e4dbfb4
+  languageName: node
+  linkType: hard
+
 "@tailwindcss/typography@npm:^0.2.0":
   version: 0.2.0
   resolution: "@tailwindcss/typography@npm:0.2.0"
@@ -5988,6 +5997,7 @@ __metadata:
     "@quasar/extras": latest
     "@symfony/webpack-encore": ^1.4.0
     "@tailwindcss/forms": ^0.3.3
+    "@tailwindcss/line-clamp": ^0.2.1
     "@tailwindcss/typography": ^0.4.1
     "@tailwindcss/ui": ^0.7.2
     "@tinymce/tinymce-vue": ^4.0.3