Move styles into stylesheet

nathanbirrell · Mar 28, 2017 · a58b1c8 · a58b1c8
1 parent c7de7c5
commit a58b1c8
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 29 deletions.
diff --git a/index.html b/index.html
@@ -1,34 +1,9 @@
 <!DOCTYPE html>
-<html style="width: 100%; height: 100%;">
+<html>
   <head>
     <meta charset="UTF-8">
     <title>Trello</title>
-
-    <style>
-      body {
-        width: 100%; height: 100%; margin: 0;
-        background: #0079BF;
-        display: flex;
-        align-items: center;
-      }
-      .loader {
-        background-image: url("loader.gif");
-        background-size: 18px 18px;
-        display: none;
-        height: 18px;
-        width: 18px;
-        position: absolute;
-        left: 50%;
-      }
-      .loader.is-loading {
-        display: block;
-        margin: 0 auto;
-      }
-      webview {
-        width: 100%;
-        height: 100%;
-      }
-    </style>
+    <link rel="stylesheet" href="style.css">
   </head>
   <body>
     <span class="loader"></span>

diff --git a/renderer.js b/renderer.js
@@ -9,12 +9,13 @@ const contextMenu = require('electron-context-menu')
 
 const webview = document.getElementById('trello')
 const loader = document.querySelector('.loader')
+const isLoadingClass = 'is-loading'
 
 let loadedCurrent = false;
 
 onload = () => {
   const loadstart = () => {
-    loader.classList.add('is-loading')
+    loader.classList.add(isLoadingClass)
 
     if (!loadedCurrent) {
       webview.loadURL(getCurrentUri())
@@ -24,7 +25,7 @@ onload = () => {
   }
 
   const loadstop = () => {
-    loader.classList.remove('is-loading')
+    // loader.classList.remove(isLoadingClass)
   }
 
   webview.addEventListener('dom-ready', () => {

diff --git a/style.css b/style.css
@@ -0,0 +1,25 @@
+html,
+body {
+  width: 100%; height: 100%; margin: 0;
+  background: #0079BF;
+  display: flex;
+  align-items: center;
+}
+.loader {
+  background-image: url("loader.gif");
+  background-size: 18px 18px;
+  display: none;
+  height: 18px;
+  width: 18px;
+  position: absolute;
+  left: 50%;
+}
+.loader.is-loading {
+  display: block;
+  margin: 0 auto;
+}
+webview {
+  width: 100%;
+  height: 100%;
+  z-index: 1;
+}