Fixing up a few issues with changes to layout and chaning the loader to make use of auto prefixer

Author: Matt Gaunt

gulp-tasks/service-worker.js

@@ -36,17 +36,17 @@ gulp.task('service-worker', function(cb) {
       GLOBAL.config.dest + '/manifest.json'
     ],
     dynamicUrlToDependencies: {
-      '/app-shell': ['server/layouts/app-shell.handlebars'],
+      '/app-shell': ['server/views/layouts/app-shell.handlebars'],
       '/partials/': [
-        'server/layouts/partial.handlebars',
+        'server/views/layouts/partial.handlebars',
         'server/views/index.handlebars'
       ],
       '/partials/url-1': [
-        'server/layouts/partial.handlebars',
+        'server/views/layouts/partial.handlebars',
         'server/views/url-1.handlebars'
       ],
       '/partials/url-2': [
-        'server/layouts/partial.handlebars',
+        'server/views/layouts/partial.handlebars',
         'server/views/url-2.handlebars'
       ]
     },

server/views/layouts/app-shell.handlebars

@@ -1,50 +1,11 @@
 {{> open-page}}
-<main class="main js-main" aria-role="main">
+<main class="main js-global-main" aria-role="main">
 
 </main>
 
   <!-- Loading Dialog For use by Activities -->
   <div class="loader js-global-loader is-hidden">
     <svg viewBox="0 0 32 32" width="32" height="32">
-      <style>
-        #spinner {
-          box-sizing: border-box;
-          stroke: #673AB7;
-          stroke-width: 3px;
-          transform-origin: 50%;
-
-          -webkit-animation: line 1.6s cubic-bezier(0.4, 0.0, 0.2, 1) infinite, rotate 1.6s linear infinite;
-        }
-
-        @-webkit-keyframes rotate {
-
-          from {
-            transform: rotate(0)
-          }
-
-          to {
-            transform: rotate(450deg);
-          }
-        }
-
-        @-webkit-keyframes line {
-          0% {
-            stroke-dasharray: 2, 85.964;
-            transform: rotate(0);
-          }
-
-          50% {
-            stroke-dasharray: 65.973, 21.9911;
-            stroke-dashoffset: 0;
-          }
-
-          100% {
-            stroke-dasharray: 2, 85.964;
-            stroke-dashoffset: -65.973;
-            transform: rotate(90deg);
-          }
-        }
-      </style>
       <circle id="spinner" cx="16" cy="16" r="14" fill="none"></circle>
     </svg>
   </div>

server/views/layouts/default.handlebars

@@ -1,5 +1,5 @@
 {{> open-page}}
-<main class="main js-main" aria-role="main">
+<main class="main js-global-main" aria-role="main">
   {{{body}}}
 </main>
 {{> close-page}}

src/styles/core/_loader.scss

@@ -19,6 +19,43 @@
   left: 50%;
   top: 50%;
   position: fixed;
-  -webkit-transform: translate(-50%, -50%);
-          transform: translate(-50%, -50%);
+  transform: translate(-50%, -50%);
+
+  #spinner {
+    box-sizing: border-box;
+    stroke: #673AB7;
+    stroke-width: 3px;
+    transform-origin: 50%;
+
+    animation: line 1.6s cubic-bezier(0.4, 0.0, 0.2, 1) infinite, rotate 1.6s linear infinite;
+  }
+
+  @keyframes rotate {
+
+    from {
+      transform: rotate(0)
+    }
+
+    to {
+      transform: rotate(450deg);
+    }
+  }
+
+  @keyframes line {
+    0% {
+      stroke-dasharray: 2, 85.964;
+      transform: rotate(0);
+    }
+
+    50% {
+      stroke-dasharray: 65.973, 21.9911;
+      stroke-dashoffset: 0;
+    }
+
+    100% {
+      stroke-dasharray: 2, 85.964;
+      stroke-dashoffset: -65.973;
+      transform: rotate(90deg);
+    }
+  }
 }