From 55268c72b5fbcb62850a7c682a819ded1f92aea9 Mon Sep 17 00:00:00 2001 From: RemixDev Date: Fri, 10 Apr 2020 16:12:21 +0200 Subject: [PATCH] Implemented socket.io Started work on darkmode Implemented queue system Started work on download tab --- public/css/darkMode.css | 7 +++ public/css/style.css | 40 ++++++++++----- public/index.html | 16 +++++- public/js/{frontend.js => app.js} | 85 +++++++++++-------------------- public/js/downloadList.js | 21 ++++++++ public/js/init.js | 5 ++ public/js/socket.io.js | 9 ++++ public/js/socket.io.js.map | 1 + 8 files changed, 114 insertions(+), 70 deletions(-) create mode 100644 public/css/darkMode.css rename public/js/{frontend.js => app.js} (69%) create mode 100644 public/js/downloadList.js create mode 100644 public/js/init.js create mode 100644 public/js/socket.io.js create mode 100755 public/js/socket.io.js.map diff --git a/public/css/darkMode.css b/public/css/darkMode.css new file mode 100644 index 0000000..02401da --- /dev/null +++ b/public/css/darkMode.css @@ -0,0 +1,7 @@ +:root { + --main-background: #141414; + --secondary-background: #242424; + --main-text: #eeeeee; + --panels-background: #1a1a1a; + --panels-text: #ffffff; +} diff --git a/public/css/style.css b/public/css/style.css index aea14a8..1bd90d9 100644 --- a/public/css/style.css +++ b/public/css/style.css @@ -1,20 +1,32 @@ +:root { + --main-background: #ffffff; + --secondary-background: #eeeeee; + --main-text: #333333; + --main-scroll: #555; + --panels-background: #222324; + --panels-text: #ffffff; + --accent-color: #0A84FF; + --tag-background: #0062c4; + --tag-text: #ffffff; +} + html{height: 100%;} -body{margin: 0px;width: 100%;height: 100%;font-family: sans-serif; overflow: hidden; background-color: #ffffff; color: #333333;} +body{margin: 0px;width: 100%;height: 100%;font-family: sans-serif; overflow: hidden; background-color: var(--main-background); color: var(--main-text);} /* Sidebar section selector */ aside#sidebar{ - background-color: #222324; + background-color: var(--panels-background); width: 48px; height: 100%; position: absolute; - color: #ffffff; + color: var(--panels-text); } aside#sidebar > .side_icon{ font-size: 24px; margin: 12px; } .side_icon.active{ - color: #0A84FF; + color: var(--accent-color); } /* Rest of the app */ @@ -27,7 +39,7 @@ main#main_content{ /* Middle section */ div#middle_section { - background-color: #ffffff; + background-color: var(--main-background); width: 100%; height: 100%; min-width: 10px; @@ -41,10 +53,10 @@ div#middle_section { margin: 8px; border: 0px; border-radius: 6px; - background-color: #eeeeee; + background-color: var(--secondary-background); } #content{ - background-color: #ffffff; + background-color: var(--main-background); width: calc(100% - 10px); height: calc(100% - 48px); overflow-y: scroll; @@ -56,11 +68,11 @@ div#middle_section { } #content::-webkit-scrollbar-track { - background: #ffffff; + background: var(--main-background); } #content::-webkit-scrollbar-thumb { - background: #555; + background: var(--main-scroll); border-radius: 4px; width: 6px; padding: 0px 2px; @@ -145,8 +157,8 @@ div#middle_section { /* Download tab section */ div#download_tab_container{ - background-color: #222324; - color: #ffffff; + background-color: var(--panels-background); + color: var(--panels-text); height: 100%; width: auto; display: flex; @@ -186,12 +198,12 @@ img.circle { } .coverart{ - background-color: #eee; + background-color: var(--secondary-background); } span.tag { - background-color: #222324; + background-color: var(--tag-background); border-radius: 2px; - color: #ffffff; + color: var(--tag-text); display: inline-block; font-size: 10px; padding: 3px 6px; diff --git a/public/index.html b/public/index.html index cc7739a..964ac7b 100644 --- a/public/index.html +++ b/public/index.html @@ -4,9 +4,15 @@ deemix + +