Started working on the UI
This commit is contained in:
RemixDev
commit
ea9a8f5e0f
3625
public/css/animate.css
vendored
Executable file
3625
public/css/animate.css
vendored
Executable file
File diff suppressed because it is too large
Load Diff
28
public/css/material-icons.css
Executable file
28
public/css/material-icons.css
Executable file
@ -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;
|
||||||
|
}
|
||||||
93
public/css/style.css
Normal file
93
public/css/style.css
Normal file
@ -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;
|
||||||
|
}
|
||||||
BIN
public/fonts/icons/MaterialIcons-Regular.eot
Executable file
BIN
public/fonts/icons/MaterialIcons-Regular.eot
Executable file
Binary file not shown.
BIN
public/fonts/icons/MaterialIcons-Regular.ttf
Executable file
BIN
public/fonts/icons/MaterialIcons-Regular.ttf
Executable file
Binary file not shown.
BIN
public/fonts/icons/MaterialIcons-Regular.woff
Executable file
BIN
public/fonts/icons/MaterialIcons-Regular.woff
Executable file
Binary file not shown.
BIN
public/fonts/icons/MaterialIcons-Regular.woff2
Executable file
BIN
public/fonts/icons/MaterialIcons-Regular.woff2
Executable file
Binary file not shown.
45
public/index.html
Normal file
45
public/index.html
Normal file
@ -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>
|
||||||
76
public/js/frontend.js
Normal file
76
public/js/frontend.js
Normal file
@ -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))
|
||||||
|
}
|
||||||
1
public/js/i18n.min.js
vendored
Normal file
1
public/js/i18n.min.js
vendored
Normal file
@ -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)
|
||||||
2
public/js/jquery-3.3.1.min.js
vendored
Executable file
2
public/js/jquery-3.3.1.min.js
vendored
Executable file
File diff suppressed because one or more lines are too long
6
public/js/vue.min.js
vendored
Executable file
6
public/js/vue.min.js
vendored
Executable file
File diff suppressed because one or more lines are too long
Loading…
Reference in New Issue
Block a user