Adding some userlog to handle errors when ajax loading fail

panikweb_templates/static/css/general.css

@@ -243,6 +243,7 @@ nav a.active, nav button.active{
 	text-align:center;
 	margin:auto;
 }
+
 a.loading, button.loading{
 	color:#4183C4 !important;
    -webkit-animation: loading 1s infinite linear;

panikweb_templates/static/css/specifics.css

@@ -39,6 +39,25 @@ text-transform: uppercase;
 }
 .iconLabel{margin-left:0.1em;}
 
+#userLog{
+	z-index:2000;
+	position: fixed;
+	bottom: 0px;
+}
+#userLog .log{
+	margin:0.2em;
+	-moz-box-shadow: 0px 0px 3px #000;
+	-webkit-box-shadow: 0px 0px 3px #000;
+	box-shadow: 0px 0px 3px #000;
+	border-radius:0.5em;-moz-border-radius:0.5em;-webkit-border-radius:0.5em;
+	text-align:center;
+	padding: 0.2em;
+	font-size:0.9em;
+	color:black;
+	background-color:orange;
+	border: 2px solid yellow;
+	background-image: linear-gradient(135deg, rgba(0, 0, 0, 0.04) 25%, transparent 25%, transparent 50%, rgba(0, 0, 0, 0.04) 50%, rgba(0, 0, 0, 0.04) 75%, transparent 75%, transparent);
+}
 #main {}
 #Panik {background:white;}
 #Panik img{display:block;margin:auto;max-height:200px;}

panikweb_templates/static/css/type.css

@@ -70,3 +70,18 @@
 .resymbol.huge, .icons.huge{
 	font-size:8em;
 }
+
+.info:before,.warning:before,.error:before{
+	font-family: FontAwesome;
+	display:inline-block;
+	margin-right:0.2em;
+}
+.info:before {
+	content: "\f05a";
+}
+.warning:before {
+	content: "\f071";
+}
+.error:before {
+	content: "\f056 ";
+}

panikweb_templates/static/js/specifics.js

 $(function() {		
 	var $main = $("#Changing");
-
+	var $log = $("#userLog");
+	doLog = function(aTextToLog, type=false){
+		var aLog = $('<div>',{class:"log",html:'<div class='+type+'>'+aTextToLog+'</div>'});
+		aLog.hide().prependTo($log).show('fast').delay(10000).hide('fast', function() { 
+			$(this).remove(); 
+		});
+	}
 	String.prototype.decodeHTML = function() {
 		return $("<div>", {html: "" + this}).html();
 	};
-	afterLoad = function(html) {
+	afterLoad = function(html, textStatus, XMLHttpRequest) {
+		if (textStatus == "error") {
+			doLog('Sorry! And error occur when loading page content','error');
+			$("a, area").removeClass('loading');
+		}
 		document.title = html.match(/<title>(.*?)<\/title>/)[1].trim().decodeHTML();
 		/*
 		Quite UGLY but needed for styling the whole body with ID

panikweb_templates/templates/base.html

@@ -53,6 +53,7 @@
 				</div>
 			</div>
 		</div>
+		<div id="userLog"></div>
 	</div>
 
 {% block pageend %}