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

MOBILE-3833 course: Format title and limit height in course storage

main
Dani Palou 2022-01-25 09:29:06 +01:00
parent fe55a8a59f
commit 4ecab6d3f1
2 changed files with 25 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
src/addons/storagemanager/pages/course-storage/course-storage.html
View File

@ -71,14 +71,15 @@
</ion-card-header>
<ion-card-content>
<ng-container *ngFor="let module of section.modules">
<ion-item class="ion-no-padding"
*ngIf="(downloadEnabled && module.handlerData?.showDownloadButton) || module.totalSize > 0">
<ion-item class="ion-no-padding core-course-storage-activity" *ngIf="downloadEnabled || module.totalSize > 0">
<core-mod-icon slot="start" *ngIf="module.handlerData.icon" [modicon]="module.handlerData.icon"
[modname]="module.modname" [componentId]="module.instance">
</core-mod-icon>
<ion-label class="ion-text-wrap">
<h3 class="{{module.handlerData!.class}} addon-storagemanager-module-size">
{{ module.name }}
<core-format-text [text]="module.handlerData.title" [courseId]="module.course" contextLevel="module"
[contextInstanceId]="module.id" [adaptImg]="false">
</core-format-text>
</h3>
<ion-badge color="light" *ngIf="module.totalSize > 0">
{{ module.totalSize | coreBytesToSize }}

21
src/addons/storagemanager/pages/course-storage/course-storage.scss
View File

@ -1,4 +1,9 @@
@import "~theme/globals";
:host {
--core-format-text-background-gradient-rgb: var(--background-rgb, #{$ion-item-background-rgb});
--course-storage-max-activity-height: 120px;
ion-card.section ion-card-header {
margin-bottom: 8px;
padding-top: 8px;
@ -8,6 +13,22 @@
font-weight: bold;
font-size: 1.2rem;
}
.core-course-storage-activity ion-label {
max-height: var(--course-storage-max-activity-height);
&:before {
content: '';
height: 100%;
min-height: var(--course-storage-max-activity-height);
position: absolute;
@include position(0, 0, null, 0);
background: -webkit-linear-gradient(top, rgba(var(--core-format-text-background-gradient-rgb), 0) calc(100% - 30px), rgba(var(--core-format-text-background-gradient-rgb), 1) calc(100% - 20px));
background: linear-gradient(to bottom, rgba(var(--core-format-text-background-gradient-rgb), 0) calc(100% - 30px), rgba(var(--core-format-text-background-gradient-rgb), 1) calc(100% - 20px));
z-index: 6;
pointer-events: none;
}
}
}
.storage-buttons {