diff --git a/src/addons/messages/tests/behat/snapshots/test-basic-usage-of-messages-in-app-view-recent-conversations-and-contacts_22.png b/src/addons/messages/tests/behat/snapshots/test-basic-usage-of-messages-in-app-view-recent-conversations-and-contacts_22.png index e85b3bcfc..cb8d3a916 100644 Binary files a/src/addons/messages/tests/behat/snapshots/test-basic-usage-of-messages-in-app-view-recent-conversations-and-contacts_22.png and b/src/addons/messages/tests/behat/snapshots/test-basic-usage-of-messages-in-app-view-recent-conversations-and-contacts_22.png differ diff --git a/src/core/features/course/components/course-section/course-section.scss b/src/core/features/course/components/course-section/course-section.scss index 70995dab5..7a09f4760 100644 --- a/src/core/features/course/components/course-section/course-section.scss +++ b/src/core/features/course/components/course-section/course-section.scss @@ -1,14 +1,14 @@ :host { .course-section { - --inner-padding-end: 12px; + --inner-padding-end: var(--mdl-spacing-3); } &.collapsible { .core-course-module-list-wrapper { border: var(--ion-card-border-width) solid var(--ion-card-border-color); border-radius: var(--ion-card-radius); - margin: 8px 4px; - width: calc(100% - 8px); + margin: var(--mdl-spacing-4); + width: calc(100% - var(--mdl-spacing-8)); ion-card { --ion-card-background: transparent; @@ -19,4 +19,18 @@ } } } + + core-course-module:has( + core-course-section) { + --activity-border: 0px; + --card-padding-bottom: 0px; + } + + core-course-module:last-child { + --activity-border: 0px; + --card-padding-bottom: 0px; + } + + core-course-module:first-child ::ng-deep ion-card { + margin-top: 0px; + } } diff --git a/src/core/features/course/components/module/core-course-module.html b/src/core/features/course/components/module/core-course-module.html index f11390d14..52a8bdf07 100644 --- a/src/core/features/course/components/module/core-course-module.html +++ b/src/core/features/course/components/module/core-course-module.html @@ -81,7 +81,7 @@ contextLevel="module" [contextInstanceId]="module.id" [courseId]="module.course" /> -
+
@@ -94,7 +94,7 @@ -
+
diff --git a/src/core/features/course/components/module/module.scss b/src/core/features/course/components/module/module.scss index 69736bbd9..a4e47748a 100644 --- a/src/core/features/course/components/module/module.scss +++ b/src/core/features/course/components/module/module.scss @@ -1,29 +1,32 @@ @use "theme/globals" as *; :host { - --horizontal-margin: 12px; - --vertical-margin: 12px; - --card-padding: 16px; + --horizontal-spacing: var(--mdl-spacing-4); + --vertical-spacing: var(--mdl-spacing-2); + --colored-box-padding: var(--mdl-spacing-2); --card-border-width: 0px; --card-radius: 0px; --card-background: transparent; + --activity-border: 2px solid var(--stroke); + --card-padding-bottom: var(--vertical-spacing); ion-card { - margin: var(--vertical-margin) var(--horizontal-margin); + margin: var(--vertical-spacing) var(--horizontal-spacing); + padding: 0px; --ion-card-border-width: var(--card-border-width); --ion-card-radius: var(--card-radius); --ion-card-background: var(--card-background); + padding-bottom: var(--card-padding-bottom); + border-bottom: var(--activity-border); } ion-item { - --padding-start: var(--card-padding); - --inner-padding-end: var(--card-padding); + --padding-start: 0px; + --inner-padding-end: 0px; + --background: transparent; ion-label { - margin-top: var(--card-padding); - margin-bottom: var(--card-padding); - &>:last-child { - margin-bottom: 0px; - } + margin-top: 0px; + margin-bottom: 0px; } } @@ -33,8 +36,6 @@ flex-direction: row; core-mod-icon { - margin-top: 0px; - margin-bottom: 0px; --module-icon-padding: 0px; --module-legacy-icon-padding: 4px; --module-icon-radius: var(--mdl-shape-borderRadius-xs); @@ -46,7 +47,7 @@ .activity-title { flex-grow: 1; align-self: center; - @include margin-horizontal(null, var(--card-padding)); + @include margin-horizontal(null, var(--horizontal-spacing)); .item-heading ion-icon { @include margin-horizontal(8px, null); @@ -56,7 +57,6 @@ .core-module-buttons { align-self: self-start; - margin: 0; display: flex; flex-flow: row; @@ -86,6 +86,13 @@ } } + core-mod-icon, + .activity-title, + .core-module-buttons { + margin-top: var(--vertical-spacing); + margin-bottom: var(--vertical-spacing); + } + .core-module-additional-info { display: flex; align-items: center; @@ -106,7 +113,7 @@ } core-course-module-completion { - --margin: 8px 0px; + --margin: var(--vertical-spacing) 0px; } .activity-dates { @@ -121,9 +128,14 @@ .activity-description-availabilityinfo, .activity-extrabadges { - margin-top: 8px; - padding-top: 8px; + margin-top: var(--vertical-spacing); + margin-bottom: var(--vertical-spacing); + } + + .activity-extrabadges, + .core-module-description { border-top: 1px solid var(--stroke); + display: block; } .activity-extrabadges { @@ -131,26 +143,16 @@ color: var(--medium); } - .activity-description-availabilityinfo { - .core-module-availabilityinfo { - background: var(--gray-300); - border-radius: var(--mdl-shape-borderRadius-sm); + .activity-description-availabilityinfo .core-module-availabilityinfo { + background: var(--gray-300); + font: var(--mdl-typography-label-font-lg); + + ::ng-deep ul { margin-top: 8px; - padding: 8px; - font-size: var(--mdl-typography-body-fontSize-md); - line-height: 120%; + margin-bottom: 0px; - ::ng-deep ul { - margin-top: 8px; - margin-bottom: 0px; - - li { - margin-bottom: 4px; - } - } - - ion-icon { - @include margin-horizontal(null, 8px); + li { + margin-bottom: 4px; } } } @@ -162,13 +164,25 @@ clear: both; } - .core-course-last-module-viewed { - padding: 8px 12px; - color: var(--subdued-text-color); - border-top: 1px solid var(--stroke); + .colored-box-with-icon { + margin-top: var(--vertical-spacing); + margin-bottom: var(--vertical-spacing); + + border: 0px; + padding: var(--colored-box-padding); + border-radius: var(--mdl-shape-borderRadius-sm); ion-icon { - margin-right: 4px; + @include margin-horizontal(null, var(--mdl-spacing-2)); + margin-top: auto; + margin-bottom: auto; + } + + &.core-course-last-module-viewed { + display: flex; + background-color: var(--info-tint); + color: var(--info-shade); + font: var(--mdl-typography-label-font-md); } } @@ -185,17 +199,14 @@ } &.indented ion-card { - @include margin-horizontal(calc(var(--horizontal-margin) + 1rem), null); - } - - & + ::ng-deep core-course-module ion-card { - border-top: 1px solid var(--ion-card-border-color); + @include margin-horizontal(calc(var(--horizontal-spacing) + 1rem), null); } // Hide download folder icon meanwhile MOBILE-4147 is not solved core-format-text.core-module-description ::ng-deep .description-inner .navitem { display: none; } + } diff --git a/src/core/features/course/tests/behat/snapshots/test-basic-usage-of-one-course-in-app-view-course-contents_53.png b/src/core/features/course/tests/behat/snapshots/test-basic-usage-of-one-course-in-app-view-course-contents_53.png index 18fa3d122..5218e6775 100644 Binary files a/src/core/features/course/tests/behat/snapshots/test-basic-usage-of-one-course-in-app-view-course-contents_53.png and b/src/core/features/course/tests/behat/snapshots/test-basic-usage-of-one-course-in-app-view-course-contents_53.png differ diff --git a/src/core/features/course/tests/behat/snapshots/test-basic-usage-of-one-course-in-app-view-course-contents_57.png b/src/core/features/course/tests/behat/snapshots/test-basic-usage-of-one-course-in-app-view-course-contents_57.png index 22518cc73..dd66e5285 100644 Binary files a/src/core/features/course/tests/behat/snapshots/test-basic-usage-of-one-course-in-app-view-course-contents_57.png and b/src/core/features/course/tests/behat/snapshots/test-basic-usage-of-one-course-in-app-view-course-contents_57.png differ diff --git a/src/theme/components/ion-accordion.scss b/src/theme/components/ion-accordion.scss index a98b14b0e..843df5458 100644 --- a/src/theme/components/ion-accordion.scss +++ b/src/theme/components/ion-accordion.scss @@ -1,5 +1,16 @@ ion-accordion { .ion-accordion-toggle-icon[slot="start"] { - @include margin-horizontal(null, var(--mdl-spacing-4)); + @include margin-horizontal(null, var(--mdl-spacing-2)); + background-color: var(--gray-100); + border-radius: 50%; + padding: var(--mdl-spacing-1); + } +} + +:root.dark { + ion-accordion { + .ion-accordion-toggle-icon[slot="start"] { + background-color: var(--gray-800); + } } } diff --git a/src/theme/helpers/custom.mixins.scss b/src/theme/helpers/custom.mixins.scss index a14d152f8..d641faaf9 100644 --- a/src/theme/helpers/custom.mixins.scss +++ b/src/theme/helpers/custom.mixins.scss @@ -310,15 +310,15 @@ display: block; ion-card { - --vertical-margin: 10px; - --horizontal-margin: 10px; + --vertical-spacing: 10px; + --horizontal-spacing: 10px; - width: calc(100% - var(--horizontal-margin) - var(--horizontal-margin)); - height: calc(100% - var(--vertical-margin) - var(--vertical-margin)); - margin: var(--vertical-margin) var(--horizontal-margin); + width: calc(100% - var(--horizontal-spacing) - var(--horizontal-spacing)); + height: calc(100% - var(--vertical-spacing) - var(--vertical-spacing)); + margin: var(--vertical-spacing) var(--horizontal-spacing); @media (max-width: 360px) { - --horizontal-margin: 6px; + --horizontal-spacing: 6px; } } }