Skip to content

Commit 46ea031

Browse files
futa-ikedafuta-ikeda
authored
[ENG-6401] Mobile styling (#2398)
1 parent 1cc765f commit 46ea031

File tree

3 files changed

+112
-91
lines changed

3 files changed

+112
-91
lines changed

‎app/institutions/dashboard/-components/institutional-dashboard-wrapper/styles.scss‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -29,9 +29,9 @@
2929
@include tab-list;
3030
white-space: nowrap;
3131
display: flex;
32-
flex-wrap: wrap;
32+
flex-wrap: nowrap;
3333
position: relative;
34-
overflow: visible;
34+
overflow-x: auto;
3535
margin-bottom: 0;
3636
border-bottom: 0;
3737

‎app/institutions/dashboard/-components/institutional-users-list/styles.scss‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -292,3 +292,18 @@ input:checked + .slider::before {
292292
}
293293
}
294294

295+
.flex {
296+
display: flex;
297+
align-items: center;
298+
}
299+
300+
.top-wrapper {
301+
display: flex;
302+
flex-wrap: wrap;
303+
justify-content: flex-end;
304+
}
305+
306+
.right-button-group {
307+
justify-content: flex-end;
308+
margin-right: 15px;
309+
}

‎app/institutions/dashboard/-components/institutional-users-list/template.hbs‎

Lines changed: 95 additions & 89 deletions
Original file line numberDiff line numberDiff line change
@@ -8,97 +8,103 @@
88
</span>
99
{{t 'institutions.dashboard.users_list.total_users'}}
1010
</div>
11-
<div local-class='orcid-switch'>
12-
<label for='switches-container' local-class='orcid-toggle-label'>{{t 'institutions.dashboard.users_list.has_orcid'}}</label>
13-
<label local-class='switch'>
14-
<input id='switches-container' type='checkbox' checked={{this.hasOrcid}} {{on 'change' (fn this.toggleOrcidFilter (not this.hasOrcid))}}>
15-
<span local-class='slider round'></span>
16-
</label>
17-
</div>
18-
<PowerSelect
19-
@options={{this.departments}}
20-
@searchEnabled={{true}}
21-
@selected={{this.department}}
22-
@triggerClass={{local-class 'select'}}
23-
@search={{perform this.searchDepartment}}
24-
@onChange={{this.onSelectChange}}
25-
as |department|
26-
>
27-
{{department}}
28-
</PowerSelect>
29-
<BasicDropdown
30-
@renderInPlace={{true}}
31-
@onClose={{this.onDropdownClose}}
32-
@preventScroll={{true}}
33-
@eventType='mousedown'
34-
local-class='dropdown'
35-
as |dd|
36-
>
37-
<Button local-class='dropdown-trigger' {{on 'click' dd.actions.toggle}}>
38-
<FaIcon local-class='icon-columns' @icon='columns' />
39-
{{t 'institutions.dashboard.users_list.select_columns'}}
40-
</Button>
41-
{{#if dd.isOpen}}
42-
<div local-class='dropdown-panel {{if (is-mobile) 'mobile'}}'>
43-
<div local-class='dropdown-content'>
44-
{{#each this.columns as |column|}}
45-
<label>
46-
<input
47-
type='checkbox'
48-
value={{column.key}}
49-
checked={{column.selected}}
50-
{{on 'change' (fn this.toggleColumnSelection column.key)}}
51-
/>
52-
{{column.label}}
53-
</label>
54-
{{/each}}
55-
</div>
56-
<div local-class='dropdown-actions'>
57-
<Button @type='secondary' {{on 'click' dd.actions.close}}>
58-
{{t 'general.cancel'}}
59-
</Button>
60-
<Button @type='primary' {{on 'click' this.applyColumnSelection}} {{on 'click' dd.actions.close}}>
61-
{{t 'general.apply'}}
62-
</Button>
63-
</div>
11+
<div local-class='top-wrapper'>
12+
<div local-class='flex'>
13+
<div local-class='orcid-switch'>
14+
<label for='switches-container' local-class='orcid-toggle-label'>{{t 'institutions.dashboard.users_list.has_orcid'}}</label>
15+
<label local-class='switch'>
16+
<input id='switches-container' type='checkbox' checked={{this.hasOrcid}} {{on 'change' (fn this.toggleOrcidFilter (not this.hasOrcid))}}>
17+
<span local-class='slider round'></span>
18+
</label>
6419
</div>
65-
{{/if}}
66-
</BasicDropdown>
67-
<div local-class='download-button-group'>
68-
{{#if @institution.linkToExternalReportsArchive}}
69-
<OsfLink
70-
data-test-link-to-reports-archive
71-
data-analytics-name='Link to archived reports'
72-
@target='_blank'
73-
@fakeButton={{true}}
74-
@href={{@institution.linkToExternalReportsArchive}}
20+
<PowerSelect
21+
@options={{this.departments}}
22+
@searchEnabled={{true}}
23+
@selected={{this.department}}
24+
@triggerClass={{local-class 'select'}}
25+
@search={{perform this.searchDepartment}}
26+
@onChange={{this.onSelectChange}}
27+
as |department|
7528
>
76-
<EmberTooltip @side='bottom'>
77-
{{t 'institutions.dashboard.download_past_reports_label'}}
78-
</EmberTooltip>
79-
<FaIcon @icon='chart-pie'/>
80-
</OsfLink>
81-
{{/if}}
82-
<div local-class='download-dropdown'>
83-
<ResponsiveDropdown @renderInPlace={{true}} @buttonStyling={{true}} as |dd| >
84-
<dd.trigger data-test-download-dropdown local-class='download-dropdown-trigger'>
85-
<FaIcon @icon='download' />
86-
</dd.trigger>
87-
<dd.content local-class='download-dropdown-content'>
88-
<Button local-class='download-option' {{on 'click' (queue this.downloadCsv dd.close)}}>
89-
{{t 'institutions.dashboard.format_labels.csv'}}
90-
</Button>
91-
<Button local-class='download-option' {{on 'click' (queue this.downloadTsv dd.close)}}>
92-
{{t 'institutions.dashboard.format_labels.tsv'}}
93-
</Button>
94-
<Button local-class='download-option' {{on 'click' (queue this.downloadJsonTable dd.close)}}>
95-
{{t 'institutions.dashboard.format_labels.json_table'}}
96-
</Button>
97-
<Button local-class='download-option' {{on 'click' (queue this.downloadJsonDirect dd.close)}}>
98-
{{t 'institutions.dashboard.format_labels.json_direct'}}
99-
</Button>
100-
</dd.content>
101-
</ResponsiveDropdown>
29+
{{department}}
30+
</PowerSelect>
31+
</div>
32+
<div local-class='flex right-button-group'>
33+
<BasicDropdown
34+
@renderInPlace={{true}}
35+
@onClose={{this.onDropdownClose}}
36+
@preventScroll={{true}}
37+
@eventType='mousedown'
38+
local-class='dropdown'
39+
as |dd|
40+
>
41+
<Button local-class='dropdown-trigger' {{on 'click' dd.actions.toggle}}>
42+
<FaIcon local-class='icon-columns' @icon='columns' />
43+
{{t 'institutions.dashboard.users_list.select_columns'}}
44+
</Button>
45+
{{#if dd.isOpen}}
46+
<div local-class='dropdown-panel {{if (is-mobile) 'mobile'}}'>
47+
<div local-class='dropdown-content'>
48+
{{#each this.columns as |column|}}
49+
<label>
50+
<input
51+
type='checkbox'
52+
value={{column.key}}
53+
checked={{column.selected}}
54+
{{on 'change' (fn this.toggleColumnSelection column.key)}}
55+
/>
56+
{{column.label}}
57+
</label>
58+
{{/each}}
59+
</div>
60+
<div local-class='dropdown-actions'>
61+
<Button @type='secondary' {{on 'click' dd.actions.close}}>
62+
{{t 'general.cancel'}}
63+
</Button>
64+
<Button @type='primary' {{on 'click' this.applyColumnSelection}} {{on 'click' dd.actions.close}}>
65+
{{t 'general.apply'}}
66+
</Button>
67+
</div>
68+
</div>
69+
{{/if}}
70+
</BasicDropdown>
71+
<div local-class='download-button-group'>
72+
{{#if @institution.linkToExternalReportsArchive}}
73+
<OsfLink
74+
data-test-link-to-reports-archive
75+
data-analytics-name='Link to archived reports'
76+
@target='_blank'
77+
@fakeButton={{true}}
78+
@href={{@institution.linkToExternalReportsArchive}}
79+
>
80+
<EmberTooltip @side='bottom'>
81+
{{t 'institutions.dashboard.download_past_reports_label'}}
82+
</EmberTooltip>
83+
<FaIcon @icon='chart-pie'/>
84+
</OsfLink>
85+
{{/if}}
86+
<div local-class='download-dropdown'>
87+
<ResponsiveDropdown @renderInPlace={{true}} @buttonStyling={{true}} as |dd| >
88+
<dd.trigger data-test-download-dropdown local-class='download-dropdown-trigger'>
89+
<FaIcon @icon='download' />
90+
</dd.trigger>
91+
<dd.content local-class='download-dropdown-content'>
92+
<Button local-class='download-option' {{on 'click' (queue this.downloadCsv dd.close)}}>
93+
{{t 'institutions.dashboard.format_labels.csv'}}
94+
</Button>
95+
<Button local-class='download-option' {{on 'click' (queue this.downloadTsv dd.close)}}>
96+
{{t 'institutions.dashboard.format_labels.tsv'}}
97+
</Button>
98+
<Button local-class='download-option' {{on 'click' (queue this.downloadJsonTable dd.close)}}>
99+
{{t 'institutions.dashboard.format_labels.json_table'}}
100+
</Button>
101+
<Button local-class='download-option' {{on 'click' (queue this.downloadJsonDirect dd.close)}}>
102+
{{t 'institutions.dashboard.format_labels.json_direct'}}
103+
</Button>
104+
</dd.content>
105+
</ResponsiveDropdown>
106+
</div>
107+
</div>
102108
</div>
103109
</div>
104110
</div>

0 commit comments

Comments
 (0)