diff --git a/src/main/webapp/app/exam/participate/exam-cover/exam-participation-cover.component.ts b/src/main/webapp/app/exam/participate/exam-cover/exam-participation-cover.component.ts index d3c50fb98b71..779e28e7eeeb 100644 --- a/src/main/webapp/app/exam/participate/exam-cover/exam-participation-cover.component.ts +++ b/src/main/webapp/app/exam/participate/exam-cover/exam-participation-cover.component.ts @@ -220,6 +220,7 @@ export class ExamParticipationCoverComponent implements OnChanges, OnDestroy, On * Notify the parent component that the user wants to continue after hand in early */ continueAfterHandInEarly() { + this.examParticipationService.setEndView(false); this.onExamContinueAfterHandInEarly.emit(); } diff --git a/src/main/webapp/app/exam/participate/exam-navigation-sidebar/exam-navigation-sidebar.component.html b/src/main/webapp/app/exam/participate/exam-navigation-sidebar/exam-navigation-sidebar.component.html index d597c4891574..9bf53f757707 100644 --- a/src/main/webapp/app/exam/participate/exam-navigation-sidebar/exam-navigation-sidebar.component.html +++ b/src/main/webapp/app/exam/participate/exam-navigation-sidebar/exam-navigation-sidebar.component.html @@ -1,6 +1,6 @@
diff --git a/src/main/webapp/app/exam/participate/exam-navigation-sidebar/exam-navigation-sidebar.component.scss b/src/main/webapp/app/exam/participate/exam-navigation-sidebar/exam-navigation-sidebar.component.scss index 9910a8eb4a4b..f7e33ce93cf5 100644 --- a/src/main/webapp/app/exam/participate/exam-navigation-sidebar/exam-navigation-sidebar.component.scss +++ b/src/main/webapp/app/exam/participate/exam-navigation-sidebar/exam-navigation-sidebar.component.scss @@ -1,36 +1,29 @@ $collapse-container-height: 35px; $sidebar-width-open: 275px; -$sidebar-width-closed: 100px; +$sidebar-width-closed: 110px; $management-header-height: 230px; +$exam-test-run-offset: 38px; .scrollable-item-content { - height: calc(100vh - var(--sidebar-footer-height-prod) - var(--header-height) - var(--exam-height-offset)); + height: calc(100vh - var(--header-height) - var(--exam-height-offset)); overflow-y: auto; - &.content-height-dev { - height: calc(100vh - var(--sidebar-footer-height-dev) - var(--header-height) - var(--exam-height-offset)); - } - &.sidebar-height-testRun { - height: calc(100vh - var(--exam-height-offset) - 410px); + height: calc(100vh - $exam-test-run-offset - 410px); @media (max-width: 1349px) { - height: calc(100vh - var(--exam-height-offset) - 440px) !important; + height: calc(100vh - $exam-test-run-offset - 440px) !important; } @media (max-width: 768px) { - height: calc(100vh - var(--exam-height-offset) - 400px) !important; + height: calc(100vh - $exam-test-run-offset - 400px) !important; } } - - @media (max-width: 768px) { - height: calc(100vh - var(--sidebar-footer-height-prod) - var(--header-height) - var(--exam-height-offset)) !important; - } } .sidebar { background-color: var(--module-bg); - height: calc(100vh - var(--sidebar-footer-height-prod) - var(--exam-height-offset)); + height: calc(100vh - var(--exam-height-offset)); width: $sidebar-width-open; transition: width 0.2s ease-in-out !important; @@ -38,14 +31,6 @@ $management-header-height: 230px; width: $sidebar-width-closed !important; } - &.sidebar-height-dev { - height: calc(100vh - var(--sidebar-footer-height-dev) - var(--exam-height-offset)); - } - - @media (max-width: 768px) { - height: calc(100vh - var(--sidebar-footer-height-prod) - var(--exam-height-offset)) !important; - } - &.sidebar-height-testRun { height: calc(100vh - var(--sidebar-footer-height-prod) - $management-header-height); @@ -109,7 +94,7 @@ $management-header-height: 230px; } .double-arrow.menu-closed { - transform: translate(35px) rotate(0deg); + transform: translate(40px) rotate(0deg); } .double-arrow { diff --git a/src/main/webapp/app/exam/participate/exam-participation.component.html b/src/main/webapp/app/exam/participate/exam-participation.component.html index df69fd0d1b98..bc36a7048b11 100644 --- a/src/main/webapp/app/exam/participate/exam-participation.component.html +++ b/src/main/webapp/app/exam/participate/exam-participation.component.html @@ -42,7 +42,7 @@
diff --git a/src/main/webapp/app/exam/participate/exam-participation.component.ts b/src/main/webapp/app/exam/participate/exam-participation.component.ts index db184d5bdb31..0a8a41faf638 100644 --- a/src/main/webapp/app/exam/participate/exam-participation.component.ts +++ b/src/main/webapp/app/exam/participate/exam-participation.component.ts @@ -63,6 +63,9 @@ export class ExamParticipationComponent implements OnInit, OnDestroy, ComponentC readonly PROGRAMMING = ExerciseType.PROGRAMMING; readonly FILEUPLOAD = ExerciseType.FILE_UPLOAD; + // needed for recalculation of exam content height + readonly EXAM_HEIGHT_OFFSET = 88; + courseId: number; examId: number; testRunId: number; @@ -965,6 +968,6 @@ export class ExamParticipationComponent implements OnInit, OnDestroy, ComponentC * @param newHeight New exam bar height calculated based on the window resizements */ updateHeight(newHeight: number) { - document.documentElement.style.setProperty('--exam-height-offset', `${newHeight}px`); + document.documentElement.style.setProperty('--exam-height-offset', `${newHeight + this.EXAM_HEIGHT_OFFSET}px`); } } diff --git a/src/main/webapp/app/exam/participate/exam-participation.scss b/src/main/webapp/app/exam/participate/exam-participation.scss index dcfa20eeb70b..9437eea99591 100644 --- a/src/main/webapp/app/exam/participate/exam-participation.scss +++ b/src/main/webapp/app/exam/participate/exam-participation.scss @@ -50,17 +50,9 @@ $management-header-height: 230px; } .content-exam-height { - height: calc(100vh - var(--sidebar-footer-height-prod) - var(--exam-height-offset)); + height: calc(100vh - var(--exam-height-offset)); overflow-y: auto; - &.content-exam-height-dev { - height: calc(100vh - var(--sidebar-footer-height-dev) - var(--exam-height-offset)); - } - - @media (max-width: 768px) { - height: calc(100vh - var(--sidebar-footer-height-prod) - var(--exam-height-offset)) !important; - } - &.content-exam-height-testRun { height: calc(100vh - var(--sidebar-footer-height-prod) - $management-header-height); diff --git a/src/main/webapp/app/overview/course-overview.component.scss b/src/main/webapp/app/overview/course-overview.component.scss index 5763644ae5cf..fa4b81acd0fc 100644 --- a/src/main/webapp/app/overview/course-overview.component.scss +++ b/src/main/webapp/app/overview/course-overview.component.scss @@ -37,14 +37,11 @@ $breadcrumb-height: 45px; // needed to make the exam fullscreen } &.exam-wrapper { - height: calc(100vh - var(--sidebar-footer-height-prod) + $breadcrumb-height); + height: 100vh !important; - &.exam-height-dev { - height: calc(100vh - var(--sidebar-footer-height-dev) + $breadcrumb-height); - } - - @media (max-width: 768px) { - height: calc(100vh - var(--sidebar-footer-height-prod) + $breadcrumb-height) !important; + &.exam-end-view { + overflow-y: auto !important; + height: 85vh !important; } } @@ -76,14 +73,11 @@ $breadcrumb-height: 45px; // needed to make the exam fullscreen margin-left 0.2s ease-in-out !important; &.exam-wrapper { - height: calc(100vh - var(--sidebar-footer-height-prod) + $breadcrumb-height); + height: 100vh !important; - &.exam-height-dev { - height: calc(100vh - var(--sidebar-footer-height-dev) + $breadcrumb-height); - } - - @media (max-width: 768px) { - height: calc(100vh - var(--sidebar-footer-height-prod) + $breadcrumb-height) !important; + &.exam-end-view { + overflow-y: auto !important; + height: 85vh !important; } } @@ -126,10 +120,6 @@ $breadcrumb-height: 45px; // needed to make the exam fullscreen } } -.exam-end-view { - overflow-y: auto !important; -} - a:not(.btn):not(.tab-link):hover { text-decoration: none !important; } 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 b0ecb8241133..a141532bd9ed 100644 --- a/src/main/webapp/app/shared/layouts/main/main.component.html +++ b/src/main/webapp/app/shared/layouts/main/main.component.html @@ -25,7 +25,9 @@ @if (showSkeleton) {
- + @if (isTestRunExam || !isExamStarted) { + + }
}
diff --git a/src/main/webapp/content/scss/themes/_default-variables.scss b/src/main/webapp/content/scss/themes/_default-variables.scss index 023863069786..35d77247669d 100644 --- a/src/main/webapp/content/scss/themes/_default-variables.scss +++ b/src/main/webapp/content/scss/themes/_default-variables.scss @@ -90,7 +90,7 @@ $list-group-bg: $white; $modal-content-bg: $white; // Exam -$exam-height-offset: 38px; +$exam-height-offset: 88px; // === END BOOTSTRAP === diff --git a/src/test/javascript/spec/component/shared/main.component.spec.ts b/src/test/javascript/spec/component/shared/main.component.spec.ts new file mode 100644 index 000000000000..9fa80d3863d1 --- /dev/null +++ b/src/test/javascript/spec/component/shared/main.component.spec.ts @@ -0,0 +1,71 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; +import { TranslateTestingModule } from '../../helpers/mocks/service/mock-translate.service'; +import { ArtemisTestModule } from '../../test.module'; +import { By } from '@angular/platform-browser'; +import { JhiMainComponent } from 'app/shared/layouts/main/main.component'; +import { MockSyncStorage } from '../../helpers/mocks/service/mock-sync-storage.service'; +import { MockTranslateService } from '../../helpers/mocks/service/mock-translate.service'; +import { LocalStorageService, SessionStorageService } from 'ngx-webstorage'; +import { TranslateService } from '@ngx-translate/core'; +import { ThemeService } from 'app/core/theme/theme.service'; +import { of } from 'rxjs'; +import { MockComponent } from 'ng-mocks'; +import { AlertOverlayComponent } from 'app/shared/alert/alert-overlay.component'; +import { PageRibbonComponent } from 'app/shared/layouts/profiles/page-ribbon.component'; +import { NotificationPopupComponent } from 'app/shared/notification/notification-popup/notification-popup.component'; +import { RouterTestingModule } from '@angular/router/testing'; + +// Mock the initialize method +class MockThemeService { + initialize() { + return of(); + } +} + +describe('JhiMainComponent', () => { + let fixture: ComponentFixture; + let comp: JhiMainComponent; + + beforeEach(() => { + TestBed.configureTestingModule({ + imports: [ArtemisTestModule, TranslateTestingModule, RouterTestingModule], + declarations: [JhiMainComponent, MockComponent(AlertOverlayComponent), MockComponent(PageRibbonComponent), MockComponent(NotificationPopupComponent)], + providers: [ + { provide: LocalStorageService, useClass: MockSyncStorage }, + { provide: SessionStorageService, useClass: MockSyncStorage }, + { provide: TranslateService, useClass: MockTranslateService }, + { provide: ThemeService, useClass: MockThemeService }, + ], + }) + .compileComponents() + .then(() => { + fixture = TestBed.createComponent(JhiMainComponent); + comp = fixture.componentInstance; + fixture.detectChanges(); + }); + }); + + afterEach(() => { + jest.restoreAllMocks(); + }); + + it('should display footer if there is no exam', () => { + comp.isExamStarted = false; + comp.showSkeleton = true; + fixture.detectChanges(); + + const footerElement = fixture.debugElement.query(By.css('jhi-footer')); + + expect(footerElement).not.toBeNull(); + }); + + it('should not display footer during an exam', () => { + comp.isExamStarted = true; + comp.showSkeleton = true; + fixture.detectChanges(); + + const footerElement = fixture.debugElement.query(By.css('jhi-footer')); + + expect(footerElement).toBeNull(); + }); +});