Change the size of search-filter-bar

Looks less random and more homogeneous now
This commit is contained in:
Sean Engelhardt 2019-08-02 10:02:30 +02:00
parent bc99750869
commit 9adf3f7647
5 changed files with 16 additions and 13 deletions

View File

@ -10,8 +10,10 @@
<div class="current-filters" *ngIf="filterService"> <div class="current-filters" *ngIf="filterService">
<div *ngFor="let filter of filterService.filterStack"> <div *ngFor="let filter of filterService.filterStack">
<button mat-stroked-button (click)="removeFilterFromStack(filter)"> <button mat-stroked-button (click)="removeFilterFromStack(filter)">
<os-icon-container icon="close"> <os-icon-container icon="close" class="active-filter">
<span class="active-filter">
{{ filter.option.label | translate }} {{ filter.option.label | translate }}
</span>
</os-icon-container> </os-icon-container>
</button> </button>
</div> </div>

View File

@ -14,6 +14,11 @@
display: flex; display: flex;
} }
.active-filter {
// force the filter tex tot stay in one line. Safe due to horizontal scrolling
white-space: pre;
}
span.right-with-margin { span.right-with-margin {
margin-right: 25px; margin-right: 25px;
} }

View File

@ -23,7 +23,7 @@
<!-- Folder navigation bar --> <!-- Folder navigation bar -->
<div> <div>
<div class="folder-nav-bar"> <div class="custom-table-header folder-nav-bar">
<button class="folder" mat-button (click)="changeDirectory(null)"> <button class="folder" mat-button (click)="changeDirectory(null)">
<mat-icon class="file-icon">home</mat-icon> <mat-icon class="file-icon">home</mat-icon>
</button> </button>
@ -75,12 +75,11 @@
</span> </span>
</span> </span>
</div> </div>
<mat-divider></mat-divider>
</div> </div>
<!-- the actual file manager --> <!-- the actual file manager -->
<pbl-ngrid <pbl-ngrid
class="file-manager-table ngrid-hide-head" class="virtual-scroll-with-head-bar ngrid-hide-head file-manager-table"
showHeader="false" showHeader="false"
vScrollAuto vScrollAuto
[dataSource]="dataSource" [dataSource]="dataSource"

View File

@ -6,17 +6,16 @@
} }
.folder-nav-bar { .folder-nav-bar {
$size: 40px; $size: 64px;
position: relative; position: relative;
display: flex; display: flex;
line-height: $size;
background-color: white; // TODO: theme
.arrow { .arrow {
height: $size; height: $size;
float: left; float: left;
.mat-icon { .mat-icon {
line-height: $size; line-height: $size;
height: $size;
} }
} }
@ -61,8 +60,6 @@
font-size: 90%; font-size: 90%;
} }
height: calc(100vh - 105px);
.pbl-ngrid-row { .pbl-ngrid-row {
$size: 60px; $size: 60px;
height: $size !important; height: $size !important;

View File

@ -386,8 +386,8 @@ mat-card {
//custom table header for search button, filtering and more. Used in ListViews //custom table header for search button, filtering and more. Used in ListViews
.custom-table-header { .custom-table-header {
width: 100%; width: 100%;
height: 60px; height: 64px;
line-height: 60px; line-height: 64px;
text-align: right; text-align: right;
border-bottom: 1px solid rgba(0, 0, 0, 0.12); border-bottom: 1px solid rgba(0, 0, 0, 0.12);
display: flex; display: flex;
@ -639,7 +639,7 @@ button.mat-menu-item.selected {
} }
// with os-sort-filter-bar // with os-sort-filter-bar
.virtual-scroll-with-head-bar { .virtual-scroll-with-head-bar {
height: calc(100vh - 125px); height: calc(100vh - 129px);
} }
.ngrid-hide-head { .ngrid-hide-head {