courses: smoother titles (fixes #7664) (#7922)

Co-authored-by: dogi <[email protected]>
open-learning-exchange · Dec 12, 2024 · ea37462 · ea37462
1 parent 297cd4d
commit ea37462
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 5 deletions.
diff --git a/package.json b/package.json
@@ -1,10 +1,10 @@
 {
   "name": "planet",
   "license": "AGPL-3.0",
-  "version": "0.15.97",
+  "version": "0.15.98",
   "myplanet": {
-    "latest": "v0.21.34",
-    "min": "v0.20.34"
+    "latest": "v0.21.35",
+    "min": "v0.20.35"
   },
   "scripts": {
     "ng": "ng",

diff --git a/src/app/courses/courses.component.html b/src/app/courses/courses.component.html
@@ -131,8 +131,9 @@ <h3 class="header">
             </ng-container>
             <ng-container *ngTemplateOutlet="headerText"></ng-container>
             <ng-template #headerText>
-              <a *ngIf="!isDialog && !isForm; else newTabLink" [routerLink]="['view', element._id]">{{ element.doc.courseTitle.length > 180 ? element.doc.courseTitle.slice(0, 180) + '...' : element.doc.courseTitle }}</a>
-              <ng-template #newTabLink><a class="cursor-pointer" (click)="openCourseViewDialog(element._id)">{{ element.doc.courseTitle.length > 180 ? element.doc.courseTitle.slice(0, 180) + '...' : element.doc.courseTitle }}</a></ng-template>
+              <a *ngIf="!isDialog && !isForm; else newTabLink" [routerLink]="['view', element._id]" class="break-word">{{ element.doc.courseTitle.length > 180 ? element.doc.courseTitle.slice(0, 180) + '...' : element.doc.courseTitle }}</a>
+            <ng-template #newTabLink><a class="cursor-pointer break-word" (click)="openCourseViewDialog(element._id)">{{ element.doc.courseTitle.length > 180 ? element.doc.courseTitle.slice(0, 180) + '...' : element.doc.courseTitle }}</a>
+            </ng-template>
               <span *ngIf="!parent && !isDialog" [ngClass]="{ 'cursor-pointer': !isForm }">
                 <mat-icon class="margin-lr-3" i18n-matTooltip matTooltip="In myCourses" [inline]="true" *ngIf="element.admission" (click)="courseToggle(element._id, 'resign')">bookmark</mat-icon>
                 <mat-icon class="margin-lr-3" i18n-matTooltip matTooltip="Not in myCourses" [inline]="true" *ngIf="!element.admission && element.doc.steps.length" (click)="courseToggle(element._id, 'admission')">bookmark_border</mat-icon>

diff --git a/src/app/courses/courses.scss b/src/app/courses/courses.scss
@@ -55,6 +55,10 @@ $label-height: 1rem;
   height: $toolbar-height;
 }
 
+.break-word {
+  word-break: break-word;
+}
+
 @media(max-width: $screen-md) {
   .mat-column-info {
     max-width: 120px;