From 8d5aa4d855d30bd1303624c687094f6af8efbcfc Mon Sep 17 00:00:00 2001
From: vallode <18506096+vallode@users.noreply.github.com>
Date: Fri, 3 Jun 2022 14:01:26 +0200
Subject: [PATCH] Remove usage of fixed positioning for core UI elements
 (#2284)

* Use flex positioning instead of fixed

* Remove expand class

* Fix sticky description on video in mobile

* Sort CSS properties
---
 src/renderer/App.css                          | 22 +++++--------------
 src/renderer/App.vue                          |  2 --
 src/renderer/components/side-nav/side-nav.css | 13 ++++++-----
 src/renderer/components/top-nav/top-nav.js    |  4 ----
 src/renderer/components/top-nav/top-nav.sass  | 10 ++++-----
 src/renderer/components/top-nav/top-nav.vue   |  1 -
 src/renderer/themes.css                       |  2 ++
 src/renderer/views/Watch/Watch.sass           | 16 ++++++++++----
 8 files changed, 33 insertions(+), 37 deletions(-)

diff --git a/src/renderer/App.css b/src/renderer/App.css
index de31d0a1..dc7b3a87 100644
--- a/src/renderer/App.css
+++ b/src/renderer/App.css
@@ -3,24 +3,15 @@
   src: url(assets/font/Roboto-Regular.ttf);
 }
 
-body {
-  min-height: 100vh;
-}
-
 #app {
+  display: flex;
+  flex-wrap: wrap;
   font-family: 'Roboto', sans-serif;
 }
 
 .routerView {
-  margin-left: 200px;
-  margin-top: 80px;
-  transition-property: margin;
-  transition-duration: 150ms;
-  transition-timing-function: ease-in-out;
-}
-
-.expand {
-  margin-left: 80px;
+  flex: 1 1 0%;
+  margin: 18px 10px;
 }
 
 .banner {
@@ -46,9 +37,8 @@ body {
 }
 
 @media only screen and (max-width: 680px) {
-  .expand, .routerView {
-    margin-left: 0px;
-    margin-bottom: 80px;
+  .routerView {
+    margin: 68px 8px 68px;
   }
 
   .banner {
diff --git a/src/renderer/App.vue b/src/renderer/App.vue
index 2083d29b..9b00dc40 100644
--- a/src/renderer/App.vue
+++ b/src/renderer/App.vue
@@ -12,7 +12,6 @@
     <ft-flex-box
       v-if="showUpdatesBanner || showBlogBanner"
       class="flexBox routerView"
-      :class="{ expand: !isOpen }"
     >
       <ft-notification-banner
         v-if="showUpdatesBanner"
@@ -36,7 +35,6 @@
       <RouterView
         ref="router"
         class="routerView"
-        :class="{ expand: !isOpen }"
       />
       <!-- </keep-alive> -->
     </transition>
diff --git a/src/renderer/components/side-nav/side-nav.css b/src/renderer/components/side-nav/side-nav.css
index 81768f84..5e0877b8 100644
--- a/src/renderer/components/side-nav/side-nav.css
+++ b/src/renderer/components/side-nav/side-nav.css
@@ -3,11 +3,10 @@
   height: calc(100vh - 60px);
   width: 200px;
   overflow-x: hidden;
-  position: fixed;
-  left: 0px;
-  top: 0px;
-  z-index: 4;
-  margin-top: 60px;
+  position: sticky;
+  left: 0;
+  top: 60px;
+  z-index: 3;
   box-shadow: 1px -1px 1px -1px var(--primary-shadow-color);
   background-color: var(--side-nav-color);
   transition-property: width;
@@ -168,6 +167,10 @@
   }
 
   .sideNav {
+    position: fixed;
+    left: 0;
+    bottom: 0;
+
     display: flex;
   }
 
diff --git a/src/renderer/components/top-nav/top-nav.js b/src/renderer/components/top-nav/top-nav.js
index 136f17b5..c857a373 100644
--- a/src/renderer/components/top-nav/top-nav.js
+++ b/src/renderer/components/top-nav/top-nav.js
@@ -44,10 +44,6 @@ export default Vue.extend({
       return this.$store.getters.getSearchSettings
     },
 
-    isSideNavOpen: function () {
-      return this.$store.getters.getIsSideNavOpen
-    },
-
     barColor: function () {
       return this.$store.getters.getBarColor
     },
diff --git a/src/renderer/components/top-nav/top-nav.sass b/src/renderer/components/top-nav/top-nav.sass
index 0481ac5e..3d50ae67 100644
--- a/src/renderer/components/top-nav/top-nav.sass
+++ b/src/renderer/components/top-nav/top-nav.sass
@@ -4,12 +4,13 @@
       @content
 
 .topNav
-  position: fixed
+  position: sticky
   z-index: 4
   left: 0
   right: 0
   top: 0
   height: 60px
+  width: 100%
   line-height: 60px
   background-color: var(--card-bg-color)
   -webkit-box-shadow: 0px 2px 1px 0px var(--primary-shadow-color)
@@ -24,6 +25,9 @@
   @include top-nav-is-colored
     background-color: var(--primary-color)
 
+  @media only screen and (max-width: 680px)
+    position: fixed
+
 .menuIcon // the hamburger button
   @media only screen and (max-width: 680px)
     display: none
@@ -160,7 +164,3 @@
       left: 0
       right: 0
       margin: 95px 10px 0px
-
-    @media only screen and (min-width: 681px)
-      &.expand
-        margin-left: 100px
diff --git a/src/renderer/components/top-nav/top-nav.vue b/src/renderer/components/top-nav/top-nav.vue
index 389a0abc..450807f9 100644
--- a/src/renderer/components/top-nav/top-nav.vue
+++ b/src/renderer/components/top-nav/top-nav.vue
@@ -90,7 +90,6 @@
       <ft-search-filters
         v-show="showFilters"
         class="searchFilters"
-        :class="{ expand: !isSideNavOpen }"
         @filterValueUpdated="handleSearchFilterValueChanged"
       />
     </div>
diff --git a/src/renderer/themes.css b/src/renderer/themes.css
index 42b82b37..0e7b1f2a 100644
--- a/src/renderer/themes.css
+++ b/src/renderer/themes.css
@@ -619,6 +619,8 @@
 }
 
 body {
+  margin: 0;
+  min-height: 100vh;
   color: var(--primary-text-color);
   background-color: var(--bg-color);
   --red-500: #f44336;
diff --git a/src/renderer/views/Watch/Watch.sass b/src/renderer/views/Watch/Watch.sass
index 48bfd5db..2c566255 100644
--- a/src/renderer/views/Watch/Watch.sass
+++ b/src/renderer/views/Watch/Watch.sass
@@ -1,5 +1,5 @@
 =dual-column-template
-  grid-template: "video video sidebar" 0fr "info info sidebar" auto "info info sidebar" auto / 1fr 1fr 1fr
+  grid-template: "video video sidebar" 0fr "info info sidebar" 1fr "info info sidebar" 1fr / 1fr 1fr 1fr
 
 =theatre-mode-template
   grid-template: "video video video" auto "info info sidebar" auto "info info sidebar" auto / 1fr 1fr 1fr
@@ -29,7 +29,7 @@
     grid-area: video
 
     .videoAreaMargin
-      margin: 0px 8px 16px
+      margin: 0 0 16px
 
     .videoPlayer
       grid-column: 1
@@ -61,11 +61,16 @@
           margin-top: 10px
 
   .watchVideo
-    margin: 0px 8px 16px
+    margin: 0 0 16px
     grid-column: 1
 
   .infoArea
     grid-area: info
+    position: relative
+
+    @media only screen and (min-width: 901px)
+      position: sticky
+      top: 76px
 
   .sidebarArea
     grid-area: sidebar
@@ -83,4 +88,7 @@
     height: 500px
 
   .watchVideoRecommendations, .theatreRecommendations
-    margin: 0 8px 16px
+    margin: 0 0 16px
+
+    @media only screen and (min-width: 901px)
+      margin: 0 8px 16px