Fixed things

Skhmt · Oct 28, 2016 · 6ac4475 · 6ac4475
1 parent 4b92dab
commit 6ac4475
Show file tree

Hide file tree

Showing 15 changed files with 4,015 additions and 3,287 deletions.
diff --git a/app.html b/app.html
@@ -9,18 +9,30 @@
  <meta name="viewport" content="width=device-width, initial-scale=1">
 
  <script src="lib/vue-2.0.2.js"></script>
- <script src="lib/velocity-1.2.3.min.js"></script>
- <script src="lib/velocity.ui-5.0.4.js"></script>
+ <script src="lib/velocity-1.3.1.min.js"></script>
+ <script src="lib/velocity.ui-5.1.1.js"></script>
  <link rel="stylesheet" href="css/font-awesome-4.6.3.css">
  <link rel="stylesheet" href="css/app.css">
 
 </head>
-<body class="container" style="background-color: black;">
+<body class="container" style="background: linear-gradient(-45deg,LightSkyBlue,transparent),
+linear-gradient(45deg,Orchid,transparent),
+linear-gradient(Khaki,transparent);
+background-blend-mode: multiply;
+box-shadow: inset 0px 0px 300px 10px rgba(0,0,0,0.8);">
+
+ <div id="spinner"></div>
 
  <div id="app" class="container">
- <transition @before-enter="fadeBeforeEnter" @enter="fadeEnter" @leave="fadeLeave" :css="false">
- <login v-if="!loggedIn"></login>
- <bot v-else></bot>
+ <transition @before-enter="loginBeforeEnter" @enter="loginEnter" @leave="loginLeave" :css="false">
+ <div v-if="loggedIn == false" style="width: 100%; height: 100%;">
+ <login></login>
+ </div>
+ </transition>
+ <transition @before-enter="loginBeforeEnter" @enter="loginEnter" @leave="loginLeave" :css="false">
+ <div v-if="loggedIn == true" style="width: 100%; height: 100%;">
+ <bot></bot>
+ </div>
  </transition>
  </div>
 

diff --git a/css/app.css b/css/app.css
@@ -19,15 +19,33 @@
  /*box-shadow: inset 0px 0px 60px 30px rgba(0,0,0,0.8);*/
 }
 
-.noSelect, button, nav,.fa-btn {
+.noSelect, button, nav, .fa-btn {
  -webkit-user-select: none;
  cursor: default;
+ -webkit-user-drag: none;
 }
 
 .selectable {
  -webkit-user-select: text;
 }
 
+#spinner {
+ border: 14px solid rgba(0,0,0,0);
+ border-top: 14px solid rgba(0,0,0,0.6);
+ border-radius: 50%;
+ width: 80px;
+ height: 80px;
+ animation: spin 0.4s linear infinite;
+ position: absolute;
+ top: calc(50vh - 54px);
+ left: calc(50vw - 54px);
+ z-index: 9999;
+}
+@keyframes spin {
+ 0% { transform: rotate(0deg); }
+ 100% { transform: rotate(360deg); }
+}
+
 nav {
  background-color: rgba(20,20,20,1);
  margin: 0;

diff --git a/js/app.js b/js/app.js
@@ -3,6 +3,7 @@
  node: true
 */
 
+document.getElementById('app').style.display = 'none'
 // song request server
 let express = require('express')
 let app = express()
@@ -16,6 +17,8 @@ store.init(window, err => {
  require('./view/login')(Vue)
  require('./view/bot')(Vue)
  require('./js/commands')
+ document.getElementById('spinner').style.display = 'none'
+ document.getElementById('app').style.display = ''
  setupVM()
  }
 })
@@ -28,14 +31,14 @@ function setupVM() {
  loggedIn: false
  },
  methods: {
- fadeBeforeEnter: function (el) {
+ loginBeforeEnter: function (el) {
  Velocity(el, 'fadeOut', {duration: 0})
  },
- fadeEnter: function (el, done) {
- Velocity(el, 'transition.fadeIn', {delay: 180, duration: 160}, done)
+ loginEnter: function (el, done) {
+ Velocity(el, 'transition.fadeIn', {delay:210, duration: 200}, done)
  },
- fadeLeave: function (el, done) {
- Velocity(el, 'transition.fadeOut', {duration: 160}, done)
+ loginLeave: function (el, done) {
+ Velocity(el, 'transition.fadeOut', {duration: 200}, done)
  },
  }
  })
@@ -56,12 +59,12 @@ function getIP () {
  var interfaces = os.networkInterfaces()
  var addresses = []
  for (var k in interfaces) {
- for (var k2 in interfaces[k]) {
- var address = interfaces[k][k2]
- if (address.family === 'IPv4' && !address.internal) {
- addresses.push(address.address)
- }
+ for (var k2 in interfaces[k]) {
+ var address = interfaces[k][k2]
+ if (address.family === 'IPv4' && !address.internal) {
+ addresses.push(address.address)
  }
+ }
  }
 
  return addresses[0]