Skip to content

Commit

Permalink
Adjust the presentation of side panel filters
Browse files Browse the repository at this point in the history
  • Loading branch information
ommann committed Jan 17, 2024
1 parent b980977 commit 413771b
Show file tree
Hide file tree
Showing 3 changed files with 19 additions and 8 deletions.
Original file line number Diff line number Diff line change
@@ -1,15 +1,20 @@
<div class='filter-option-layout' (click)='toggleValue()' matRipple>
<div style='margin-right: 0.5rem'>
<input type='checkbox' [ngModel]='value'>
<div class='filter-option-layout focus-me' (click)='toggleValue()' matRipple tabindex='0'>
<div style='display: flex; justify-content: center; align-items: center'>

<!-- Position mat-checkbox to appear vertically and horizontally centered using pixels -->
<div style='width: 24px; height: 20px; margin: 5px 20px 5px 2px; position: relative'>
<mat-checkbox style='position: absolute; top: -5px; left: 2px; width: 10px; height: 10px' [ngModel]='value'></mat-checkbox>
</div>

</div>

<div style='display: flex; flex-grow: 1; justify-content: space-between'>
<div>
<div style='display: flex; justify-content: center; font-size: 1.1rem;'>
{{label}}
</div>

<div>
({{count}})
<div style='display: flex; justify-content: center; align-items: center; font-size: 14px; color: grey'>
{{count}}
</div>
</div>
</div>
Original file line number Diff line number Diff line change
Expand Up @@ -5,8 +5,12 @@

.filter-option-layout {
display: flex;
justify-content: center;
align-items: center;
padding: 16px 12px;

// padding: 16px 12px;
padding: 8px;

cursor: pointer;
user-select: none;

Expand Down
Original file line number Diff line number Diff line change
@@ -1,14 +1,16 @@
import { Component, EventEmitter, Input, Output } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { MatRippleModule } from '@angular/material/core';
import { MatCheckboxModule } from '@angular/material/checkbox';

@Component({
selector: 'app-filter-option',
templateUrl: './filter-option.component.html',
styleUrls: ['./filter-option.component.scss'],
imports: [
FormsModule,
MatRippleModule
MatRippleModule,
MatCheckboxModule
],
standalone: true
})
Expand Down

0 comments on commit 413771b

Please sign in to comment.