GuzhavinAleksey/Vmeda.Online
1
0
Fork 0
forked from CIT/Vmeda.Online
Code Pull Requests 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>
</ion-item-divider>
<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>
<!-- List of courses. -->
<div class="core-horizontal-scroll">

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

@ -25,7 +25,7 @@
</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>
</core-loading>

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

@ -14,10 +14,10 @@
</div>
</ion-item-divider>
<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>
<!-- List of courses. -->
<div class="core-horizontal-scroll">
<div class="core-horizontal-scroll" *ngIf="courses.length > 0">
<ng-container *ngFor="let course of courses">
<core-courses-course-progress [course]="course" class="core-block_starredcourses"
[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-row>
</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>
</core-loading>
</core-loading>

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

@ -1,14 +1,13 @@
@import "~theme/globals";
:host {
position: static;
-webkit-transition: height 200ms ease-in-out;
transition: height 200ms ease-in-out;
@include core-transition(height, 200ms);
--loading-background: rgba(255, 255, 255, 0.26);
> .core-loading-container {
position: absolute;
top: 0;
right: 0;
left: 0;
bottom: 0;
@include position(0, 0, 0, 0);
display: table;
height: 100%;
width: 100%;
@ -17,7 +16,7 @@
z-index: 3;
margin: 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;
transition: all 200ms ease-in-out;
@ -29,7 +28,7 @@
}
.core-loading-content {
display: inline;
display: contents;
padding-bottom: 1px; /* This makes height be real */
}
@ -45,8 +44,12 @@
display: block;
.core-loading-container {
margin-top: 10px;
padding-top: 20px;
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. -->
<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. -->
<ion-badge class="core-course-download-section-progress"
*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 {
// display: block;
// @include float(start);
// @include margin(12px, 12px, null, 12px);
// }
@import '~theme/globals.scss';
: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);
}
}
}