Merge pull request #8017 from michaelchadwick/frontend-5604-materials…

…-table-width-fix Remove My Materials mobile layout horizontal scrolling
ilios · Aug 2, 2024 · 3787f4d · 3787f4d
2 parents 13b3911 + a5035fd
commit 3787f4d
Show file tree

Hide file tree

Showing 6 changed files with 52 additions and 8 deletions.
diff --git a/packages/frontend/tests/acceptance/dashboard/materials-test.js b/packages/frontend/tests/acceptance/dashboard/materials-test.js
@@ -190,12 +190,12 @@ module('Acceptance | Dashboard Materials', function (hooks) {
       'Showing 1 - 6 of 6',
     );
     assert.strictEqual(page.materials.table.headers.status.text, 'Status');
+    assert.strictEqual(page.materials.table.headers.title.text, 'Title');
+    assert.notOk(page.materials.table.headers.title.isSortedOn);
     assert.strictEqual(page.materials.table.headers.sessionTitle.text, 'Session');
     assert.notOk(page.materials.table.headers.sessionTitle.isSortedOn);
     assert.strictEqual(page.materials.table.headers.courseTitle.text, 'Course');
     assert.notOk(page.materials.table.headers.courseTitle.isSortedOn);
-    assert.strictEqual(page.materials.table.headers.title.text, 'Title');
-    assert.notOk(page.materials.table.headers.title.isSortedOn);
     assert.strictEqual(page.materials.table.headers.instructor.text, 'Instructor');
     assert.strictEqual(page.materials.table.headers.firstOfferingDate.text, 'Date');
     assert.ok(page.materials.table.headers.firstOfferingDate.isSortedOn);

diff --git a/...ios-common/addon-test-support/ilios-common/page-objects/components/dashboard/materials.js b/...ios-common/addon-test-support/ilios-common/page-objects/components/dashboard/materials.js
@@ -49,6 +49,13 @@ const definition = {
       status: {
         scope: 'th:nth-of-type(1)',
       },
+      title: {
+        scope: 'th:nth-of-type(2)',
+        isSortedAscending: hasClass('fa-arrow-down-a-z', 'svg'),
+        isSortedDescending: hasClass('fa-arrow-down-z-a', 'svg'),
+        isSortedOn: notHasClass('fa-sort', 'svg'),
+        click: clickable('button'),
+      },
       sessionTitle: {
         scope: 'th:nth-of-type(3)',
         isSortedAscending: hasClass('fa-arrow-down-a-z', 'svg'),
@@ -63,18 +70,18 @@ const definition = {
         isSortedOn: notHasClass('fa-sort', 'svg'),
         click: clickable('button'),
       },
-      title: {
-        scope: 'th:nth-of-type(2)',
+      courseSessionTitle: {
+        scope: 'th:nth-of-type(5)',
         isSortedAscending: hasClass('fa-arrow-down-a-z', 'svg'),
         isSortedDescending: hasClass('fa-arrow-down-z-a', 'svg'),
         isSortedOn: notHasClass('fa-sort', 'svg'),
         click: clickable('button'),
       },
       instructor: {
-        scope: 'th:nth-of-type(5)',
+        scope: 'th:nth-of-type(6)',
       },
       firstOfferingDate: {
-        scope: 'th:nth-of-type(6)',
+        scope: 'th:nth-of-type(7)',
         isSortedAscending: hasClass('fa-arrow-down-1-9', 'svg'),
         isSortedDescending: hasClass('fa-arrow-down-9-1', 'svg'),
         isSortedOn: notHasClass('fa-sort', 'svg'),

diff --git a/packages/ilios-common/addon/components/dashboard/material-list-item.hbs b/packages/ilios-common/addon/components/dashboard/material-list-item.hbs
@@ -68,12 +68,19 @@
       {{/if}}
     {{/if}}
   </td>
-  <td colspan="6" data-test-session-title>
+  <td class="hide-from-small-screen" colspan="6" data-test-session-title>
     {{@lm.sessionTitle}}
   </td>
-  <td colspan="6" data-test-course-title>
+  <td class="hide-from-small-screen" colspan="6" data-test-course-title>
     {{@lm.courseTitle}}
   </td>
+  <td class="hide-from-large-screen" colspan="6" data-test-course-session-title>
+    {{#if (is-empty @lm.sessionTitle)}}
+      {{@lm.courseTitle}}
+    {{else}}
+      {{@lm.courseTitle}} :: {{@lm.sessionTitle}}
+    {{/if}}
+  </td>
   <td class="hide-from-small-screen" colspan="3" data-test-instructors>
     <TruncateText
       @length={{25}}

diff --git a/packages/ilios-common/addon/components/dashboard/materials.hbs b/packages/ilios-common/addon/components/dashboard/materials.hbs
@@ -96,6 +96,7 @@
               {{t "general.title"}}
             </SortableTh>
             <SortableTh
+              class="hide-from-small-screen"
               @colspan={{6}}
               @sortedAscending={{this.sortedAscending}}
               @sortedBy={{or
@@ -107,6 +108,7 @@
               {{t "general.session"}}
             </SortableTh>
             <SortableTh
+              class="hide-from-small-screen"
               @colspan={{6}}
               @sortedAscending={{this.sortedAscending}}
               @sortedBy={{or
@@ -117,6 +119,18 @@
             >
               {{t "general.course"}}
             </SortableTh>
+            <SortableTh
+              class="hide-from-large-screen"
+              @colspan={{6}}
+              @sortedAscending={{this.sortedAscending}}
+              @sortedBy={{or
+              (eq @sortBy "courseTitle")
+              (eq @sortBy "courseTitle:desc")
+            }}
+              @onClick={{fn this.sortBy "courseTitle"}}
+            >
+              {{t "general.course"}} :: {{t "general.session"}}
+            </SortableTh>
             <th colspan="3" class="hide-from-small-screen">
               {{t "general.instructor"}}
             </th>

diff --git a/packages/ilios-common/app/styles/ilios-common/components/dashboard/materials.scss b/packages/ilios-common/app/styles/ilios-common/components/dashboard/materials.scss
@@ -31,6 +31,14 @@
     .filter {
       margin-bottom: 1rem;
       margin-top: 1rem;
+
+      select {
+        max-width: 91vw;
+
+        @include m.for-tablet-and-up {
+          max-width: none;
+        }
+      }
     }
 
     .filter input {

diff --git a/packages/ilios-common/app/styles/ilios-common/mixins/ilios-table.scss b/packages/ilios-common/app/styles/ilios-common/mixins/ilios-table.scss
@@ -76,6 +76,14 @@
     }
   }
 
+  .hide-from-tablet-screen {
+    display: none;
+
+    @include media.for-tablet-and-up {
+      display: table-cell;
+    }
+  }
+
   .hide-from-large-screen {
     display: none;