[ENG-6191] Improve Styling and Add Total Users Label #2327
Conversation
Johnetordoff
changed the base branch from
develop
to
feature/insti-dash-improv
Johnetordoff
force-pushed
the
improve-mobile-styling-inst-dashboard
branch
from
d4ff7f7
to
6ff2fdf
Compare
Johnetordoff
force-pushed
the
improve-mobile-styling-inst-dashboard
branch
from
6ff2fdf
to
ae93ff2
Compare
Johnetordoff
changed the title
| <span local-class='total-users-count'> | ||
| {{@totalUsers}} | ||
| </span> | ||
| <label>{{t 'institutions.dashboard.users_list.total_users'}}</label> |
There was a problem hiding this comment.
<label> feels a bit inappropriate to use here, as there is no <input> that this is labelling. Could likely just be another span I think
| @@ -142,6 +142,11 @@ | |||
| margin-bottom: 10px; | |||
| } | |||
|
|
|||
| .dropdown-trigger { | |||
| padding: 9px; | |||
| color: #337ab7; | |||
There was a problem hiding this comment.
| color: #337ab7; | |
| color: $color-select; |
…ForOpenScience/ember-osf-web into improve-mobile-styling-inst-dashboard * 'feature/insti-dash-improv' of https://github.com/CenterForOpenScience/ember-osf-web: Removed old tests Fixed some api issues Added a new test and removed an old one Added a new total count kpi # Conflicts: # translations/en-us.yml
|
@Johnetordoff remember to close the hide/add dropdown on clicking |
…ForOpenScience/ember-osf-web into improve-mobile-styling-inst-dashboard * 'feature/insti-dash-improv' of https://github.com/CenterForOpenScience/ember-osf-web: Added a test with test-data elements Updates to add the project total # Conflicts: # translations/en-us.yml
Johnetordoff
force-pushed
the
improve-mobile-styling-inst-dashboard
branch
3 times, most recently
from
bb31bd3
to
ae7adb0
Compare
Johnetordoff
force-pushed
the
improve-mobile-styling-inst-dashboard
branch
from
ae7adb0
to
e3e1c76
Compare
| } | ||
|
|
||
| /* Add media query for mobile devices */ | ||
| @media (max-width: 1000px) { |
There was a problem hiding this comment.
We've tried to move away from hard-coding pixel values into our CSS. Instead, in the template you could use our is-mobile helper
<div local-class=table-wrapper {{if (is-mobile 'mobile'}}>
then change this line to be .mobile and adjust the nested selectors as needed
There was a problem hiding this comment.
Actually, I think this scrolling behavior and no-wrap on the text is something we may want regardless of mobile or not. Let me doublecheck with product though
| .table table { | ||
| min-width: 1000px; /* Set the table's width to be wider than the viewport */ |
There was a problem hiding this comment.
I worry about setting an explicit min-width here, as the table may not need the full 1000px as users can hide columns and whatnot... Can this be implemented without this hard-coded min-width?
| @@ -51,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}}> | |||
There was a problem hiding this comment.
Just for future reference, if you want to have a click even do multiple actions in sequence, you can use either the pipe or queue helper like
{{on 'click' (queue this.firstAction this.secondAction)}}
Docs for those can be found here: https://github.com/DockYard/ember-composable-helpers?tab=readme-ov-file#queue
Johnetordoff
merged commit 25d34a4
into
CenterForOpenScience:feature/insti-dash-improv
Purpose
Standardize user tab look and make work for mobile, put in total users label.
Summary of Changes
Screenshot(s)
Side Effects
QA Notes