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

MOBILE-3814 myoverview: Fix filter margins and icons

main
Pau Ferrer Ocaña 2022-02-16 12:15:14 +01:00
parent e217203ce1
commit b155c8eec1
5 changed files with 36 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
src/addons/block/myoverview/components/myoverview/addon-block-myoverview.html
View File

@ -22,19 +22,19 @@
</ion-item-divider>
<core-loading [hideUntil]="loaded" [fullscreen]="false">
<ion-row class="ion-no-padding ion-justify-content-between ion-align-items-center" *ngIf="hasCourses">
<ion-col size="auto" class="ion-no-padding" *ngIf="filters.enabled">
<ion-row class="ion-justify-content-between ion-align-items-center addon-block-myoverview-filter" *ngIf="hasCourses">
<ion-col size="auto" *ngIf="filters.enabled">
<core-combobox interface="modal" [label]="'core.courses.filtermycourses' | translate" (onChange)="filterOptionsChanged($event)"
icon="fas-filter" [badge]="filters.count" [modalOptions]="filterModalOptions">
</core-combobox>
</ion-col>
<ion-col class="ion-no-padding">
<ion-col>
<!-- Filter courses. -->
<ion-searchbar class="ion-hide-md-down" [(ngModel)]="textFilter" (ionInput)="filterTextChanged($event.target)"
(ionCancel)="filterTextChanged($event.target)" [placeholder]="'core.filter' | translate">
</ion-searchbar>
</ion-col>
<ion-col size="auto" class="ion-no-padding" *ngIf="sort.enabled">
<ion-col size="auto" *ngIf="sort.enabled">
<core-combobox [label]="'core.sortby' | translate" [selection]="sort.selected" (onChange)="sortCourses($event)"
icon="fas-sort-amount-down-alt">
<ion-select-option class="ion-text-wrap" value="fullname">
@ -48,7 +48,7 @@
</ion-select-option>
</core-combobox>
</ion-col>
<ion-col size="auto" class="ion-no-padding" *ngIf="isLayoutSwitcherAvailable">
<ion-col size="auto" *ngIf="isLayoutSwitcherAvailable">
<ion-button *ngIf="layout == 'card'" fill="outline" (click)="toggleLayout('list')"
[attr.aria-label]="'addon.block_myoverview.list' | translate">
<ion-icon slot="icon-only" name="fas-list"></ion-icon>
@ -59,8 +59,8 @@
</ion-button>
</ion-col>
</ion-row>
<ion-row class="ion-no-padding ion-hide-md-up" *ngIf="hasCourses">
<ion-col class="ion-no-padding">
<ion-row class="ion-hide-md-up addon-block-myoverview-filter" *ngIf="hasCourses">
<ion-col>
<!-- Filter courses. -->
<ion-searchbar [(ngModel)]="textFilter" (ionInput)="filterTextChanged($event.target)"
(ionCancel)="filterTextChanged($event.target)" [placeholder]="'core.filter' | translate">

21
src/addons/block/myoverview/components/myoverview/myoverview.scss 100644
View File

@ -0,0 +1,21 @@
:host {
ion-row.addon-block-myoverview-filter {
padding: 4px 8px 0px 8px;
ion-col {
padding: 0 2px;
}
ion-button,
core-combobox ::ng-deep ion-button {
margin: 0;
ion-icon {
font-size: 20px;
}
}
::ng-deep ion-searchbar {
padding: 0;
}
}
}

1
src/addons/block/myoverview/components/myoverview/myoverview.ts
View File

@ -39,6 +39,7 @@ const FILTER_PRIORITY: AddonBlockMyOverviewTimeFilters[] = ['all', 'inprogress',
@Component({
selector: 'addon-block-myoverview',
templateUrl: 'addon-block-myoverview.html',
styleUrls: ['myoverview.scss'],
})
export class AddonBlockMyOverviewComponent extends CoreBlockBaseComponent implements OnInit, OnDestroy {

2
src/core/components/combobox/combobox.scss
View File

@ -7,7 +7,7 @@
ion-select,
ion-button {
--icon-margin: 0 8px;
--icon-margin: 0 4px;
--background: var(--core-combobox-background);
--background-hover: black;
--background-activated: black;

7
src/theme/theme.base.scss
View File

@ -948,7 +948,12 @@ ion-searchbar {
top: 4px;
}
.searchbar-search-icon.md {
top: 12px;
}
.searchbar-input,
.sc-ion-searchbar-md.searchbar-input,
.sc-ion-searchbar-ios.searchbar-input {
@include padding-horizontal(48px);
}
}