NetFlix Style

plugin/YouPHPFlix/view/css/style.css

@@ -155,7 +155,7 @@ a:visited {
 .thumbsImage{
     transition: border 0.8s;
     position: relative;
-    border: 4px solid #0e0f11;
+    border: 4px solid #0e0f1122;
     
 }
 .thumbsGIF{

plugin/YouPHPFlix/view/firstPage.php

@@ -32,7 +32,7 @@ $category = Category::getAllCategories();
         include $global['systemRootPath'] . 'view/include/navbar.php';
         ?>
 
-        <div class="container-fluid"> 
+        <div class="container-fluid" style="display: none;"> 
 
 
             <div class="row">
@@ -311,7 +311,7 @@ $category = Category::getAllCategories();
             }
             ?>
         </div>
-
+        <div id="loading" class="loader" style="width: 30vh; height: 30vh; position: absolute; left: 50%; top: 50%; margin-left: -15vh; margin-top: -15vh;"></div>
 
         <div class="webui-popover-content" id="popover">
             <?php
@@ -368,8 +368,6 @@ $category = Category::getAllCategories();
         <script>
             $(function () {
 
-
-
             });
         </script>
     </body>

plugin/YouPHPFlix/view/js/script.js

@@ -1,6 +1,19 @@
 var video;
 var cat;
 var videos_id;
+var $carousel;
+
+function isFlickityEnabled(selector){
+    var isEnabled = $(selector).hasClass('flickity-enabled');
+    if(isEnabled){
+        $('#loading').fadeOut();
+        $('.container-fluid').fadeIn('slow', function () {
+            $carousel.flickity('resize');
+        });       
+    }else{
+        setTimeout(function(){isFlickityEnabled(selector)}, 500);
+    }
+}
 
 function loadPlayLists() {
     $.ajax({
@@ -107,11 +120,12 @@ $(function () {
         loadPlayLists();
     });
 
-    $('.carousel').flickity({
+    $carousel = $('.carousel').flickity({
         lazyLoad: 7,
         setGallerySize: false,
         cellAlign: 'left'
     });   
+    isFlickityEnabled('.carousel');
     
     $('.myList').webuiPopover({
         style: 'inverse',
@@ -141,8 +155,5 @@ $(function () {
         return false;
     });
 
-    $(window).on('resize', function () {
-        $('#ifvideo')
-    });
 });