Skip to content

Commit aad9899

Browse files
crazyservercrazyserver
committed
MOBILE-4442 course: Update styles on module cards and sections
1 parent 1527e31 commit aad9899

File tree

8 files changed

+94
-58
lines changed

8 files changed

+94
-58
lines changed

‎src/addons/messages/tests/behat/snapshots/test-basic-usage-of-messages-in-app-view-recent-conversations-and-contacts_22.png‎

1.04 KB
Loading

‎src/core/features/course/components/course-section/course-section.scss‎

Lines changed: 17 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,14 @@
11
:host {
22
.course-section {
3-
--inner-padding-end: 12px;
3+
--inner-padding-end: var(--mdl-spacing-3);
44
}
55

66
&.collapsible {
77
.core-course-module-list-wrapper {
88
border: var(--ion-card-border-width) solid var(--ion-card-border-color);
99
border-radius: var(--ion-card-radius);
10-
margin: 8px 4px;
11-
width: calc(100% - 8px);
10+
margin: var(--mdl-spacing-4);
11+
width: calc(100% - var(--mdl-spacing-8));
1212

1313
ion-card {
1414
--ion-card-background: transparent;
@@ -19,4 +19,18 @@
1919
}
2020
}
2121
}
22+
23+
core-course-module:has( + core-course-section) {
24+
--activity-border: 0px;
25+
--card-padding-bottom: 0px;
26+
}
27+
28+
core-course-module:last-child {
29+
--activity-border: 0px;
30+
--card-padding-bottom: 0px;
31+
}
32+
33+
core-course-module:first-child ::ng-deep ion-card {
34+
margin-top: 0px;
35+
}
2236
}

‎src/core/features/course/components/module/core-course-module.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -81,7 +81,7 @@
8181
contextLevel="module" [contextInstanceId]="module.id" [courseId]="module.course" />
8282

8383
<!-- Availability info -->
84-
<div *ngIf="showAvailability && module.availabilityinfo" class="core-module-availabilityinfo">
84+
<div *ngIf="showAvailability && module.availabilityinfo" class="core-module-availabilityinfo colored-box-with-icon">
8585
<ion-icon name="fas-lock" [attr.aria-label]="'core.restricted' | translate" />
8686
<core-format-text [text]="module.availabilityinfo" contextLevel="module" [contextInstanceId]="module.id"
8787
[courseId]="module.course" />
@@ -94,7 +94,7 @@
9494

9595
</ion-item>
9696

97-
<div class="core-course-last-module-viewed" *ngIf="isLastViewed">
97+
<div class="core-course-last-module-viewed colored-box-with-icon" *ngIf="isLastViewed">
9898
<ion-icon name="fas-eye" aria-hidden="true" />
9999
{{ 'core.course.lastaccessedactivity' | translate }}
100100
</div>

‎src/core/features/course/components/module/module.scss‎

Lines changed: 57 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -1,29 +1,32 @@
11
@use "theme/globals" as *;
22

33
:host {
4-
--horizontal-margin: 12px;
5-
--vertical-margin: 12px;
6-
--card-padding: 16px;
4+
--horizontal-spacing: var(--mdl-spacing-4);
5+
--vertical-spacing: var(--mdl-spacing-2);
6+
--colored-box-padding: var(--mdl-spacing-2);
77
--card-border-width: 0px;
88
--card-radius: 0px;
99
--card-background: transparent;
10+
--activity-border: 2px solid var(--stroke);
11+
--card-padding-bottom: var(--vertical-spacing);
1012

1113
ion-card {
12-
margin: var(--vertical-margin) var(--horizontal-margin);
14+
margin: var(--vertical-spacing) var(--horizontal-spacing);
15+
padding: 0px;
1316
--ion-card-border-width: var(--card-border-width);
1417
--ion-card-radius: var(--card-radius);
1518
--ion-card-background: var(--card-background);
19+
padding-bottom: var(--card-padding-bottom);
20+
border-bottom: var(--activity-border);
1621
}
1722

1823
ion-item {
19-
--padding-start: var(--card-padding);
20-
--inner-padding-end: var(--card-padding);
24+
--padding-start: 0px;
25+
--inner-padding-end: 0px;
26+
--background: transparent;
2127
ion-label {
22-
margin-top: var(--card-padding);
23-
margin-bottom: var(--card-padding);
24-
&>:last-child {
25-
margin-bottom: 0px;
26-
}
28+
margin-top: 0px;
29+
margin-bottom: 0px;
2730
}
2831
}
2932

@@ -33,8 +36,6 @@
3336
flex-direction: row;
3437

3538
core-mod-icon {
36-
margin-top: 0px;
37-
margin-bottom: 0px;
3839
--module-icon-padding: 0px;
3940
--module-legacy-icon-padding: 4px;
4041
--module-icon-radius: var(--mdl-shape-borderRadius-xs);
@@ -46,7 +47,7 @@
4647
.activity-title {
4748
flex-grow: 1;
4849
align-self: center;
49-
@include margin-horizontal(null, var(--card-padding));
50+
@include margin-horizontal(null, var(--horizontal-spacing));
5051

5152
.item-heading ion-icon {
5253
@include margin-horizontal(8px, null);
@@ -56,7 +57,6 @@
5657

5758
.core-module-buttons {
5859
align-self: self-start;
59-
margin: 0;
6060

6161
display: flex;
6262
flex-flow: row;
@@ -86,6 +86,13 @@
8686
}
8787
}
8888

89+
core-mod-icon,
90+
.activity-title,
91+
.core-module-buttons {
92+
margin-top: var(--vertical-spacing);
93+
margin-bottom: var(--vertical-spacing);
94+
}
95+
8996
.core-module-additional-info {
9097
display: flex;
9198
align-items: center;
@@ -106,7 +113,7 @@
106113
}
107114

108115
core-course-module-completion {
109-
--margin: 8px 0px;
116+
--margin: var(--vertical-spacing) 0px;
110117
}
111118

112119
.activity-dates {
@@ -121,36 +128,31 @@
121128

122129
.activity-description-availabilityinfo,
123130
.activity-extrabadges {
124-
margin-top: 8px;
125-
padding-top: 8px;
131+
margin-top: var(--vertical-spacing);
132+
margin-bottom: var(--vertical-spacing);
133+
}
134+
135+
.activity-extrabadges,
136+
.core-module-description {
126137
border-top: 1px solid var(--stroke);
138+
display: block;
127139
}
128140

129141
.activity-extrabadges {
130142
font: var(--mdl-typography-body-font-md);
131143
color: var(--medium);
132144
}
133145

134-
.activity-description-availabilityinfo {
135-
.core-module-availabilityinfo {
136-
background: var(--gray-300);
137-
border-radius: var(--mdl-shape-borderRadius-sm);
138-
margin-top: 8px;
139-
padding: 8px;
140-
font-size: var(--mdl-typography-body-fontSize-md);
141-
line-height: 120%;
142-
143-
::ng-deep ul {
144-
margin-top: 8px;
145-
margin-bottom: 0px;
146+
.activity-description-availabilityinfo .core-module-availabilityinfo {
147+
background: var(--gray-300);
148+
font: var(--mdl-typography-label-font-lg);
146149

147-
li {
148-
margin-bottom: 4px;
149-
}
150-
}
150+
::ng-deep ul {
151+
margin-top: 8px;
152+
margin-bottom: 0px;
151153

152-
ion-icon {
153-
@include margin-horizontal(null, 8px);
154+
li {
155+
margin-bottom: 4px;
154156
}
155157
}
156158
}
@@ -162,13 +164,25 @@
162164
clear: both;
163165
}
164166

165-
.core-course-last-module-viewed {
166-
padding: 8px 12px;
167-
color: var(--subdued-text-color);
168-
border-top: 1px solid var(--stroke);
167+
.colored-box-with-icon {
168+
margin-top: var(--vertical-spacing);
169+
margin-bottom: var(--vertical-spacing);
170+
171+
border: 0px;
172+
padding: var(--colored-box-padding);
173+
border-radius: var(--mdl-shape-borderRadius-sm);
169174

170175
ion-icon {
171-
margin-right: 4px;
176+
@include margin-horizontal(null, var(--mdl-spacing-2));
177+
margin-top: auto;
178+
margin-bottom: auto;
179+
}
180+
181+
&.core-course-last-module-viewed {
182+
display: flex;
183+
background-color: var(--info-tint);
184+
color: var(--info-shade);
185+
font: var(--mdl-typography-label-font-md);
172186
}
173187
}
174188

@@ -185,17 +199,14 @@
185199
}
186200

187201
&.indented ion-card {
188-
@include margin-horizontal(calc(var(--horizontal-margin) + 1rem), null);
189-
}
190-
191-
& + ::ng-deep core-course-module ion-card {
192-
border-top: 1px solid var(--ion-card-border-color);
202+
@include margin-horizontal(calc(var(--horizontal-spacing) + 1rem), null);
193203
}
194204

195205
// Hide download folder icon meanwhile MOBILE-4147 is not solved
196206
core-format-text.core-module-description ::ng-deep .description-inner .navitem {
197207
display: none;
198208
}
209+
199210
}
200211

201212

‎src/core/features/course/tests/behat/snapshots/test-basic-usage-of-one-course-in-app-view-course-contents_53.png‎

4.24 KB
Loading

‎src/core/features/course/tests/behat/snapshots/test-basic-usage-of-one-course-in-app-view-course-contents_57.png‎

4.66 KB
Loading

‎src/theme/components/ion-accordion.scss‎

Lines changed: 12 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,16 @@
11
ion-accordion {
22
.ion-accordion-toggle-icon[slot="start"] {
3-
@include margin-horizontal(null, var(--mdl-spacing-4));
3+
@include margin-horizontal(null, var(--mdl-spacing-2));
4+
background-color: var(--gray-100);
5+
border-radius: 50%;
6+
padding: var(--mdl-spacing-1);
7+
}
8+
}
9+
10+
:root.dark {
11+
ion-accordion {
12+
.ion-accordion-toggle-icon[slot="start"] {
13+
background-color: var(--gray-800);
14+
}
415
}
516
}

‎src/theme/helpers/custom.mixins.scss‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -310,15 +310,15 @@
310310
display: block;
311311

312312
ion-card {
313-
--vertical-margin: 10px;
314-
--horizontal-margin: 10px;
313+
--vertical-spacing: 10px;
314+
--horizontal-spacing: 10px;
315315

316-
width: calc(100% - var(--horizontal-margin) - var(--horizontal-margin));
317-
height: calc(100% - var(--vertical-margin) - var(--vertical-margin));
318-
margin: var(--vertical-margin) var(--horizontal-margin);
316+
width: calc(100% - var(--horizontal-spacing) - var(--horizontal-spacing));
317+
height: calc(100% - var(--vertical-spacing) - var(--vertical-spacing));
318+
margin: var(--vertical-spacing) var(--horizontal-spacing);
319319

320320
@media (max-width: 360px) {
321-
--horizontal-margin: 6px;
321+
--horizontal-spacing: 6px;
322322
}
323323
}
324324
}

0 commit comments

Comments
 (0)