Continued work on the UI

This commit is contained in:
RemixDev 2020-04-08 18:43:35 +02:00
parent ea9a8f5e0f
commit c4d5624c37
3 changed files with 126 additions and 34 deletions

View File

@ -32,7 +32,7 @@ div#middle_section {
/* Center section */ /* Center section */
#search > input#searchbar{ #search > input#searchbar{
width: calc(100% - 16px); width: calc(100% - 32px);
height: 32px; height: 32px;
padding: 0px 8px; padding: 0px 8px;
margin: 8px; margin: 8px;
@ -45,6 +45,7 @@ div#middle_section {
width: 100%; width: 100%;
height: calc(100% - 48px); height: calc(100% - 48px);
overflow-y: scroll; overflow-y: scroll;
padding-left: 10px
} }
#content::-webkit-scrollbar { #content::-webkit-scrollbar {
width: 10px; width: 10px;
@ -61,8 +62,54 @@ div#middle_section {
padding: 0px 2px; 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 */ /* Download tab section */
@ -91,3 +138,16 @@ div#download_tab{
font-size: 24px; font-size: 24px;
margin: 4px; 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;
}

View File

@ -20,13 +20,32 @@
</aside> </aside>
<main id="main_content"> <main id="main_content">
<div id="middle_section"> <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>
</div>
<div v-if="section != 'TOP_RESULT'">
</div>
</div>
</template>
</div> </div>
</section>
</div></section>
</div> </div>
<div id="download_tab_container"> <div id="download_tab_container">
<div id="download_tab_bar"> <div id="download_tab_bar">

View File

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