Skip to content

Commit

Permalink
MOBILE-4442 course: Update styles on module cards and sections
Browse files Browse the repository at this point in the history
  • Loading branch information
@crazyserver
crazyserver committed Sep 18, 2024
1 parent c789779 commit 7d95942
Show file tree
Hide file tree
Showing 8 changed files with 94 additions and 58 deletions.
Binary file modified ...st-basic-usage-of-messages-in-app-view-recent-conversations-and-contacts_22.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
20 changes: 17 additions & 3 deletions src/core/features/course/components/course-section/course-section.scss
View file
Original file line number Diff line number Diff line change
@@ -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;
Expand All @@ -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;
}
}
4 changes: 2 additions & 2 deletions src/core/features/course/components/module/core-course-module.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -81,7 +81,7 @@
contextLevel="module" [contextInstanceId]="module.id" [courseId]="module.course" />

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

</ion-item>

<div class="core-course-last-module-viewed" *ngIf="isLastViewed">
<div class="core-course-last-module-viewed colored-box-with-icon" *ngIf="isLastViewed">
<ion-icon name="fas-eye" aria-hidden="true" />
{{ 'core.course.lastaccessedactivity' | translate }}
</div>
Expand Down
103 changes: 57 additions & 46 deletions src/core/features/course/components/module/module.scss
View file
Original file line number Diff line number Diff line change
@@ -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(--gray-500);
--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;
}
}

Expand All @@ -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);
Expand All @@ -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);
Expand All @@ -56,7 +57,6 @@

.core-module-buttons {
align-self: self-start;
margin: 0;

display: flex;
flex-flow: row;
Expand Down Expand Up @@ -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;
Expand All @@ -106,7 +113,7 @@
}

core-course-module-completion {
--margin: 8px 0px;
--margin: var(--vertical-spacing) 0px;
}

.activity-dates {
Expand All @@ -121,36 +128,31 @@

.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 {
font: var(--mdl-typography-body-font-md);
color: var(--medium);
}

.activity-description-availabilityinfo {
.core-module-availabilityinfo {
background: var(--gray-300);
border-radius: var(--mdl-shape-borderRadius-sm);
margin-top: 8px;
padding: 8px;
font-size: var(--mdl-typography-body-fontSize-md);
line-height: 120%;

::ng-deep ul {
margin-top: 8px;
margin-bottom: 0px;
.activity-description-availabilityinfo .core-module-availabilityinfo {
background: var(--gray-300);
font: var(--mdl-typography-label-font-lg);

li {
margin-bottom: 4px;
}
}
::ng-deep ul {
margin-top: 8px;
margin-bottom: 0px;

ion-icon {
@include margin-horizontal(null, 8px);
li {
margin-bottom: 4px;
}
}
}
Expand All @@ -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);
}
}

Expand All @@ -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;
}

}


Expand Down
Binary file modified ...hat/snapshots/test-basic-usage-of-one-course-in-app-view-course-contents_53.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified ...hat/snapshots/test-basic-usage-of-one-course-in-app-view-course-contents_57.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
13 changes: 12 additions & 1 deletion src/theme/components/ion-accordion.scss
View file
Original file line number Diff line number Diff line change
@@ -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);
}
}
}
12 changes: 6 additions & 6 deletions src/theme/helpers/custom.mixins.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
}
}
Expand Down

0 comments on commit 7d95942

Please sign in to comment.