1.9.2 - Small fixes

Author: quead

README.md

@@ -53,8 +53,7 @@ Just take files from ***dist*** folder
 
 ## Changelog
 Angular2 YT Player v1.9.2
-- Webpage is now fully responsive
-- UX improvements
+- UX improvements and fixes
 
 Angular2 YT Player v1.9.1
 - Get settings.json for localstorage if your localstorage is empty

dist/assets/css/main.css

@@ -203,7 +203,7 @@ a:active {
 }
 
 :root {
-  --menu-diff: 175px;
+  --menu-diff: 160px;
 }
 
 .container {
@@ -216,7 +216,7 @@ a:active {
 }
 
 .col-1 {
-  width: 350px;
+  width: 320px;
 }
 
 .col-2 {
@@ -2250,7 +2250,10 @@ iframe {
     width: 100%;
   }
   #app-container > .container {
-    flex-wrap: wrap;
+    display: block;
+  }
+  #app-container.light-mode > .container {
+    background-color: var(--c-white);
   }
   .app-content {
     overflow: visible;
@@ -2265,25 +2268,25 @@ iframe {
     position: relative;
     height: 160px;
   }
+  #feed-video-list {
+    position: relative;
+    width: 100%;
+  }
+  .video-list-featured {
+    margin: 10px -10px 0;
+  }
+  .form-select, .form-text {
+    display: block;
+  }
+  .form-select label, .form-text label {
+    margin-bottom: 5px;
+  }
+  #playlist-video-list .playlist-video-content {
+    bottom: 45px;
+    height: calc(100% - 84px);
+  }
 }
 
-/*
-@media screen and (max-width: 991px) {
-    body {
-        overflow: visible;
-    }
-    .contanier {
-        display: block;
-    }
-    .col {
-        &-2,
-        &-3 {
-            width: 100%;
-            height: 100%;            
-        }
-        
-    }
-}*/
 .application #app-container > .container {
   height: calc(100% - 26px);
 }

scss/_grid.scss

@@ -1,5 +1,5 @@
 :root {
-    --menu-diff: 175px;
+    --menu-diff: 160px;
 }
 
 .container {
@@ -10,7 +10,7 @@
 .col {
     position: relative;
     &-1 {
-        width: 350px;
+        width: 320px;
     }
     &-2 {
         width: calc(40% - var(--menu-diff));

scss/_responsive.scss

@@ -143,7 +143,10 @@
     }
     #app-container {
         & > .container {
-            flex-wrap: wrap;
+            display: block;
+        }
+        &.light-mode > .container {
+            background-color: var(--c-white);            
         }
     }
     .app-content {
@@ -160,22 +163,25 @@
             height: 160px;
         }
     }
-}
 
-/*
-@media screen and (max-width: 991px) {
-    body {
-        overflow: visible;
+    #feed-video-list {
+        position: relative;
+        width: 100%;
     }
-    .contanier {
-        display: block;
+
+    .video-list-featured {
+        margin: 10px -10px 0;
     }
-    .col {
-        &-2,
-        &-3 {
-            width: 100%;
-            height: 100%;            
+
+    .form-select, .form-text {
+        display: block;
+        label {
+            margin-bottom: 5px;
         }
-        
     }
-}*/
+
+    #playlist-video-list .playlist-video-content {
+        bottom: 45px;
+        height: calc(100% - 84px);
+    }
+}

src/assets/css/main.css

@@ -203,7 +203,7 @@ a:active {
 }
 
 :root {
-  --menu-diff: 175px;
+  --menu-diff: 160px;
 }
 
 .container {
@@ -216,7 +216,7 @@ a:active {
 }
 
 .col-1 {
-  width: 350px;
+  width: 320px;
 }
 
 .col-2 {
@@ -2250,7 +2250,10 @@ iframe {
     width: 100%;
   }
   #app-container > .container {
-    flex-wrap: wrap;
+    display: block;
+  }
+  #app-container.light-mode > .container {
+    background-color: var(--c-white);
   }
   .app-content {
     overflow: visible;
@@ -2265,25 +2268,25 @@ iframe {
     position: relative;
     height: 160px;
   }
+  #feed-video-list {
+    position: relative;
+    width: 100%;
+  }
+  .video-list-featured {
+    margin: 10px -10px 0;
+  }
+  .form-select, .form-text {
+    display: block;
+  }
+  .form-select label, .form-text label {
+    margin-bottom: 5px;
+  }
+  #playlist-video-list .playlist-video-content {
+    bottom: 45px;
+    height: calc(100% - 84px);
+  }
 }
 
-/*
-@media screen and (max-width: 991px) {
-    body {
-        overflow: visible;
-    }
-    .contanier {
-        display: block;
-    }
-    .col {
-        &-2,
-        &-3 {
-            width: 100%;
-            height: 100%;            
-        }
-        
-    }
-}*/
 .application #app-container > .container {
   height: calc(100% - 26px);
 }