Continued work on the UI

public/css/style.css

@@ -32,7 +32,7 @@ div#middle_section {
 
 /* Center section */
 #search > input#searchbar{
-	width: calc(100% - 16px);
+	width: calc(100% - 32px);
 	height: 32px;
 	padding: 0px 8px;
 	margin: 8px;
@@ -45,6 +45,7 @@ div#middle_section {
 	width: 100%;
 	height: calc(100% - 48px);
 	overflow-y: scroll;
+	padding-left: 10px
 }
 #content::-webkit-scrollbar {
   width: 10px;
@@ -61,8 +62,54 @@ div#middle_section {
 	padding: 0px 2px;
 }
 
-#container{
+@media only screen and (min-width: 600px) {
-	margin: 8px;
+  #container{
+    margin-left: 5%;
+    margin-right: 5%;
+  }
+}
+
+@media only screen and (min-width: 960px) {
+  #container {
+    margin-left: 10%;
+    margin-right: 10%;
+  }
+}
+
+@media only screen and (min-width: 1280px) {
+  #container {
+    display: block;
+    margin-left: 20%;
+    margin-right: 20%;
+  }
+}
+
+/* Main Search Tab */
+
+#main_search > .search_section{
+	float: none;
+}
+
+.top_result {
+	display: flex;
+	align-items:center;
+}
+.top_result > img {
+	display: inline-block;
+	border-radius: 5px;
+	width: 156px;
+	height: 156px;
+}
+.top_result > .info_box {
+	display: inline-block;
+	padding-left: 24px;
+}
+.top_result > .info_box > p {
+	margin: 0px;
+	margin-bottom: 4px;
+}
+.top_result > .info_box > .subtitle {
+	opacity: 0.75;
 }
 
 /* Download tab section */
@@ -91,3 +138,16 @@ div#download_tab{
 	font-size: 24px;
 	margin: 4px;
 }
+
+/* Global stuff */
+img.rounded {
+	border-radius: 50%;
+}
+span.tag {
+	background-color: #222324;
+  border-radius: 2px;
+  color: #ffffff;
+  display: inline-block;
+  font-size: 10px;
+  padding: 3px 6px;
+}

public/index.html

@@ -20,13 +20,32 @@
 		</aside>
 		<main id="main_content">
 			<div id="middle_section">
-				<header id="search">
+				<header id="search"><input id="searchbar" type="text" name="searchbar" value="" placeholder="Search..."></header>
-					<input id="searchbar" type="search" name="searchbar" value="">
+				<section id="content"><div id="container">
-				</header>
+
-				<section id="content">
+					<!-- ### Main Search Tab ### -->
-					<div id="container">
+					<div id="main_search">
+						<template v-for="section in results.ORDER">
+							<div v-if="(section != 'TOP_RESULT' && results[section].data.length > 0) || (results[section].length > 0)" class="search_section">
+								<h1>{{ names[section] }}</h1>
+								<!-- Top result -->
+								<div v-if="section == 'TOP_RESULT'" class="top_result">
+									<img v-bind:src="(results[section][0].__TYPE__ == 'artist' ? 'https://e-cdns-images.dzcdn.net/images/artist/' + results[section][0].ART_PICTURE : results[section][0].__TYPE__ == 'album' ? 'https://e-cdns-images.dzcdn.net/images/cover/' + results[section][0].ALB_PICTURE : 'https://e-cdns-images.dzcdn.net/images/cover/') + '/156x156-000000-80-0-0.jpg'"
+										v-bind:class="results[section][0].__TYPE__ == 'artist' ? 'rounded' : ''"></img>
+									<div class="info_box">
+										<p class="title">{{ results[section][0].__TYPE__ == 'artist' ? results[section][0].ART_NAME : results[section][0].__TYPE__ == 'album' ? results[section][0].ALB_TITLE : '' }}</p>
+										<p class="subtitle">{{ results[section][0].__TYPE__ == 'artist' ? results[section][0].NB_FAN + ' fans' : results[section][0].__TYPE__ == 'album' ? 'by '+results[section][0].ART_NAME+' - '+results[section][0].NUMBER_TRACK+' tracks' : '' }}</p>
+										<span class="tag">{{ results[section][0].__TYPE__.charAt(0).toUpperCase() + results[section][0].__TYPE__.substring(1)}}</span>
 									</div>
-				</section>
+								</div>
+								<div v-if="section != 'TOP_RESULT'">
+
+								</div>
+							</div>
+						</template>
+					</div>
+
+				</div></section>
 			</div>
 			<div id="download_tab_container">
 				<div id="download_tab_bar">

public/js/frontend.js

@@ -1,24 +1,17 @@
 // Initialization
 doAjax("/init", "POST");
 
-// From https://gist.github.com/dharmavir/936328
+// Functions to connect to the Flask server
 function getHttpRequestObject(){
-	// Define and initialize as false
 	var xmlHttpRequst = false;
-	// Mozilla/Safari/Non-IE
 	if (window.XMLHttpRequest){
 		xmlHttpRequst = new XMLHttpRequest();
-	}
+	}else if (window.ActiveXObject){
-	// IE
-	else if (window.ActiveXObject){
 		xmlHttpRequst = new ActiveXObject("Microsoft.XMLHTTP");
 	}
 	return xmlHttpRequst;
 }
-
-// Does the AJAX call to URL specific with rest of the parameters
 function doAjax(url, method, responseHandler, data){
-	// Set the variables
 	url = url || "";
 	method = method || "GET";
 	async = true;
@@ -30,23 +23,20 @@ function doAjax(url, method, responseHandler, data){
 	}
 	var xmlHttpRequest = getHttpRequestObject();
 
-	// If AJAX supported
 	if(xmlHttpRequest != false){
 		xmlHttpRequest.open(method, url, async);
-		// Set request header (optional if GET method is used)
 		if(method == "POST"){
 				xmlHttpRequest.setRequestHeader("Content-Type", "application/json");
 		}
-		// Assign (or define) response-handler/callback when ReadyState is changed.
+		if (typeof responseHandler === "function"){
 			xmlHttpRequest.onreadystatechange = function(){
 				if(this.readyState === XMLHttpRequest.DONE && this.status === 200) {
 			    responseHandler(JSON.parse(this.responseText))
 			  }
-		};
-		// Send data
-		xmlHttpRequest.send(JSON.stringify(data));
 			}
-	else{
+		}
+		xmlHttpRequest.send(JSON.stringify(data));
+	}else{
 		alert("Please use a browser with Ajax support!");
 	}
 }
@@ -63,14 +53,37 @@ document.querySelector("#hide_download_tab").onclick = (ev)=>{
 	document.querySelector("#download_tab").style.display = "none";
 }
 
+var mainSearch = new Vue({
+  el: '#main_search',
+  data: {
+		names: {
+			"TOP_RESULT": "Top Result",
+			"TRACK": "Tracks",
+			"ARTIST": "Artists",
+			"ALBUM": "Albums",
+			"PLAYLIST": "Playlists"
+		},
+    results: {
+			ORDER: [],
+			ALBUM: {},
+			ARTIST: {},
+			TRACK: {},
+			TOP_RESULT: [],
+			PLAYLIST: {}
+		}
+  }
+})
+
 // Search section
-$("#searchbar").on('search', function(){
+$("#searchbar").keyup(function(e){
+  if(e.keyCode == 13){
 		term = this.value
 		console.log(term)
 		doAjax("/search", "POST", searchHandler, {term: term});
+  }
 })
 
 function searchHandler(result){
 	console.log(result)
-	$("#container").text(JSON.stringify(result))
+	mainSearch.results = result
 }