fix create course

assets/css/scss/_base.scss

@@ -767,12 +767,12 @@ hr {
     .preview-lg{
       width: 328px;
       height: 185px;
-      background-color: #000000;
+      background-color: $grey-500;
     }
     .preview-sm{
       width: 160px;
       height: 90px;
-      background-color: #000000;
+      background-color: $grey-500;
     }
     .img-preview{
       float: left;
@@ -783,6 +783,10 @@ hr {
   }
   .card-body{
     padding: 0;
+    .name{
+      font-size: 12px;
+      color: $grey-700;
+    }
     .title{
       color: $default-link;
       font-size: 16px;
@@ -3845,3 +3849,48 @@ table.certaintyTable {
   margin-bottom: 10px;
   vertical-align: top;
 }
+
+/*** SPINNERS ***/
+#main-spinner {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+.spinner {
+  position: relative;
+}
+.spinner:before, .spinner:after {
+  content: "";
+  position: relative;
+  display: block;
+}
+.spinner:before {
+  animation: spinner 2.5s cubic-bezier(0.75, 0, 0.5, 1) infinite normal;
+  width: 1em;
+  height: 1em;
+  background-color: $sidebar-background;
+}
+.spinner:after {
+  animation: shadow 2.5s cubic-bezier(0.75, 0, 0.5, 1) infinite normal;
+  bottom: -.5em;
+  height: .25em;
+  border-radius: 50%;
+  background-color: rgba(#000,0.2);
+}
+
+@keyframes spinner {
+  50% {
+    border-radius: 50%;
+    transform: scale(0.5) rotate(360deg);
+  }
+  100% {
+    transform: scale(1) rotate(720deg);
+  }
+}
+@keyframes shadow {
+  50% {
+    transform: scale(0.5);
+    background-color: rgba(#000,0.1);
+  }
+}

assets/css/scss/_spinner.scss

@@ -1,273 +0,0 @@
-@-moz-keyframes wobblebar-loader {
-    0% {
-        left: 4px;
-    }
-    3% {
-        left: 204px;
-    }
-    6% {
-        left: 4px;
-    }
-    9% {
-        left: 204px;
-    }
-    12% {
-        left: 4px;
-    }
-    15% {
-        left: 204px;
-    }
-    18% {
-        left: 32px;
-    }
-    27% {
-        left: 32px;
-    }
-    30% {
-        left: 204px;
-    }
-    33% {
-        left: 4px;
-    }
-    36% {
-        left: 204px;
-    }
-    39% {
-        left: 4px;
-    }
-    42% {
-        left: 204px;
-    }
-    45% {
-        left: 4px;
-    }
-    48% {
-        left: 204px;
-    }
-    51% {
-        left: 152px;
-    }
-    63% {
-        left: 152px;
-    }
-    66% {
-        left: 4px;
-    }
-    69% {
-        left: 204px;
-    }
-    72% {
-        left: 4px;
-    }
-    75% {
-        left: 204px;
-    }
-    78% {
-        left: 4px;
-    }
-    81% {
-        left: 204px;
-    }
-    84% {
-        left: 72px;
-    }
-    94% {
-        left: 72px;
-    }
-    97% {
-        left: 204px;
-    }
-}
-
-@-webkit-keyframes wobblebar-loader {
-    0% {
-        left: 4px;
-    }
-    3% {
-        left: 204px;
-    }
-    6% {
-        left: 4px;
-    }
-    9% {
-        left: 204px;
-    }
-    12% {
-        left: 4px;
-    }
-    15% {
-        left: 204px;
-    }
-    18% {
-        left: 32px;
-    }
-    27% {
-        left: 32px;
-    }
-    30% {
-        left: 204px;
-    }
-    33% {
-        left: 4px;
-    }
-    36% {
-        left: 204px;
-    }
-    39% {
-        left: 4px;
-    }
-    42% {
-        left: 204px;
-    }
-    45% {
-        left: 4px;
-    }
-    48% {
-        left: 204px;
-    }
-    51% {
-        left: 152px;
-    }
-    63% {
-        left: 152px;
-    }
-    66% {
-        left: 4px;
-    }
-    69% {
-        left: 204px;
-    }
-    72% {
-        left: 4px;
-    }
-    75% {
-        left: 204px;
-    }
-    78% {
-        left: 4px;
-    }
-    81% {
-        left: 204px;
-    }
-    84% {
-        left: 72px;
-    }
-    94% {
-        left: 72px;
-    }
-    97% {
-        left: 204px;
-    }
-}
-
-@keyframes wobblebar-loader {
-    0% {
-        left: 4px;
-    }
-    3% {
-        left: 204px;
-    }
-    6% {
-        left: 4px;
-    }
-    9% {
-        left: 204px;
-    }
-    12% {
-        left: 4px;
-    }
-    15% {
-        left: 204px;
-    }
-    18% {
-        left: 32px;
-    }
-    27% {
-        left: 32px;
-    }
-    30% {
-        left: 204px;
-    }
-    33% {
-        left: 4px;
-    }
-    36% {
-        left: 204px;
-    }
-    39% {
-        left: 4px;
-    }
-    42% {
-        left: 204px;
-    }
-    45% {
-        left: 4px;
-    }
-    48% {
-        left: 204px;
-    }
-    51% {
-        left: 152px;
-    }
-    63% {
-        left: 152px;
-    }
-    66% {
-        left: 4px;
-    }
-    69% {
-        left: 204px;
-    }
-    72% {
-        left: 4px;
-    }
-    75% {
-        left: 204px;
-    }
-    78% {
-        left: 4px;
-    }
-    81% {
-        left: 204px;
-    }
-    84% {
-        left: 72px;
-    }
-    94% {
-        left: 72px;
-    }
-    97% {
-        left: 204px;
-    }
-}
-
-/* :not(:required) hides this rule from IE9 and below */
-.wobblebar-loader:not(:required) {
-    background: #2E6DA4;
-    -moz-border-radius: 10.66667px;
-    -webkit-border-radius: 10.66667px;
-    border-radius: 10.66667px;
-    display: inline-block;
-    overflow: hidden;
-    text-indent: -9999px;
-    width: 228px;
-    height: 21.33333px;
-    position: relative;
-}
-
-.wobblebar-loader:not(:required)::after {
-    -moz-animation: wobblebar-loader 15000ms infinite ease;
-    -webkit-animation: wobblebar-loader 15000ms infinite ease;
-    animation: wobblebar-loader 15000ms infinite ease;
-    background: white;
-    display: block;
-    -moz-border-radius: 7.11111px;
-    -webkit-border-radius: 7.11111px;
-    border-radius: 7.11111px;
-    content: '';
-    position: absolute;
-    top: 3.55556px;
-    left: 4px;
-    width: 21.33333px;
-    height: 14.22222px;
-}

assets/js/app.js

@@ -271,8 +271,22 @@ $(function() {
         var id = $(this).attr('id') + '_options';
         var button = $(this);
         $("#" + id).toggle();
-        if($("#preview_course").length >= 0){
-            $("#preview_course").toggle();
+
+        if($("#column-left").hasClass("col-md-12")){
+            $("#column-left").removeClass('col-md-12');
+            $("#column-right").removeClass('col-md-12');
+            $("#column-right").addClass('col-md-4');
+            $("#column-left").addClass('col-md-8');
+        }else{
+            $("#column-left").removeClass('col-md-8');
+            $("#column-right").removeClass('col-md-4');
+            $("#column-left").addClass('col-md-12');
+            $("#column-right").addClass('col-md-12');
+        };
+
+        if($("#preview_course_add_course").length >= 0){
+
+            $("#preview_course_add_course").toggle();
         }
 
     });

main/create_course/add_course.php

@@ -423,7 +423,7 @@ if ($form->validate()) {
                     Display::url(
                         get_lang('Enter'),
                         api_get_path(WEB_PATH) . 'user_portal.php',
-                        ['class' => 'btn btn-default']
+                        ['class' => 'btn btn-primary']
                     ),
                     ['style' => 'float: left; margin:0px; padding: 0px;']
                 );

main/inc/lib/formvalidator/FormValidator.class.php

@@ -1266,7 +1266,9 @@ EOT;
             $returnValue .= '<br />
 
             <div id="loading_div_'.$id.'" class="loading_div" style="display:none;margin-left:40%; margin-top:10px; height:50px;">
-                <div class="wobblebar-loader"></div>
+                <div id="main-spinner">
+                    <span class="spinner"></span>  
+                </div>
             </div>
             ';
         }

main/inc/lib/javascript/upload.js

@@ -5,5 +5,7 @@ $(document).ready(function() {
 function addProgress(id)
 {
     $('#loading_div_'+id).show();
+
+    $('#preview_course_'+id).hide();
     $('#'+id).hide();
 }

main/template/default/create_course/add_course.html.twig

@@ -25,11 +25,11 @@
         {{ app.user.firstname }} {{ app.user.lastname }}
     {% endset %}
     <div class="row">
-        <div class="col-md-8">
+        <div id="column-left" class="col-md-12">
             {{ form }}
         </div>
-        <div class="col-md-4">
-            <div id="preview_course" class="card" style="display: none; border: none; box-shadow: none;">
+        <div id="column-right" class="col-md-12">
+            <div id="preview_course_add_course" class="card" style="display: none; border: none; box-shadow: none;">
                 <div class="card-body">
                     <div id="view-classic-course" class="card card-view card-course-classic ">
                         <div class="card-body">

src/ThemeBundle/Resources/views/Layout/welcome_to_course.html.twig

@@ -4,6 +4,10 @@
 
     {{ "HelloXAsYouCanSeeYourCourseListIsEmpty" | trans | format(app.user.completeName) }}
 
+    <div class="">
+
+    </div>
+
     {#{% if count_courses == 0 %}
         {{ "PleaseAllowUsALittleTimeToSubscribeYouToOneOfOurCourses"|trans }}
     {% else %}