1.7 - Fixing trending videos

Author: quead

dist/assets/css/main.css

@@ -772,41 +772,36 @@ nav ul {
 }
 
 nav li {
-  padding-left: 15px;
+  padding-left: 0;
 }
 
 nav a {
   display: block;
   text-decoration: none;
   color: #ffffff;
   font-size: 14px;
-  text-transform: uppercase;
-  padding: 5px 15px;
-  margin: 10px 0;
+  padding: 10px 15px;
   transition: all 0.1s ease-out;
   border-left: 3px solid transparent;
 }
 
 nav a .fa {
   margin-right: 10px;
-}
-
-nav a:hover {
   color: #e52d27;
 }
 
-nav a:active {
+nav a:hover {
   border-left-color: #e52d27;
-  color: #ffffff;
 }
 
-nav a.is-active {
+nav a.is-active, nav a:active {
+  background: #e52d27;
   border-left-color: #e52d27;
   color: #ffffff;
 }
 
-nav a.is-active:hover {
-  color: #e52d27;
+nav a.is-active .fa, nav a:active .fa {
+  color: #ffffff;
 }
 
 #main-search {
@@ -1091,19 +1086,60 @@ iframe {
   background-color: rgba(255, 255, 255, 0.3);
 }
 
+.video-list-featured {
+  margin: 10px -20px 0;
+  height: 200px;
+  background-position: center center;
+  background-size: cover;
+  position: relative;
+}
+
+.video-list-featured .video-item {
+  position: absolute;
+  bottom: 15px;
+  left: 0;
+  width: auto;
+  padding: 10px 15px;
+  max-width: 90%;
+  background-color: rgba(0, 0, 0, 0.6);
+  color: #ffffff;
+  border: none;
+}
+
+.video-list-featured .video-item .fa,
+.video-list-featured .video-item p {
+  color: inherit;
+  font-size: inherit;
+}
+
+.video-list-featured .video-item-image {
+  width: 80px;
+  height: auto;
+  flex: auto;
+}
+
+.video-list-featured .video-item > div {
+  display: inline-block;
+}
+
 #feed-video-list {
   top: inherit;
   bottom: 0;
-  height: calc(100% - 100px);
+  height: calc(100% - 297px);
   width: calc(100% - 20px);
   max-height: none;
   left: 0;
-  padding-left: 15px;
+  padding-left: 5px;
 }
 
 #feed-video-list .video-item {
   background-color: transparent;
   border-bottom: none;
+  line-height: 16px;
+}
+
+#feed-video-list .video-item:first-child {
+  display: none;
 }
 
 #feed-video-list::-webkit-scrollbar-track {
@@ -1127,10 +1163,11 @@ iframe {
 #feed-video-list.grid-list {
   display: flex;
   flex-wrap: wrap;
+  padding-top: 10px;
 }
 
 #feed-video-list.grid-list .video-item {
-  width: 20%;
+  width: 33.333%;
   display: block;
   padding: 0 5px;
 }

dist/assets/scss/_navbar.scss

@@ -21,33 +21,30 @@ nav {
         margin: 0;
     }
     li {
-        padding-left: 15px;
+        padding-left: 0;
     }
     a {
         display: block;
         text-decoration: none;
         color: $c-white;
         font-size: 14px;
-        text-transform: uppercase;
-        padding: 5px 15px;
-        margin: 10px 0;
+        padding: 10px 15px;
         transition: all 0.1s ease-out;
         border-left: 3px solid transparent;
         .fa {
             margin-right: 10px;
-        }
-        &:hover {
             color: $c-primary;
         }
-        &:active {
+        &:hover {
             border-left-color: $c-primary;
-            color: $c-white;
         }
-        &.is-active {
+        &.is-active,
+        &:active {
+            background: $c-primary;
             border-left-color: $c-primary;
             color: $c-white;
-            &:hover {
-                color: $c-primary;
+            .fa {
+                color: $c-white;
             }
         }
     }

dist/assets/scss/_videos.scss

@@ -194,17 +194,53 @@ iframe {
     }
 }
 
+.video-list-featured {
+    margin: 10px -20px 0;
+    height: 200px;
+    background-position: center center;
+    background-size: cover;
+    position: relative;
+    .video-item {
+        position: absolute;
+        bottom: 15px;
+        left: 0;
+        width: auto;
+        padding: 10px 15px;
+        max-width: 90%;
+        background-color: rgba($c-black, 0.6);
+        color: $c-white;
+        border: none;
+        .fa,
+        p {
+            color: inherit;
+            font-size: inherit;
+        }
+        &-image {
+            width: 80px;
+            height: auto;
+            flex: auto;
+        }
+        > div {
+            display: inline-block;
+        }
+    }
+}
+
 #feed-video-list {
     top: inherit;
     bottom: 0;
-    height: calc(100% - 100px);
+    height: calc(100% - 297px);
     width: calc(100% - 20px);
     max-height: none;
     left: 0;
-    padding-left: 15px;
+    padding-left: 5px;
     .video-item {
         background-color: transparent;
         border-bottom: none;
+        line-height: 16px;
+        &:first-child {
+            display: none;
+        }
     }
     &::-webkit-scrollbar-track {
         border-radius: 2px;
@@ -225,8 +261,9 @@ iframe {
     &.grid-list {
         display: flex;
         flex-wrap: wrap;
+        padding-top: 10px;
         .video-item {
-            width: 20%;
+            width: 33.333%;
             display: block;
             padding: 0 5px;
             .video-item-image {

dist/assets/settings.json

@@ -14,7 +14,7 @@
       "value": "AIzaSyDcMvWlqPTHg7rHm-CTVXJwpaVGXKu7cBc"
     }, {
       "name": "Country trending",
-      "value": "US"
+      "value": "RO"
     }, {
       "name": "Number of search results",
       "value": 15

dist/index.html

@@ -2,7 +2,7 @@
 <html>
     <head>
         <base href="/">
-        <title>YouTube Player v1.6</title>
+        <title>YouTube Player v1.7</title>
         <link rel="icon" href="favicon.ico">
         <link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:200,300,400,400i,700,900" rel="stylesheet">
         <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">