From 415dad29407362a76fde6d07d8b100285a84518d Mon Sep 17 00:00:00 2001
From: Jules Laplace <jules@okfoc.us>
Date: Thu, 4 Sep 2014 17:52:48 -0400
Subject: media api

---
 views/staff/media/index.ejs    | 16 ++++++++++++++++
 views/staff/media/show.ejs     | 14 ++++++++++++++
 views/staff/media/show_404.ejs | 14 ++++++++++++++
 3 files changed, 44 insertions(+)
 create mode 100644 views/staff/media/index.ejs
 create mode 100644 views/staff/media/show.ejs
 create mode 100644 views/staff/media/show_404.ejs

(limited to 'views/staff/media')

diff --git a/views/staff/media/index.ejs b/views/staff/media/index.ejs
new file mode 100644
index 0000000..76aaafb
--- /dev/null
+++ b/views/staff/media/index.ejs
@@ -0,0 +1,16 @@
+[[ include ../_header ]]
+
+	<h1>Media</h1>
+
+  <nav>
+    <a href="/staff">home</a>
+    <a href="/staff/users">users</a>
+    <a href="/staff/projects">projects</a>
+    <a href="/staff/media">media</a>
+  </nav>
+  
+  <hr>
+
+[[ include ../_media ]]
+
+[[ include ../_footer ]]
diff --git a/views/staff/media/show.ejs b/views/staff/media/show.ejs
new file mode 100644
index 0000000..43afe14
--- /dev/null
+++ b/views/staff/media/show.ejs
@@ -0,0 +1,14 @@
+[[ include ../_header ]]
+
+	<h1>Media [[- media.type ]]</h1>
+
+  <nav>
+    <a href="/staff">home</a>
+    <a href="/staff/users">users</a>
+    <a href="/staff/projects">projects</a>
+    <a href="/staff/media">media</a>
+  </nav>
+  
+  <hr>
+
+[[ include ../_footer ]]
diff --git a/views/staff/media/show_404.ejs b/views/staff/media/show_404.ejs
new file mode 100644
index 0000000..f07cef2
--- /dev/null
+++ b/views/staff/media/show_404.ejs
@@ -0,0 +1,14 @@
+[[ include ../_header ]]
+
+	<h1>Media not found</h1>
+
+  <nav>
+    <a href="/staff">home</a>
+    <a href="/staff/users">users</a>
+    <a href="/staff/projects">projects</a>
+    <a href="/staff/media">media</a>
+  </nav>
+  
+  <hr>
+
+[[ include ../_footer ]]
-- 
cgit v1.2.3-70-g09d2


From cccacd39a49f48a9aefe39e0e0bb33529ca80410 Mon Sep 17 00:00:00 2001
From: Jules Laplace <jules@okfoc.us>
Date: Thu, 4 Sep 2014 18:03:07 -0400
Subject: media list

---
 server/lib/views/staff.js  |  5 +++--
 views/staff/_media.ejs     | 38 +++++++++++++++++++++++++++++++++++++-
 views/staff/media/show.ejs |  2 +-
 3 files changed, 41 insertions(+), 4 deletions(-)

(limited to 'views/staff/media')

diff --git a/server/lib/views/staff.js b/server/lib/views/staff.js
index b9fe78a..a9d85ba 100644
--- a/server/lib/views/staff.js
+++ b/server/lib/views/staff.js
@@ -164,7 +164,7 @@ var staff = module.exports = {
     ensureSingleMedia: function(req, res, next){
       var id = req.params.id
       if (id) {
-        Media.findOne({ _id: id }, function (err, id) {
+        Media.findOne({ _id: id }, function (err, media) {
           if (media) {
             res.locals.media = req.method == "GET" ? staff.helpers.media(media) : media
           }
@@ -270,6 +270,7 @@ var staff = module.exports = {
       media = media.toObject()
       media.date = moment( media.updated_at || media.created_at ).format("M/DD/YYYY H:MM")
       media.user = {}
+      media.shortUrl = media.url.replace(/^http.:\/\//,"")
       return media
     }
 	},
@@ -422,7 +423,7 @@ var staff = module.exports = {
       res.render('staff/media/index')
     },
     show: function(req, res){
-      if (res.locals.project) {
+      if (res.locals.media) {
         res.render('staff/media/show', {
           mediaJSON: util.escape( JSON.stringify( res.locals.media ) ),
           mediaUserJSON: util.escape( JSON.stringify( res.locals.mediaUser ) ),
diff --git a/views/staff/_media.ejs b/views/staff/_media.ejs
index 27949aa..19e9d0b 100644
--- a/views/staff/_media.ejs
+++ b/views/staff/_media.ejs
@@ -1 +1,37 @@
-media
\ No newline at end of file
+<table id="users">
+[[ media.forEach(function(media){ ]]
+  <tr>
+    <td class="editLinks">
+      <a href="/staff/media/[[- media._id ]]">[view]</a>
+    </td>
+    <td>
+      <a href="/staff/users/[[- media.user.username ]]">[[- media.user.username ]]</a>
+    </td>
+    <td>
+      [[- media.date ]]
+    </td>
+    <td>
+      [[- media.width ]]x[[- media.height ]]
+    </td>
+    <td>
+      [[- media.type ]]
+    </td>
+    <td>
+      [[- media.token ]]
+    </td>
+    <td>
+      <a class="medialink" href="[[- media.url ]]" target="_blank">[[- media.shortUrl ]]</a>
+    </td>
+  </tr>
+[[ }) ]]
+</table>
+
+<style>
+.medialink {
+  max-width: 30vw;
+  display: inline-block;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+</style>
\ No newline at end of file
diff --git a/views/staff/media/show.ejs b/views/staff/media/show.ejs
index 43afe14..8257307 100644
--- a/views/staff/media/show.ejs
+++ b/views/staff/media/show.ejs
@@ -1,6 +1,6 @@
 [[ include ../_header ]]
 
-	<h1>Media [[- media.type ]]</h1>
+	<h1>Media: [[- media.type ]]</h1>
 
   <nav>
     <a href="/staff">home</a>
-- 
cgit v1.2.3-70-g09d2


From 4c3720f1ac1ce86fd54fcd4887aab6d31bcd68c2 Mon Sep 17 00:00:00 2001
From: Jules Laplace <jules@okfoc.us>
Date: Fri, 5 Sep 2014 13:27:48 -0400
Subject: media view

---
 public/assets/javascripts/ui/lib/Parser.js     | 27 +++++++++++++++++-----
 public/assets/javascripts/ui/site/StaffView.js |  7 +++++-
 public/assets/stylesheets/staff.css            |  5 ++++-
 server/lib/views/staff.js                      |  7 ++++--
 views/staff/media/show.ejs                     | 31 ++++++++++++++++++++++++++
 5 files changed, 67 insertions(+), 10 deletions(-)

(limited to 'views/staff/media')

diff --git a/public/assets/javascripts/ui/lib/Parser.js b/public/assets/javascripts/ui/lib/Parser.js
index 1cf0418..52c96e6 100644
--- a/public/assets/javascripts/ui/lib/Parser.js
+++ b/public/assets/javascripts/ui/lib/Parser.js
@@ -21,7 +21,7 @@ var Parser = {
 			}
 		},
 		tag: function (media) {
-			return '<img src="' + media.url + '" onerror="imgError(this);">';
+			return '<img src="' + media.url + '">';
 		}
 	}, {
 		type: 'video',
@@ -43,7 +43,7 @@ var Parser = {
 			video.load()
 		},
 		tag: function (media) {
-			return '<video src="' + media.url + '" onerror="imgError(this);">';
+			return '<video src="' + media.url + '">';
 		}
 	}, {
 		type: 'youtube',
@@ -73,7 +73,8 @@ var Parser = {
 			})
 		},
 		tag: function (media) {
-			return '<img class="video" type="youtube" vid="'+media.token+'" src="'+media.thumbnail+'"><span class="playvid">&#9654;</span>';
+			// return '<img class="video" type="youtube" vid="'+media.token+'" src="'+media.thumbnail+'"><span class="playvid">&#9654;</span>';
+			return '<div class="video" style="width: ' + media.width + 'px; height: ' + media.height + 'px; overflow: hidden; position: relative;"><iframe frameborder="0" scrolling="no" seamless="seamless" webkitallowfullscreen="webkitAllowFullScreen" mozallowfullscreen="mozallowfullscreen" allowfullscreen="allowfullscreen" id="okplayer" width="' + media.width + '" height="' + media.height + '" src="http://youtube.com/embed/' + media.token + '?showinfo=0" style="position: absolute; top: 0px; left: 0px; width: ' + media.width + 'px; height: ' + media.height + 'px;"></iframe></div>'
 		}
 	}, {
 		type: 'vimeo',
@@ -101,7 +102,8 @@ var Parser = {
 			})
 		},
 		tag: function (media) {
-			return '<img class="video" type="vimeo" vid="'+media.token+'" src="'+media.thumbnail+'"><span class="playvid">&#9654;</span>';
+			// return '<img class="video" type="vimeo" vid="'+media.token+'" src="'+media.thumbnail+'"><span class="playvid">&#9654;</span>';
+			return '<div class="video" style="width: ' + media.width + 'px; height: ' + media.height + 'px; overflow: hidden; position: relative;"><iframe frameborder="0" scrolling="no" seamless="seamless" webkitallowfullscreen="webkitAllowFullScreen" mozallowfullscreen="mozallowfullscreen" allowfullscreen="allowfullscreen" id="okplayer" src="http://player.vimeo.com/video/' + media.token + '?api=1&js_api=1&title=0&byline=0&portrait=0&playbar=0&player_id=okplayer&loop=0&autoplay=0" width="' + media.width + '" height="' + media.height + '" style="position: absolute; top: 0px; left: 0px; width: ' + media.width + 'px; height: ' + media.height + 'px;"></iframe></div>'
 		}
 	},
 	/*
@@ -165,5 +167,18 @@ var Parser = {
 		if (! matched) {
 			cb(null)
 		}
-	}
-}
\ No newline at end of file
+	},
+	
+	tag: function (media){
+	  if (media.type in Parser.lookup) {
+	    return Parser.lookup[media.type].tag(media)
+	  }
+	  return ""
+	},
+
+  thumbnail: function (media) {
+    return '<img src="' + (media.thumbnail || media.url) + '" class="thumb">';
+  },
+
+};
+Parser.lookup = _.indexBy(Parser.integrations, 'type');
diff --git a/public/assets/javascripts/ui/site/StaffView.js b/public/assets/javascripts/ui/site/StaffView.js
index fd173e5..fdf39d2 100644
--- a/public/assets/javascripts/ui/site/StaffView.js
+++ b/public/assets/javascripts/ui/site/StaffView.js
@@ -7,15 +7,20 @@ var StaffView = View.extend({
 
 	initialize: function() {
 		this.$toggleStaff = $("#toggle-staff")
+		this.$mediaEmbed = $("#media-embed")
     if (this.$toggleStaff.length && this.$toggleStaff.data().isstaff) {
       this.$toggleStaff.html("Is Staff")
+    }
+    if (this.$mediaEmbed.length) {
+      var media = this.$mediaEmbed.data()
+      this.$mediaEmbed.html( Parser.tag( media ) )
     }
 	},
 
 	load: function() {
 		$(".json").each(function(){
       $(this).JSONView( this.innerText )
-    })
+    }).show()
 
 		this.projectList = new ProjectList ()
 	},
diff --git a/public/assets/stylesheets/staff.css b/public/assets/stylesheets/staff.css
index 02510a3..05d3541 100644
--- a/public/assets/stylesheets/staff.css
+++ b/public/assets/stylesheets/staff.css
@@ -38,6 +38,9 @@ hr {
   width: 80%;
   margin: 0 auto;
 }
+.json {
+  display: none;
+}
 .jsonview {
   border: 1px solid #ddd;
   background: rgba(238,238,238,0.5);
@@ -91,4 +94,4 @@ iframe.embed {
 .page table.projectList,
 .page table.projectList td.border {
   border: 0;
-}
\ No newline at end of file
+}
diff --git a/server/lib/views/staff.js b/server/lib/views/staff.js
index a9d85ba..d27ba0f 100644
--- a/server/lib/views/staff.js
+++ b/server/lib/views/staff.js
@@ -55,7 +55,7 @@ var staff = module.exports = {
     },
 
     ensureRecentUsers: function(req, res, next){
-      var dreq = { params: { sort: 'last_seen', limit: 20, offset: 0 } }
+      var dreq = { query: { sort: 'last_seen', limit: 20, offset: 0 } }
       staff.middleware.ensureUsers(dreq, res, next)
     },
 
@@ -120,7 +120,10 @@ var staff = module.exports = {
 
     ensureMediaUser: function(req, res, next){
       if (! res.locals.media) { return next() }
-      staff.middleware.ensureObjectsUsers([ res.locals.media ], next)
+      staff.middleware.ensureObjectsUsers([ res.locals.media ], function(){
+        res.locals.mediaUser = res.locals.media.User
+        next()
+      })
     },
     
     ensureObjectsUsers: function(objects, next){
diff --git a/views/staff/media/show.ejs b/views/staff/media/show.ejs
index 8257307..76dcd32 100644
--- a/views/staff/media/show.ejs
+++ b/views/staff/media/show.ejs
@@ -11,4 +11,35 @@
   
   <hr>
 
+  <center>
+    <div id="media-embed" data-type="[[- media.type ]]" data-token="[[- media.token ]]" data-url="[[- media.url ]]" data-width="[[- media.width ]]" data-height="[[- media.height ]]" style="width: [[- media.width ]]px; height: [[- media.height ]]px">
+    </div>
+  </center>
+  
+  <table>
+    <tr>
+      <td>
+        uploaded by
+      </td>
+      <td>
+        [[ if (media.user.photo) { ]]
+          <a href="/staff/users/[[- media.user.username ]]"><div style="background-image:url([[- media.user.photo ]])" class="avatar"></div></a>
+        [[ } ]]
+      </td>
+      <td>
+        <a href="/staff/users/[[- media.user.username ]]">[[- media.user.username ]]</a>
+      </td>
+      <td>
+        [[- media.user.displayName ]]
+      </td>
+      <td class="editLinks">
+        <a href="/profile/[[- media.user.username ]]">[view profile]</a>
+      </td>
+    </tr>
+  </table>
+
+  <div class="json">
+    [[- mediaJSON ]]
+  </div>
+
 [[ include ../_footer ]]
-- 
cgit v1.2.3-70-g09d2


From 1082e3be99669671b6c745307131a7cb8d54eabc Mon Sep 17 00:00:00 2001
From: Jules Laplace <jules@okfoc.us>
Date: Fri, 5 Sep 2014 15:54:12 -0400
Subject: pagination on all queries

---
 public/assets/stylesheets/staff.css |  6 +++
 server/lib/views/staff.js           | 75 ++++++++++++++++++++++++++++++-------
 views/staff/_pagination.ejs         | 17 +++++++++
 views/staff/index.ejs               |  2 +-
 views/staff/media/index.ejs         |  2 +
 views/staff/projects/index.ejs      |  2 +
 views/staff/users/index.ejs         |  2 +
 views/staff/users/media.ejs         |  2 +
 views/staff/users/show.ejs          | 17 ++++-----
 9 files changed, 101 insertions(+), 24 deletions(-)
 create mode 100644 views/staff/_pagination.ejs

(limited to 'views/staff/media')

diff --git a/public/assets/stylesheets/staff.css b/public/assets/stylesheets/staff.css
index 05d3541..aa21f9b 100644
--- a/public/assets/stylesheets/staff.css
+++ b/public/assets/stylesheets/staff.css
@@ -95,3 +95,9 @@ iframe.embed {
 .page table.projectList td.border {
   border: 0;
 }
+#pagination {
+  margin: 10px 0;
+}
+#pagination a {
+  color: #00f;
+}
\ No newline at end of file
diff --git a/server/lib/views/staff.js b/server/lib/views/staff.js
index e776b7f..2ffea0d 100644
--- a/server/lib/views/staff.js
+++ b/server/lib/views/staff.js
@@ -27,10 +27,14 @@ var staff = module.exports = {
 	
 	middleware: {
 
-    ensureUsers: function(req, res, next, criteria){
-      var limit = Math.max( Number(req.query.limit) || 50, 200 )
-      var offset = Number(req.query.offset) || 0
+    ensureUsers: function(req, res, next){
+      var paginationInfo = res.locals.pagination = {}
+      var criteria = req.criteria || {}
+      var limit = paginationInfo.limit = Math.min( Number(req.query.limit) || 50, 200 )
+      var offset = paginationInfo.offset = Number(req.query.offset) || 0
       var sort
+      paginationInfo.sort = req.query.sort
+      paginationInfo.sortOptions = ["date", "last_seen", "username"]
       switch (req.query.sort) {
         case 'date':
           sort = {'created_at': -1}
@@ -41,9 +45,9 @@ var staff = module.exports = {
         case 'username':
         default:
           sort = {'username': 1}
+          paginationInfo.sort = "username"
           break
       }
-      criteria = criteria || {}
       User.find(criteria)
           .select(staff.fields.user)
           .sort(sort)
@@ -60,19 +64,24 @@ var staff = module.exports = {
       staff.middleware.ensureUsers(dreq, res, next)
     },
 
-    ensureProjects: function(req, res, next, criteria){
-      var limit = Math.max( Number(req.query.limit) || 50, 200 )
-      var offset = Number(req.query.offset) || 0
+    ensureProjects: function(req, res, next){
+      var paginationInfo = res.locals.pagination = {}
+      var criteria = req.criteria || {}
+      var limit = paginationInfo.limit = Math.min( Number(req.query.limit) || 50, 200 )
+      var offset = paginationInfo.offset = Number(req.query.offset) || 0
       var sort
+      paginationInfo.sort = req.query.sort
+      paginationInfo.sortOptions = ["date", "name"]
       switch (req.query.sort) {
         case 'date':
           sort = {'created_at': -1}
           break
+        case 'name':
         default:
+          paginationInfo.sort = "name"
           sort = {'slug': 1}
           break
       }
-      criteria = criteria || {}
       Project.find(criteria)
           .select(staff.fields.project)
           .sort(sort)
@@ -84,17 +93,21 @@ var staff = module.exports = {
       })
     },
 
-    ensureMedia: function(req, res, next, criteria){
-      var limit = Math.max( Number(req.query.limit) || 50, 200 )
-      var offset = Number(req.query.offset) || 0
+    ensureMedia: function(req, res, next){
+      var paginationInfo = res.locals.pagination = {}
+      var criteria = req.criteria || {}
+      var limit = paginationInfo.limit = Math.min( Number(req.query.limit) || 50, 200 )
+      var offset = paginationInfo.offset = Number(req.query.offset) || 0
       var sort
+      paginationInfo.sort = req.query.sort
+      paginationInfo.sortOptions = ["date"]
       switch (req.query.sort) {
         default:
         case 'date':
+          paginationInfo.sort = "date"
           sort = {'created_at': -1}
           break
       }
-      criteria = criteria || {}
       Media.find(criteria)
           // .select(staff.fields.media)
           .sort(sort)
@@ -233,7 +246,8 @@ var staff = module.exports = {
     
     ensureProfileMedia: function(req, res, next){
       if (! res.locals.profile) { return next() }
-      staff.middleware.ensureMedia(req, res, next, { user_id: res.locals.profile._id })
+      req.criteria = { user_id: res.locals.profile._id }
+      staff.middleware.ensureMedia(req, res, next)
     },
     
     ensureProject: function(req, res, next){
@@ -328,6 +342,7 @@ var staff = module.exports = {
 
       staff.middleware.ensureProfile,
       staff.middleware.ensureProfileMedia,
+      staff.middleware.ensureProfileMediaCount,
 
       staff.users.media
     );
@@ -373,6 +388,8 @@ var staff = module.exports = {
       middleware.ensureAuthenticated,
       middleware.ensureIsStaff,
       
+      staff.middleware.ensureMediaCount,
+      
       staff.middleware.ensureMedia,
       staff.middleware.ensureMediaUsers,
 
@@ -388,6 +405,26 @@ var staff = module.exports = {
       staff.media.show
     );
 
+  },
+  
+  paginate: function(req, res){
+    var info = res.locals.pagination
+    info.query = "sort=" + info.sort + "&limit=" + info.limit
+    info.first_page = 0
+    info.last_page = Math.max(0, info.max - info.limit)
+    info.sortOptions = info.sortOptions
+    if (info.offset > 0) {
+      info.prev_page = Math.max(0, info.offset - info.limit)
+    }
+    else {
+      info.prev_page = -1
+    }
+    if (info.count == info.limit && info.offset + info.limit < info.max) {
+      info.next_page = info.offset + info.limit
+    }
+    else {
+      info.next_page = -1
+    }
   },
 
 	index: function(req, res){
@@ -398,6 +435,9 @@ var staff = module.exports = {
   // /staff/users/:username
   users: {
     index: function(req, res){
+      res.locals.pagination.count = res.locals.users.length
+      res.locals.pagination.max = res.locals.userCount
+      staff.paginate(req, res)
       res.render('staff/users/index')
     },
     show: function(req, res){
@@ -412,6 +452,9 @@ var staff = module.exports = {
     },
     media: function(req, res){
       if (res.locals.profile) {
+        res.locals.pagination.count = res.locals.media.length
+        res.locals.pagination.max = res.locals.profile.mediaCount
+        staff.paginate(req, res)
         res.render('staff/users/media')
       }
       else {
@@ -430,6 +473,9 @@ var staff = module.exports = {
   // /staff/projects/:name
   projects: {
     index: function(req, res){
+      res.locals.pagination.count = res.locals.projects.length
+      res.locals.pagination.max = res.locals.projectCount
+      staff.paginate(req, res)
       res.render('staff/projects/index')
     },
     show: function(req, res){
@@ -448,6 +494,9 @@ var staff = module.exports = {
   
   media: {
     index: function(req, res){
+      res.locals.pagination.count = res.locals.media.length
+      res.locals.pagination.max = res.locals.mediaCount
+      staff.paginate(req, res)
       res.render('staff/media/index')
     },
     show: function(req, res){
diff --git a/views/staff/_pagination.ejs b/views/staff/_pagination.ejs
new file mode 100644
index 0000000..6c3bfb1
--- /dev/null
+++ b/views/staff/_pagination.ejs
@@ -0,0 +1,17 @@
+[[ if (pagination.prev_page !== -1 && pagination.next_page !== -1) { ]]
+  <div id="pagination">
+
+    [[ if (pagination.prev_page !== -1) { ]]
+      <a href="?[[- pagination.query ]]&offset=[[- pagination.prev_page ]]">&larr;</a>
+    [[ } else { ]]
+       &larr;
+    [[ } ]]
+    |
+    [[ if (pagination.next_page !== -1) { ]]
+      <a href="?[[- pagination.query ]]&offset=[[- pagination.next_page ]]">Next page &rarr;</a>
+    [[ } else { ]]
+       &rarr;
+    [[ } ]]
+
+  </div>
+[[ } ]]
\ No newline at end of file
diff --git a/views/staff/index.ejs b/views/staff/index.ejs
index f721339..5ca7269 100644
--- a/views/staff/index.ejs
+++ b/views/staff/index.ejs
@@ -9,7 +9,7 @@
   </nav>
   
   <hr>
-  
+
   [[ include _users_recent ]]
   [[ include _stats ]]
 
diff --git a/views/staff/media/index.ejs b/views/staff/media/index.ejs
index 76aaafb..516af2d 100644
--- a/views/staff/media/index.ejs
+++ b/views/staff/media/index.ejs
@@ -11,6 +11,8 @@
   
   <hr>
 
+[[ include ../_pagination ]]
 [[ include ../_media ]]
+[[ include ../_pagination ]]
 
 [[ include ../_footer ]]
diff --git a/views/staff/projects/index.ejs b/views/staff/projects/index.ejs
index a6fad6b..482ea25 100644
--- a/views/staff/projects/index.ejs
+++ b/views/staff/projects/index.ejs
@@ -11,6 +11,8 @@
   
   <hr>
 
+[[ include ../_pagination ]]
 [[ include ../_projects ]]
+[[ include ../_pagination ]]
 
 [[ include ../_footer ]]
diff --git a/views/staff/users/index.ejs b/views/staff/users/index.ejs
index 8c56565..f14d666 100644
--- a/views/staff/users/index.ejs
+++ b/views/staff/users/index.ejs
@@ -11,6 +11,8 @@
   
   <hr>
 
+[[ include ../_pagination ]]
 [[ include ../_users ]]
+[[ include ../_pagination ]]
 
 [[ include ../_footer ]]
diff --git a/views/staff/users/media.ejs b/views/staff/users/media.ejs
index 6ea2668..b13e5fb 100644
--- a/views/staff/users/media.ejs
+++ b/views/staff/users/media.ejs
@@ -11,6 +11,8 @@
   
   <hr>
 
+[[ include ../_pagination ]]
 [[ include ../_media ]]
+[[ include ../_pagination ]]
 
 [[ include ../_footer ]]
diff --git a/views/staff/users/show.ejs b/views/staff/users/show.ejs
index 127ca8c..8e9b447 100644
--- a/views/staff/users/show.ejs
+++ b/views/staff/users/show.ejs
@@ -80,17 +80,14 @@
         [[- profile.isStaff ? "yes" : "no" ]]
       </td>
     </tr>
-    </tr>
-    <tr>
-      <th>
-      </th>
-      <td id="actions">
-      [[ if (String(user._id) != String(profile._id)) { ]]
-        <button id="toggle-staff" data-isStaff="[[- !! profile.isStaff ]]">Make Staff</button>
-      [[ } ]]
-      </td>
-    </tr>
   </table>
+
+  <br><br>
+  <div id="actions">
+  [[ if (String(user._id) != String(profile._id)) { ]]
+    <button id="toggle-staff" data-isStaff="[[- !! profile.isStaff ]]">Make Staff</button>
+  [[ } ]]
+  </div>
   
   <h2>Projects</h2>
   
-- 
cgit v1.2.3-70-g09d2