1.7 - Fixing design issues

Author: quead

README.md

@@ -60,6 +60,8 @@ Just take files from ***dist*** folder
 
 Angular2 YT Player v1.7
 - Added featured video as first video from trending
+- Notifications for important actions you do
+- Removed debugging details
 - Improved UI/UX
 
 Angular2 YT Player v1.6
@@ -119,7 +121,6 @@ Angular2 YT Player v1.0.0
 - *Save your settings **(unversioned)***
 
 #### Roadmap to 2.0
-- Notifications for important actions you do **(in v1.7)**
 - Change and create theme **(in v1.7)**
 - Add your videos in playlist **(in v1.9)**
 - Next/prev video from your playlist **(in v1.9)**

dist/assets/css/main.css

@@ -200,15 +200,6 @@ a:active {
   color: #111111;
 }
 
-.debugging-info {
-  display: none;
-  color: #ffffff;
-}
-
-.debugging-info.active {
-  display: block;
-}
-
 .fa-color-danger {
   color: #e52d27;
 }
@@ -270,7 +261,7 @@ a:active {
 }
 
 .app-feed {
-  box-shadow: rgba(0, 0, 0, 0.03) 0 0 10px 5px;
+  box-shadow: rgba(0, 0, 0, 0.05) 0 0 10px 10px;
   z-index: 1;
 }
 
@@ -301,13 +292,15 @@ a:active {
 .notif {
   position: absolute;
   bottom: -41px;
-  background-color: #111111;
+  background-color: #232228;
   color: #ffffff;
   left: 50%;
   transform: translateX(-50%);
   min-width: 300px;
   padding: 10px 15px;
   text-align: center;
+  opacity: 0;
+  visibility: hidden;
   transition: all 0.1s ease-in-out;
   z-index: 1;
 }
@@ -318,6 +311,8 @@ a:active {
 
 .notif.active {
   bottom: 0;
+  opacity: 1;
+  visibility: visible;
 }
 
 .current-video-all {
@@ -682,10 +677,6 @@ input[type="radio"]:checked + label .round-check:after {
   transform: translate(-50%, -50%);
 }
 
-#logo:hover {
-  transform: translate(-50%, -50%) scale(1.1);
-}
-
 #logo small {
   position: absolute;
   left: calc(100% + 5px);
@@ -1183,16 +1174,6 @@ iframe {
   padding-top: 10px;
 }
 
-#feed-video-list.grid-list .video-item-count {
-  position: absolute;
-  top: 0;
-  left: 0;
-  background-color: rgba(0, 0, 0, 0.7);
-  padding: 7px 12px;
-  color: #ffffff;
-  z-index: 1;
-}
-
 #feed-video-list.grid-list .video-item {
   width: calc(33.333% - 10px);
   display: block;
@@ -1210,10 +1191,31 @@ iframe {
   margin: 5px 0 15px 0;
 }
 
+#feed-video-list.grid-list .video-item .video-item-count {
+  position: absolute;
+  top: 0;
+  left: 0;
+  background-color: rgba(0, 0, 0, 0.7);
+  padding: 7px 12px;
+  color: #ffffff;
+  z-index: 1;
+}
+
+#feed-video-list.grid-list .video-item:not(.hidden-thumbnails) .video-item-count {
+  top: 10px;
+  left: 10px;
+  height: 40px;
+  width: 40px;
+  line-height: 27px;
+  font-size: 12px;
+  text-align: center;
+  border-radius: 50%;
+}
+
 #feed-video-list.grid-list .video-item.hidden-thumbnails .video-item-count {
   position: relative;
   text-align: center;
-  background-color: #232228;
+  background-color: #000;
   padding: 5px;
 }
 

dist/assets/scss/_common.scss

@@ -49,14 +49,6 @@
     color: $c-gray;
 }
 
-.debugging-info {
-    display: none;
-    color: $c-white;
-    &.active {
-        display: block;
-    }
-}
-
 .fa-color-danger {
     color: $c-primary;
 }
@@ -108,7 +100,7 @@
         }
     }
     &-feed {
-        box-shadow: rgba($c-black, 0.03) 0 0 10px 5px;
+        box-shadow: rgba($c-black, 0.05) 0 0 10px 10px;
         z-index: 1;
         .app-content {
             padding: 0 20px;
@@ -137,19 +129,23 @@
 .notif {
     position: absolute;
     bottom: -41px;
-    background-color: $c-gray;
+    background-color: $c-primary-inverse;
     color: $c-white;
     left: 50%;
     transform: translateX(-50%);
     min-width: 300px;
     padding: 10px 15px;
     text-align: center;
+    opacity: 0;
+    visibility: hidden;
     transition: all 0.1s ease-in-out;
     z-index: 1;
     p {
         margin: 0;
     }
     &.active {
         bottom: 0;
+        opacity: 1;
+        visibility: visible;
     }
 }

dist/assets/scss/_header.scss

@@ -47,9 +47,6 @@
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
-    &:hover {
-        transform: translate(-50%, -50%) scale(1.1);
-    }
     small {
         position: absolute;
         left: calc(100% + 5px);

dist/assets/scss/_videos.scss

@@ -268,15 +268,6 @@ iframe {
         display: flex;
         flex-wrap: wrap;
         padding-top: 10px;
-        .video-item-count {
-            position: absolute;
-            top: 0;
-            left: 0;
-            background-color: rgba($c-black, 0.7);
-            padding: 7px 12px;
-            color: $c-white;
-            z-index: 1;
-        }
         .video-item {
             width: calc(33.333% - 10px);
             display: block;
@@ -290,11 +281,32 @@ iframe {
             .video-item-content {
                 margin: 5px 0 15px 0;
             }
+            .video-item-count {
+                position: absolute;
+                top: 0;
+                left: 0;
+                background-color: rgba($c-black, 0.7);
+                padding: 7px 12px;
+                color: $c-white;
+                z-index: 1;
+            }
+            &:not(.hidden-thumbnails) {
+                .video-item-count {
+                    top: 10px;
+                    left: 10px;
+                    height: 40px;
+                    width: 40px;
+                    line-height: 27px;
+                    font-size: 12px;
+                    text-align: center;
+                    border-radius: 50%;
+                }
+            }
             &.hidden-thumbnails {
                 .video-item-count {
                     position: relative;
                     text-align: center;
-                    background-color: $c-primary-inverse;
+                    background-color: $c-black;
                     padding: 5px;
                 }
             }

dist/assets/settings.json

@@ -1,9 +1,6 @@
 {
   "form_settings": [
     {
-      "name": "Show Debugging Info",
-      "value": false
-    }, {
       "name": "Show Thumbnails",
       "value": true
     }