From 0f4a7f0a04b5213d82d9351cb2c1a61704b1b1ad Mon Sep 17 00:00:00 2001
From: Michael Shamoon <4887959+nikonratm@users.noreply.github.com>
Date: Mon, 11 Jan 2021 11:46:40 -0800
Subject: [PATCH] Combine sort & sort order fields to better accomodate mobile,
 button bar full width

---
 .../page-header/page-header.component.html    |  4 +-
 .../document-list.component.html              | 41 +++++++++++--------
 2 files changed, 25 insertions(+), 20 deletions(-)

diff --git a/src-ui/src/app/components/common/page-header/page-header.component.html b/src-ui/src/app/components/common/page-header/page-header.component.html
index fccce9b98..1174ee044 100644
--- a/src-ui/src/app/components/common/page-header/page-header.component.html
+++ b/src-ui/src/app/components/common/page-header/page-header.component.html
@@ -1,9 +1,9 @@
-<div class="row pt-3 pb-1 mb-3 border-bottom align-items-center" >
+<div class="row pt-3 pb-3 pb-md-1 mb-3 border-bottom align-items-center">
   <div class="col-md text-truncate">
     <p class="h2 text-truncate" style="line-height: 1.4">{{title}}</p>
     <p *ngIf="subTitle" class="h5 text-truncate" style="line-height: 1.4">{{subTitle}}</p>
   </div>
-  <div class="btn-toolbar col-auto">
+  <div class="btn-toolbar col col-md-auto">
     <ng-content></ng-content>
   </div>
 </div>
diff --git a/src-ui/src/app/components/document-list/document-list.component.html b/src-ui/src/app/components/document-list/document-list.component.html
index 186c6a229..5f64d1e55 100644
--- a/src-ui/src/app/components/document-list/document-list.component.html
+++ b/src-ui/src/app/components/document-list/document-list.component.html
@@ -36,31 +36,36 @@
     </label>
   </div>
 
-  <div class="btn-group btn-group-toggle ml-2" ngbRadioGroup [(ngModel)]="list.sortReverse">
-    <div ngbDropdown class="btn-group">
+  <div class="btn-group ml-2 flex-fill">
+    <div ngbDropdown class="btn-group flex-fill">
       <button class="btn btn-outline-primary btn-sm" id="dropdownBasic1" ngbDropdownToggle i18n>Sort by</button>
       <div ngbDropdownMenu aria-labelledby="dropdownBasic1" class="shadow">
-        <button *ngFor="let f of getSortFields()" ngbDropdownItem (click)="list.sortField = f.field"
-          [class.active]="list.sortField == f.field">{{f.name}}</button>
+        <div class="w-100 d-flex btn-group-toggle pb-2 mb-1 border-bottom" ngbRadioGroup [(ngModel)]="list.sortReverse">
+          <label ngbButtonLabel class="btn-outline-primary btn-sm mx-2 flex-fill">
+            <input ngbButton type="radio" class="btn btn-sm" [value]="false">
+            <svg class="toolbaricon" fill="currentColor">
+              <use xlink:href="assets/bootstrap-icons.svg#sort-alpha-down" />
+            </svg>
+          </label>
+          <label ngbButtonLabel class="btn-outline-primary btn-sm mr-2 flex-fill">
+            <input ngbButton type="radio" class="btn btn-sm" [value]="true">
+            <svg class="toolbaricon" fill="currentColor">
+              <use xlink:href="assets/bootstrap-icons.svg#sort-alpha-up-alt" />
+            </svg>
+          </label>
+        </div>
+        <div>
+          <button *ngFor="let f of getSortFields()" ngbDropdownItem (click)="list.sortField = f.field"
+            [class.active]="list.sortField == f.field">{{f.name}}
+          </button>
+        </div>
       </div>
     </div>
-    <label ngbButtonLabel class="btn-outline-primary btn-sm">
-      <input ngbButton type="radio" class="btn btn-sm" [value]="false">
-      <svg class="toolbaricon" fill="currentColor">
-        <use xlink:href="assets/bootstrap-icons.svg#sort-alpha-down" />
-      </svg>
-    </label>
-    <label ngbButtonLabel class="btn-outline-primary btn-sm">
-      <input ngbButton type="radio" class="btn btn-sm" [value]="true">
-      <svg class="toolbaricon" fill="currentColor">
-        <use xlink:href="assets/bootstrap-icons.svg#sort-alpha-up-alt" />
-      </svg>
-    </label>
   </div>
 
-  <div class="btn-group ml-2">
+  <div class="btn-group ml-2 flex-fill">
 
-    <div class="btn-group" ngbDropdown role="group">
+    <div class="btn-group flex-fill" ngbDropdown role="group">
       <button class="btn btn-sm btn-outline-primary dropdown-toggle" ngbDropdownToggle i18n>Views</button>
       <div class="dropdown-menu shadow" ngbDropdownMenu>
         <ng-container *ngIf="!list.savedViewId">