Started working on the UI
This commit is contained in:
RemixDev
commit
ea9a8f5e0f
File diff suppressed because it is too large
Load Diff
|
|
@ -0,0 +1,28 @@
|
|||
/* fallback */
|
||||
@font-face {
|
||||
font-family: 'Material Icons';
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
src: url(../fonts/icons/MaterialIcons-Regular.eot); /* For IE6-8 */
|
||||
src: local('Material Icons'),
|
||||
local('MaterialIcons-Regular'),
|
||||
url(../fonts/icons/MaterialIcons-Regular.woff2) format('woff2'),
|
||||
url(../fonts/icons/MaterialIcons-Regular.woff) format('woff'),
|
||||
url(../fonts/icons/MaterialIcons-Regular.ttf) format('truetype');
|
||||
}
|
||||
|
||||
.material-icons {
|
||||
font-family: 'Material Icons';
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
font-size: 24px;
|
||||
line-height: 1;
|
||||
letter-spacing: normal;
|
||||
text-transform: none;
|
||||
display: inline-block;
|
||||
white-space: nowrap;
|
||||
word-wrap: normal;
|
||||
direction: ltr;
|
||||
-webkit-font-feature-settings: 'liga';
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
|
|
@ -0,0 +1,93 @@
|
|||
html{height: 100%;}
|
||||
body{margin: 0px;width: 100%;height: 100%;font-family: sans-serif; overflow: hidden; background-color: #ffffff; color: #333333;}
|
||||
|
||||
/* Sidebar section selector */
|
||||
aside#sidebar{
|
||||
background-color: #222324;
|
||||
width: 48px;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
color: #ffffff;
|
||||
}
|
||||
aside#sidebar > .side_icon{
|
||||
font-size: 24px;
|
||||
margin: 12px;
|
||||
}
|
||||
|
||||
/* Rest of the app */
|
||||
main#main_content{
|
||||
margin-left: 48px;
|
||||
width: calc(100% - 48px);
|
||||
height: 100%;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
/* Middle section */
|
||||
div#middle_section {
|
||||
background-color: #ffffff;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
min-width: 10px;
|
||||
}
|
||||
|
||||
/* Center section */
|
||||
#search > input#searchbar{
|
||||
width: calc(100% - 16px);
|
||||
height: 32px;
|
||||
padding: 0px 8px;
|
||||
margin: 8px;
|
||||
border: 0px;
|
||||
border-radius: 6px;
|
||||
background-color: #eeeeee;
|
||||
}
|
||||
#content{
|
||||
background-color: #eeeeee;
|
||||
width: 100%;
|
||||
height: calc(100% - 48px);
|
||||
overflow-y: scroll;
|
||||
}
|
||||
#content::-webkit-scrollbar {
|
||||
width: 10px;
|
||||
}
|
||||
|
||||
#content::-webkit-scrollbar-track {
|
||||
background: #eeeeee;
|
||||
}
|
||||
|
||||
#content::-webkit-scrollbar-thumb {
|
||||
background: #555;
|
||||
border-radius: 4px;
|
||||
width: 6px;
|
||||
padding: 0px 2px;
|
||||
}
|
||||
|
||||
#container{
|
||||
margin: 8px;
|
||||
}
|
||||
|
||||
/* Download tab section */
|
||||
div#download_tab_container{
|
||||
background-color: #222324;
|
||||
color: #ffffff;
|
||||
height: 100%;
|
||||
width: auto;
|
||||
display: flex;
|
||||
}
|
||||
div#download_tab_bar{
|
||||
height: 100%;
|
||||
width: 32px;
|
||||
}
|
||||
div#download_tab_bar > label{
|
||||
writing-mode: vertical-rl;
|
||||
line-height: 32px;
|
||||
padding-top: 8px;
|
||||
}
|
||||
div#download_tab{
|
||||
height: 100%;
|
||||
width: 300px;
|
||||
display: none;
|
||||
}
|
||||
.download_bar_icon{
|
||||
font-size: 24px;
|
||||
margin: 4px;
|
||||
}
|
||||
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
|
|
@ -0,0 +1,45 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en" dir="ltr">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>deemix</title>
|
||||
<link rel="stylesheet" type="text/css" href="/public/css/style.css">
|
||||
<link rel="stylesheet" type="text/css" href="/public/css/animate.css">
|
||||
<link rel="stylesheet" type="text/css" href="/public/css/material-icons.css"/>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=0">
|
||||
</head>
|
||||
<body>
|
||||
<aside id="sidebar">
|
||||
<i class="material-icons side_icon">menu</i>
|
||||
<i class="material-icons side_icon">home</i>
|
||||
<i class="material-icons side_icon">bubble_chart</i>
|
||||
<i class="material-icons side_icon">album</i>
|
||||
<i class="material-icons side_icon">link</i>
|
||||
<i class="material-icons side_icon">settings</i>
|
||||
<i class="material-icons side_icon">info</i>
|
||||
</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">
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
<div id="download_tab_container">
|
||||
<div id="download_tab_bar">
|
||||
<i id="show_download_tab" class="material-icons download_bar_icon">chevron_left</i>
|
||||
<label>downloads</label>
|
||||
</div>
|
||||
<div id="download_tab">
|
||||
<i id="hide_download_tab" class="material-icons download_bar_icon">chevron_right</i>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</body>
|
||||
<script type="text/javascript" src="/public/js/jquery-3.3.1.min.js"></script>
|
||||
<script type="text/javascript" src="/public/js/vue.min.js"></script>
|
||||
<script type="text/javascript" src="/public/js/frontend.js"></script>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,76 @@
|
|||
// Initialization
|
||||
doAjax("/init", "POST");
|
||||
|
||||
// From https://gist.github.com/dharmavir/936328
|
||||
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){
|
||||
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;
|
||||
data = data || {};
|
||||
|
||||
if(url == ""){
|
||||
alert("URL cannot be null/blank");
|
||||
return false;
|
||||
}
|
||||
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
|
||||
xmlHttpRequest.send(JSON.stringify(data));
|
||||
}
|
||||
else{
|
||||
alert("Please use a browser with Ajax support!");
|
||||
}
|
||||
}
|
||||
|
||||
// Show/Hide Download Tab
|
||||
document.querySelector("#show_download_tab").onclick = (ev)=>{
|
||||
ev.preventDefault();
|
||||
document.querySelector("#download_tab_bar").style.display = "none";
|
||||
document.querySelector("#download_tab").style.display = "block";
|
||||
}
|
||||
document.querySelector("#hide_download_tab").onclick = (ev)=>{
|
||||
ev.preventDefault();
|
||||
document.querySelector("#download_tab_bar").style.display = "block";
|
||||
document.querySelector("#download_tab").style.display = "none";
|
||||
}
|
||||
|
||||
// Search section
|
||||
$("#searchbar").on('search', function(){
|
||||
term = this.value
|
||||
console.log(term)
|
||||
doAjax("/search", "POST", searchHandler, {term: term});
|
||||
})
|
||||
|
||||
function searchHandler(result){
|
||||
console.log(result)
|
||||
$("#container").text(JSON.stringify(result))
|
||||
}
|
||||
|
|
@ -0,0 +1 @@
|
|||
(function(){var e,t,n,r=function(e,t){return function(){return e.apply(t,arguments)}};e=function(){function e(){this.translate=r(this.translate,this);this.data={values:{},contexts:[]};this.globalContext={}}e.prototype.translate=function(e,t,n,r,i){var s,o,u,a;if(i==null){i=this.globalContext}u=function(e){var t;t=typeof e;return t==="function"||t==="object"&&!!e};if(u(t)){s=null;a=null;o=t;i=n||this.globalContext}else{if(typeof t==="number"){s=null;a=t;o=n;i=r||this.globalContext}else{s=t;if(typeof n==="number"){a=n;o=r;i=i}else{a=null;o=n;i=r||this.globalContext}}}if(u(e)){if(u(e["i18n"])){e=e["i18n"]}return this.translateHash(e,i)}else{return this.translateText(e,a,o,i,s)}};e.prototype.add=function(e){var t,n,r,i,s,o,u,a;if(e.values!=null){o=e.values;for(n in o){r=o[n];this.data.values[n]=r}}if(e.contexts!=null){u=e.contexts;a=[];for(i=0,s=u.length;i<s;i++){t=u[i];a.push(this.data.contexts.push(t))}return a}};e.prototype.setContext=function(e,t){return this.globalContext[e]=t};e.prototype.clearContext=function(e){return this.lobalContext[e]=null};e.prototype.reset=function(){this.data={values:{},contexts:[]};return this.globalContext={}};e.prototype.resetData=function(){return this.data={values:{},contexts:[]}};e.prototype.resetContext=function(){return this.globalContext={}};e.prototype.translateHash=function(e,t){var n,r;for(n in e){r=e[n];if(typeof r==="string"){e[n]=this.translateText(r,null,null,t)}}return e};e.prototype.translateText=function(e,t,n,r,i){var s,o;if(r==null){r=this.globalContext}if(this.data==null){return this.useOriginalText(i||e,t,n)}s=this.getContextData(this.data,r);if(s!=null){o=this.findTranslation(e,t,n,s.values,i)}if(o==null){o=this.findTranslation(e,t,n,this.data.values,i)}if(o==null){return this.useOriginalText(i||e,t,n)}return o};e.prototype.findTranslation=function(e,t,n,r){var i,s,o,u,a;o=r[e];if(o==null){return null}if(t==null){if(typeof o==="string"){return this.applyFormatting(o,t,n)}}else{if(o instanceof Array||o.length){for(u=0,a=o.length;u<a;u++){s=o[u];if((t>=s[0]||s[0]===null)&&(t<=s[1]||s[1]===null)){i=this.applyFormatting(s[2].replace("-%n",String(-t)),t,n);return this.applyFormatting(i.replace("%n",String(t)),t,n)}}}}return null};e.prototype.getContextData=function(e,t){var n,r,i,s,o,u,a,f;if(e.contexts==null){return null}a=e.contexts;for(o=0,u=a.length;o<u;o++){n=a[o];r=true;f=n.matches;for(i in f){s=f[i];r=r&&s===t[i]}if(r){return n}}return null};e.prototype.useOriginalText=function(e,t,n){if(t==null){return this.applyFormatting(e,t,n)}return this.applyFormatting(e.replace("%n",String(t)),t,n)};e.prototype.applyFormatting=function(e,t,n){var r,i;for(r in n){i=new RegExp("%{"+r+"}","g");e=e.replace(i,n[r])}return e};return e}();n=new e;t=n.translate;t.translator=n;t.create=function(n){var r;r=new e;if(n!=null){r.add(n)}r.translate.create=t.create;return r.translate};(typeof module!=="undefined"&&module!==null?module.exports=t:void 0)||(this.i18n=t)}).call(this)
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
Loading…
Reference in New Issue