From 4302625858af033f94a650e0f4e122df9f709021 Mon Sep 17 00:00:00 2001
From: Isaac Abadi <IsaacMGrynsztein@gmail.com>
Date: Fri, 14 Aug 2020 17:41:55 -0400
Subject: [PATCH] Updated styling of recent videos component, the search/sort
 options now look good on mobile

---
 .../recent-videos.component.html              | 46 ++++++++++---------
 .../recent-videos.component.scss              | 10 +++-
 2 files changed, 33 insertions(+), 23 deletions(-)

diff --git a/src/app/components/recent-videos/recent-videos.component.html b/src/app/components/recent-videos/recent-videos.component.html
index 6339a33..f2a7c0c 100644
--- a/src/app/components/recent-videos/recent-videos.component.html
+++ b/src/app/components/recent-videos/recent-videos.component.html
@@ -1,26 +1,30 @@
-<div class="flex-grid">
-    <div class="col">
-        <div style="display: inline-block;">
-            <mat-form-field style="width: 132px;">
-                <mat-select [(ngModel)]="this.filterProperty" (selectionChange)="filterOptionChanged($event.value)">
-                    <mat-option *ngFor="let filterOption of filterProperties | keyvalue" [value]="filterOption.value">
-                        {{filterOption['value']['label']}}
-                    </mat-option>
-                </mat-select>
+<div class="container-fluid">
+    <div class="row">
+        <div class="col-12 order-2 col-sm-4 order-sm-1 d-flex justify-content-center">
+            <div>
+                <div style="display: inline-block;">
+                    <mat-form-field style="width: 132px;">
+                        <mat-select [(ngModel)]="this.filterProperty" (selectionChange)="filterOptionChanged($event.value)">
+                            <mat-option *ngFor="let filterOption of filterProperties | keyvalue" [value]="filterOption.value">
+                                {{filterOption['value']['label']}}
+                            </mat-option>
+                        </mat-select>
+                    </mat-form-field>
+                </div>
+                <div class="sort-dir-div">
+                    <button (click)="toggleModeChange()" mat-icon-button><mat-icon>{{descendingMode ? 'arrow_downward' : 'arrow_upward'}}</mat-icon></button>
+                </div>
+            </div>
+        </div>
+        <div class="col-12 order-1 col-sm-4 order-sm-2 d-flex justify-content-center">
+            <h4 style="text-align: center">My videos</h4>
+        </div>
+        <div class="col-12 order-3 col-sm-4 order-sm-3 d-flex justify-content-center">
+            <mat-form-field [ngClass]="searchIsFocused ? 'search-bar-focused' : 'search-bar-unfocused'" class="search-bar" color="accent">
+                <input (focus)="searchIsFocused = true" (blur)="searchIsFocused = false" class="search-input" type="text" placeholder="Search" i18n-placeholder="Files search placeholder" [(ngModel)]="search_text" (ngModelChange)="onSearchInputChanged($event)" matInput>
+                <mat-icon matSuffix>search</mat-icon>
             </mat-form-field>
         </div>
-        <div style="display: inline-block;">
-            <button (click)="toggleModeChange()" mat-icon-button><mat-icon>{{descendingMode ? 'arrow_downward' : 'arrow_upward'}}</mat-icon></button>
-        </div>
-    </div>
-    <div class="col">
-        <h4 style="text-align: center">My videos</h4>
-    </div>
-    <div class="col" style="top: 25px;">
-        <mat-form-field [ngClass]="searchIsFocused ? 'search-bar-focused' : 'search-bar-unfocused'" class="search-bar" color="accent">
-            <input (focus)="searchIsFocused = true" (blur)="searchIsFocused = false" class="search-input" type="text" placeholder="Search" i18n-placeholder="Files search placeholder" [(ngModel)]="search_text" (ngModelChange)="onSearchInputChanged($event)" matInput>
-            <mat-icon matSuffix>search</mat-icon>
-        </mat-form-field>
     </div>
 </div>
 <div>
diff --git a/src/app/components/recent-videos/recent-videos.component.scss b/src/app/components/recent-videos/recent-videos.component.scss
index 154b248..f695e16 100644
--- a/src/app/components/recent-videos/recent-videos.component.scss
+++ b/src/app/components/recent-videos/recent-videos.component.scss
@@ -9,7 +9,7 @@
 }
  
 .search-bar-unfocused {
-    width: 100px;
+    width: 132px;
 }
 
 .search-input {
@@ -28,7 +28,13 @@
     padding-right: 12px;
 }
 
-.col {
+.column {
     width: 33%;
     display: inline-block;
+}
+
+.sort-dir-div {
+    display: inline-block;
+    position: absolute;
+    top: 10px;
 }
\ No newline at end of file