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

MOBILE-3833 my: Style Filter buttons

Browse Source
This commit is contained in:
Pau Ferrer Ocaña 2022-03-31 16:54:06 +02:00
parent 50c3985822
commit bf5f9c8b99
4 changed files with 47 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -22,6 +22,14 @@
</ion-item-divider>
<core-loading [hideUntil]="loaded">
<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">
</ion-searchbar>
</ion-col>
</ion-row>
<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)"
@ -59,14 +67,6 @@
</ion-button>
</ion-col>
</ion-row>
<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">
</ion-searchbar>
</ion-col>
</ion-row>
<core-empty-box *ngIf="filteredCourses.length == 0" image="assets/img/icons/courses.svg"
[message]="'addon.block_myoverview.nocourses' | translate">

20
src/addons/block/myoverview/components/myoverview/myoverview.scss
View File

@ -1,21 +1,35 @@
:host {
ion-row.addon-block-myoverview-filter {
padding: 4px 8px 0px 8px;
margin: 8px;
padding: 0;
ion-col {
padding: 0 2px;
padding: 0;
}
ion-button,
core-combobox ::ng-deep ion-button {
--border-width: 0;
--a11y-min-target-size: 40px;
margin: 0;
.select-icon {
display: none;
}
ion-icon {
font-size: 20px;
}
}
::ng-deep ion-searchbar {
core-combobox ::ng-deep ion-select {
margin: 0;
--a11y-min-target-size: 40px;
}
ion-searchbar {
padding: 0;
--height: 40px;
}
}
}

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

@ -1091,20 +1091,28 @@ ion-chip {
}
ion-searchbar {
.searchbar-search-icon.ios {
top: 4px;
}
.searchbar-search-icon.md {
}
height: var(--height) !important;
.searchbar-input,
.sc-ion-searchbar-md.searchbar-input,
.sc-ion-searchbar-ios.searchbar-input {
@include padding-horizontal(48px);
.searchbar-input-container {
color: var(--color) !important;
height: var(--height) !important;
}
.searchbar-input {
@include padding-horizontal(48px);
height: var(--height) !important;
border: 1px solid var(--border-color) !important;
box-shadow: none !important;
border-radius: var(--border-radius) !important;
background: var(--background) !important;
@include padding-horizontal(var(--height) !important);
}
.searchbar-search-icon {
@include position(null, null, null, calc(var(--height) / 4) !important);
}
button {
@include position(null, 0 !important, null, null);
}
}

15
src/theme/theme.light.scss
View File

@ -190,23 +190,16 @@
--ion-searchbar-background: var(--ion-background-color);
--ion-searchbar-border-color: var(--core-input-stroke);
--ion-searchbar-border-radius: var(--core-input-radius);
--ion-searchbar-height: var(--a11y-min-target-size);
--ion-searchbar-color: var(--text-color);
--ion-searchbar-icon-color: var(--core-input-stroke);
ion-searchbar {
--background: var(--ion-searchbar-background);
--border-color: var(--ion-searchbar-border-color);
--color: var(--ion-searchbar-color);
--border-radius: var(--ion-searchbar-border-radius);
--icon-color: var(--ion-searchbar-icon-color);
.searchbar-input-container {
color: var(--ion-searchbar-color) !important;
}
.searchbar-input {
height: var(--a11y-min-target-size);
border: 1px solid var(--ion-searchbar-border-color);
box-shadow: none;
border-radius: var(--ion-searchbar-border-radius);
background: var(--ion-searchbar-background) !important;
}
--height: var(--ion-searchbar-height);
}
--core-search-box-background: var(--ion-background-color);