Skip to content

Commit

Permalink
Exam mode: Remove the footer during an exam (#9134)
Browse files Browse the repository at this point in the history
  • Loading branch information
edkaya authored Jul 28, 2024
1 parent a647131 commit ccdfa42
Show file tree
Hide file tree
Showing 10 changed files with 99 additions and 55 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -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();
}

Expand Down
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
<div
class="d-flex sidebar justify-content-between flex-column rounded-3"
[ngClass]="{ 'sidebar-height-dev content-height-dev sidebar-height-testRun-dev': !isProduction || isTestServer, collapsed: isCollapsed, 'sidebar-height-testRun': isTestRun }"
[ngClass]="{ 'content-height-dev sidebar-height-testRun-dev': !isProduction || isTestServer, collapsed: isCollapsed, 'sidebar-height-testRun': isTestRun }"
>
<div class="px-3 py-3">
<div class="w-100 bg-module">
Expand Down
Original file line number Diff line number Diff line change
@@ -1,51 +1,36 @@
$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;

&.collapsed {
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);

Expand Down Expand Up @@ -109,7 +94,7 @@ $management-header-height: 230px;
}

.double-arrow.menu-closed {
transform: translate(35px) rotate(0deg);
transform: translate(40px) rotate(0deg);
}

.double-arrow {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -42,7 +42,7 @@
<!-- exercises -->
<div
class="vw-100 module-bg rounded-3 me-3 px-3 pt-3 content-exam-height"
[ngClass]="{ 'content-exam-height-dev content-exam-height-testRun-dev': !isProduction || isTestServer, 'content-exam-height-testRun': testRunId }"
[ngClass]="{ 'content-exam-height-testRun-dev': !isProduction || isTestServer, 'content-exam-height-testRun': testRunId }"
>
<div [ngClass]="{ 'd-flex h-100 justify-content-between flex-column': !checkVerticalOverflow() }">
<div [hidden]="activePageIndex !== -1">
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -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`);
}
}
10 changes: 1 addition & 9 deletions src/main/webapp/app/exam/participate/exam-participation.scss
Original file line number Diff line number Diff line change
Expand Up @@ -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);

Expand Down
26 changes: 8 additions & 18 deletions src/main/webapp/app/overview/course-overview.component.scss
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
}

Expand Down Expand Up @@ -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;
}
}

Expand Down Expand Up @@ -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;
}
Expand Down
4 changes: 3 additions & 1 deletion src/main/webapp/app/shared/layouts/main/main.component.html
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,9 @@
<jhi-notification-popup />
@if (showSkeleton) {
<div>
<jhi-footer [ngClass]="{ 'footer-height-dev': !isProduction || isTestServer }" />
@if (isTestRunExam || !isExamStarted) {
<jhi-footer [ngClass]="{ 'footer-height-dev': !isProduction || isTestServer }" />
}
</div>
}
</div>
Original file line number Diff line number Diff line change
Expand Up @@ -90,7 +90,7 @@ $list-group-bg: $white;
$modal-content-bg: $white;

// Exam
$exam-height-offset: 38px;
$exam-height-offset: 88px;

// === END BOOTSTRAP ===

Expand Down
71 changes: 71 additions & 0 deletions src/test/javascript/spec/component/shared/main.component.spec.ts
Original file line number Diff line number Diff line change
@@ -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<JhiMainComponent>;
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();
});
});

0 comments on commit ccdfa42

Please sign in to comment.