update view layer closes #276 #170

app/mailer/index.js

@@ -5,7 +5,7 @@
  */
 
 const Notifier = require('notifier');
-const jade = require('jade');
+const pug = require('pug');
 const config = require('../../config');
 
 /**
@@ -19,7 +19,7 @@ const config = require('../../config');
 
 Notifier.prototype.processTemplate = function(tplPath, locals) {
   locals.filename = tplPath;
-  return jade.renderFile(tplPath, locals);
+  return pug.renderFile(tplPath, locals);
 };
 
 /**

app/views/articles/article.jade → app/views/articles/article.pug

@@ -17,7 +17,7 @@ article.article
     - if (article.tags)
       |   -  
       span Tags  
-      - each tag in article.tags.split(',')
+      each tag in article.tags.split(',')
         i.muted.fa.fa-tag  
         a.tag(href="/tags/"+tag)= tag
         |   

app/views/articles/form.pug

@@ -0,0 +1,43 @@
+extends ../layouts/default
+
+block main
+  h1= title
+
+block content
+  - var action = '/articles'
+  - action += article.isNew? '' : '/' + article.id
+
+  .row
+    .col-md-8
+      form(method="post", action=action, enctype="multipart/form-data", role="form")
+
+        input(type="hidden", name="_csrf", value="#{csrf_token}")
+
+        - if (!article.isNew)
+          input(type="hidden", name="_method", value="PUT")
+
+        .form-group
+          label(for='title') Title
+          input.form-control#title(type='text', name="title", value=article.title, placeholder='Enter the title')
+
+        .form-group
+          label(for='file') Image
+          input.form-control#file(type='file', name="image")
+
+        .form-group
+          label(for='desc') Body
+          textarea.form-control#desc(rows="5", name="body", placeholder='Enter the article description')=article.body
+
+        .form-group
+          label(for='tags') Tags
+          input.form-control#tags(type='text', name="tags", value=article.tags, placeholder='Enter the tags')
+
+        .form-group
+          .col-sm-offset-2.col-sm-10
+            button.btn.btn-primary(type='submit') Save
+            |  
+            a.btn(href='/articles', title="cancel") Cancel
+
+    .col-md-4
+      - if (!article.isNew && article.image && article.image.files && article.image.files.length)
+        img(src=article.image.cdnUri + "/mini_" + article.image.files[0])

app/views/articles/index.mobile.jade → app/views/articles/index.mobile.pug

@@ -4,7 +4,7 @@ block main
   h1= title
 
 block content
-  - each article in articles
+  each article in articles
     .article
       h3
         a(href='/articles/'+article._id, title=article.title) #{article.title}
@@ -20,7 +20,7 @@ block content
         a(href="/users/"+article.user._id)= name
           -  
         - if (article.tags)
-          - each tag in article.tags.split(',')
+          each tag in article.tags.split(',')
             |  
             a.tag(href="/tags/"+tag)
               i.icon-tags

app/views/articles/index.jade → app/views/articles/index.pug

@@ -5,7 +5,7 @@ block main
 
 block content
   - if (articles.length)
-    - each article in articles
+    each article in articles
       include article
 
     - if (pages > 1)

app/views/articles/show.mobile.jade → app/views/articles/show.mobile.pug

@@ -6,7 +6,7 @@ block main
 
 block content
   .row
-    .span9
+    .col-sm-9
       p=article.body
       .meta.muted
         - var name = article.user.name ? article.user.name : article.user.username
@@ -15,12 +15,12 @@ block content
         p.muted= formatDate(article.createdAt, "%b %d, %Y at %I:%M %p")
         - if (article.tags)
           .tags
-            - each tag in article.tags.split(',')
+            each tag in article.tags.split(',')
               a.tag(href="/tags/"+tag)
                 i.icon-tags
                 |  #{tag}
               |   
-    .span3
+    .col-sm-3
       - if (!article.isNew && article.image && article.image.files && article.image.files.length)
         img(src=article.image.cdnUri + '/mini_' + article.image.files[0])
 
@@ -36,6 +36,6 @@ block content
   p
     br
     h3 Comments
-    - each comment in article.comments
+    each comment in article.comments
       include ../comments/comment
     include ../comments/form

app/views/articles/show.jade → app/views/articles/show.pug

@@ -15,7 +15,7 @@ block content
 
         - if (article.tags)
           p Tags  
-            - each tag in article.tags.split(',')
+            each tag in article.tags.split(',')
               i.muted.fa.fa-tag  
               a.tag(href="/tags/"+tag)= tag
               |   
@@ -35,6 +35,6 @@ block content
 
   br
   h3 Comments
-  - each comment in article.comments
+  each comment in article.comments
     include ../comments/comment
   include ../comments/form

app/views/includes/foot.pug

@@ -0,0 +1,6 @@
+script(src="http://code.jquery.com/jquery-1.10.2.min.js")
+script(src="/js/bootstrap.min.js")
+script(src="/js/jquery.tagsinput.min.js")
+script(src="/js/app.js")
+
+block foot

app/views/includes/head.jade → app/views/includes/head.pug

@@ -15,7 +15,7 @@ head(prefix="og: http://ogp.me/ns# nodejsexpressdemo: http://ogp.me/ns/apps/node
   meta(property="fb:admins", content="1037213945")
 
   block head
-    link(href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css", rel="stylesheet")
+    link(href="/css/bootstrap.min.css", rel="stylesheet")
     link(href="/css/jquery.tagsinput.css", rel="stylesheet")
     link(href="//netdna.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css", rel="stylesheet")
     link(rel="stylesheet", href="/css/app.css")

app/views/includes/header.pug

@@ -0,0 +1,25 @@
+nav.navbar.navbar-expand-md.navbar-dark.fixed-top.bg-dark
+  a.navbar-brand(href='/') Node.js Express Mongoose Demo
+  button.navbar-toggler(type='button' data-toggle='collapse' data-target='#navbarCollapse' aria-controls='navbarCollapse' aria-expanded='false' aria-label='Toggle navigation')
+    span.navbar-toggler-icon
+  #navbarCollapse.collapse.navbar-collapse
+    ul.navbar-nav.mr-auto
+      li(class=isActive('/articles/new') ? 'active nav-item' : 'nav-item')
+        a.nav-link(href="/articles/new", title="new article") New
+      - if (req.isAuthenticated())
+        li.nav-item
+          a.nav-link(href="/users/"+req.user.id, title="Profile") Profile
+        li.nav-item
+          a.nav-link(href="/logout", title="logout") Logout
+      - else
+        li(class=isActive('/login') ? 'active nav-item' : 'nav-item')
+          a.nav-link(href="/login", title="Login") Login
+
+    ul.nav.navbar-nav.navbar-right
+      li.nav-item
+        iframe(src="http://ghbtns.com/github-btn.html?user=madhums&repo=node-express-mongoose-demo&type=watch&count=true", allowtransparency="true", frameborder="0", scrolling="0", width="120", height="45", style="padding: 15px 0 0 15px;")
+      li.nav-item
+        iframe(src="http://ghbtns.com/github-btn.html?user=madhums&repo=node-express-mongoose-demo&type=fork&count=true", allowtransparency="true", frameborder="0", scrolling="0", width="120", height="45", style="padding: 15px 0 0 15px;")
+      li.nav-item
+        a.nav-link(href='https://travis-ci.org/madhums/node-express-mongoose-demo')
+          img(src='https://img.shields.io/travis/madhums/node-express-mongoose-demo.svg?style=flat', alt='Build Status', data-canonical-src='https://img.shields.io/travis/madhums/node-express-mongoose-demo.svg?style=flat', style='max-width:100%;')

app/views/includes/messages.jade → app/views/includes/messages.pug

@@ -1,27 +1,27 @@
 - if (typeof info != 'undefined' && info.length)
-  .fade.in.alert.alert-info
+  .fade.show.alert.alert-info
     button.close(type='button', data-dismiss='alert') ×
     ul
-      - each inf in info
+      each inf in info
         li!= inf
 
 - if (typeof errors != 'undefined' && errors.length)
-  .fade.in.alert.alert-danger
+  .fade.show.alert.alert-danger
     button.close(type='button', data-dismiss='alert') ×
     ul
-      - each error in errors
+      each error in errors
         li!= error
 
 - if (typeof success != 'undefined' && success.length)
-  .fade.in.alert.alert-success
+  .fade.show.alert.alert-success
     button.close(type='button', data-dismiss='alert') ×
     ul
-      - each succ in success
+      each succ in success
         li!= succ
 
 - if (typeof warning != 'undefined' && warning.length)
-  .fade.in.alert.alert-warning
+  .fade.show.alert.alert-warning
     button.close(type='button', data-dismiss='alert') ×
     ul
-      - each warn in warning
+      each warn in warning
         li!= warn

app/views/layouts/default.pug

@@ -0,0 +1,14 @@
+doctype html
+html(lang="en")
+  include ../includes/head.pug
+  body
+    include ../includes/header.pug
+    .container
+      .page-header
+        block main
+      .messages
+        include ../includes/messages.pug
+      .content
+        block content
+    include ../includes/footer.pug
+    include ../includes/foot.pug

app/views/layouts/mobile.html → app/views/layouts/mobile.pug

@@ -2,10 +2,9 @@
 html(lang="en")
   include ../includes/head
   meta(name='viewport', content='width=device-width,initial-scale=1')
-  link(rel="stylesheet", href="/css/bootstrap-responsive.min.css")
   body
     include ../includes/header
-    .alert
+    .alert.alert-warning
       |  You are checking this out from your mobile device!
     .container
       .page-header

app/views/users/auth.jade → app/views/users/auth.pug

@@ -5,21 +5,21 @@ block main
     h1= title
 
 block content
-  .text-center
+  .text-center.my-4
     a(href="/auth/facebook")
-      i.fa.fa-facebook.fa-3x.fa-border
+      i.fa.fa-facebook.fa-3x.mx-3
     |   
     a(href="/auth/github")
-      i.fa.fa-github.fa-3x.fa-border
+      i.fa.fa-github.fa-3x.mx-3
     |   
     a(href="/auth/twitter")
-      i.fa.fa-twitter.fa-3x.fa-border
+      i.fa.fa-twitter.fa-3x.mx-3
     |   
     a(href="/auth/google")
-      i.fa.fa-google.fa-3x.fa-border
+      i.fa.fa-google.fa-3x.mx-3
     |   
     a(href="/auth/linkedin")
-      i.fa.fa-linkedin.fa-3x.fa-border
+      i.fa.fa-linkedin.fa-3x.mx-3
     |   
 
   .text-center