From 9adf3f7647049a2bf7bf6ba068a76c75ffaf6f79 Mon Sep 17 00:00:00 2001
From: Sean Engelhardt <sean.f.t.engelhardt@gmail.com>
Date: Fri, 2 Aug 2019 10:02:30 +0200
Subject: [PATCH] Change the size of search-filter-bar

Looks less random and more homogeneous now
---
 .../sort-filter-bar/sort-filter-bar.component.html         | 6 ++++--
 .../sort-filter-bar/sort-filter-bar.component.scss         | 5 +++++
 .../mediafile-list/mediafile-list.component.html           | 5 ++---
 .../mediafile-list/mediafile-list.component.scss           | 7 ++-----
 client/src/styles.scss                                     | 6 +++---
 5 files changed, 16 insertions(+), 13 deletions(-)

diff --git a/client/src/app/shared/components/sort-filter-bar/sort-filter-bar.component.html b/client/src/app/shared/components/sort-filter-bar/sort-filter-bar.component.html
index 2c01903f0..78039527c 100644
--- a/client/src/app/shared/components/sort-filter-bar/sort-filter-bar.component.html
+++ b/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">
-                    {{ filter.option.label | translate }}
+                <os-icon-container icon="close" class="active-filter">
+                    <span class="active-filter">
+                        {{ filter.option.label | translate }}
+                    </span>
                 </os-icon-container>
             </button>
         </div>
diff --git a/client/src/app/shared/components/sort-filter-bar/sort-filter-bar.component.scss b/client/src/app/shared/components/sort-filter-bar/sort-filter-bar.component.scss
index 2be3bfe6e..861afd2f9 100644
--- a/client/src/app/shared/components/sort-filter-bar/sort-filter-bar.component.scss
+++ b/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;
 }
diff --git a/client/src/app/site/mediafiles/components/mediafile-list/mediafile-list.component.html b/client/src/app/site/mediafiles/components/mediafile-list/mediafile-list.component.html
index b105fceb9..234c330d5 100644
--- a/client/src/app/site/mediafiles/components/mediafile-list/mediafile-list.component.html
+++ b/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"
diff --git a/client/src/app/site/mediafiles/components/mediafile-list/mediafile-list.component.scss b/client/src/app/site/mediafiles/components/mediafile-list/mediafile-list.component.scss
index a8bbe98b9..efd297b01 100644
--- a/client/src/app/site/mediafiles/components/mediafile-list/mediafile-list.component.scss
+++ b/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;
diff --git a/client/src/styles.scss b/client/src/styles.scss
index c6064cbf9..8cdca6abb 100644
--- a/client/src/styles.scss
+++ b/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 {