Continued work on the UI
This commit is contained in:
RemixDev
parent
ea9a8f5e0f
commit
c4d5624c37
@ -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{
|
||||
margin: 8px;
|
||||
@media only screen and (min-width: 600px) {
|
||||
#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;
|
||||
}
|
||||
|
||||
@ -20,13 +20,32 @@
|
||||
</aside>
|
||||
<main id="main_content">
|
||||
<div id="middle_section">
|
||||
<header id="search">
|
||||
<input id="searchbar" type="search" name="searchbar" value="">
|
||||
</header>
|
||||
<section id="content">
|
||||
<div id="container">
|
||||
<header id="search"><input id="searchbar" type="text" name="searchbar" value="" placeholder="Search..."></header>
|
||||
<section id="content"><div id="container">
|
||||
|
||||
<!-- ### Main Search Tab ### -->
|
||||
<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>
|
||||
</section>
|
||||
|
||||
</div></section>
|
||||
</div>
|
||||
<div id="download_tab_container">
|
||||
<div id="download_tab_bar">
|
||||
|
||||
@ -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();
|
||||
}
|
||||
// IE
|
||||
else if (window.ActiveXObject){
|
||||
}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.
|
||||
xmlHttpRequest.onreadystatechange = function(){
|
||||
if(this.readyState === XMLHttpRequest.DONE && this.status === 200) {
|
||||
responseHandler(JSON.parse(this.responseText))
|
||||
}
|
||||
};
|
||||
// Send data
|
||||
if (typeof responseHandler === "function"){
|
||||
xmlHttpRequest.onreadystatechange = function(){
|
||||
if(this.readyState === XMLHttpRequest.DONE && this.status === 200) {
|
||||
responseHandler(JSON.parse(this.responseText))
|
||||
}
|
||||
}
|
||||
}
|
||||
xmlHttpRequest.send(JSON.stringify(data));
|
||||
}
|
||||
else{
|
||||
}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(){
|
||||
term = this.value
|
||||
console.log(term)
|
||||
doAjax("/search", "POST", searchHandler, {term: term});
|
||||
$("#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
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user