feat(frontend): klas tonen bij assignment card

frontend/src/views/assignments/UserAssignments.vue

@@ -42,67 +42,99 @@
     <div class="assignments-container">
         <h1>{{ t('assignments') }}</h1>
 
-        <v-btn v-if="isTeacher" color="primary" class="mb-4" @click="goToCreateAssignment">
+        <v-btn
+            v-if="isTeacher"
+            color="primary"
+            class="mb-4"
+            @click="goToCreateAssignment"
+        >
             {{ t('new-assignment') }}
         </v-btn>
 
         <v-container>
             <v-row>
-                <v-col v-for="assignment in allAssignments" :key="assignment.id" cols="12">
+                <v-col
+                    v-for="assignment in allAssignments"
+                    :key="assignment.id"
+                    cols="12"
+                >
                     <v-card class="assignment-card" variant="outlined">
-                        <v-card-title class="title">{{ assignment.title }}</v-card-title>
-                        <v-divider></v-divider>
-                        <v-card-text class="description-text" >{{ assignment.description }}</v-card-text>
-
-                        <v-card-actions>
-                            <v-btn color="primary" @click="goToAssignmentDetails(assignment.id)">
-                                {{ t('view-assignment') }}
-                            </v-btn>
-                            <v-btn v-if="isTeacher" color="secondary" @click="goToDeleteAssignment(assignment.id)">
-                                {{ t('delete') }}
-                            </v-btn>
-                        </v-card-actions>
+                        <v-card-text class="card-content">
+                            <div class="left-content">
+                                <div class="assignment-title">{{ assignment.title }}</div>
+                                <div class="assignment-class">
+                                    {{ t('class') }}:
+                                    <span class="class-name">
+                    {{ assignment.class }}
+                  </span>
+                                </div>
+                            </div>
+                            <div class="right-content">
+                                <v-btn
+                                    color="primary"
+                                    @click="goToAssignmentDetails(assignment.id)"
+                                >
+                                    {{ t('view-assignment') }}
+                                </v-btn>
+                            </div>
+                        </v-card-text>
                     </v-card>
                 </v-col>
             </v-row>
         </v-container>
-
     </div>
 </template>
 
+
 <style scoped>
 .assignments-container {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    padding: 2%;
+    width: 100%;
+    margin: 0 auto;
+    padding: 2% 4%;
+    box-sizing: border-box;
 }
 
 .assignment-card {
-    padding: 1%;
+    padding: 1rem;
+}
+
+.card-content {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    flex-wrap: wrap;
+    gap: 1rem;
+}
+
+.left-content {
     display: flex;
     flex-direction: column;
-    justify-content: space-between;
+    flex: 1;
+    min-width: 200px;
+    max-width: 70%;
 }
 
-h1 {
-    text-align: left;
-    width: 100%;
-}
-
-.title {
-    flex-grow: 1;
-    white-space: normal;
-    overflow-wrap: break-word;
+.assignment-title {
+    font-weight: bold;
+    font-size: 1.5rem;
+    margin-bottom: 0.3rem;
     word-break: break-word;
 }
 
-.description-text {
-    display: -webkit-box;
-    -webkit-line-clamp: 3;  /* Limit to 3 lines */
-    -webkit-box-orient: vertical;
-    overflow: hidden;
-    text-overflow: ellipsis;
+.assignment-class {
+    color: #666;
+    font-size: 0.95rem;
 }
 
+.class-name {
+    font-weight: 500;
+    color: #333;
+}
+
+.right-content {
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    flex-shrink: 0;
+}
 </style>