make clicking apply close dropdown and make table scrollable for mobile

CenterForOpenScience · Sep 19, 2024 · bb31bd3 · bb31bd3
1 parent 1671617
commit bb31bd3
Show file tree

Hide file tree

Showing 4 changed files with 85 additions and 66 deletions.
diff --git a/app/institutions/dashboard/-components/institutional-users-list/styles.scss b/app/institutions/dashboard/-components/institutional-users-list/styles.scss
@@ -270,3 +270,20 @@ input:checked + .slider::before {
     margin-right: 5px;
     font-weight: bold;
 }
+
+/* Add media query for mobile devices */
+@media (max-width: 1000px) {
+    .table-wrapper {
+        overflow-x: auto;
+        -webkit-overflow-scrolling: touch; /* For smooth scrolling on iOS */
+    }
+
+    .table table {
+        min-width: 1000px; /* Set the table's width to be wider than the viewport */
+    }
+
+    .table th,
+    .table td {
+        white-space: nowrap; /* Prevent text from wrapping */
+    }
+}
diff --git a/app/institutions/dashboard/-components/institutional-users-list/template.hbs b/app/institutions/dashboard/-components/institutional-users-list/template.hbs
@@ -57,71 +57,73 @@
                         <Button @type='secondary' {{on 'click' dd.actions.close}}>
                             {{t 'general.cancel'}}
                         </Button>
-                        <Button @type='primary' {{on 'click' this.applyColumnSelection}}>
+                        <Button @type='primary' {{on 'click' this.applyColumnSelection}} {{on 'click' dd.actions.close}}>
                             {{t 'general.apply'}}
                         </Button>
                     </div>
                 </div>
             {{/if}}
         </BasicDropdown>
     </div>
-    <PaginatedList::HasMany
-        local-class='table'
-        @isTable={{true}}
-        @model={{@institution}}
-        @usePlaceholders={{false}}
-        @relationshipName='userMetrics'
-        @bindReload={{this.reloadUserList}}
-        @query={{this.queryUsers}}
-        as |list|
-    >
-        <list.header local-class='header'>
-            {{#let (component 'sort-arrow'
-                class=(local-class 'sort-arrow')
-                sortAction=this.sortInstitutionalUsers
-                sort=this.sort
-                ) as |SortArrow|}}
-                <tr>
-                    {{#each this.columns as |column|}}
-                        {{#if (includes column.key this.selectedColumns)}}
-                            <th data-test-header='{{column.key}}'>
-                                <div local-class='header-content'>
-                                    <span local-class='header-text'>{{column.label}}</span>
-                                    {{#if column.sort_key}}
-                                        <span local-class='sort-arrow-container'>
-                                            <SortArrow @sortBy='{{column.sort_key}}' />
-                                        </span>
-                                    {{/if}}
-                                </div>
-                            </th>
-                        {{/if}}
-                    {{/each}}
-                </tr>
-            {{/let}}
-        </list.header>
-        <list.item local-class='item' as |institutionalUser|>
-            {{#each this.columns as |column|}}
-                {{#if (includes column.key this.selectedColumns)}}
-                    <td data-test-item={{column.key}}>
-                        {{#if (eq column.type 'user_name')}}
-                            <OsfLink @href={{concat '/' institutionalUser.userGuid '/'}}>
-                                {{institutionalUser.userName}}
-                            </OsfLink>
-                        {{else if (eq column.type 'osf_link')}}
-                            <OsfLink @href={{concat '/' institutionalUser.userGuid '/'}}>
-                                {{institutionalUser.userGuid}}
-                            </OsfLink>
-                        {{else if (eq column.type 'date_by_month')}}
-                            {{moment-format (get institutionalUser column.key) 'MM/YYYY'}}
-                        {{else}}
-                            {{get institutionalUser column.key}}
-                        {{/if}}
-                    </td>
-                {{/if}}
-            {{/each}}
-        </list.item>
-        <list.empty local-class='empty'>
-            {{t 'institutions.dashboard.users_list.empty'}}
-        </list.empty>
-    </PaginatedList::HasMany>
+    <div local-class='table-wrapper'>
+        <PaginatedList::HasMany
+            local-class='table'
+            @isTable={{true}}
+            @model={{@institution}}
+            @usePlaceholders={{false}}
+            @relationshipName='userMetrics'
+            @bindReload={{this.reloadUserList}}
+            @query={{this.queryUsers}}
+            as |list|
+        >
+            <list.header local-class='header'>
+                {{#let (component 'sort-arrow'
+                    class=(local-class 'sort-arrow')
+                    sortAction=this.sortInstitutionalUsers
+                    sort=this.sort
+                    ) as |SortArrow|}}
+                    <tr>
+                        {{#each this.columns as |column|}}
+                            {{#if (includes column.key this.selectedColumns)}}
+                                <th data-test-header='{{column.key}}'>
+                                    <div local-class='header-content'>
+                                        <span local-class='header-text'>{{column.label}}</span>
+                                        {{#if column.sort_key}}
+                                            <span local-class='sort-arrow-container'>
+                                                <SortArrow @sortBy='{{column.sort_key}}' />
+                                            </span>
+                                        {{/if}}
+                                    </div>
+                                </th>
+                            {{/if}}
+                        {{/each}}
+                    </tr>
+                {{/let}}
+            </list.header>
+            <list.item local-class='item' as |institutionalUser|>
+                {{#each this.columns as |column|}}
+                    {{#if (includes column.key this.selectedColumns)}}
+                        <td data-test-item={{column.key}}>
+                            {{#if (eq column.type 'user_name')}}
+                                <OsfLink @href={{concat '/' institutionalUser.userGuid '/'}}>
+                                    {{institutionalUser.userName}}
+                                </OsfLink>
+                            {{else if (eq column.type 'osf_link')}}
+                                <OsfLink @href={{concat '/' institutionalUser.userGuid '/'}}>
+                                    {{institutionalUser.userGuid}}
+                                </OsfLink>
+                            {{else if (eq column.type 'date_by_month')}}
+                                {{moment-format (get institutionalUser column.key) 'MM/YYYY'}}
+                            {{else}}
+                                {{get institutionalUser column.key}}
+                            {{/if}}
+                        </td>
+                    {{/if}}
+                {{/each}}
+            </list.item>
+            <list.empty local-class='empty'>
+                {{t 'institutions.dashboard.users_list.empty'}}
+            </list.empty>
+        </PaginatedList::HasMany>
+    </div>
 {{/if}}
diff --git a/config/environment.js b/config/environment.js
@@ -60,7 +60,7 @@ const {
     KEEN_CONFIG: keenConfig,
     LINT_ON_BUILD: lintOnBuild = false,
     WATER_BUTLER_ENABLED = true,
-    MIRAGE_ENABLED = true,
+    MIRAGE_ENABLED = false,
     MIRAGE_SCENARIOS = [
         'cedar',
         'collections',

diff --git a/translations/en-us.yml b/translations/en-us.yml
@@ -822,11 +822,11 @@ institutions:
             has_orcid: 'Has ORCID'
             select_columns: 'Customize'
             total_users: 'total users'
-          panel:
-              users: 'Total Users'
-              projects: 'OSF Projects'
-              registrations: 'OSF Registrations'
-              preprints: 'OSF Preprints'
+        panel:
+          users: 'Total Users'
+          projects: 'OSF Projects'
+          registrations: 'OSF Registrations'
+          preprints: 'OSF Preprints'
         projects_panel: 'Total Projects'
         departments_panel: Departments
         public: Public