SAK-51228 Dashboard improve ui responsiveness and layout across widgets and dropdowns #13517
Conversation
![accesslint[bot]](https://avatars.githubusercontent.com/in/1502?s=60&v=4){kind=small}
| @@ -302,7 +302,7 @@ export class SakaiTasks extends SakaiPageableElement { | |||
|
|
|||
| <div id="controls"> | |||
| <div id="filter"> | |||
| <select @change=${this.filterChanged} .value=${this._currentFilter}> | |||
| <select class="w-100 mb-1" @change=${this.filterChanged} .value=${this._currentFilter}> | |||
There was a problem hiding this comment.
Looks like this element is missing an accessible name or label. That makes it hard for people using screen readers or voice control to use the control.
| @@ -315,7 +315,7 @@ export class SakaiTasks extends SakaiPageableElement { | |||
| </select> | |||
| </div> | |||
| <div id="sort"> | |||
| <select @change=${this.sortChanged}> | |||
| <select class="w-100 mb-3" @change=${this.sortChanged}> | |||
There was a problem hiding this comment.
Looks like this element is missing an accessible name or label. That makes it hard for people using screen readers or voice control to use the control.
|
@st-manu please provide a better subject line for the commit. |
ern
changed the title
|
@ern good point. I'll change it and split it into sub Jiras |
st-manu
force-pushed
the
dashboard
branch
2 times, most recently
from
94fe5df to
3efc290
Compare
library/src/skins/default/src/sass/modules/tool/dashboard/_base.scss
Outdated
Show resolved
Hide resolved
webcomponents/tool/src/main/frontend/packages/sakai-widgets/src/SakaiDashboardWidget.js
Outdated
Show resolved
Hide resolved
|
@ern done ✅ |
| margin-bottom: 12px; | ||
| #site-filter sakai-site-picker::part(select) { | ||
| width: 100% !important; | ||
| margin-bottom: 0.25rem !important; |
There was a problem hiding this comment.
I don't understand why you're adding a margin inside the site picker component. You could just add it to the div#filter element as a top margin.
| margin-bottom: 12px; | ||
| #site-filter sakai-site-picker::part(select) { | ||
| width: 100% !important; | ||
| margin-bottom: 1rem !important; |
There was a problem hiding this comment.
Again, add this to the surrounding div, not the component.
| #site-filter { | ||
| margin-bottom: 12px; | ||
| #site-filter sakai-site-picker::part(select) { | ||
| width: 100% !important; |
There was a problem hiding this comment.
This should really go in the component itself. Add a styles block. We don't need to expose the part just for these simple stylings. Also, why is it marked as !important? What is overriding it?
|
@adrianfish I can add the margin to the div, but I need to control the width of the selector, which can't be done by just modifying the width of the div, it doesn't affect the selector at all. As it is now, for sites with long titles (which, as we've discussed, is typical in Spanish universities), the selector overflows off the screen. The current design works fine for the nightly test sites, but outside of those cases, the dashboard has poor responsive behavior in this regard. I brought up the selector because I’m not sure to what extent I can change its width to make it 100% in all the places where it’s used (I don’t know how many parts of Sakai use it). For the dashboard widgets, it significantly improves the interface, but it might break things elsewhere if changes aren't made accordingly. I'll change the !important part later. Can you confirm if I should move the width: 100% inside the selector component? |
|
@st-manu I see your logic. It makes sense to not make the actual component so opinionated. Thanks for the explanation :) |
https://sakaiproject.atlassian.net/browse/SAK-51228
Dashboard: style fixes, invisible buttons in dark mode, and element overflow
Fix element overflows and column widths in the mobile view of the dashboard. Additionally, the reorder buttons are not visible in dark mode.