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

@@ -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;
+  flex: 1 1 0%;
-  margin-top: 80px;
+  margin: 18px 10px;
-  transition-property: margin;
-  transition-duration: 150ms;
-  transition-timing-function: ease-in-out;
-}
-
-.expand {
-  margin-left: 80px;
 }
 
 .banner {
@@ -46,9 +37,8 @@ body {
 }
 
 @media only screen and (max-width: 680px) {
-  .expand, .routerView {
+  .routerView {
-    margin-left: 0px;
+    margin: 68px 8px 68px;
-    margin-bottom: 80px;
   }
 
   .banner {

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>

src/renderer/components/side-nav/side-nav.css

@@ -3,11 +3,10 @@
   height: calc(100vh - 60px);
   width: 200px;
   overflow-x: hidden;
-  position: fixed;
+  position: sticky;
-  left: 0px;
+  left: 0;
-  top: 0px;
+  top: 60px;
-  z-index: 4;
+  z-index: 3;
-  margin-top: 60px;
   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;
   }
 

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
     },

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

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>

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;

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 0 16px
+
+    @media only screen and (min-width: 901px)
       margin: 0 8px 16px