Ajax loading + Tweaks of CSS

searx/static/themes/pix-art/js/searx.js

@@ -47,3 +47,97 @@ if(searx.autocompleter) {
 
 })(window, document);
 
+var xmlHttp
+
+function GetXmlHttpObject(){
+
+    var xmlHttp = null;
+
+    try {
+        // Firefox, Opera 8.0+, Safari
+        xmlHttp = new XMLHttpRequest();
+    }
+    catch (e) {
+        // Internet Explorer
+        try {
+            xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
+        }
+        catch (e){
+            xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
+        }
+    }
+    return xmlHttp;
+}
+
+var timer;
+
+// Calculate the rating
+function load_more(query,page){
+
+    xmlHttp = GetXmlHttpObject();
+    clearTimeout(timer);
+
+    if(xmlHttp == null){
+        alert ("Your browser does not support AJAX!");
+        return;
+    }
+
+    favicons[page] = [];
+
+    xmlHttp.onreadystatechange = function(){
+        
+        var loader = document.getElementById('load_more');
+
+        if (xmlHttp.readyState == 4){
+            
+            //loader.style.display = 'none';
+            var res = xmlHttp.responseText;
+
+            //loader.style.display = 'block';
+            //loader.innerHTML = '<div class="voted">Vote pris en compte</div>';
+            clearTimeout(timer);
+            timer = setTimeout(function(){},6000);
+
+            var results = document.getElementById('results_list');
+            //results_list.innerHTML += res;
+            var newNode = document.createElement('span');      
+            newNode.innerHTML = res;
+            results_list.appendChild(newNode);
+
+            var scripts = newNode.getElementsByTagName('script');
+            for (var ix = 0; ix < scripts.length; ix++) {
+                eval(scripts[ix].text);
+            }
+
+            load_images(page);
+            document.getElementById("load_more").onclick = function() { load_more(query, (page+1)); }
+            loader.removeAttribute("disabled");
+            
+        } else {
+            //loader.innerHTML = '<img src="images/rating_loading.gif" alt="loading" />'; 
+            loader.disabled = 'disabled';
+        }
+    }
+    var url = "/";
+    var params = "q="+query+"&pageno="+page+"&category_general=1&category_files=1&category_images=1&category_it=1&category_map=1&category_music=1&category_news=1&category_social+media=1&category_videos=1";
+    xmlHttp.open("POST",url,true);
+    xmlHttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
+    xmlHttp.setRequestHeader("Content-length", params.length);
+    xmlHttp.setRequestHeader("Connection", "close");
+    xmlHttp.send(params);
+}
+
+function load_images(page){
+    var arrayLength = favicons[page].length;
+    for (var i = 1; i < arrayLength+1; i++) {
+        var img = new Image();
+        img.setAttribute("i",i)
+        img.onload = function () {
+            var id = 'canvas-'+page+'-'+this.getAttribute("i");
+            var can = document.getElementById(id);
+            var ctx = can.getContext("2d");
+            ctx.drawImage(this, 0, 0, 16, 16);
+        };
+        img.src = favicons[page][i];
+    }
+}

searx/static/themes/pix-art/less/search.less

@@ -35,15 +35,15 @@
 
 #search_submit {
 	position: absolute;
-	top: 13px;
-	right: 1px;
+	top: 15px;
+	right: 5px;
 	padding: 0;
 	border: 0;
 	background: url('../img/search-icon-pixel.png') no-repeat;
 	background-size: 24px 24px;
 	opacity: 0.8;
 	width: 24px;
-	height: 30px;
+	height: 24px;
 	font-size: 0;
 }
 

searx/static/themes/pix-art/less/style.less

@@ -46,9 +46,6 @@ canvas {
 
 @import "search.less";
 
-// Autocompleter
-
-
 .row {
 	max-width: 800px;
 	margin: 20px auto;
@@ -116,8 +113,8 @@ div.title {
 	}
 }
 
-input[type="submit"] {
-	padding: 2px 6px;
+input[type="button"] {
+	padding: 4px 12px;
 	margin: 2px 4px;
 	display: inline-block;
 	background: @color-download-button-background;
@@ -127,6 +124,10 @@ input[type="submit"] {
 	cursor: pointer;
 }
 
+input[type="button"]:disabled {
+	cursor: progress;
+}
+
 input[type="checkbox"] {
 	visibility: hidden;
 }
@@ -136,6 +137,12 @@ fieldset {
 	border: 1px solid @color-settings-fieldset;
 }
 
+#logo {
+	position: absolute;
+	top: 13px;
+	left: 10px;
+}
+
 #categories {
 	margin: 0 10px;
 	.user-select;
@@ -299,7 +306,7 @@ tr {
 
 #pagination {
 	clear: both;
-
+	text-align: center;
         br {
         	clear: both;
         }
@@ -346,7 +353,7 @@ tr {
         div.title {
 
         	h1 {
-                        font-size: 1em;
+                font-size: 1em;
         	}
         }
 
@@ -398,6 +405,10 @@ tr {
 	#search_url {
 		display: none;
 	}
+
+	#logo {
+		display: none;
+	}
 }
 
 .favicon {