[TEAMMATES#12275] Instructor edit sessions page: Fix preview sessions…

… button overflow (TEAMMATES#12492) * fix: buttons overflow * test: update * fix: stylings in small screen * lint: fix * fix: update snapshots and linting * fix: adjust stylings when no students * fix: optimize css * fix: update snapshots * fix: update stylings for help page --------- Co-authored-by: Wei Qing <48304907+weiquu@users.noreply.github.com>
jasonqiu212 · Jul 3, 2023 · 897a082 · 897a082
1 parent 14dde85
commit 897a082
Show file tree

Hide file tree

Showing 5 changed files with 291 additions and 114 deletions.
diff --git a/src/web/app/components/preview-session-panel/preview-session-panel.component.html b/src/web/app/components/preview-session-panel/preview-session-panel.component.html
@@ -1,37 +1,97 @@
 <div class="card-body background-color-light-blue text-center">
   <div class="row align-items-center">
-    <div class="col-lg-2 text-lg-end">
+    <div
+      [ngClass]="{ 'col-lg-2': !forDisplayOnly, 'text-lg-end': !forDisplayOnly, 'mb-lg-3': forDisplayOnly }"
+      class="mb-3 mb-lg-0">
       <b>Preview Session:</b>
     </div>
-    <div class="col-lg-5">
-      <select id="preview-student" class="form-control form-select preview-select" [(ngModel)]="emailOfStudentToPreview" aria-label="Select student to preview as">
-        <option *ngFor="let student of studentsOfCourse" [ngValue]="student.email">[{{ student.teamName }}] {{ student.name }}</option>
-      </select>
-      <a *ngIf="emailOfStudentToPreview.length !== 0; else previewStudentBtn" tmRouterLink="/web/sessions/submission"
-         [queryParams]="{ courseid: courseId, fsname: feedbackSessionName, previewas: emailOfStudentToPreview }"
-         target="_blank"
-         rel="noopener noreferrer"
-         [ngbTooltip]="emailOfStudentToPreview.length !== 0 ? 'View how this session would look like to a student who is submitting feedback.' : 'Preview is unavailable if the course has yet to have any student enrolled.'">
-        <ng-container *ngTemplateOutlet="previewStudentBtn"></ng-container>
-      </a>
-      <ng-template #previewStudentBtn>
-        <button id="btn-preview-student" class="btn btn-primary" [disabled]="emailOfStudentToPreview.length === 0 || forDisplayOnly">Preview as Student</button>
-      </ng-template>
+    <div
+      [ngClass]="{'col-lg-5': !forDisplayOnly, 'col-lg-6': forDisplayOnly}"
+      class="col-12 mb-3 mb-lg-0">
+      <div class="row align-items-center justify-content-center">
+        <select
+          id="preview-student"
+          [ngClass]="{ 'preview-example-select': forDisplayOnly }"
+          class="col-12 col-sm-8 col-lg-6 form-control form-select preview-select"
+          [(ngModel)]="emailOfStudentToPreview"
+          aria-label="Select student to preview as"
+        >
+          <option *ngFor="let student of studentsOfCourse" [ngValue]="student.email">
+            [{{ student.teamName }}] {{ student.name }}
+          </option>
+        </select>
+        <div class="mt-1 mt-lg-0 col-sm-4 col-lg-6 w-max-content">
+          <a
+            *ngIf="emailOfStudentToPreview.length !== 0; else previewStudentBtn"
+            tmRouterLink="/web/sessions/submission"
+            [queryParams]="{
+              courseid: courseId,
+              fsname: feedbackSessionName,
+              previewas: emailOfStudentToPreview
+            }"
+            target="_blank"
+            rel="noopener noreferrer"
+            [ngbTooltip]="
+            emailOfStudentToPreview.length !== 0
+            ? 'View how this session would look like to a student who is submitting feedback.'
+            : 'Preview is unavailable if the course has yet to have any student enrolled.'
+            "
+          >
+            <ng-container *ngTemplateOutlet="previewStudentBtn"></ng-container>
+          </a>
+        </div>
+        <ng-template #previewStudentBtn>
+          <button
+            id="btn-preview-student"
+            class="btn btn-primary"
+            [disabled]="emailOfStudentToPreview.length === 0 || forDisplayOnly"
+          >
+            Preview as Student
+          </button>
+        </ng-template>
+      </div>
     </div>
-    <div class="col-lg-5">
-      <select id="preview-instructor" class="form-control form-select preview-select" [(ngModel)]="emailOfInstructorToPreview" aria-label="Select instructor to preview as">
-        <option *ngFor="let instructor of instructorsCanBePreviewedAs" [ngValue]="instructor.email">{{ instructor.name }}</option>
-      </select>
-      <a *ngIf="emailOfInstructorToPreview.length !== 0; else previewInstructorBtn" tmRouterLink="/web/instructor/sessions/submission"
-         [queryParams]="{ courseid: courseId, fsname: feedbackSessionName, previewas: emailOfInstructorToPreview }"
-         target="_blank"
-         rel="noopener noreferrer"
-         ngbTooltip="View how this session would look like to an instructor who is submitting feedback. Only instructors with submit privileges are included in the list.">
-        <ng-container *ngTemplateOutlet="previewInstructorBtn"></ng-container>
-      </a>
-      <ng-template #previewInstructorBtn>
-        <button id="btn-preview-instructor" class="btn btn-primary" [disabled]="emailOfInstructorToPreview.length === 0 || forDisplayOnly">Preview as Instructor</button>
-      </ng-template>
+    <div
+      [ngClass]="{'col-lg-5': !forDisplayOnly, 'col-lg-6': forDisplayOnly}"
+      class="col-12">
+      <div class="row align-items-center justify-content-center">
+        <select
+          id="preview-instructor"
+          [ngClass]="{ 'preview-example-select': forDisplayOnly }"
+          class="col-12 col-sm-8 col-lg-6 form-control form-select preview-select"
+          [(ngModel)]="emailOfInstructorToPreview"
+          aria-label="Select instructor to preview as"
+        >
+          <option *ngFor="let instructor of instructorsCanBePreviewedAs" [ngValue]="instructor.email">
+            {{ instructor.name }}
+          </option>
+        </select>
+        <div class="mt-1 mt-lg-0 col-sm-4 col-lg-6 w-max-content">
+          <a
+            *ngIf="emailOfInstructorToPreview.length !== 0; else previewInstructorBtn"
+            tmRouterLink="/web/instructor/sessions/submission"
+            [queryParams]="{
+              courseid: courseId,
+              fsname: feedbackSessionName,
+              previewas: emailOfInstructorToPreview
+            }"
+            target="_blank"
+            rel="noopener noreferrer"
+            ngbTooltip="View how this session would look like to an instructor who is submitting feedback. Only instructors with submit privileges are included in the list."
+          >
+            <ng-container *ngTemplateOutlet="previewInstructorBtn"></ng-container>
+          </a>
+        </div>
+        <ng-template #previewInstructorBtn>
+          <button
+            id="btn-preview-instructor"
+            class="btn btn-primary"
+            [disabled]="emailOfInstructorToPreview.length === 0 || forDisplayOnly"
+          >
+            Preview as Instructor
+          </button>
+        </ng-template>
+      </div>
     </div>
   </div>
 </div>
diff --git a/src/web/app/components/preview-session-panel/preview-session-panel.component.scss b/src/web/app/components/preview-session-panel/preview-session-panel.component.scss
@@ -1,8 +1,30 @@
 .background-color-light-blue {
-  background-color: #EAEFF5;
+  background-color: '#EAEFF5';
 }
 
 .preview-select {
   float: left;
   width: 50%;
 }
+
+.preview-example-select {
+  float: left;
+  width: 50%;
+}
+
+@media screen and (max-width: 1100px) {
+  .preview-example-select {
+    width: 45%;
+  }
+}
+
+@media screen and (max-width: 576px) {
+  .preview-select,
+  .preview-example-select {
+    width: 100%;
+  }
+}
+
+.w-max-content {
+  min-width: max-content;
+}
diff --git a/...b/app/components/preview-session-result-panel/preview-session-result-panel.component.html b/...b/app/components/preview-session-result-panel/preview-session-result-panel.component.html
@@ -1,37 +1,89 @@
 <div class="card-body background-color-light-blue text-center">
   <div class="row align-items-center">
-    <div class="col-lg-2 text-lg-end">
+    <div class="col-lg-2 text-lg-end mb-3 mb-lg-0">
       <b>Preview Results:</b>
     </div>
-    <div class="col-lg-5">
-      <select id="preview-student" class="form-control form-select preview-select" [(ngModel)]="emailOfStudentToPreview" aria-label="Select student to preview as">
-        <option *ngFor="let student of studentsOfCourse" [ngValue]="student.email">[{{ student.teamName }}] {{ student.name }}</option>
-      </select>
-      <a *ngIf="emailOfStudentToPreview.length !== 0; else previewStudentBtn" tmRouterLink="/web/sessions/result"
-         [queryParams]="{ courseid: courseId, fsname: feedbackSessionName, previewas: emailOfStudentToPreview }"
-         target="_blank"
-         rel="noopener noreferrer"
-         [ngbTooltip]="emailOfStudentToPreview.length !== 0 ? 'View how the session results would look like to a student.' : 'Preview is unavailable if the course has yet to have any student enrolled.'">
-        <ng-container *ngTemplateOutlet="previewStudentBtn"></ng-container>
-      </a>
-      <ng-template #previewStudentBtn>
-        <button id="btn-preview-student" class="btn btn-primary" [disabled]="emailOfStudentToPreview.length === 0 || forDisplayOnly">Preview as Student</button>
-      </ng-template>
+    <div class="col-12 col-lg-5 mb-3 mb-lg-0">
+      <div class="row align-items-center justify-content-center">
+        <select
+          id="preview-student"
+          class="col-12 col-sm-8 col-lg-6 form-control form-select preview-select"
+          [(ngModel)]="emailOfStudentToPreview"
+          aria-label="Select student to preview as"
+        >
+          <option *ngFor="let student of studentsOfCourse" [ngValue]="student.email">
+            [{{ student.teamName }}] {{ student.name }}
+          </option>
+        </select>
+        <div class="mt-1 mt-lg-0 col-sm-4 col-lg-6">
+          <a
+          *ngIf="emailOfStudentToPreview.length !== 0; else previewStudentBtn"
+          tmRouterLink="/web/sessions/result"
+          [queryParams]="{
+            courseid: courseId,
+            fsname: feedbackSessionName,
+            previewas: emailOfStudentToPreview
+          }"
+          target="_blank"
+          rel="noopener noreferrer"
+          [ngbTooltip]="
+            emailOfStudentToPreview.length !== 0
+              ? 'View how the session results would look like to a student.'
+              : 'Preview is unavailable if the course has yet to have any student enrolled.'
+          "
+          >
+          <ng-container *ngTemplateOutlet="previewStudentBtn"></ng-container>
+        </a>
+      </div>
+        <ng-template #previewStudentBtn>
+          <button
+            id="btn-preview-student"
+            class="btn btn-primary"
+            [disabled]="emailOfStudentToPreview.length === 0 || forDisplayOnly"
+          >
+            Preview as Student
+          </button>
+        </ng-template>
+      </div>
     </div>
-    <div class="col-lg-5">
-      <select id="preview-instructor" class="form-control form-select preview-select" [(ngModel)]="emailOfInstructorToPreview" aria-label="Select instructor to preview as">
-        <option *ngFor="let instructor of instructorsOfCourse" [ngValue]="instructor.email">{{ instructor.name }}</option>
-      </select>
-      <a *ngIf="emailOfInstructorToPreview.length !== 0; else previewInstructorBtn" tmRouterLink="/web/instructor/sessions/result"
-         [queryParams]="{ courseid: courseId, fsname: feedbackSessionName, previewas: emailOfInstructorToPreview }"
-         target="_blank"
-         rel="noopener noreferrer"
-         ngbTooltip="View how the session results would look like to an instructor.">
-        <ng-container *ngTemplateOutlet="previewInstructorBtn"></ng-container>
-      </a>
-      <ng-template #previewInstructorBtn>
-        <button id="btn-preview-instructor" class="btn btn-primary" [disabled]="emailOfInstructorToPreview.length === 0 || forDisplayOnly">Preview as Instructor</button>
-      </ng-template>
+    <div class="col-12 col-lg-5">
+      <div class="row align-items-center justify-content-center">
+        <select
+          id="preview-instructor"
+          class="col-12 col-sm-8 col-lg-6 form-control form-select preview-select"
+          [(ngModel)]="emailOfInstructorToPreview"
+          aria-label="Select instructor to preview as"
+        >
+          <option *ngFor="let instructor of instructorsOfCourse" [ngValue]="instructor.email">
+            {{ instructor.name }}
+          </option>
+        </select>
+        <div class="mt-1 mt-lg-0 col-sm-4 col-lg-6 w-max-content">
+          <a
+          *ngIf="emailOfInstructorToPreview.length !== 0; else previewInstructorBtn"
+          tmRouterLink="/web/instructor/sessions/result"
+          [queryParams]="{
+            courseid: courseId,
+            fsname: feedbackSessionName,
+            previewas: emailOfInstructorToPreview
+          }"
+          target="_blank"
+          rel="noopener noreferrer"
+          ngbTooltip="View how the session results would look like to an instructor."
+          >
+            <ng-container *ngTemplateOutlet="previewInstructorBtn"></ng-container>
+          </a>
+        </div>
+        <ng-template #previewInstructorBtn>
+          <button
+            id="btn-preview-instructor"
+            class="btn btn-primary"
+            [disabled]="emailOfInstructorToPreview.length === 0 || forDisplayOnly"
+          >
+            Preview as Instructor
+          </button>
+        </ng-template>
+      </div>
     </div>
   </div>
 </div>
diff --git a/...b/app/components/preview-session-result-panel/preview-session-result-panel.component.scss b/...b/app/components/preview-session-result-panel/preview-session-result-panel.component.scss
@@ -1,8 +1,19 @@
 .background-color-light-blue {
-  background-color: #EAEFF5;
+  background-color: '#EAEFF5';
 }
 
 .preview-select {
   float: left;
   width: 50%;
 }
+
+// small
+@media screen and (max-width: 576px) {
+  .preview-select {
+    width: 100%;
+  }
+}
+
+.w-max-content {
+  min-width: max-content;
+}