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

MOBILE-3833 storage: Fix hover style state

main
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">
<ion-card class="section" *ngIf="section.modules.length > 0">
<ion-card-header>
<ion-item class="ion-no-padding" [lines]="section.expanded ? 'full' : 'none'" button detail="false"
(click)="toggleExpand($event, section)" [class.core-course-storage-section-expanded]="section.expanded"
<ion-item [lines]="section.expanded ? 'full' : 'none'" button detail="false" (click)="toggleExpand($event, section)"
[class.core-course-storage-section-expanded]="section.expanded"
[attr.aria-label]="(section.expanded ? 'core.collapse' : 'core.expand') | translate"
[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"
@ -99,10 +99,10 @@
</div>
</ion-item>
</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 *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)">
<core-mod-icon slot="start" *ngIf="module.handlerData.icon" [modicon]="module.handlerData.icon"
[modname]="module.modname" [componentId]="module.instance">

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

@ -3,31 +3,29 @@
:host {
--course-storage-max-activity-height: 120px;
ion-card ion-item {
ion-card ion-item.size {
--inner-padding-end: 0px;
}
ion-card.section ion-card-header {
padding-top: 8px;
padding-bottom: 8px;
}
ion-card.section .item-heading {
font-weight: bold;
font-size: 1.2rem;
}
ion-card-content.hidden-content {
ion-card.section {
ion-card-header {
padding: 0;
}
ion-card-content {
padding: 0;
.core-course-storage-activity ion-label h3 {
.core-course-storage-activity ion-label {
h3 {
position: relative;
max-height: var(--course-storage-max-activity-height);
overflow: hidden;
::ng-deep * {
pointer-events: none !important;
}
&:before {
content: '';
height: 100%;
min-height: var(--course-storage-max-activity-height);
height: var(--course-storage-max-activity-height);
position: absolute;
@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));
@ -36,6 +34,13 @@
}
}
}
}
.item-heading {
font-weight: bold;
font-size: 1.2rem;
}
}
}
ion-badge {
margin-top: 8px;