From c4d5624c379fbb03020ba2c13a70fd59ff7c2389 Mon Sep 17 00:00:00 2001 From: RemixDev Date: Wed, 8 Apr 2020 18:43:35 +0200 Subject: [PATCH] Continued work on the UI --- public/css/style.css | 66 +++++++++++++++++++++++++++++++++++++++++-- public/index.html | 31 ++++++++++++++++---- public/js/frontend.js | 63 +++++++++++++++++++++++++---------------- 3 files changed, 126 insertions(+), 34 deletions(-) diff --git a/public/css/style.css b/public/css/style.css index bc83beb..509abf6 100644 --- a/public/css/style.css +++ b/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{ - 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; +} diff --git a/public/index.html b/public/index.html index b3c4c56..800064a 100644 --- a/public/index.html +++ b/public/index.html @@ -20,13 +20,32 @@
- -
-
+ +
+ + + -
+ +
diff --git a/public/js/frontend.js b/public/js/frontend.js index df144b1..db8f2fd 100644 --- a/public/js/frontend.js +++ b/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(); - } - // 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 }