2.x - Updating grid app

Author: quead

src/assets/css/main.css

@@ -13,8 +13,15 @@
   box-sizing: border-box;
 }
 
+body,
+html {
+  width: 100%;
+  height: 100%;
+  display: block;
+}
+
 body {
-  background-color: #f7f8fa;
+  background-color: #ffffff;
   font-family: 'Source Sans Pro', sans-serif;
   font-size: 14px;
   line-height: 1.5;
@@ -23,9 +30,6 @@ body {
   user-select: none;
   cursor: default;
   color: #212121;
-  width: 100%;
-  height: 45px;
-  padding-top: 45px;
   -webkit-app-region: drag;
   overflow: hidden;
 }
@@ -111,9 +115,31 @@ a:active {
   background-color: #99a6bf;
 }
 
+.container {
+  height: 100%;
+  display: flex;
+}
+
+.col {
+  position: relative;
+  height: 100%;
+}
+
+.col-2 {
+  width: 16.666667%;
+}
+
+.col-3 {
+  width: 25%;
+}
+
+.col-6 {
+  width: 50%;
+}
+
 .loading-app {
   position: fixed;
-  color: #e52d27;
+  color: #ffffff;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
@@ -168,6 +194,36 @@ input[type="radio"]:checked + label .round-check:after {
   left: 22px;
 }
 
+.app-yt-2 {
+  height: 100%;
+}
+
+.app {
+  position: relative;
+  height: 100%;
+  color: #ffffff;
+}
+
+.app-content {
+  height: calc(100% - 120px);
+  display: block;
+  position: absolute;
+  overflow: auto;
+  bottom: 0;
+}
+
+.app-services {
+  background-color: #212121;
+}
+
+.app-feed {
+  background-color: #212121;
+}
+
+.app-player {
+  background-color: #e52d27;
+}
+
 header {
   position: absolute;
   height: 45px;
@@ -314,18 +370,6 @@ footer .col {
   padding: 0 15px;
 }
 
-footer .col-2 {
-  width: 16.666667%;
-}
-
-footer .col-3 {
-  width: 25%;
-}
-
-footer .col-6 {
-  width: 50%;
-}
-
 footer .col:first-child {
   padding-left: 0;
 }
@@ -817,3 +861,7 @@ iframe {
 .video-list-clear .fa {
   margin-right: 5px;
 }
+
+app-yt {
+  display: none;
+}

src/assets/scss/_common.scss

@@ -1,6 +1,6 @@
 .loading-app {
     position: fixed;
-    color: $c-primary;
+    color: $c-white;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%)
@@ -53,3 +53,37 @@ input[type="radio"]:checked {
         }
     }
 }
+
+
+// app-yt-2
+
+.app-yt-2 {
+    height: 100%;
+}
+
+.app {
+    position: relative;
+    height: 100%;
+    color: $c-white;
+    &-content {
+        height: calc(100% - 120px);
+        display: block;
+        position: absolute;
+        overflow: auto;
+        bottom: 0;
+
+    }
+    &-head {
+
+    }
+    &-services {
+        background-color: $c-black;
+    }
+    &-feed {
+        background-color: $c-black;
+    }
+    &-player {
+        background-color: $c-primary;
+    }
+}
+

src/assets/scss/_footer.scss

@@ -9,15 +9,6 @@ footer {
     padding: 5px 15px;
     .col {
         padding: 0 15px;
-        &-2 {
-            width: 16.666667%;
-        }
-        &-3 {
-            width: 25%;
-        }
-        &-6 {
-            width: 50%;
-        }
         &:first-child {
             padding-left: 0;
         }

src/assets/scss/_global.scss

@@ -2,8 +2,14 @@
     box-sizing: border-box;
 }
 
+body,
+html {
+    width: 100%;
+    height: 100%;
+    display: block;
+}
 body {
-    background-color: $c-base;
+    background-color: $c-white;
     font-family: 'Source Sans Pro', sans-serif;
     font-size: $f-14;
     line-height: 1.5;
@@ -12,9 +18,6 @@ body {
     user-select: none;
     cursor: default;
     color: $c-black;
-    width: 100%;
-    height: 45px;
-    padding-top: 45px;
     -webkit-app-region: drag;
     overflow: hidden;
 }

src/assets/scss/main.scss

@@ -4,11 +4,16 @@
 @import 'global';
 
 @import 'buttons';
+@import 'grid';
 @import 'common';
 
 @import 'header';
 @import 'footer';
 
 @import 'navbar';
 @import 'search';
-@import 'videos';
+@import 'videos';
+
+app-yt {
+    display: none; 
+}

src/index.html

@@ -16,6 +16,41 @@
             </div>
         </app-yt>
 
+        <div class="app-yt-2">
+            <div class="container">
+                <div class="col col-3">
+                    <div class="app app-services">
+                        <div class="app-head">
+                            YouTube
+                        </div>
+                        <div class="app-content">
+
+                        </div>
+                    </div>
+                </div>
+                <div class="col col-6">
+                    <div class="app app-feed">
+                        <div class="app-head">
+                            Feed
+                        </div>
+                        <div class="app-content">
+
+                        </div>
+                    </div>
+                </div>
+                <div class="col col-3">
+                    <div class="app app-player">
+                        <div class="app-head">
+                            Player
+                        </div>
+                        <div class="app-content">
+
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+
         <script>
 		/*
             // Reload pentru NWJS (DE EDITAT)