Skip to content

Commit 6a75029

Browse files
st-manust-manu
committed
SAK-51228 Dashboard: several fixes and improvements
1 parent 69b82ca commit 6a75029

File tree

15 files changed

+166
-97
lines changed

15 files changed

+166
-97
lines changed

Diff for: ‎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 {

Diff for: ‎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);

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

+4-8
Original file line numberDiff line numberDiff line change
@@ -127,7 +127,7 @@ export class SakaiAnnouncements extends SakaiPageableElement {
127127
</div>
128128
` : nothing }
129129
<div id="sorting">
130-
<select aria-label="${this._i18n.announcement_sort_label}" @change=${this._sortChanged}>
130+
<select class="w-100 mb-3" aria-label="${this._i18n.announcement_sort_label}" @change=${this._sortChanged}>
131131
<option value="${EARLIEST_FIRST}">${this._i18n.earliest_first}</option>
132132
<option value="${LATEST_FIRST}">${this._i18n.latest_first}</option>
133133
<option value="${TITLE_A_TO_Z}">${this._i18n.title_a_to_z}</option>
@@ -198,17 +198,13 @@ export class SakaiAnnouncements extends SakaiPageableElement {
198198
color: var(--link-visited-color);
199199
}
200200
201-
#site-filter {
202-
margin-bottom: 12px;
201+
#site-filter sakai-site-picker::part(select) {
202+
width: 100% !important;
203+
margin-bottom: 0.25rem !important;
203204
}
204205
#filter {
205206
flex: 1;
206207
}
207-
#filter-and-sort-block {
208-
display: flex;
209-
justify-content: space-between;
210-
margin-bottom: 6px;
211-
}
212208
#sorting {
213209
margin-left: auto;
214210
}

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

+3-2
Original file line numberDiff line numberDiff line change
@@ -7,8 +7,9 @@ export const calendarStyles = css`
77
padding: 4px;
88
}
99
10-
#site-filter {
11-
margin-bottom: 12px;
10+
#site-filter sakai-site-picker::part(select) {
11+
width: 100% !important;
12+
margin-bottom: 1rem !important;
1213
}
1314
1415
.calendar__navigation {

Diff for: ‎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">

Diff for: ‎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 {

Diff for: ‎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`

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

+3-2
Original file line numberDiff line numberDiff line change
@@ -180,8 +180,9 @@ export class SakaiForums extends SakaiPageableElement {
180180
a:visited {
181181
color: var(--link-visited-color);
182182
}
183-
#site-filter {
184-
margin-bottom: 12px;
183+
#site-filter sakai-site-picker::part(select) {
184+
width: 100% !important;
185+
margin-bottom: 1rem !important;
185186
}
186187
.messages {
187188
display: grid;

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

+3-2
Original file line numberDiff line numberDiff line change
@@ -218,8 +218,9 @@ export class SakaiGrades extends SakaiPageableElement {
218218
text-align: right;
219219
}
220220
221-
#site-filter {
222-
margin-bottom: 12px;
221+
#site-filter sakai-site-picker::part(select) {
222+
width: 100% !important;
223+
margin-bottom: 1rem !important;
223224
}
224225
225226
#grades {

Diff for: ‎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}

Diff for: ‎webcomponents/tool/src/main/frontend/packages/sakai-pageable-element/src/SakaiPageableElement.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -86,7 +86,7 @@ export class SakaiPageableElement extends SakaiShadowElement {
8686
return html`
8787
<div id="wrapper">
8888
<div id="content">${this.content()}</div>
89-
${this.showPager ? html`
89+
${this.showPager && this.count > 1 ? html`
9090
<div id="pager">
9191
<sakai-pager count="${this.count}" current="1" @page-selected=${this.pageClicked}></sakai-pager>
9292
</div>

Diff for: ‎webcomponents/tool/src/main/frontend/packages/sakai-pager/src/SakaiPager.js

+32
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import { LionPagination } from "@lion/pagination";
2+
import { css } from "lit";
23

34
export class SakaiPager extends LionPagination {
45

@@ -12,4 +13,35 @@ export class SakaiPager extends LionPagination {
1213
this.dispatchEvent(new CustomEvent("page-selected", { detail: { page: this.current }, bubbles: true }));
1314
});
1415
}
16+
17+
static get styles() {
18+
return [
19+
super.styles,
20+
css`
21+
button {
22+
background-color: var(--sakai-background-color-1);
23+
color: var(--sakai-text-color-2);
24+
border: solid 1px var(--sakai-border-color);
25+
padding: 8px 12px;
26+
border-radius: 4px;
27+
cursor: pointer;
28+
}
29+
30+
button:hover {
31+
font-weight: bold;
32+
}
33+
34+
button:disabled {
35+
background-color: var(--button-disabled-border-color);
36+
cursor: not-allowed;
37+
}
38+
39+
button[aria-current="true"] {
40+
background-color: var(--button-primary-background);
41+
color: var(--button-primary-active-text-color);
42+
font-weight: bold;
43+
}
44+
`,
45+
];
46+
}
1547
}

Diff for: ‎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)