Merge pull request #4894 from tsiegleauq/deeply-unsatisfactory-meme-resolved

Change the size of search-filter-bar

client/src/app/shared/components/sort-filter-bar/sort-filter-bar.component.html

@@ -10,8 +10,10 @@
     <div class="current-filters" *ngIf="filterService">
         <div *ngFor="let filter of filterService.filterStack">
             <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 }}
+                    </span>
                 </os-icon-container>
             </button>
         </div>

client/src/app/shared/components/sort-filter-bar/sort-filter-bar.component.scss

@@ -14,6 +14,11 @@
     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 {
     margin-right: 25px;
 }

client/src/app/site/mediafiles/components/mediafile-list/mediafile-list.component.html

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

client/src/app/site/mediafiles/components/mediafile-list/mediafile-list.component.scss

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

client/src/styles.scss

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