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

MOBILE-3670 core: Fix some loading styles

Browse Source
This commit is contained in:
Pau Ferrer Ocaña 2021-05-14 12:26:12 +02:00
parent 2f8333d516
commit 2cd17b1f29
7 changed files with 29 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/addons/block/recentlyaccessedcourses/components/recentlyaccessedcourses/addon-block-recentlyaccessedcourses.html
View File

@ -14,7 +14,7 @@
</div> </div>
</ion-item-divider> </ion-item-divider>
<core-loading [hideUntil]="loaded" class="core-loading-center safe-area-page"> <core-loading [hideUntil]="loaded" class="core-loading-center safe-area-page">
<core-empty-box *ngIf="courses.length == 0" image="assets/img/icons/courses.svg" <core-empty-box *ngIf="courses.length == 0" image="assets/img/icons/courses.svg" inline="true"
[message]="'addon.block_recentlyaccessedcourses.nocourses' | translate"></core-empty-box> [message]="'addon.block_recentlyaccessedcourses.nocourses' | translate"></core-empty-box>
<!-- List of courses. --> <!-- List of courses. -->
<div class="core-horizontal-scroll"> <div class="core-horizontal-scroll">

2
src/addons/block/recentlyaccesseditems/components/recentlyaccesseditems/addon-block-recentlyaccesseditems.html
View File

@ -25,7 +25,7 @@
</div> </div>
</div> </div>
<core-empty-box *ngIf="items.length <= 0" image="assets/img/icons/activities.svg" <core-empty-box *ngIf="items.length <= 0" image="assets/img/icons/activities.svg" inline="true"
[message]="'addon.block_recentlyaccesseditems.noitems' | translate"></core-empty-box> [message]="'addon.block_recentlyaccesseditems.noitems' | translate"></core-empty-box>
</core-loading> </core-loading>

4
src/addons/block/starredcourses/components/starredcourses/addon-block-starredcourses.html
View File

@ -14,10 +14,10 @@
</div> </div>
</ion-item-divider> </ion-item-divider>
<core-loading [hideUntil]="loaded" class="core-loading-center safe-area-page"> <core-loading [hideUntil]="loaded" class="core-loading-center safe-area-page">
<core-empty-box *ngIf="courses.length == 0" image="assets/img/icons/courses.svg" <core-empty-box *ngIf="courses.length == 0" image="assets/img/icons/courses.svg" inline="true"
[message]="'addon.block_starredcourses.nocourses' | translate"></core-empty-box> [message]="'addon.block_starredcourses.nocourses' | translate"></core-empty-box>
<!-- List of courses. --> <!-- List of courses. -->
<div class="core-horizontal-scroll"> <div class="core-horizontal-scroll" *ngIf="courses.length > 0">
<ng-container *ngFor="let course of courses"> <ng-container *ngFor="let course of courses">
<core-courses-course-progress [course]="course" class="core-block_starredcourses" <core-courses-course-progress [course]="course" class="core-block_starredcourses"
[showDownload]="downloadCourseEnabled && downloadEnabled"></core-courses-course-progress> [showDownload]="downloadCourseEnabled && downloadEnabled"></core-courses-course-progress>

2
src/addons/block/timeline/components/timeline/addon-block-timeline.html
View File

@ -51,7 +51,7 @@
</ion-col> </ion-col>
</ion-row> </ion-row>
</ion-grid> </ion-grid>
<core-empty-box *ngIf="timelineCourses.courses.length == 0" image="assets/img/icons/courses.svg" <core-empty-box *ngIf="timelineCourses.courses.length == 0" image="assets/img/icons/courses.svg" inline="true"
[message]="'addon.block_timeline.nocoursesinprogress' | translate"></core-empty-box> [message]="'addon.block_timeline.nocoursesinprogress' | translate"></core-empty-box>
</core-loading> </core-loading>
</core-loading> </core-loading>

21
src/core/components/loading/loading.scss
View File

@ -1,14 +1,13 @@
@import "~theme/globals";
:host { :host {
position: static; position: static;
-webkit-transition: height 200ms ease-in-out; @include core-transition(height, 200ms);
transition: height 200ms ease-in-out; --loading-background: rgba(255, 255, 255, 0.26);
> .core-loading-container { > .core-loading-container {
position: absolute; position: absolute;
top: 0; @include position(0, 0, 0, 0);
right: 0;
left: 0;
bottom: 0;
display: table; display: table;
height: 100%; height: 100%;
width: 100%; width: 100%;
@ -17,7 +16,7 @@
z-index: 3; z-index: 3;
margin: 0; margin: 0;
padding: 10px 0 0 0; padding: 10px 0 0 0;
background-color: rgba(255, 255, 255, 0.26); background-color: var(--loading-background);
-webkit-transition: all 200ms ease-in-out; -webkit-transition: all 200ms ease-in-out;
transition: all 200ms ease-in-out; transition: all 200ms ease-in-out;
@ -29,7 +28,7 @@
} }
.core-loading-content { .core-loading-content {
display: inline; display: contents;
padding-bottom: 1px; /* This makes height be real */ padding-bottom: 1px; /* This makes height be real */
} }
@ -45,8 +44,12 @@
display: block; display: block;
.core-loading-container { .core-loading-container {
margin-top: 10px; padding-top: 20px;
position: relative; position: relative;
} }
} }
} }
:host-context(body.dark) {
--loading-background: rgba(0, 0, 0, 0.26);
}

2
src/core/features/course/components/format/core-course-format.html
View File

@ -155,7 +155,7 @@
<!-- Template to render a section download button/progress. --> <!-- Template to render a section download button/progress. -->
<ng-template #sectionDownloadTemplate let-section="section"> <ng-template #sectionDownloadTemplate let-section="section">
<div *ngIf="section && downloadEnabled" slot="end"> <div *ngIf="section && downloadEnabled" slot="end" class="core-button-spinner core-section-download">
<!-- Download progress. --> <!-- Download progress. -->
<ion-badge class="core-course-download-section-progress" <ion-badge class="core-course-download-section-progress"
*ngIf="section.isDownloading && section.total > 0 && section.count < section.total"> *ngIf="section.isDownloading && section.total > 0 && section.count < section.total">

16
src/core/features/course/components/format/format.scss
View File

@ -1,8 +1,4 @@
// ion-app.app-root ion-badge.core-course-download-section-progress { @import '~theme/globals.scss';
// display: block;
// @include float(start);
// @include margin(12px, 12px, null, 12px);
// }
:host { :host {
@ -52,4 +48,14 @@
} }
} }
.core-section-download.core-button-spinner {
display: flex;
align-items: center;
@include margin-horizontal(10px);
ion-badge.core-course-download-courses-progress {
@include margin(null, 12px, null, null);
}
}
} }