refactor to use sass and pug (jade)

Swimburger · Jun 4, 2016 · 699af4c · 699af4c
1 parent ab7fe46
commit 699af4c
Show file tree

Hide file tree

Showing 10 changed files with 440 additions and 453 deletions.
diff --git a/package.json b/package.json
@@ -26,6 +26,7 @@
     "chai": "^3.5.0",
     "chromedriver": "^2.21.2",
     "connect-history-api-fallback": "^1.1.0",
+    "consolidate": "^0.14.1",
     "cross-spawn": "^2.1.5",
     "css-loader": "^0.23.0",
     "eslint": "^2.0.0",
@@ -56,8 +57,11 @@
     "lolex": "^1.4.0",
     "mocha": "^2.4.5",
     "nightwatch": "^0.8.18",
+    "node-sass": "^3.7.0",
     "ora": "^0.2.0",
     "phantomjs-prebuilt": "^2.1.3",
+    "pug": "^2.0.0-beta2",
+    "sass-loader": "^3.2.0",
     "selenium-server": "2.53.0",
     "shelljs": "^0.6.0",
     "sinon": "^1.17.3",

diff --git a/src/App.vue b/src/App.vue
@@ -1,9 +1,8 @@
-<template>
-  <div>
-    <header-bar></header-bar>
-    <alerts :alerts="alerts"></alerts>
-    <router-view></router-view>
-  </div>
+<template lang="pug">
+  div
+    header-bar
+    alerts(v-bind:alerts="alerts")
+    router-view
 </template>
 <script>
 import Alerts from './components/Alerts'
@@ -31,53 +30,53 @@ export default {
   }
 }
 </script>
-<style>
-*{
-  padding: 0;
-  margin: 0;
-  box-sizing: border-box;
-}
-html{
-  position: relative;
-  min-height: 100%;
-  font-family: 'Roboto', sans-serif;
-}
-body{
-  background: #eee;
-  min-height: 100%;
-}
-body > div{
-  padding: 50px 16px;
-  min-height: 100vh;
-  background: #eee;
-  position: relative;
-  margin-bottom: 50px;
-  z-index: 1;
-  box-shadow: 0 2px 5px #111;
-}
-footer{
-  background: #333;
-  color: #fff;
-  text-align: center;
-  padding: 12px 0 10px;
-  position: fixed;
-  bottom: 0;
-  height: 50px;
-  width: 100%;
-}
-footer a{
-  color: #e03c3c;
-}
-footer .fa-heart{
-  margin: 0 10px 0 0;
-}
-footer iframe{
-  position: relative;
-  top: 4px;
-}
-.clearfix:after {
-  content: "";
-  display: table;
-  clear: both;
-}
+<style lang="sass">
+*
+  padding: 0
+  margin: 0
+  box-sizing: border-box
+
+html
+  position: relative
+  min-height: 100%
+  font-family: 'Roboto', sans-serif
+
+body
+  background: #eee
+  min-height: 100%
+
+  > div
+    padding: 50px 16px
+    min-height: 100vh
+    background: #eee
+    position: relative
+    margin-bottom: 50px
+    z-index: 1
+    box-shadow: 0 2px 5px #111
+
+footer
+  background: #333
+  color: #fff
+  text-align: center
+  padding: 12px 0 10px
+  position: fixed
+  bottom: 0
+  height: 50px
+  width: 100%
+
+  a
+    color: #e03c3c
+
+  .fa-heart
+    margin: 0 10px 0 0
+
+  iframe
+    position: relative
+    top: 4px
+
+.clearfix:after
+  content: ""
+  display: table
+  clear: both
+
 </style>
diff --git a/src/components/Alerts.vue b/src/components/Alerts.vue
@@ -1,48 +1,44 @@
-<template>
-  <div class="alerts">
-    <div v-for="alert in alerts" v-bind:class="alert.type" transition="expand">
-      <p>
-        {{alert.message}}
-      </p>
-    </div>
-  </div>
+<template lang="pug">
+  div(class="alerts")
+    div(v-for="alert in alerts" v-bind:class="alert.type" transition="expand")
+      p {{alert.message}}
 </template>
 <script>
 export default {
   props: ['alerts']
 }
 </script>
-<style>
-.alerts{
-  position: fixed;
-  top: 50px;
-  left: 0;
-  right: 0;
-  z-index: 1;
-}
-.alerts div{
-  background: #bbb;
-  overflow: hidden;
-}
-.alerts div.error{
-  background: #e03c3c;
-  color: #fff;
-}
-.alerts div.success{
-  background: #41b883;
-  color: #fff;
-}
-.alerts p{
-  width: 480px;
-  margin: 0 auto;
-  padding: 4px;
-  text-align: center;
-}
-.expand-transition{
-  max-height: 200px; /* height 0 -> auto is not animatable, so use max-height 0 -> large height */
-  transition: max-height 1s ease;
-}
-.expand-enter, .expand-leave{
-  max-height: 0;
-}
+<style lang="sass">
+.alerts
+  position: fixed
+  top: 50px
+  left: 0
+  right: 0
+  z-index: 1
+
+  div
+    background: #bbb
+    overflow: hidden
+
+    &.error
+      background: #e03c3c
+      color: #fff
+
+    &.success
+      background: #41b883
+      color: #fff
+
+  p
+    width: 480px
+    margin: 0 auto
+    padding: 4px
+    text-align: center
+
+.expand-transition
+  max-height: 200px /* height 0 -> auto is not animatable, so use max-height 0 -> large height */
+  transition: max-height 1s ease
+
+.expand-enter, .expand-leave
+  max-height: 0
+
 </style>
diff --git a/src/components/HeaderBar.vue b/src/components/HeaderBar.vue
@@ -1,14 +1,14 @@
-<template>
-  <header v-if="user">
-    <input placeholder="Search" v-model="searchQuery" debounce="500">
-    <div>
-      <span>{{user.userTitle}}</span>
-      <img :src="user.imageUrl" alt="{{user.userTitle}}"/>
-      <a href="#" v-on:click.prevent="signOut">
-        <i class="fa fa-sign-out" aria-hidden="true"></i>
-      </a>
-    </div>
-  </header>
+<template lang="pug">
+  header(v-if="user")
+    input(placeholder="Search" v-model="searchQuery" debounce="500")
+
+    div
+      span {{user.userTitle}}
+
+      img(v-bind:src="user.imageUrl" alt="{{user.userTitle}}")
+
+      a(href="#" @click.prevent="signOut")
+        i(class="fa fa-sign-out" aria-hidden="true")
 </template>
 <script>
 import Auth from 'src/data/Auth'
@@ -46,67 +46,67 @@ export default {
   }
 }
 </script>
-<style>
-header{
-  position: fixed;
-  left: 0;
-  top: 0;
-  right: 0;
-  z-index: 1;
-  height: 50px;
-  background: #333;
-  padding: 10px;
-  box-shadow: 0 2px 5px rgba(0,0,0,.4);
-}
-header input {
-  display: block;
-  width: 480px;
-  margin: 0 auto;
-  height: 30px;
-  border: none;
-  padding: 0 16px;
-  border-radius: 2px;
-}
-header span {
-  padding: 15px;
-  color: #fff;
-  position: absolute;
-  right: 95px;
-  top: 1px;
-}
-header img {
-  width: 35px;
-  height: 35px;
-  border-radius: 20px;
-  position: absolute;
-  right: 60px;
-  top: 8px;
-}
-header a {
-  position: absolute;
-  display: block;
-  color: #fff;
-  right: 15px;
-  top: 10px;
-  font-size: 25px;
-  cursor: pointer;
-  transition: color .2s;
-}
-header a:focus, header a:hover {
-  color: #41b883;
-}
-@media screen and (max-width: 1200px) {
-  header span{
-    display: none;
-  }
-}
-@media screen and (max-width: 720px) {
-  header input{
-    width: calc(100% - 64px);
-    margin: 0 0 0 16px;
-  }
-  header span, header img {
-    display: none;
-  }
-}
+<style lang="sass">
+header
+  position: fixed
+  left: 0
+  top: 0
+  right: 0
+  z-index: 1
+  height: 50px
+  background: #333
+  padding: 10px
+  box-shadow: 0 2px 5px rgba(0,0,0,.4)
+
+  input
+    display: block
+    width: 480px
+    margin: 0 auto
+    height: 30px
+    border: none
+    padding: 0 16px
+    border-radius: 2px
+
+  span
+    padding: 15px
+    color: #fff
+    position: absolute
+    right: 95px
+    top: 1px
+
+  img
+    width: 35px
+    height: 35px
+    border-radius: 20px
+    position: absolute
+    right: 60px
+    top: 8px
+
+  a
+    position: absolute
+    display: block
+    color: #fff
+    right: 15px
+    top: 10px
+    font-size: 25px
+    cursor: pointer
+    transition: color .2s
+
+  a:focus, a:hover
+    color: #41b883
+
+  @media screen and (max-width: 1200px)
+    span
+      display: none
+
+
+  @media screen and (max-width: 720px)
+    input
+      width: calc(100% - 64px)
+      margin: 0 0 0 16px
+
+    span, img
+      display: none
+
+
 </style>