EVOgeek
/
Vmeda.Online
1
0
Fork 1
Code Issues Pull Requests Packages Projects Releases Wiki Activity

MOBILE-3320 course: Fix on course card styles

main
Pau Ferrer Ocaña 2021-05-26 13:39:47 +02:00
parent 567a31704b
commit f01301e590
3 changed files with 29 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/core/features/courses/components/course-progress/core-courses-course-progress.html
View File

@ -5,7 +5,8 @@
</div> </div>
<ion-item button lines="none" (click)="openCourse()" [attr.aria-label]="course.displayname || course.fullname" <ion-item button lines="none" (click)="openCourse()" [attr.aria-label]="course.displayname || course.fullname"
class="core-course-header" [class.item-disabled]="course.visible == 0" class="core-course-header" [class.item-disabled]="course.visible == 0"
[class.core-course-more-than-title]="course.progress! >= 0" detail="false"> [class.core-course-only-title]="!showAll || course.progress! < 0 && course.completionusertracked === false"
detail="false">
<ion-label <ion-label
class="ion-text-wrap core-course-title" class="ion-text-wrap core-course-title"
[class.core-course-with-buttons]="courseOptionMenuEnabled || (downloadCourseEnabled && showDownload)" [class.core-course-with-buttons]="courseOptionMenuEnabled || (downloadCourseEnabled && showDownload)"

30
src/core/features/courses/components/course-progress/course-progress.scss
View File

@ -2,10 +2,14 @@
:host { :host {
ion-card { ion-card {
--vertical-margin: 12px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-self: stretch; align-self: stretch;
height: calc(100% - 20px); height: calc(100% - var(--vertical-margin) - var(--vertical-margin));
margin-top: var(--vertical-margin);
margin-bottom: var(--vertical-margin);
@for $i from 0 to length($core-course-image-background) { @for $i from 0 to length($core-course-image-background) {
&[course-color="#{$i}"] .core-course-thumb { &[course-color="#{$i}"] .core-course-thumb {
@ -42,10 +46,19 @@
} }
.core-course-header { .core-course-header {
padding-top: 8px; flex-grow: 1;
padding-bottom: 8px; display: flex;
flex-direction: column;
&.core-course-only-title {
&::part(native) {
flex-grow: 1;
}
}
.core-course-title { .core-course-title {
margin: 5px 0; margin: 12px 0;
flex-grow: 1; flex-grow: 1;
.item-heading ion-icon { .item-heading ion-icon {
@ -54,10 +67,6 @@
} }
} }
&.core-course-more-than-title {
padding-bottom: 0;
}
.core-button-spinner { .core-button-spinner {
margin: 0; margin: 0;
} }
@ -93,11 +102,8 @@
} }
.core-course-header { .core-course-header {
padding-top: 4px;
padding-bottom: 4px;
.core-course-title { .core-course-title {
margin: 3px 0; margin: 7px 0;
.item-heading ion-icon { .item-heading ion-icon {
margin-right: 2px; margin-right: 2px;

18
src/theme/globals.mixins.scss
View File

@ -213,16 +213,16 @@
display: block; display: block;
ion-card { ion-card {
height: calc(100% - 20px); --vertical-margin: 10px;
width: calc(100% - 20px); --horizontal-margin: 10px;
margin-top: 10px;
margin-bottom: 10px;
@media (max-width: 360px) { width: calc(100% - var(--vertical-margin) - var(--vertical-margin));
margin-left: 6px; height: calc(100% - var(--vertical-margin) - var(--vertical-margin));
margin-right: 6px; margin: var(--vertical-margin) var(--horizontal-margin);
width: calc(100% - 12px);
} @media (max-width: 360px) {
--horizontal-margin: 6px;
}
} }
.ion-text-wrap ion-label { .ion-text-wrap ion-label {