Skip to content

Commit 0d5044d

Browse files
st-manust-manu
committed
SAK-51228 Dashboard improve ui responsiveness and layout across widgets and dropdowns
1 parent d99343f commit 0d5044d

File tree

13 files changed

+143
-104
lines changed

13 files changed

+143
-104
lines changed

‎library/src/skins/default/src/sass/modules/tool/dashboard/_base.scss

+43-14
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,12 @@ html {
88
--sakai-motd-message-font-size: 12px;
99
}
1010

11+
@media (max-width: 767px) {
12+
sakai-course-dashboard-template-picker {
13+
padding: 2rem;
14+
}
15+
}
16+
1117
#course-dashboard-container {
1218
padding: var(--sakai-dashboard-container-padding);
1319
background-color: var(--sakai-tool-bg-color);
@@ -16,6 +22,14 @@ html {
1622
#course-dashboard-programme {
1723
font-style: italic;
1824
font-weight: bold;
25+
font-size: small;
26+
margin: -0.5em 0 0.5em 0;
27+
}
28+
29+
@media (min-width: 992px) {
30+
.sakai-course-list {
31+
border-right: solid 1px var(--sakai-border-color);
32+
}
1933
}
2034

2135
#course-dashboard-widgets {
@@ -52,15 +66,6 @@ sakai-editor div {
5266
margin-top: 0px;
5367
}
5468

55-
#course-dashboard-l1-overview-and-widgets-block {
56-
display: flex;
57-
}
58-
59-
#course-dashboard-l1-overview-block {
60-
flex: 2;
61-
margin-right: 16px;
62-
}
63-
6469
#course-dashboard-l1-widgets {
6570
flex: 1;
6671
}
@@ -69,13 +74,37 @@ sakai-editor div {
6974
flex: 3;
7075
}
7176

72-
#course-dashboard-l3-overview-and-widgets-block {
73-
display: flex;
77+
@media (max-width: 991px) {
78+
#course-dashboard-l1-overview-and-widgets-block {
79+
display: block;
80+
}
81+
#course-dashboard-l1-overview-block {
82+
margin-bottom: 16px;
83+
}
84+
85+
#course-dashboard-l3-overview-and-widgets-block {
86+
display: block;
87+
}
88+
#course-dashboard-l3-overview-block {
89+
margin-bottom: 16px;
90+
}
7491
}
92+
@media (min-width: 992px) {
93+
#course-dashboard-l1-overview-and-widgets-block {
94+
display: flex;
95+
}
96+
#course-dashboard-l1-overview-block {
97+
flex: 2;
98+
margin-right: 16px;
99+
}
75100

76-
#course-dashboard-l3-overview-block {
77-
flex: 2;
78-
margin-right: 16px;
101+
#course-dashboard-l3-overview-and-widgets-block {
102+
display: flex;
103+
}
104+
#course-dashboard-l3-overview-block {
105+
flex: 2;
106+
margin-right: 16px;
107+
}
79108
}
80109

81110
#course-dashboard-l3-widgets {

‎library/src/skins/default/src/sass/webcomponents/course-card/_course-card.scss

+1
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,7 @@ sakai-course-card {
2222
padding: 1rem;
2323
border-top-left-radius: var(--bs-border-radius);
2424
border-top-right-radius: var(--bs-border-radius);
25+
border: solid 1px var(--sakai-border-color);
2526

2627
a {
2728
color: var(--sakai-text-color-inverse, white);

‎webcomponents/tool/src/main/frontend/packages/sakai-announcements/src/SakaiAnnouncements.js

+4-8
Original file line numberDiff line numberDiff line change
@@ -116,7 +116,7 @@ export class SakaiAnnouncements extends SakaiPageableElement {
116116
</div>
117117
` : nothing }
118118
<div id="sorting">
119-
<select aria-label="${this._i18n.announcement_sort_label}" @change=${this._sortChanged}>
119+
<select class="w-100 mb-3" aria-label="${this._i18n.announcement_sort_label}" @change=${this._sortChanged}>
120120
<option value="${EARLIEST_FIRST}">${this._i18n.earliest_first}</option>
121121
<option value="${LATEST_FIRST}">${this._i18n.latest_first}</option>
122122
<option value="${TITLE_A_TO_Z}">${this._i18n.title_a_to_z}</option>
@@ -187,17 +187,13 @@ export class SakaiAnnouncements extends SakaiPageableElement {
187187
color: var(--link-visited-color);
188188
}
189189
190-
#site-filter {
191-
margin-bottom: 12px;
190+
#site-filter sakai-site-picker::part(select) {
191+
width: 100% !important;
192+
margin-bottom: 0.25rem !important;
192193
}
193194
#filter {
194195
flex: 1;
195196
}
196-
#filter-and-sort-block {
197-
display: flex;
198-
justify-content: space-between;
199-
margin-bottom: 6px;
200-
}
201197
#sorting {
202198
margin-left: auto;
203199
}

‎webcomponents/tool/src/main/frontend/packages/sakai-calendar/src/calendar-styles.js

+5-3
Original file line numberDiff line numberDiff line change
@@ -4,11 +4,13 @@ export const calendarStyles = css`
44
.calendar-msg {
55
color: var(--infoBanner-color);
66
background-color: var(--infoBanner-bgcolor);
7-
padding: 4px;
7+
margin-bottom: 1rem !important;
8+
padding: 0.5rem !important;
89
}
910
10-
#site-filter {
11-
margin-bottom: 12px;
11+
#site-filter sakai-site-picker::part(select) {
12+
width: 100% !important;
13+
margin-bottom: 1rem !important;
1214
}
1315
1416
.calendar__navigation {

‎webcomponents/tool/src/main/frontend/packages/sakai-course-dashboard/src/SakaiCourseDashboard.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -233,7 +233,7 @@ export class SakaiCourseDashboard extends SakaiElement {
233233
return html`
234234
${this.titleBlock()}
235235
<div id="course-dashboard-l2-header-and-overview-block" class="d-sm-flex mb-4">
236-
<div id="course-dashboard-l2-header-block" class="me-3 mb-3 mb-sm-0">
236+
<div id="course-dashboard-l2-header-block" class="me-sm-3 mb-3 mb-sm-0">
237237
<sakai-course-header .site=${this.data} @image-edited=${this.imageEdited} ?editing=${this.editing}></sakai-course-header>
238238
</div>
239239
<div id="course-dashboard-l2-overview-block">

‎webcomponents/tool/src/main/frontend/packages/sakai-course-dashboard/src/SakaiCourseDashboardTemplatePicker.js

+26-11
Original file line numberDiff line numberDiff line change
@@ -75,22 +75,37 @@ export class SakaiCourseDashboardTemplatePicker extends SakaiDialogContent {
7575
static styles = [
7676
SakaiDialogContent.styles,
7777
css`
78-
#instruction {
79-
width: 745px;
80-
margin-bottom: 20px;
78+
@media (max-width: 767px) {
79+
.selected {
80+
margin-bottom: 1rem;
81+
}
82+
.thumbnail {
83+
width: 149px;
84+
height: 99px;
85+
}
8186
}
82-
83-
#template-block {
84-
display: flex;
87+
@media (min-width: 768px) {
88+
#instruction {
89+
width: 745px;
90+
}
91+
#template-block {
92+
display: flex;
93+
}
94+
#template-block div {
95+
flex: 1;
96+
}
97+
.thumbnail {
98+
width: 199px;
99+
height: 132px;
100+
}
85101
}
102+
86103
#template-block div {
87-
flex: 1;
88104
text-align: center;
105+
padding-top: 1rem;
89106
}
90-
91-
.thumbnail {
92-
width: 199px;
93-
height: 132px;
107+
#instruction {
108+
margin-bottom: 20px;
94109
}
95110
96111
.selected {

‎webcomponents/tool/src/main/frontend/packages/sakai-course-list/src/SakaiCourseList.js

+20-26
Original file line numberDiff line numberDiff line change
@@ -140,32 +140,26 @@ export class SakaiCourseList extends SakaiElement {
140140
render() {
141141

142142
return html`
143-
<div class="d-flex justify-space-between">
144-
<div class="me-1">
145-
<select aria-label="${this._i18n.course_filter_label}" @change=${this._siteFilterChanged} .value=${this._currentFilter} ?disabled=${this.sites.length === 0}>
146-
<option value="pinned">${this._i18n.all_pinned_sites}</option>
147-
<option value="projects">${this._i18n.pinned_projects}</option>
148-
<option value="courses">${this._i18n.pinned_courses}</option>
149-
<option value="active">${this._i18n.pinned_activity}</option>
150-
</select>
151-
</div>
152-
<div class="mx-1">
153-
<select id="course-list-term-filter"
154-
aria-label="${this._i18n.term_filter_label}" @change=${this._termSelected} .value=${this._currentTermFilter} ?disabled=${this._availableTerms.length === 0}>
155-
<option value="none">${this._i18n.term_filter_none_option}</option>
156-
${this._availableTerms.map(term => html`
157-
<option value="${term.id}">${term.name}</option>
158-
`)}
159-
</select>
160-
</div>
161-
<div class="ms-1">
162-
<select aria-label="${this._i18n.course_sort_label}" @change=${this._siteSortChanged} ?disabled=${this.sites.length === 0}>
163-
<option value="title_a_to_z">${this._i18n.title_a_to_z}</option>
164-
<option value="title_z_to_a">${this._i18n.title_z_to_a}</option>
165-
<option value="code_a_to_z">${this._i18n.code_a_to_z}</option>
166-
<option value="code_z_to_a">${this._i18n.code_z_to_a}</option>
167-
</select>
168-
</div>
143+
<div>
144+
<select class="w-100 mb-1" aria-label="${this._i18n.course_filter_label}" @change=${this._siteFilterChanged} .value=${this._currentFilter} ?disabled=${this.sites.length === 0}>
145+
<option value="pinned">${this._i18n.all_pinned_sites}</option>
146+
<option value="projects">${this._i18n.pinned_projects}</option>
147+
<option value="courses">${this._i18n.pinned_courses}</option>
148+
<option value="active">${this._i18n.pinned_activity}</option>
149+
</select>
150+
<select class="w-100 mb-1" id="course-list-term-filter"
151+
aria-label="${this._i18n.term_filter_label}" @change=${this._termSelected} .value=${this._currentTermFilter} ?disabled=${this._availableTerms.length === 0}>
152+
<option value="none">${this._i18n.term_filter_none_option}</option>
153+
${this._availableTerms.map(term => html`
154+
<option value="${term.id}">${term.name}</option>
155+
`)}
156+
</select>
157+
<select class="w-100" aria-label="${this._i18n.course_sort_label}" @change=${this._siteSortChanged} ?disabled=${this.sites.length === 0}>
158+
<option value="title_a_to_z">${this._i18n.title_a_to_z}</option>
159+
<option value="title_z_to_a">${this._i18n.title_z_to_a}</option>
160+
<option value="code_a_to_z">${this._i18n.code_a_to_z}</option>
161+
<option value="code_z_to_a">${this._i18n.code_z_to_a}</option>
162+
</select>
169163
</div>
170164
<div>
171165
${this.sites.length === 0 ? html`

‎webcomponents/tool/src/main/frontend/packages/sakai-forums/src/SakaiForums.js

+3-2
Original file line numberDiff line numberDiff line change
@@ -170,8 +170,9 @@ export class SakaiForums extends SakaiPageableElement {
170170
a:visited {
171171
color: var(--link-visited-color);
172172
}
173-
#site-filter {
174-
margin-bottom: 12px;
173+
#site-filter sakai-site-picker::part(select) {
174+
width: 100% !important;
175+
margin-bottom: 1rem !important;
175176
}
176177
.messages {
177178
display: grid;

‎webcomponents/tool/src/main/frontend/packages/sakai-grades/src/SakaiGrades.js

+11-9
Original file line numberDiff line numberDiff line change
@@ -124,12 +124,9 @@ export class SakaiGrades extends SakaiPageableElement {
124124
</sakai-site-picker>
125125
</div>
126126
` : nothing}
127-
${this.secret ? html `
128-
<div class="score-msg">${this._i18n.score_reveal_msg}</div>
129-
` : nothing}
130-
<div id="topbar">
127+
<div id="topbar" class="mt-0 mb-3">
131128
<div id="filter">
132-
<select @change=${this.sortChanged}
129+
<select class="w-100" @change=${this.sortChanged}
133130
title="${this._i18n.sort_tooltip}"
134131
aria-label="${this._i18n.sort_tooltip}">
135132
<option value="${NEW_LOW_TO_HIGH}">${this._i18n.sort_new_low_to_high}</option>
@@ -145,6 +142,9 @@ export class SakaiGrades extends SakaiPageableElement {
145142
</select>
146143
</div>
147144
</div>
145+
${this.secret ? html `
146+
<div class="score-msg mb-3 p-2">${this._i18n.score_reveal_msg}</div>
147+
` : nothing}
148148
149149
<div id="grades" aria-live="polite">
150150
<div class="header">${this._i18n.course_assignment}</div>
@@ -162,7 +162,7 @@ export class SakaiGrades extends SakaiPageableElement {
162162
`}
163163
</div>
164164
<div class="score cell ${i % 2 === 0 ? "even" : "odd"}${this.secret ? " blurred" : ""}" aria-hidden="${this.secret ? "true" : "false"}">
165-
${a.notGradedYet ? "-" : a.score} ${!a.notGradedYet && a.siteRole === "Instructor" ? html`${this._i18n.course_average}` : nothing}
165+
<span>${a.notGradedYet ? "-" : a.score} ${!a.notGradedYet && a.siteRole === "Instructor" ? html`${this._i18n.course_average}` : nothing}</span>
166166
</div>
167167
<div class="next cell ${i % 2 === 0 ? "even" : "odd"}">
168168
<a href="${a.url}"
@@ -208,8 +208,9 @@ export class SakaiGrades extends SakaiPageableElement {
208208
text-align: right;
209209
}
210210
211-
#site-filter {
212-
margin-bottom: 12px;
211+
#site-filter sakai-site-picker::part(select) {
212+
width: 100% !important;
213+
margin-bottom: 0.25rem !important;
213214
}
214215
215216
#grades {
@@ -250,6 +251,7 @@ export class SakaiGrades extends SakaiPageableElement {
250251
text-align: center;
251252
color: red;
252253
background-color: var(--sakai-background-color-2);
254+
border-radius: 4px;
253255
}
254256
.even {
255257
background-color: var(--sakai-table-even-color);
@@ -259,7 +261,7 @@ export class SakaiGrades extends SakaiPageableElement {
259261
justify-content: right;
260262
align-items: center;
261263
}
262-
.blurred {
264+
.blurred span {
263265
filter: blur(3px);
264266
}
265267
`,

‎webcomponents/tool/src/main/frontend/packages/sakai-home-dashboard/src/SakaiHomeDashboard.js

+13-13
Original file line numberDiff line numberDiff line change
@@ -105,8 +105,8 @@ export class SakaiHomeDashboard extends SakaiElement {
105105
return html`
106106
107107
<div>
108-
<div class="d-lg-flex flex-wrap align-items-center justify-content-between">
109-
<div class="fs-2">${this._i18n.welcome} ${this._data.givenName}</div>
108+
<div class="d-lg-flex flex-wrap align-items-center justify-content-between mb-4">
109+
<h2 class="my-2">${this._i18n.welcome} ${this._data.givenName}</h2>
110110
<div class="d-flex mb-2 mb-lg-0">
111111
${this._editing ? html`
112112
<div class="me-1">
@@ -116,22 +116,22 @@ export class SakaiHomeDashboard extends SakaiElement {
116116
<sakai-button @click=${this.cancel} title="${this._i18n.cancel_tooltip}" aria-label="${this._i18n.cancel_tooltip}">${this._i18n.cancel}</sakai-button>
117117
</div>
118118
` : html`
119+
${this._data.worksiteSetupUrl ? html`
120+
<div class="me-1">
121+
<sakai-button href="${this._data.worksiteSetupUrl}" title="${this._i18n.worksite_setup_tooltip}" aria-label="${this._i18n.worksite_setup_tooltip}">
122+
<div class="d-flex justify-content-between text-center">
123+
<div><sakai-icon type="add" size="small" class="me-3"></sakai-icon></div>
124+
<div>${this._i18n.worksite_setup}</div>
125+
</div>
126+
</sakai-button>
127+
</div>
128+
` : nothing}
119129
<div>
120130
<sakai-button slot="invoker" @click=${this.edit} title="${this._i18n.edit_tooltip}" arial-label="${this._i18n.edit_tooltip}">${this._i18n.edit}</sakai-button>
121131
</div>
122132
`}
123133
</div>
124134
</div>
125-
${this._data.worksiteSetupUrl ? html`
126-
<div class="d-flex justify-content-end mt-4">
127-
<sakai-button href="${this._data.worksiteSetupUrl}" title="${this._i18n.worksite_setup_tooltip}" aria-label="${this._i18n.worksite_setup_tooltip}">
128-
<div class="d-flex justify-content-between text-center">
129-
<div><sakai-icon type="add" size="small" class="me-3"></sakai-icon></div>
130-
<div>${this._i18n.worksite_setup}</div>
131-
</div>
132-
</sakai-button>
133-
</div>
134-
` : nothing}
135135
${this._data.motd ? html`
136136
<div class="p-3 mt-2 mb-3 border border-1 rounded-1 fs-5 fw-normal">
137137
<div class="d-flex mb-4 align-items-center" @click=${this._toggleMotd}>
@@ -149,7 +149,7 @@ export class SakaiHomeDashboard extends SakaiElement {
149149
` : nothing}
150150
<div class="d-lg-flex">
151151
${this.showSites ? html`
152-
<div class="me-lg-3 mb-4 mb-lg-0">
152+
<div class="me-lg-3 pe-lg-3 mb-4 mb-lg-0 sakai-course-list">
153153
<sakai-course-list user-id="${this.userId}"></sakai-course-list>
154154
</div>
155155
` : nothing}

‎webcomponents/tool/src/main/frontend/packages/sakai-site-picker/src/SakaiSitePicker.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -63,7 +63,7 @@ export class SakaiSitePicker extends SakaiShadowElement {
6363
render() {
6464

6565
return html`
66-
<select aria-label="${this._i18n.site_selector_label}" @change=${this._siteChanged} ?multiple=${this.multiple}>
66+
<select part="select" aria-label="${this._i18n.site_selector_label}" @change=${this._siteChanged} ?multiple=${this.multiple}>
6767
<option value="all" ?selected=${!this.selectedSites}>${this._i18n.all_pinned_sites}</option>
6868
${this.sites.map(s => html`
6969
<option value="${s.siteId}" ?selected=${this.siteId === s.siteId || (this.selectedSites?.includes(s.siteId))}>${s.title}</option>

0 commit comments

Comments
 (0)