From 46adf207bb8038034fbec095260e761db21b3a1e Mon Sep 17 00:00:00 2001
From: Nicolas Constant <github@nicolas-constant.com>
Date: Wed, 6 Mar 2024 23:13:46 -0500
Subject: [PATCH] flex migration floating column + hover timeline

---
 .../floating-column.component.html            |  2 +-
 .../floating-column.component.scss            | 13 ++++-
 .../stream-overlay.component.html             | 14 ++---
 .../stream-overlay.component.scss             | 56 ++++++++++---------
 4 files changed, 51 insertions(+), 34 deletions(-)

diff --git a/src/app/components/floating-column/floating-column.component.html b/src/app/components/floating-column/floating-column.component.html
index 4c697f53..507e96ff 100644
--- a/src/app/components/floating-column/floating-column.component.html
+++ b/src/app/components/floating-column/floating-column.component.html
@@ -10,7 +10,7 @@
             <div class="floating-column__inner--left">
                 <div class="floating-column__header">
                     <a class="close-button" href (click)="closePanel()" title="close">
-                        <fa-icon [icon]="faTimes"></fa-icon>
+                        <fa-icon class="close-button__icon" [icon]="faTimes"></fa-icon>
                     </a>
                 </div>
 
diff --git a/src/app/components/floating-column/floating-column.component.scss b/src/app/components/floating-column/floating-column.component.scss
index efe59b60..82a6a6a2 100644
--- a/src/app/components/floating-column/floating-column.component.scss
+++ b/src/app/components/floating-column/floating-column.component.scss
@@ -29,9 +29,20 @@
 }
 
 .close-button {
+    // outline: 1px dotted orange;
+
     display: block;
     float: right;
     font-size: 14px;
     color: white;
-    margin: 10px 16px 0 0;
+    margin: 5px 5px 0 0;
+
+    width: 40px;
+    height: 34px;
+
+    &__icon {
+        position: relative;
+        top: 6px;
+        left: 17px;
+    }
 }
\ No newline at end of file
diff --git a/src/app/components/stream/stream-overlay/stream-overlay.component.html b/src/app/components/stream/stream-overlay/stream-overlay.component.html
index 0ced8ea6..42f9e0fb 100644
--- a/src/app/components/stream/stream-overlay/stream-overlay.component.html
+++ b/src/app/components/stream/stream-overlay/stream-overlay.component.html
@@ -1,9 +1,5 @@
 <div class="overlay">
     <div class="overlay__header">
-        <a href class="overlay__button overlay-close" title="close" (click)="close()">
-            <fa-icon class="overlay-close__icon" [icon]="faTimes"></fa-icon>
-        </a>
-
         <a href class="overlay__button overlay-previous"
             [ngClass]="{'overlay__button--focus': hasPreviousElements }" title="previous" (click)="previous()">
             <fa-icon class="overlay-previous__icon" [icon]="faAngleLeft"></fa-icon>
@@ -12,13 +8,17 @@
             title="refresh" (click)="refresh()">
             <fa-icon class="overlay-refresh__icon" [icon]="faRedoAlt"></fa-icon>
         </a>
+        
+        <a href class="overlay__button overlay-next" [ngClass]="{'overlay__button--focus': hasNextElements }"
+            title="next" (click)="next()">
+            <fa-icon class="overlay-next__icon" [icon]="faAngleRight"></fa-icon>
+        </a>
 
         <a href title="return to top" class="overlay-gototop" (click)="goToTop()">            
         </a>
 
-        <a href class="overlay__button overlay-next" [ngClass]="{'overlay__button--focus': hasNextElements }"
-            title="next" (click)="next()">
-            <fa-icon class="overlay-next__icon" [icon]="faAngleRight"></fa-icon>
+        <a href class="overlay__button overlay-close" title="close" (click)="close()">
+            <fa-icon class="overlay-close__icon" [icon]="faTimes"></fa-icon>
         </a>
     </div>
 
diff --git a/src/app/components/stream/stream-overlay/stream-overlay.component.scss b/src/app/components/stream/stream-overlay/stream-overlay.component.scss
index 84cb7962..a33eb851 100644
--- a/src/app/components/stream/stream-overlay/stream-overlay.component.scss
+++ b/src/app/components/stream/stream-overlay/stream-overlay.component.scss
@@ -11,7 +11,9 @@ $header-content-height: 40px;
         width: calc(100%);
         height: $header-content-height;
         background-color: $column-header-background-color; 
-        border-bottom: 1px solid #222736;        
+        border-bottom: 1px solid #222736;
+        
+        display: flex;
     }
     &__content-wrapper  {
         transition: all .2s;
@@ -44,11 +46,17 @@ $header-content-height: 40px;
     }
 
     &__button {
+        // outline: 1px dotted orange;
+
         width: 25px;
         height: 25px;
+
+        width: $header-content-height;
+        height: $header-content-height;
+
         color: #354060;
         transition: all .2s;
-        margin: 8px 0 0 8px;
+        
         &:hover {
             color: #536599;
             color: #7a8dc7;
@@ -68,19 +76,8 @@ $header-content-height: 40px;
 
         &__icon {
             position: relative;
-            left: 7px;
-            top: -1px
-        }
-    }
-    &-next {
-        display: block;
-        float: left;
-        font-size: 18px;
-
-        &__icon {
-            position: relative;
-            left: 8px;
-            top: -1px
+            left: 17px;
+            top: 7px
         }
     }
     &-refresh {
@@ -90,29 +87,38 @@ $header-content-height: 40px;
 
         &__icon {
             position: relative;
-            left: 5px;
-            top: 1px
+            left: 13px;
+            top: 9px
+        }
+    }   
+    &-next {
+        display: block;
+        float: left;
+        font-size: 18px;
+
+        &__icon {
+            position: relative;
+            left: 13px;
+            top: 7px
         }
     }   
     &-gototop {
-        position: absolute;
-        top: 0;
-        left: 110px;
-        right: 40px;
+        // outline: 1px dotted orange;
+
+        flex-grow: 1;
+
         display: block;
         height: $header-content-height;
     }
     &-close {
         display: block;
-        float: right;
         font-size: 13px;
         color: white;
-        margin-right: 8px;
 
         &__icon {
             position: relative;
-            left: 7px;
-            top: 1px
+            left: 15px;
+            top: 9px
         }
     }    
 }