update css

assets/css/mediawiki.css

@@ -39,37 +39,47 @@
 	overflow: auto;
 	margin-top: 5px;
 }
-#pageWiki {
+#loading-menu {
 	border-radius: 6px;
-	overflow: auto;
 	margin-top: 5px;
 }
-#loading {
+#pageWiki, #loading-page {
 	border-radius: 6px;
+	overflow: auto;
+	margin-top: 5px;
 }
+/* #loading {
+	border-radius: 6px;
+} */
 
-#loading>ul {
+/* #loading-page>ul, #loading-menu>ul {
 	position: relative;
 	background-color: rgb(151, 151, 151);
-}
+} */
 
-#loading>ul {
+#loading-page>ul, #loading-menu>ul {
 	border-radius: 3px;
-	content: '';
-	display: block;
-	position: absolute;
+	width: 50%;
+	display: inline-block;
+	position: relative;
 	background: rgba(255, 255, 255, 0.20);
-	background: linear-gradient(to right, rgba(255, 255, 255, 0.30) 0%, rgba(255, 255, 255, 0) 100%);
+	background: linear-gradient(to right, #65BA91 0%, #116d41 100%);
 	animation: shine;
-	animation-duration: 2s;
+	animation-duration: 3s;
 	animation-iteration-count: infinite;
 	animation-timing-function: ease-out;
+	/*
+	animation: slidein;
+	animation-duration: 2s;
+	animation-iteration-count: infinite;
+	animation-timing-function:  ease-out;*/
+	 /*animation: 3s linear 1s infinite alternate slidein;*/
 }
 
 @keyframes shine {
 	from {
-		opacity: 0.5;
-		left: 15%;
+		opacity: 0.1;
+		left: 0%;
 	}
 	to {
 		opacity: 1;
@@ -81,21 +91,25 @@
 	background-color: whitesmoke !important;
 }
 
-#menu-left>ul, #loading>ul {
+#menu-left>ul, #loading-page>ul, #loading-menu>ul {
 	border-bottom: 1px solid #ccc;
 	list-style: none;
 }
 
-#title-menu {
+#title-menu, #loading-page>p, #loading-menu>p {
 	font-size: 1.5em;
+	text-align: center;
 }
+/* #loading-page>p, #loading-menu>p {
+	overflow: hidden;
+} */
 
-#central-container, #loading>p {
+#central-container>p {
 	font-size: 2em;
-	text-align: center;
+	overflow: auto;
 }
 
-#accordion>li, #loading>ul>li {
+#accordion>li, #loading-menu>ul>li, #loading-page>ul>li {
 	text-align: center;
 	margin: auto;
 	width: 85%;

assets/js/contentPage.js

@@ -7,10 +7,12 @@ function show(id) {
 	$("#" + id).show();
 }
 $(document).ready(function () {
+	$('#loading-page').hide();
 	$('#block-interop').show();
 	$(".c-actor").hide();
 	$("#btw").show();
 	$(".btw").attr("style", "background-color:#65BA91");
+	$('#loading-page').hide();
 	$(".btn-sm").click(function () {
 		$("#body-actors").hide();
 		$("#subContent").show();
@@ -20,8 +22,8 @@ $(document).ready(function () {
 		} else {
 			pageName = $(this).text();
 		}
-		interopMW.showLoader();
-		$('#loading>p').text($(this).text());
+		$('#loading-page>p').text($(this).text());
+		interopMW.showLoader('page');
 		interopMW.pageContent(pageName);
 	});
 	$("#edit-wiki").click(function () {
@@ -66,5 +68,4 @@ $(document).ready(function () {
 		//if (typeForm === 'projets') {
 		dyFObj.openForm(typeForm, null, data);
 	});
-	$('#loading').hide();
 });
\ No newline at end of file

assets/js/interop.js

@@ -41,11 +41,11 @@ var  interopMW =  {
 		this.mediaWiki.page = searchText;
 		this.initMenu();
 	},
-	showLoader: function() {
+	showLoader: function(what) {
 		$("#menu-left-container").hide();
 		//$("#menu-left").hide();
 		$("#block-interop").hide();
-		$('#loading').show();
+		$('#loading-'+what).show();
 	},
 	//loader =
 	// initCreate: function () {

assets/js/menuLeft.js

 $(document).ready(function () {
     $("#menu-left").show();
+    $('#loading-menu').hide();
     $("#accordion>li").click(function () {
         $("#accordion>li").removeClass("active");
         if ($(this).attr("aria-expanded") == "false") {
@@ -17,8 +18,7 @@ $(document).ready(function () {
         var pageName = $(this).data("page");
         interopMW.initObj(id, name, categorie);
         interopMW.pageContent(pageName);
-        interopMW.showLoader();
-        $('#loading>p').text(pageName);
+        interopMW.showLoader('page');
+        $('#loading-page>p').text(pageName);
     });
-    $('#loading').hide();
 });
\ No newline at end of file

assets/js/welcomePage.js

 
 $(document).ready(function () {
     $("#menu-left").hide();
-    $('#loading').hide();
+    $('#loading-menu').hide();
+    $('#loading-page').hide();
     $(".btn-directory-categorie").click(function () {
         $(".central-section").removeClass("col-md-9 col-sm-9 col-lg-10").addClass("col-xs-12");
-        interopMW.showLoader();
-
         let titleLoading = ($(this).data("categorie") === "actors") ? "acteurs" : "";
         titleLoading = ($(this).data("categorie") === "classifieds") ? "ressources" : titleLoading;
         titleLoading = ($(this).data("categorie") === "projects") ? "projets" : titleLoading;
-        $('#loading>p').text(titleLoading);
-        $("#bloc-interop").append(loading);
+        $("#menu-left").hide();
+        $('#loading-menu>p').text(titleLoading);
+        interopMW.showLoader('menu');
 
         var name = $(this).data("name");
         var categorie = titleLoading;
@@ -33,8 +33,8 @@ $(document).ready(function () {
         var categorie = $(this).data("categorie");
         var id = $(this).data("id");
         var searchText = $("#search-bar-wiki>input").val();
-        interopMW.showLoader();
-        $('#loading>p').text(searchText);
+        $('#loading-menu>p').text(searchText);
+        interopMW.showLoader('menu');
         if (searchText) {
             interopMW.initObj(id, name, categorie);
             interopMW.search(searchText);

views/default/indexMediaWiki.php

@@ -70,13 +70,35 @@ if ($this->dataView['wiki']['params'] == "none") {
 	<!-- 	*************************************************
 		menuLeft mediawiki
 		************************************************* --></div>
-		<div id="loading" class="col-xs-9">
+		<div id="loading-menu" class="col-xs-3 shadow2 no-padding">
 			<p></p>
 			<ul>
 			<?php
 echo '			<li>
-								<a href="javascript:;">loading</a>
-						</li>';
+					<a href="javascript:;">search</a>
+				</li>
+				<li>
+					<a href="javascript:;">for</a>
+				</li>
+				<li>
+					<a href="javascript:;">you</a>
+				</li>';
+    ?>
+			</ul>
+		</div>
+		<div id="loading-page" class="col-xs-9 shadow2 no-padding">
+			<p></p>
+			<ul>
+			<?php
+echo '			<li>
+					<a href="javascript:;">search</a>
+				</li>
+				<li>
+					<a href="javascript:;">for</a>
+				</li>
+				<li>
+					<a href="javascript:;">you</a>
+				</li>';
     ?>
 			</ul>
 		</div>