CIT/Vmeda.Online
3
0
Fork 1
forked from EVOgeek/Vmeda.Online
Code Pull Requests Activity

MOBILE-3833 storage: Fix hover style state

Browse Source
This commit is contained in:
Pau Ferrer Ocaña 2022-04-06 09:29:08 +02:00
parent 87c8177d26
commit 5c3fe58ed7
2 changed files with 34 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -47,8 +47,8 @@
<ng-container *ngFor="let section of sections"> <ng-container *ngFor="let section of sections">
<ion-card class="section" *ngIf="section.modules.length > 0"> <ion-card class="section" *ngIf="section.modules.length > 0">
<ion-card-header> <ion-card-header>
<ion-item class="ion-no-padding" [lines]="section.expanded ? 'full' : 'none'" button detail="false" <ion-item [lines]="section.expanded ? 'full' : 'none'" button detail="false" (click)="toggleExpand($event, section)"
(click)="toggleExpand($event, section)" [class.core-course-storage-section-expanded]="section.expanded" [class.core-course-storage-section-expanded]="section.expanded"
[attr.aria-label]="(section.expanded ? 'core.collapse' : 'core.expand') | translate" [attr.aria-label]="(section.expanded ? 'core.collapse' : 'core.expand') | translate"
[attr.aria-expanded]="section.expanded" [attr.aria-controls]="'core-course-storage-section-' + section.id"> [attr.aria-expanded]="section.expanded" [attr.aria-controls]="'core-course-storage-section-' + section.id">
<ion-icon name="fas-chevron-right" flip-rtl slot="start" class="expandable-status-icon" <ion-icon name="fas-chevron-right" flip-rtl slot="start" class="expandable-status-icon"
@ -99,10 +99,10 @@
</div> </div>
</ion-item> </ion-item>
</ion-card-header> </ion-card-header>
<ion-card-content id="core-course-storage-section-{{section.id}}" [ngClass]="{'hidden-content': !section.expanded}"> <ion-card-content id="core-course-storage-section-{{section.id}}">
<ng-container *ngIf="section.expanded"> <ng-container *ngIf="section.expanded">
<ng-container *ngFor="let module of section.modules"> <ng-container *ngFor="let module of section.modules">
<ion-item class="ion-no-padding core-course-storage-activity" <ion-item class="core-course-storage-activity"
*ngIf="downloadEnabled || (!module.calculatingSize && module.totalSize > 0)"> *ngIf="downloadEnabled || (!module.calculatingSize && module.totalSize > 0)">
<core-mod-icon slot="start" *ngIf="module.handlerData.icon" [modicon]="module.handlerData.icon" <core-mod-icon slot="start" *ngIf="module.handlerData.icon" [modicon]="module.handlerData.icon"
[modname]="module.modname" [componentId]="module.instance"> [modname]="module.modname" [componentId]="module.instance">

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

@ -3,31 +3,29 @@
:host { :host {
--course-storage-max-activity-height: 120px; --course-storage-max-activity-height: 120px;
ion-card ion-item { ion-card ion-item.size {
--inner-padding-end: 0px; --inner-padding-end: 0px;
} }
ion-card.section ion-card-header { ion-card.section {
padding-top: 8px; ion-card-header {
padding-bottom: 8px;
}
ion-card.section .item-heading {
font-weight: bold;
font-size: 1.2rem;
}
ion-card-content.hidden-content {
padding: 0; padding: 0;
} }
ion-card-content {
padding: 0;
.core-course-storage-activity ion-label h3 { .core-course-storage-activity ion-label {
h3 {
position: relative; position: relative;
max-height: var(--course-storage-max-activity-height); max-height: var(--course-storage-max-activity-height);
overflow: hidden;
::ng-deep * {
pointer-events: none !important;
}
&:before { &:before {
content: ''; content: '';
height: 100%; height: var(--course-storage-max-activity-height);
min-height: var(--course-storage-max-activity-height);
position: absolute; position: absolute;
@include position(0, 0, null, 0); @include position(0, 0, null, 0);
background: linear-gradient(to bottom, rgba(var(--background-gradient-rgb), 0) calc(100% - 30px), rgba(var(--background-gradient-rgb), 1) calc(100% - 20px)); background: linear-gradient(to bottom, rgba(var(--background-gradient-rgb), 0) calc(100% - 30px), rgba(var(--background-gradient-rgb), 1) calc(100% - 20px));
@ -35,6 +33,13 @@
pointer-events: none; pointer-events: none;
} }
} }
}
}
.item-heading {
font-weight: bold;
font-size: 1.2rem;
}
}
} }
ion-badge { ion-badge {