diff --git a/src/main/webapp/app/course/manage/course-management.service.ts b/src/main/webapp/app/course/manage/course-management.service.ts index 0f442cada5ea..5cc636154f70 100644 --- a/src/main/webapp/app/course/manage/course-management.service.ts +++ b/src/main/webapp/app/course/manage/course-management.service.ts @@ -41,6 +41,9 @@ export class CourseManagementService { private fetchingCoursesForNotifications = false; + private courseOverviewSubject = new BehaviorSubject(false); + isCourseOverview$ = this.courseOverviewSubject.asObservable(); + constructor( private http: HttpClient, private courseStorageService: CourseStorageService, @@ -692,4 +695,12 @@ export class CourseManagementService { // Note: 0 is the default value in case the server returns something that does not make sense return this.http.get(`${this.resourceUrl}/${courseId}/allowed-complaints?teamMode=${teamMode}`) ?? 0; } + + enableCourseOverviewBackground() { + this.courseOverviewSubject.next(true); + } + + disableCourseOverviewBackground() { + this.courseOverviewSubject.next(false); + } } diff --git a/src/main/webapp/app/guided-tour/tours/course-overview-tour.ts b/src/main/webapp/app/guided-tour/tours/course-overview-tour.ts index a76c25357da2..5e5a82fe2fd5 100644 --- a/src/main/webapp/app/guided-tour/tours/course-overview-tour.ts +++ b/src/main/webapp/app/guided-tour/tours/course-overview-tour.ts @@ -60,7 +60,7 @@ export const courseOverviewTour: GuidedTour = { orientation: Orientation.RIGHT, }), new TextTourStep({ - highlightSelector: '.guided-tour .card-footer', + highlightSelector: '.guided-tour .exercise-guided-tour', headlineTranslateKey: 'tour.courseOverview.courseFooter.headline', contentTranslateKey: 'tour.courseOverview.courseFooter.content', orientation: Orientation.TOPLEFT, diff --git a/src/main/webapp/app/overview/course-card.component.html b/src/main/webapp/app/overview/course-card.component.html index 0ab968d60075..4b69401c3d85 100644 --- a/src/main/webapp/app/overview/course-card.component.html +++ b/src/main/webapp/app/overview/course-card.component.html @@ -1,102 +1,97 @@ -
-
- -
-
-
- @if (course.courseIcon) { - - } +
+
+
+ @if (course.courseIcon) { +
+
-
-
- {{ course.title }} -
-
-
-
- @if (exerciseCount === 0) { - Exercises: {{ exerciseCount }} - } - @if (exerciseCount > 0) { - Exercises: {{ exerciseCount }} - } - @if (lectureCount === 0) { - Lectures: {{ lectureCount }} - } - @if (lectureCount > 0) { - Lectures: {{ lectureCount }} - } - @if (examCount === 0) { - Exams: {{ examCount }} - } - @if (examCount > 0) { - Exams: {{ examCount }} - } -
+ } @else { +
+ {{ course.title | slice: 0 : 1 }}
+ } +
+
+ {{ course.title }} +
+
+
+
-
+
- @if (exerciseCount > 0 && (totalReachableScore > 0 || totalAbsoluteScore > 0)) { -
-
-

{{ totalRelativeScore }}%

-
{{ totalAbsoluteScore }} / {{ totalReachableScore }} Pts
-
- - - - : {{ model.value }} - - -
- } @else { -
- } -
- @if (nextRelevantExercise) { -
- -
-
-
-
-
-
- - {{ nextRelevantExercise.title }} -
-
- @if (nextExerciseDueDate) { -
-
{{ 'artemisApp.exercise.dueDate' | artemisTranslate }}:
-
{{ nextExerciseDueDate | artemisTimeAgo }}
+
+
+
+
+ @if (exerciseCount && (totalReachableScore || totalAbsoluteScore)) { +
+
+
+
+
+
+ } @else { +
+
+ +
+ } +
+
+ @if (nextRelevantExercise && nextRelevantExercise.id && course.id) { + + {{ nextRelevantExercise.title }} + + } @else { +
+
}
+ @if (exerciseCount && (totalReachableScore || totalAbsoluteScore)) { +
+
+

{{ totalRelativeScore }}%

+
+ + + + : {{ model.value }} + + +
+ }
+ @if (course.isAtLeastTutor && course.id) { +
+ + + + +
+ }
- } - @if (!nextRelevantExercise) { -
- -
-
-
-
- } +
diff --git a/src/main/webapp/app/overview/course-card.component.ts b/src/main/webapp/app/overview/course-card.component.ts index 6fc36a26c528..043c4a892b48 100644 --- a/src/main/webapp/app/overview/course-card.component.ts +++ b/src/main/webapp/app/overview/course-card.component.ts @@ -1,19 +1,17 @@ import { Component, Input, OnChanges } from '@angular/core'; import { ActivatedRoute, Router } from '@angular/router'; -import { IconProp } from '@fortawesome/fontawesome-svg-core'; import { Color, ScaleType } from '@swimlane/ngx-charts'; import { ARTEMIS_DEFAULT_COLOR } from 'app/app.constants'; import { Course } from 'app/entities/course.model'; -import { Exercise, getIcon, getIconTooltip } from 'app/entities/exercise.model'; +import { Exercise } from 'app/entities/exercise.model'; import { ExerciseService } from 'app/exercises/shared/exercise/exercise.service'; import { CachingStrategy } from 'app/shared/image/secured-image.component'; import { roundValueSpecifiedByCourseSettings } from 'app/shared/util/utils'; -import dayjs from 'dayjs/esm'; -import { getExerciseDueDate } from 'app/exercises/shared/exercise/exercise.utils'; import { GraphColors } from 'app/entities/statistics.model'; import { ScoresStorageService } from 'app/course/course-scores/scores-storage.service'; import { ScoreType } from 'app/shared/constants/score-type.constants'; import { CourseScores } from 'app/course/course-scores/course-scores'; +import { faArrowRight } from '@fortawesome/free-solid-svg-icons'; @Component({ selector: 'jhi-overview-course-card', @@ -21,6 +19,8 @@ import { CourseScores } from 'app/course/course-scores/course-scores'; styleUrls: ['course-card.scss'], }) export class CourseCardComponent implements OnChanges { + protected readonly faArrowRight = faArrowRight; + readonly ARTEMIS_DEFAULT_COLOR = ARTEMIS_DEFAULT_COLOR; @Input() course: Course; @Input() hasGuidedTour: boolean; @@ -28,12 +28,7 @@ export class CourseCardComponent implements OnChanges { CachingStrategy = CachingStrategy; nextRelevantExercise?: Exercise; - nextExerciseDueDate?: dayjs.Dayjs; - nextExerciseIcon: IconProp; - nextExerciseTooltip: string; exerciseCount = 0; - lectureCount = 0; - examCount = 0; totalRelativeScore: number; totalReachableScore: number; @@ -70,9 +65,6 @@ export class CourseCardComponent implements OnChanges { if (nextExercises.length > 0 && nextExercises[0]) { this.nextRelevantExercise = nextExercises[0]; - this.updateNextDueDate(); - this.nextExerciseIcon = getIcon(this.nextRelevantExercise!.type); - this.nextExerciseTooltip = getIconTooltip(this.nextRelevantExercise!.type); } const totalScoresForCourse: CourseScores | undefined = this.scoresStorageService.getStoredTotalScores(this.course.id!); @@ -89,8 +81,6 @@ export class CourseCardComponent implements OnChanges { this.ngxDoughnutData = [...this.ngxDoughnutData]; } - this.lectureCount = this.course.numberOfLectures ?? this.course.lectures?.length ?? 0; - this.examCount = this.course.numberOfExams ?? this.course.exams?.length ?? 0; this.courseColor = this.course.color || this.ARTEMIS_DEFAULT_COLOR; } @@ -110,16 +100,4 @@ export class CourseCardComponent implements OnChanges { event.stopPropagation(); this.router.navigate(['courses', this.course.id, 'exams']); } - - private updateNextDueDate() { - let nextExerciseDueDate = undefined; - if (this.nextRelevantExercise) { - if (this.nextRelevantExercise.studentParticipations && this.nextRelevantExercise.studentParticipations.length > 0) { - nextExerciseDueDate = getExerciseDueDate(this.nextRelevantExercise, this.nextRelevantExercise.studentParticipations[0]); - } else { - nextExerciseDueDate = this.nextRelevantExercise.dueDate; - } - } - this.nextExerciseDueDate = nextExerciseDueDate; - } } diff --git a/src/main/webapp/app/overview/course-card.scss b/src/main/webapp/app/overview/course-card.scss index f7a475404894..35d910731e5f 100644 --- a/src/main/webapp/app/overview/course-card.scss +++ b/src/main/webapp/app/overview/course-card.scss @@ -1,5 +1,8 @@ .card { - min-height: 320px; + // best possible height to fit header, information, and manage course button: 80px header + 200px card content + height: 283px; + // ensure the card takes the full width of its column in the container + width: 100%; transition: transform 0.2s linear; &:hover { @@ -8,74 +11,52 @@ } .card-header { + // needed, otherwise hover effect won't work due to stretched-link class + z-index: 2; position: relative; - padding: 0; - height: 80px; - display: flex; - justify-content: center; - align-items: center; + height: 85px; opacity: 1; filter: alpha(opacity = 100); transition: 0.15s; background-color: var(--background-color-for-hover) !important; + // inner border radius : outer border radius - outer border thickness (8px - 1px) + border-top-left-radius: 7px; + border-top-right-radius: 7px; &:hover { background-color: color-mix(in srgb, var(--background-color-for-hover), transparent 15%) !important; } - .header-col { - height: 80px; - display: flex; - align-items: center; - } - - .image-col { - justify-content: flex-start; - } - - .title-col { - justify-content: center; - } - - .course-info-col { - justify-content: flex-end; - - .course-info-amounts { - display: flex; - flex-direction: column; - line-height: 20px; - white-space: nowrap; - z-index: 1; - - a { - color: white; - font-weight: unset; - } - } - } - .container { height: 80px; .row { height: 80px; - justify-content: space-between; } } .card-title { overflow: hidden; padding-bottom: 1px; - max-height: 80px; + // matches 4 lines + max-height: 76px; + } + + .course-circle { + // same size as the course icons + height: 65px; + min-width: 65px; + background-color: var(--course-image-bg); + border-radius: 50%; + display: inline-block; + color: var(--bs-body-color); } } .card-body { - position: relative; - display: flex; - justify-content: center; - align-items: center; - flex-direction: column; + .information-box-wrapper { + height: 135px; + } .chart-container { display: flex; @@ -92,76 +73,18 @@ } } - .points { - display: block; - max-width: 11ch; - } - - canvas { - cursor: pointer; - z-index: 1; - width: 150px; - height: 150px; - } - - .no-statistics { - display: flex; - height: 200px; - justify-content: center; - flex-direction: column; - margin-bottom: 0; - } - } - - .card-footer { - position: relative; - padding: 0; - height: 50px; - - .container { - height: 50px; - - .row { - height: 50px; - } - } - - .next-exercise-col { - display: flex; - justify-content: center; - align-items: center; - - .next-exercise-icon { - z-index: 1; - font-size: large; - } - - .next-exercise-title { - font-weight: bolder; - font-size: large; - margin-bottom: 0; - display: inline-block; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; - max-width: 40ch; - padding-left: 15px; - } - - h6 { - margin-bottom: 0; - } + .btn-wrapper { + // needed, otherwise button won't work due to stretched-link class + z-index: 2; + position: relative; } - .no-exercise { - display: flex; - height: 50px; - align-items: center; - padding-left: 30px; - - h6 { - margin-bottom: 0; - } + .exercise-title { + display: inline-block; + max-width: 100%; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; } } } @@ -177,3 +100,7 @@ jhi-secured-image { width: auto; } } + +.card-header-title { + max-width: 280px; +} diff --git a/src/main/webapp/app/overview/courses.component.html b/src/main/webapp/app/overview/courses.component.html index 92381c38c62b..a9d1655aba7c 100644 --- a/src/main/webapp/app/overview/courses.component.html +++ b/src/main/webapp/app/overview/courses.component.html @@ -1,8 +1,8 @@ @if (nextRelevantExam && nextRelevantCourseForExam) { -
+

-
-
+
+

{{ nextRelevantExam.title }}

@@ -19,43 +19,54 @@

{{ nextRelevantExam.title }}

} -
-
-

-
- - @if (regularCourses.length) { -
- -
- } -
-@if (recentlyAccessedCourses.length > 0) { -
-

-
-
- @for (course of recentlyAccessedCourses; track course) { - +
+
+

+ @if (regularCourses.length) { +
+ +
}
- @if (regularCourses.length > 0) { + @if (recentlyAccessedCourses.length) {
-

+

- } -} -@if (coursesLoaded && !regularCourses.length && !recentlyAccessedCourses.length) { -
-

-
- +
+
+ @for (course of recentlyAccessedCourses; track course) { +
+ +
+ } +
-
-} @else { -
- @for (course of regularCourses; track course) { - + @if (regularCourses.length) { +
+

+
} -
-} + } + @if (coursesLoaded && !regularCourses.length && !recentlyAccessedCourses.length) { +
+

+
+ +
+
+ } @else { +
+
+ @for (course of regularCourses; track course) { +
+ +
+ } +
+
+ } +
+ + + + diff --git a/src/main/webapp/app/overview/courses.component.scss b/src/main/webapp/app/overview/courses.component.scss index 93bd4a898edf..90047d3652c4 100644 --- a/src/main/webapp/app/overview/courses.component.scss +++ b/src/main/webapp/app/overview/courses.component.scss @@ -14,25 +14,24 @@ opacity: 1; } -.col-12 { - width: 100% !important; -} - -@media screen and (min-width: 992px) { - .col-lg-6 { - width: 50% !important; +.course-grid { + display: grid; + // cards can shrink to 350px + grid-template-columns: repeat(auto-fill, minmax(350px, 1fr)); + grid-gap: 1rem; + justify-items: center; + // for 4 or less cards, we let each card shrink to 325px to display more cards in smaller screens, 1751px is the breakpoint for 4 cards + @media screen and (max-width: 1751px) { + grid-template-columns: repeat(auto-fill, minmax(325px, 1fr)); } } -@media screen and (min-width: 1200px) { - .col-xl-4 { - width: 33.33% !important; - } +.course-card-wrapper { + width: 100%; + max-width: 400px; } -@media screen and (min-width: 1900px) { - .col-xl-4 { - flex: 0 0 25; - width: 25% !important; - } +.container-fluid { + // ensure that horizontal spacing in container is consistent + --bs-gutter-x: 2rem; } diff --git a/src/main/webapp/app/overview/courses.component.ts b/src/main/webapp/app/overview/courses.component.ts index 0d5218bb21b0..fad63ba437cb 100644 --- a/src/main/webapp/app/overview/courses.component.ts +++ b/src/main/webapp/app/overview/courses.component.ts @@ -49,6 +49,7 @@ export class CoursesComponent implements OnInit, OnDestroy { async ngOnInit() { this.loadAndFilterCourses(); (await this.teamService.teamAssignmentUpdates).subscribe(); + this.courseService.enableCourseOverviewBackground(); } /** @@ -58,6 +59,7 @@ export class CoursesComponent implements OnInit, OnDestroy { if (this.quizExercisesChannels) { this.quizExercisesChannels.forEach((channel) => this.jhiWebsocketService.unsubscribe(channel)); } + this.courseService.disableCourseOverviewBackground(); } loadAndFilterCourses() { diff --git a/src/main/webapp/app/shared/layouts/main/main.component.html b/src/main/webapp/app/shared/layouts/main/main.component.html index 683aff8d541e..2265fffa291b 100644 --- a/src/main/webapp/app/shared/layouts/main/main.component.html +++ b/src/main/webapp/app/shared/layouts/main/main.component.html @@ -14,7 +14,7 @@ } @if (showSkeleton) {
-
+
diff --git a/src/main/webapp/app/shared/layouts/main/main.component.scss b/src/main/webapp/app/shared/layouts/main/main.component.scss new file mode 100644 index 000000000000..b4ac86dfa9d5 --- /dev/null +++ b/src/main/webapp/app/shared/layouts/main/main.component.scss @@ -0,0 +1,3 @@ +.course-overview { + background-color: var(--bs-body-bg); +} diff --git a/src/main/webapp/app/shared/layouts/main/main.component.ts b/src/main/webapp/app/shared/layouts/main/main.component.ts index 5d8368c7e90a..a8d41420dc32 100644 --- a/src/main/webapp/app/shared/layouts/main/main.component.ts +++ b/src/main/webapp/app/shared/layouts/main/main.component.ts @@ -8,10 +8,12 @@ import { DOCUMENT } from '@angular/common'; import { AnalyticsService } from 'app/core/posthog/analytics.service'; import { Subscription } from 'rxjs'; import { ExamParticipationService } from 'app/exam/participate/exam-participation.service'; +import { CourseManagementService } from '../../../course/manage/course-management.service'; @Component({ selector: 'jhi-main', templateUrl: './main.component.html', + styleUrls: ['./main.component.scss'], }) export class JhiMainComponent implements OnInit, OnDestroy { /** @@ -22,11 +24,13 @@ export class JhiMainComponent implements OnInit, OnDestroy { public showSkeleton = true; profileSubscription: Subscription; examStartedSubscription: Subscription; + courseOverviewSubscription: Subscription; testRunSubscription: Subscription; isProduction: boolean = true; isTestServer: boolean = false; isExamStarted: boolean = false; isTestRunExam: boolean = false; + isCourseOverview: boolean = false; constructor( private jhiLanguageHelper: JhiLanguageHelper, @@ -39,6 +43,7 @@ export class JhiMainComponent implements OnInit, OnDestroy { @Inject(DOCUMENT) private document: Document, private renderer: Renderer2, + private courseService: CourseManagementService, ) { this.setupErrorHandling().then(undefined); this.setupAnalytics().then(undefined); @@ -111,6 +116,10 @@ export class JhiMainComponent implements OnInit, OnDestroy { this.isTestRunExam = isStarted; }); + this.courseOverviewSubscription = this.courseService.isCourseOverview$.subscribe((isPresent) => { + this.isCourseOverview = isPresent; + }); + this.themeService.initialize(); } @@ -128,5 +137,6 @@ export class JhiMainComponent implements OnInit, OnDestroy { this.profileSubscription?.unsubscribe(); this.examStartedSubscription?.unsubscribe(); this.testRunSubscription?.unsubscribe(); + this.courseOverviewSubscription?.unsubscribe(); } } diff --git a/src/main/webapp/content/scss/_artemis-variables.scss b/src/main/webapp/content/scss/_artemis-variables.scss index e06a4772e431..7771e583d3bd 100644 --- a/src/main/webapp/content/scss/_artemis-variables.scss +++ b/src/main/webapp/content/scss/_artemis-variables.scss @@ -17,6 +17,7 @@ $grid-gutter-width: 1rem; // Define common padding and border radius sizes and more. $border-radius: 0.15rem; $border-radius-lg: 0.25rem; +$border-radius-xl: 0.5rem; $border-radius-sm: 0.1rem; // Typography: diff --git a/src/main/webapp/i18n/de/student-dashboard.json b/src/main/webapp/i18n/de/student-dashboard.json index 89729023ff10..0efec0abd2c3 100644 --- a/src/main/webapp/i18n/de/student-dashboard.json +++ b/src/main/webapp/i18n/de/student-dashboard.json @@ -11,7 +11,10 @@ "cardTitle": "Deine insgesamte Punktzahl:", "noStatistics": "Keine Statistik verfügbar", "cardNoExerciseLabel": "Keine Übung geplant", - "cardExerciseLabel": "Nächste Übung:", + "cardExerciseLabel": "Nächste Übung", + "points": "{{ totalAbsoluteScore }} / {{ totalReachableScore }} Punkte", + "cardScore": "Punktzahl", + "cardManageCourse": "Kurs Verwalten", "enroll": { "title": "Kurseinschreibung", "enrollSuccessful": "Einschreibung erfolgreich", diff --git a/src/main/webapp/i18n/en/student-dashboard.json b/src/main/webapp/i18n/en/student-dashboard.json index ae6d54800cd6..b663a3fcea73 100644 --- a/src/main/webapp/i18n/en/student-dashboard.json +++ b/src/main/webapp/i18n/en/student-dashboard.json @@ -11,7 +11,10 @@ "cardTitle": "Your overall points:", "noStatistics": "No statistics available", "cardNoExerciseLabel": "No exercise planned", - "cardExerciseLabel": "Next Exercise:", + "cardExerciseLabel": "Next Exercise", + "points": "{{ totalAbsoluteScore }} / {{ totalReachableScore }} Points", + "cardScore": "Score", + "cardManageCourse": "Manage Course", "enroll": { "title": "Course Enrollment", "enrollSuccessful": "Enrollment successful",