[#12457] Make the table buttons easier to use on mobile devices (#12463)

* change the sizing of the buttons * Fix linting * Fix component testing * add a media component to a scss class in instructor courses page * change the media px from 767 to 768px according to the guidelines * remove an unnecessary comment * add scss class to two more buttons * fix misalignment of buttons * fix the buttons of the archive button of the instructor courses page * center-align the buttons of student-home-page * fix linting * fix linting * fix failing snapshots * fix failing snapshots * add changes based on feedback * fix linting * fix snapshots --------- Co-authored-by: Wei Qing <48304907+weiquu@users.noreply.github.com> Co-authored-by: Dominic Lim <46486515+domlimm@users.noreply.github.com>
TEAMMATES · Jul 12, 2023 · d3dee0f · d3dee0f
1 parent 939669d
commit d3dee0f
Show file tree

Hide file tree

Showing 11 changed files with 195 additions and 152 deletions.
diff --git a/src/web/app/components/student-list/__snapshots__/student-list.component.spec.ts.snap b/src/web/app/components/student-list/__snapshots__/student-list.component.spec.ts.snap
diff --git a/src/web/app/components/student-list/student-list.component.html b/src/web/app/components/student-list/student-list.component.html
@@ -68,7 +68,7 @@
       <td class="no-print align-center">
         <ng-template #actionButton let-isEnabled="isEnabled" let-tooltip="tooltip" let-name="name" let-id="id"
                      let-tmRouterLink="tmRouterLink" let-queryParams="queryParams">
-          <a class="btn btn-light btn-sm btn-margin-right" target="_blank" rel="noopener noreferrer"
+          <a class="btn btn-light btn-sm btn-margin-right custom-button" target="_blank" rel="noopener noreferrer"
              [id]="id"
              [ngClass]="{'disabled mouse-hover-only': !isEnabled}"
              [ngbTooltip]="isEnabled ? tooltip : 'You do not have the permissions to access this feature'"
@@ -96,7 +96,7 @@
         }"></ng-container>
       <ng-container *ngIf="enableRemindButton">
         <ng-container *ngIf="studentModel.student.joinState === JoinState.NOT_JOINED">
-          <button id="btn-send-invite-{{ courseId }}-{{ idx }}" class="btn btn-light btn-sm btn-margin-right"
+          <button id="btn-send-invite-{{ courseId }}-{{ idx }}" class="btn btn-light btn-sm btn-margin-right custom-button"
             [ngClass]="{'disabled mouse-hover-only': !studentModel.isAllowedToModifyStudent || !isActionButtonsEnabled}"
             [disabled]=!isActionButtonsEnabled
             [ngbTooltip]="studentModel.isAllowedToModifyStudent && isActionButtonsEnabled
@@ -107,7 +107,7 @@
             (click)="openRemindModal(studentModel)">Send Invite</button>
         </ng-container>
       </ng-container>
-      <button id="btn-delete-{{ courseId }}-{{ idx }}" class="btn btn-light btn-sm btn-margin-right"
+      <button id="btn-delete-{{ courseId }}-{{ idx }}" class="btn btn-light btn-sm btn-margin-right custom-button"
         [ngClass]="{'disabled mouse-hover-only': !studentModel.isAllowedToModifyStudent || !isActionButtonsEnabled}"
         [ngbTooltip]="studentModel.isAllowedToModifyStudent && isActionButtonsEnabled
           ? 'Delete the student and the corresponding submissions from the course'

diff --git a/src/web/app/components/student-list/student-list.component.scss b/src/web/app/components/student-list/student-list.component.scss
@@ -2,6 +2,13 @@
   text-align: center;
 }
 
+@media (max-width: 768px) { //applies only to mobile screens
+  .custom-button {
+    width: 90px;
+    margin-bottom: 5px;
+  }
+}
+
 .table .thead-gray th {
   color: #495057;
   background-color: #DADADA;

diff --git a/...r-course-details-page/__snapshots__/instructor-course-details-page.component.spec.ts.snap b/...r-course-details-page/__snapshots__/instructor-course-details-page.component.spec.ts.snap
@@ -514,7 +514,7 @@ exports[`InstructorCourseDetailsPageComponent should snap with a course with one
                     class="no-print align-center"
                   >
                     <a
-                      class="btn btn-light btn-sm btn-margin-right"
+                      class="btn btn-light btn-sm btn-margin-right custom-button"
                       href="/web/instructor/courses/student/details?courseid=CS101&studentemail=jamie@gmail.com"
                       id="btn-view-details-CS101-0"
                       rel="noopener noreferrer"
@@ -523,7 +523,7 @@ exports[`InstructorCourseDetailsPageComponent should snap with a course with one
                        View
                     </a>
                     <a
-                      class="btn btn-light btn-sm btn-margin-right"
+                      class="btn btn-light btn-sm btn-margin-right custom-button"
                       href="/web/instructor/courses/student/edit?courseid=CS101&studentemail=jamie@gmail.com"
                       id="btn-edit-details-CS101-0"
                       rel="noopener noreferrer"
@@ -532,19 +532,19 @@ exports[`InstructorCourseDetailsPageComponent should snap with a course with one
                        Edit
                     </a>
                     <button
-                      class="btn btn-light btn-sm btn-margin-right"
+                      class="btn btn-light btn-sm btn-margin-right custom-button"
                       id="btn-send-invite-CS101-0"
                     >
                       Send Invite
                     </button>
                     <button
-                      class="btn btn-light btn-sm btn-margin-right"
+                      class="btn btn-light btn-sm btn-margin-right custom-button"
                       id="btn-delete-CS101-0"
                     >
                       Delete
                     </button>
                     <a
-                      class="btn btn-light btn-sm btn-margin-right"
+                      class="btn btn-light btn-sm btn-margin-right custom-button"
                       href="/web/instructor/students/records?courseid=CS101&studentemail=jamie@gmail.com"
                       id="btn-view-records-CS101-0"
                       rel="noopener noreferrer"

diff --git a/...ctor/instructor-courses-page/__snapshots__/instructor-courses-page.component.spec.ts.snap b/...ctor/instructor-courses-page/__snapshots__/instructor-courses-page.component.spec.ts.snap
@@ -206,13 +206,13 @@ exports[`InstructorCoursesPageComponent should snap when archived courses are ex
                 class="text-center actions-cell"
               >
                 <button
-                  class="btn btn-light btn-sm"
+                  class="btn btn-light btn-sm custom-button-archived"
                   id="btn-unarchive-0"
                 >
                    Unarchive 
                 </button>
                 <button
-                  class="btn btn-light btn-sm"
+                  class="btn btn-light btn-sm custom-button-archived"
                   id="btn-soft-delete-archived-0"
                   ngbtooltip="Delete the course and its corresponding students and sessions"
                 >
@@ -246,7 +246,7 @@ exports[`InstructorCoursesPageComponent should snap when archived courses are ex
                 class="text-center actions-cell"
               >
                 <button
-                  class="btn btn-light btn-sm"
+                  class="btn btn-light btn-sm custom-button-archived"
                   id="btn-unarchive-1"
                 >
                    Unarchive 
@@ -537,7 +537,7 @@ exports[`InstructorCoursesPageComponent should snap when it is undeletable and u
                   class="text-center actions-cell"
                 >
                   <a
-                    class="btn btn-light btn-sm"
+                    class="btn btn-light btn-sm custom-button-active"
                     href="/web/instructor/courses/enroll?courseid=CS3281"
                     id="btn-enroll-0"
                     ngbtooltip="Enroll student into the course"
@@ -551,7 +551,7 @@ exports[`InstructorCoursesPageComponent should snap when it is undeletable and u
                   >
                     <button
                       aria-expanded="false"
-                      class="dropdown-toggle btn btn-light btn-sm"
+                      class="dropdown-toggle btn btn-light btn-sm custom-button-active"
                       id="btn-other-actions-0"
                       ngbdropdowntoggle=""
                     >
@@ -661,7 +661,7 @@ exports[`InstructorCoursesPageComponent should snap when it is undeletable and u
                   >
                     <button
                       aria-expanded="false"
-                      class="dropdown-toggle btn btn-light btn-sm"
+                      class="dropdown-toggle btn btn-light btn-sm custom-button-active"
                       id="btn-other-actions-1"
                       ngbdropdowntoggle=""
                     >
@@ -1303,7 +1303,7 @@ exports[`InstructorCoursesPageComponent should snap with all courses in course s
                   class="text-center actions-cell"
                 >
                   <a
-                    class="btn btn-light btn-sm"
+                    class="btn btn-light btn-sm custom-button-active"
                     href="/web/instructor/courses/enroll?courseid=CS3281"
                     id="btn-enroll-0"
                     ngbtooltip="Enroll student into the course"
@@ -1317,7 +1317,7 @@ exports[`InstructorCoursesPageComponent should snap with all courses in course s
                   >
                     <button
                       aria-expanded="false"
-                      class="dropdown-toggle btn btn-light btn-sm"
+                      class="dropdown-toggle btn btn-light btn-sm custom-button-active"
                       id="btn-other-actions-0"
                       ngbdropdowntoggle=""
                     >
@@ -1427,7 +1427,7 @@ exports[`InstructorCoursesPageComponent should snap with all courses in course s
                   >
                     <button
                       aria-expanded="false"
-                      class="dropdown-toggle btn btn-light btn-sm"
+                      class="dropdown-toggle btn btn-light btn-sm custom-button-active"
                       id="btn-other-actions-1"
                       ngbdropdowntoggle=""
                     >
@@ -1859,7 +1859,7 @@ exports[`InstructorCoursesPageComponent should snap with no courses in course st
                   class="text-center actions-cell"
                 >
                   <a
-                    class="btn btn-light btn-sm"
+                    class="btn btn-light btn-sm custom-button-active"
                     href="/web/instructor/courses/enroll?courseid=CS3281"
                     id="btn-enroll-0"
                     ngbtooltip="Enroll student into the course"
@@ -1873,7 +1873,7 @@ exports[`InstructorCoursesPageComponent should snap with no courses in course st
                   >
                     <button
                       aria-expanded="false"
-                      class="dropdown-toggle btn btn-light btn-sm"
+                      class="dropdown-toggle btn btn-light btn-sm custom-button-active"
                       id="btn-other-actions-0"
                       ngbdropdowntoggle=""
                     >
@@ -1993,7 +1993,7 @@ exports[`InstructorCoursesPageComponent should snap with no courses in course st
                   >
                     <button
                       aria-expanded="false"
-                      class="dropdown-toggle btn btn-light btn-sm"
+                      class="dropdown-toggle btn btn-light btn-sm custom-button-active"
                       id="btn-other-actions-1"
                       ngbdropdowntoggle=""
                     >

diff --git a/src/web/app/pages-instructor/instructor-courses-page/instructor-courses-page.component.html b/src/web/app/pages-instructor/instructor-courses-page/instructor-courses-page.component.html
@@ -135,7 +135,7 @@ <h2 class="h3">Active courses</h2>
                 </span>
               </td>
               <td class="text-center actions-cell">
-                <a id="btn-enroll-{{ i }}" class="btn btn-light btn-sm" *ngIf="course.canModifyStudent"
+                <a id="btn-enroll-{{ i }}" class="btn btn-light btn-sm custom-button-active" *ngIf="course.canModifyStudent"
                   ngbTooltip="Enroll student into the course" tmRouterLink="/web/instructor/courses/enroll"
                   [queryParams]="{courseid: course.course.courseId}">
                   Enroll
@@ -145,7 +145,7 @@ <h2 class="h3">Active courses</h2>
                   Enroll
                 </button>
                 <div ngbDropdown class="d-inline-block">
-                  <button id="btn-other-actions-{{ i }}" class="btn btn-light btn-sm" ngbDropdownToggle>Other
+                  <button id="btn-other-actions-{{ i }}" class="btn btn-light btn-sm custom-button-active" ngbDropdownToggle>Other
                     Actions</button>
                   <div ngbDropdownMenu>
                     <a class="btn btn-primary btn-sm dropdown-item clickable"
@@ -272,11 +272,11 @@ <h2 class="h3 text-muted">
                 | date:'d MMM yyyy'}}</span>
             </td>
             <td class="text-center actions-cell">
-              <button id="btn-unarchive-{{ i }}" class="btn btn-light btn-sm"
+              <button id="btn-unarchive-{{ i }}" class="btn btn-light btn-sm custom-button-archived"
                 (click)="changeArchiveStatus(course.course.courseId, false)">
                 Unarchive
               </button>
-              <button id="btn-soft-delete-archived-{{ i }}" class="btn btn-light btn-sm" *ngIf="course.canModifyCourse"
+              <button id="btn-soft-delete-archived-{{ i }}" class="btn btn-light btn-sm custom-button-archived" *ngIf="course.canModifyCourse"
                 (click)="onDelete(course.course.courseId)"
                 ngbTooltip="Delete the course and its corresponding students and sessions">
                 Delete

diff --git a/src/web/app/pages-instructor/instructor-courses-page/instructor-courses-page.component.scss b/src/web/app/pages-instructor/instructor-courses-page/instructor-courses-page.component.scss
@@ -1,3 +1,17 @@
+@media (max-width: 768px) { //applies only to mobile screens
+  .custom-button-active {
+    width: 115px;
+    margin-bottom: 5px;
+  }
+}
+
+@media (max-width: 768px) { //applies only to mobile screens
+  .custom-button-archived {
+    width: 95px;
+    margin-bottom: 5px;
+  }
+}
+
 .sortable-header {
   cursor: pointer;
 
@@ -75,8 +89,10 @@
   margin-top: 30px;
 }
 
-.actions-cell button:not(.dropdown-item) {
-  margin-left: var(--btn-margin);
+@media (min-width: 768px) { //applies only to non-mobile screens
+  .actions-cell button:not(.dropdown-item) {
+    margin-left: var(--btn-margin);
+  }
 }
 
 .dropdown-menu {