diff --git a/cmd/drone-build/main.go b/cmd/drone-build/main.go index 8f7129a3..758ddbcc 100644 --- a/cmd/drone-build/main.go +++ b/cmd/drone-build/main.go @@ -118,10 +118,10 @@ func createClone(c *Context) error { c.Clone.Origin = c.Repo.Clone c.Clone.Remote = c.Repo.Clone - c.Clone.Sha = c.Commit.Sha - c.Clone.Ref = c.Commit.Ref - c.Clone.Branch = c.Commit.Branch - // TODO move this to the main app (github package) + c.Clone.Sha = c.Build.Commit.Sha + c.Clone.Ref = c.Build.Commit.Ref + c.Clone.Branch = c.Build.Commit.Branch + // TODO do we still need this? it should be set by the remote if strings.HasPrefix(c.Clone.Branch, "refs/heads/") { c.Clone.Branch = c.Clone.Branch[11:] } diff --git a/cmd/drone-build/run.go b/cmd/drone-build/run.go index 2d499229..ca67c4e7 100644 --- a/cmd/drone-build/run.go +++ b/cmd/drone-build/run.go @@ -13,7 +13,7 @@ type Context struct { // Links *common.Link Clone *common.Clone `json:"clone"` Repo *common.Repo `json:"repo"` - Commit *common.Commit `json:"commit"` + Build *common.Build `json:"build"` Job *common.Job `json:"job"` Keys *common.Keypair `json:"keys"` Netrc *common.Netrc `json:"netrc"` diff --git a/cmd/drone-build/util.go b/cmd/drone-build/util.go index 8cb69293..daeb68d3 100644 --- a/cmd/drone-build/util.go +++ b/cmd/drone-build/util.go @@ -6,12 +6,12 @@ import ( "strings" "github.com/drone/drone/Godeps/_workspace/src/github.com/samalba/dockerclient" - common "github.com/drone/drone/pkg/types" + "github.com/drone/drone/pkg/types" ) // helper function that converts the build step to // a containerConfig for use with the dockerclient -func toContainerConfig(step *common.Step) *dockerclient.ContainerConfig { +func toContainerConfig(step *types.Step) *dockerclient.ContainerConfig { config := &dockerclient.ContainerConfig{ Image: step.Image, Env: step.Environment, @@ -47,8 +47,8 @@ func toEnv(c *Context) map[string]string { return map[string]string{ "CI": "true", "BUILD_DIR": c.Clone.Dir, - "BUILD_ID": strconv.Itoa(c.Commit.Sequence), - "BUILD_NUMBER": strconv.Itoa(c.Commit.Sequence), + "BUILD_ID": strconv.Itoa(c.Build.Number), + "BUILD_NUMBER": strconv.Itoa(c.Build.Number), "JOB_NAME": c.Repo.FullName, "WORKSPACE": c.Clone.Dir, "GIT_BRANCH": c.Clone.Branch, @@ -56,7 +56,7 @@ func toEnv(c *Context) map[string]string { "DRONE": "true", "DRONE_REPO": c.Repo.FullName, - "DRONE_BUILD": strconv.Itoa(c.Commit.Sequence), + "DRONE_BUILD": strconv.Itoa(c.Build.Number), "DRONE_BRANCH": c.Clone.Branch, "DRONE_COMMIT": c.Clone.Sha, "DRONE_DIR": c.Clone.Dir, @@ -66,10 +66,10 @@ func toEnv(c *Context) map[string]string { // helper function to encode the build step to // a json string. Primarily used for plugins, which // expect a json encoded string in stdin or arg[1]. -func toCommand(c *Context, step *common.Step) []string { +func toCommand(c *Context, step *types.Step) []string { p := payload{ c.Repo, - c.Commit, + c.Build, c.Job, c.Clone, step.Config, @@ -81,10 +81,10 @@ func toCommand(c *Context, step *common.Step) []string { // that is serialized and sent to the plugin in JSON // format via stdin or arg[1]. type payload struct { - Repo *common.Repo `json:"repo"` - Commit *common.Commit `json:"commit"` - Job *common.Job `json:"job"` - Clone *common.Clone `json:"clone"` + Repo *types.Repo `json:"repo"` + Build *types.Build `json:"build"` + Job *types.Job `json:"job"` + Clone *types.Clone `json:"clone"` Config map[string]interface{} `json:"vargs"` } diff --git a/cmd/drone-server/drone-server b/cmd/drone-server/drone-server new file mode 100755 index 00000000..abd4d8bd Binary files /dev/null and b/cmd/drone-server/drone-server differ diff --git a/cmd/drone-server/static/index.html b/cmd/drone-server/static/index.html index 70cd89d7..36bd223c 100644 --- a/cmd/drone-server/static/index.html +++ b/cmd/drone-server/static/index.html @@ -1,45 +1,46 @@ - - - - - - - - - - - - + + + + + + + + + + + + -
+
- - - - - + + + + + + - - - - - - + + + + + + - - - - - - + + + + + + - - - + + + diff --git a/cmd/drone-server/static/scripts/controllers/builds.js b/cmd/drone-server/static/scripts/controllers/builds.js index be12fea1..974b14be 100644 --- a/cmd/drone-server/static/scripts/controllers/builds.js +++ b/cmd/drone-server/static/scripts/controllers/builds.js @@ -1,222 +1,240 @@ (function () { - /** - * BuildsCtrl responsible for rendering the repo's - * recent build history. - */ - function BuildsCtrl($scope, $routeParams, builds, repos, users, logs) { + /** + * BuildsCtrl responsible for rendering the repo's + * recent build history. + */ + function BuildsCtrl($scope, $stateParams, builds, repos, users, logs) { + var owner = $stateParams.owner; + var name = $stateParams.name; + var fullName = owner + '/' + name; - var owner = $routeParams.owner; - var name = $routeParams.name; - var fullName = owner+'/'+name; + // Gets the currently authenticated user + users.getCached().then(function (payload) { + $scope.user = payload.data; + }); - // Gets the currently authenticated user - users.getCached().then(function(payload){ - $scope.user = payload.data; - }); + // Gets a repository + repos.get(fullName).then(function (payload) { + $scope.repo = payload.data; + }).catch(function (err) { + $scope.error = err; + }); - // Gets a repository - repos.get(fullName).then(function(payload){ - $scope.repo = payload.data; - }).catch(function(err){ - $scope.error = err; - }); + // Gets a list of builds + builds.list(fullName).then(function (payload) { + $scope.builds = angular.isArray(payload.data) ? payload.data : []; + }).catch(function (err) { + $scope.error = err; + }); - // Gets a list of builds - builds.list(fullName).then(function(payload){ - $scope.builds = angular.isArray(payload.data) ? payload.data : []; - }).catch(function(err){ - $scope.error = err; - }); + $scope.watch = function (repo) { + repos.watch(repo.full_name).then(function (payload) { + $scope.repo.starred = true; + }); + }; - $scope.watch = function(repo) { - repos.watch(repo.full_name).then(function(payload) { - $scope.repo.starred = true; - }); - } + $scope.unwatch = function (repo) { + repos.unwatch(repo.full_name).then(function () { + $scope.repo.starred = false; + }); + }; - $scope.unwatch = function(repo) { - repos.unwatch(repo.full_name).then(function() { - $scope.repo.starred = false; - }); - } + repos.subscribe(fullName, function (event) { + var added = false; + for (var i = 0; i < $scope.builds.length; i++) { + var build = $scope.builds[i]; + if (event.number !== build.number) { + continue; // ignore + } + // update the build status + $scope.builds[i] = event; + $scope.$apply(); + added = true; + } - repos.subscribe(fullName, function(event) { - var added = false; - for (var i=0;i<$scope.builds.length;i++) { - var build = $scope.builds[i]; - if (event.number !== build.number) { - continue; // ignore - } - // update the build status - $scope.builds[i] = event; - $scope.$apply(); - added = true; - } + if (!added) { + $scope.builds.push(event); + $scope.$apply(); + } + }); + } - if (!added) { - $scope.builds.push(event); - $scope.$apply(); - } - }); - } + /** + * BuildCtrl responsible for rendering a build. + */ + function BuildCtrl($scope, $stateParams, $window, logs, builds, repos, users) { + var number = $stateParams.number; + var owner = $stateParams.owner; + var name = $stateParams.name; + var fullName = owner + '/' + name; - /** - * BuildCtrl responsible for rendering a build. - */ - function BuildCtrl($scope, $routeParams, $window, logs, builds, repos, users) { + // Gets the currently authenticated user + users.getCached().then(function (payload) { + $scope.user = payload.data; + }); - var number = $routeParams.number; - var owner = $routeParams.owner; - var name = $routeParams.name; - var fullName = owner+'/'+name; + // Gets a repository + repos.get(fullName).then(function (payload) { + $scope.repo = payload.data; + }).catch(function (err) { + $scope.error = err; + }); - // Gets the currently authenticated user - users.getCached().then(function(payload){ - $scope.user = payload.data; - }); + // Gets the build + builds.get(fullName, number).then(function (payload) { + $scope.build = payload.data; + }).catch(function (err) { + $scope.error = err; + }); - // Gets a repository - repos.get(fullName).then(function(payload){ - $scope.repo = payload.data; - }).catch(function(err){ - $scope.error = err; - }); + repos.subscribe(fullName, function (event) { + if (event.number !== parseInt(number)) { + return; // ignore + } + // update the build + $scope.build = event; + $scope.$apply(); + }); - // Gets the build - builds.get(fullName, number).then(function(payload){ - $scope.build = payload.data; - }).catch(function(err){ - $scope.error = err; - }); + $scope.restart = function () { + builds.restart(fullName, number).then(function (payload) { + $scope.build = payload.data; + }).catch(function (err) { + $scope.error = err; + }); + }; - repos.subscribe(fullName, function(event) { - if (event.number !== parseInt(number)) { - return; // ignore - } - // update the build - $scope.build = event; - $scope.$apply(); - }); - } + $scope.cancel = function () { + builds.cancel(fullName, number).then(function (payload) { + $scope.build = payload.data; + }).catch(function (err) { + $scope.error = err; + }); + }; + + $scope.tail = function () { + tail = !tail; + }; + } - /** - * BuildOutCtrl responsible for rendering a build output. - */ - function BuildOutCtrl($scope, $routeParams, $window, logs, builds, repos, users) { + /** + * BuildOutCtrl responsible for rendering a build output. + */ + function BuildOutCtrl($scope, $stateParams, $window, logs, builds, repos, users) { - var step = parseInt($routeParams.step) || 1; - var number = $routeParams.number; - var owner = $routeParams.owner; - var name = $routeParams.name; - var fullName = owner+'/'+name; - var streaming = false; - var tail = false; + var step = parseInt($stateParams.step) || 1; + var number = $stateParams.number; + var owner = $stateParams.owner; + var name = $stateParams.name; + var fullName = owner + '/' + name; + var streaming = false; + var tail = false; - // Initiates streaming a build. - var stream = function() { - if (streaming) { - return; - } - streaming = true; + // Initiates streaming a build. + var stream = function () { + if (streaming) { + return; + } + streaming = true; - var convert = new Filter({stream:true,newline:false}); - var term = document.getElementById("term"); - term.innerHTML = ""; + var convert = new Filter({stream: true, newline: false}); + var term = document.getElementById("term"); + term.innerHTML = ""; - // subscribes to the build otuput. - logs.subscribe(fullName, number, step, function(data){ - term.innerHTML += convert.toHtml(data.replace("\\n","\n")); - if (tail) { - // scrolls to the bottom of the page if enabled - $window.scrollTo(0, $window.document.body.scrollHeight); - } - }); - } + // subscribes to the build otuput. + logs.subscribe(fullName, number, step, function (data) { + term.innerHTML += convert.toHtml(data.replace("\\n", "\n")); + if (tail) { + // scrolls to the bottom of the page if enabled + $window.scrollTo(0, $window.document.body.scrollHeight); + } + }); + }; - // Gets the currently authenticated user - users.getCached().then(function(payload){ - $scope.user = payload.data; - }); + // Gets the currently authenticated user + users.getCached().then(function (payload) { + $scope.user = payload.data; + }); - // Gets a repository - repos.get(fullName).then(function(payload){ - $scope.repo = payload.data; - }).catch(function(err){ - $scope.error = err; - }); + // Gets a repository + repos.get(fullName).then(function (payload) { + $scope.repo = payload.data; + }).catch(function (err) { + $scope.error = err; + }); - // Gets the build - builds.get(fullName, number).then(function(payload){ - $scope.build = payload.data; - $scope.task = payload.data.jobs[step-1]; + // Gets the build + builds.get(fullName, number).then(function (payload) { + $scope.build = payload.data; + $scope.task = payload.data.jobs[step - 1]; - if (['pending', 'killed'].indexOf($scope.task.status) !== -1) { - // do nothing - } else if ($scope.task.status === 'running') { - // stream the build - stream(); - } else { + if (['pending', 'killed'].indexOf($scope.task.status) !== -1) { + // do nothing + } else if ($scope.task.status === 'running') { + // stream the build + stream(); + } else { - // fetch the logs for the finished build. - logs.get(fullName, number, step).then(function(payload){ - var convert = new Filter({stream:false,newline:false}); - var term = document.getElementById("term") - term.innerHTML = convert.toHtml(payload.data); - }).catch(function(err){ - $scope.error = err; - }); - } - }).catch(function(err){ - $scope.error = err; - }); + // fetch the logs for the finished build. + logs.get(fullName, number, step).then(function (payload) { + var convert = new Filter({stream: false, newline: false}); + var term = document.getElementById("term") + term.innerHTML = convert.toHtml(payload.data); + }).catch(function (err) { + $scope.error = err; + }); + } + }).catch(function (err) { + $scope.error = err; + }); - $scope.restart = function() { - builds.restart(fullName, number).then(function(payload){ - $scope.build = payload.data; - $scope.task = payload.data.builds[step-1]; - }).catch(function(err){ - $scope.error = err; - }); - }; + repos.subscribe(fullName, function (event) { + if (event.number !== parseInt(number)) { + return; // ignore + } + // update the build + $scope.build = event; + console.log(event.builds); + $scope.task = event.builds[step - 1]; + $scope.$apply(); - $scope.cancel = function() { - builds.cancel(fullName, number).then(function(payload){ - $scope.build = payload.data; - $scope.task = payload.data.builds[step-1]; - }).catch(function(err) { - $scope.error = err; - }); - }; + // start streaming the current build + if ($scope.task.status === 'running') { + stream(); + } else { + // resets our streaming state + streaming = false; + } + }); - $scope.tail = function() { - tail = !tail; - }; + $scope.restart = function () { + builds.restart(fullName, number).then(function (payload) { + $scope.build = payload.data; + $scope.task = payload.data.builds[step - 1]; + }).catch(function (err) { + $scope.error = err; + }); + }; - repos.subscribe(fullName, function(event) { - if (event.number !== parseInt(number)) { - return; // ignore - } - // update the build - $scope.build = event; - $scope.task = event.builds[step-1]; - $scope.$apply(); + $scope.cancel = function () { + builds.cancel(fullName, number).then(function (payload) { + $scope.build = payload.data; + $scope.task = payload.data.builds[step - 1]; + }).catch(function (err) { + $scope.error = err; + }); + }; - // start streaming the current build - if ($scope.task.status === 'running') { - stream(); - } else { - // resets our streaming state - streaming = false; - } - }); - } + $scope.tail = function () { + tail = !tail; + }; + } - - angular - .module('drone') - .controller('BuildOutCtrl', BuildOutCtrl) - .controller('BuildCtrl', BuildCtrl) - .controller('BuildsCtrl', BuildsCtrl); + angular + .module('drone') + .controller('BuildOutCtrl', BuildOutCtrl) + .controller('BuildCtrl', BuildCtrl) + .controller('BuildsCtrl', BuildsCtrl); })(); diff --git a/cmd/drone-server/static/scripts/controllers/commits.js b/cmd/drone-server/static/scripts/controllers/commits.js index 12ee8bc7..b513cf5d 100644 --- a/cmd/drone-server/static/scripts/controllers/commits.js +++ b/cmd/drone-server/static/scripts/controllers/commits.js @@ -4,10 +4,10 @@ * CommitsCtrl responsible for rendering the repo's * recent commit history. */ - function CommitsCtrl($scope, $routeParams, builds, repos, users, logs) { + function CommitsCtrl($scope, $stateParams, builds, repos, users, logs) { - var owner = $routeParams.owner; - var name = $routeParams.name; + var owner = $stateParams.owner; + var name = $stateParams.name; var fullName = owner+'/'+name; // Gets the currently authenticated user diff --git a/cmd/drone-server/static/scripts/controllers/repos.js b/cmd/drone-server/static/scripts/controllers/repos.js index 849f432b..19768d74 100644 --- a/cmd/drone-server/static/scripts/controllers/repos.js +++ b/cmd/drone-server/static/scripts/controllers/repos.js @@ -1,116 +1,115 @@ (function () { - /** - * ReposCtrl responsible for rendering the user's - * repository home screen. - */ - function ReposCtrl($scope, $routeParams, repos, users) { + /** + * ReposCtrl responsible for rendering the user's + * repository home screen. + */ + function ReposCtrl($scope, $stateParams, repos, users) { + // Gets the currently authenticated user + users.getCached().then(function (payload) { + $scope.user = payload.data; + }); - // Gets the currently authenticated user - users.getCached().then(function(payload){ - $scope.user = payload.data; - }); + // Gets a list of repos to display in the + // dropdown. + repos.list().then(function (payload) { + $scope.repos = angular.isArray(payload.data) ? payload.data : []; + }).catch(function (err) { + $scope.error = err; + }); + } - // Gets a list of repos to display in the - // dropdown. - repos.list().then(function(payload){ - $scope.repos = angular.isArray(payload.data) ? payload.data : []; - }).catch(function(err){ - $scope.error = err; - }); - } + /** + * RepoAddCtrl responsible for activaing a new + * repository. + */ + function RepoAddCtrl($scope, $location, repos, users) { - /** - * RepoAddCtrl responsible for activaing a new - * repository. - */ - function RepoAddCtrl($scope, $location, repos, users) { + // Gets the currently authenticated user + users.getCached().then(function (payload) { + $scope.user = payload.data; + }); - // Gets the currently authenticated user - users.getCached().then(function(payload){ - $scope.user = payload.data; - }); + $scope.add = function (slug) { + repos.post(slug).then(function (payload) { + $location.path('/' + slug); + }).catch(function (err) { + $scope.error = err; + }); + } + } - $scope.add = function(slug) { - repos.post(slug).then(function(payload) { - $location.path('/'+slug); - }).catch(function(err){ - $scope.error = err; - }); - } - } + /** + * RepoEditCtrl responsible for editing a repository. + */ + function RepoEditCtrl($scope, $window, $location, $stateParams, repos, users) { + var owner = $stateParams.owner; + var name = $stateParams.name; + var fullName = owner + '/' + name; - /** - * RepoEditCtrl responsible for editing a repository. - */ - function RepoEditCtrl($scope, $window, $location, $routeParams, repos, users) { - var owner = $routeParams.owner; - var name = $routeParams.name; - var fullName = owner+'/'+name; + // Inject window for composing url + $scope.window = $window; - // Inject window for composing url - $scope.window = $window; + // Gets the currently authenticated user + users.getCached().then(function (payload) { + $scope.user = payload.data; + }); - // Gets the currently authenticated user - users.getCached().then(function(payload){ - $scope.user = payload.data; - }); + // Gets a repository + repos.get(fullName).then(function (payload) { + $scope.repo = payload.data; + }).catch(function (err) { + $scope.error = err; + }); - // Gets a repository - repos.get(fullName).then(function(payload){ - $scope.repo = payload.data; - }).catch(function(err){ - $scope.error = err; - }); + $scope.save = function (repo) { + repo.timeout = parseInt(repo.timeout); + repos.update(repo).then(function (payload) { + $scope.repo = payload.data; + }).catch(function (err) { + $scope.error = err; + }); + }; - $scope.save = function(repo) { - repo.timeout = parseInt(repo.timeout); - repos.update(repo).then(function(payload) { - $scope.repo = payload.data; - }).catch(function(err){ - $scope.error = err; - }); - } + $scope.delete = function (repo) { + repos.delete(repo).then(function (payload) { + $location.path('/'); + }).catch(function (err) { + $scope.error = err; + }); + }; - $scope.delete = function(repo) { - repos.delete(repo).then(function(payload) { - $location.path('/'); - }).catch(function(err){ - $scope.error = err; - }); - } + $scope.param = {}; + $scope.addParam = function (param) { + if (!$scope.repo.params) { + $scope.repo.params = {} + } + $scope.repo.params[param.key] = param.value; + $scope.param = {}; - $scope.param={} - $scope.addParam = function(param) { - if (!$scope.repo.params) { - $scope.repo.params = {} - } - $scope.repo.params[param.key]=param.value; - $scope.param={} + // auto-update + repos.update($scope.repo).then(function (payload) { + $scope.repo = payload.data; + }).catch(function (err) { + $scope.error = err; + }); + }; - // auto-update - repos.update($scope.repo).then(function(payload) { - $scope.repo = payload.data; - }).catch(function(err){ - $scope.error = err; - }); - } + $scope.deleteParam = function (key) { + delete $scope.repo.params[key]; - $scope.deleteParam = function(key) { - delete $scope.repo.params[key]; + // auto-update + repos.update($scope.repo).then(function (payload) { + $scope.repo = payload.data; + }).catch(function (err) { + $scope.error = err; + }); + } + } - // auto-update - repos.update($scope.repo).then(function(payload) { - $scope.repo = payload.data; - }).catch(function(err){ - $scope.error = err; - }); - } - } - - angular - .module('drone') - .controller('ReposCtrl', ReposCtrl) - .controller('RepoAddCtrl', RepoAddCtrl) - .controller('RepoEditCtrl', RepoEditCtrl); + angular + .module('drone') + .controller('ReposCtrl', ReposCtrl) + .controller('RepoAddCtrl', RepoAddCtrl) + .controller('RepoEditCtrl', RepoEditCtrl); })(); diff --git a/cmd/drone-server/static/scripts/drone.js b/cmd/drone-server/static/scripts/drone.js index 95393c83..b3e98dd4 100644 --- a/cmd/drone-server/static/scripts/drone.js +++ b/cmd/drone-server/static/scripts/drone.js @@ -2,150 +2,251 @@ (function () { - /** - * Creates the angular application. - */ - angular.module('drone', [ - 'ngRoute', - 'ui.filters' - ]); + /** + * Creates the angular application. + */ + angular.module('drone', [ + 'ngRoute', + 'ui.filters', + 'ui.router' + ]); - /** - * Bootstraps the application and retrieves the - * token from the - */ - function Authorize() { - // First, parse the query string - var params = {}, queryString = location.hash.substring(1), - regex = /([^&=]+)=([^&]*)/g, m; + /** + * Bootstraps the application and retrieves the + * token from the + */ + function Authorize() { + // First, parse the query string + var params = {}, queryString = location.hash.substring(1), + regex = /([^&=]+)=([^&]*)/g, m; - // Loop through and retrieve the token - while (m = regex.exec(queryString)) { - params[decodeURIComponent(m[1])] = decodeURIComponent(m[2]); - } + // Loop through and retrieve the token + while (m = regex.exec(queryString)) { + params[decodeURIComponent(m[1])] = decodeURIComponent(m[2]); + } - // if the user has just received an auth token we - // should extract from the URL, save to local storage - // and then remove from the URL for good measure. - if (params.access_token) { - localStorage.setItem("access_token", params.access_token); - history.replaceState({}, document.title, location.pathname); - } - } + // if the user has just received an auth token we + // should extract from the URL, save to local storage + // and then remove from the URL for good measure. + if (params.access_token) { + localStorage.setItem("access_token", params.access_token); + history.replaceState({}, document.title, location.pathname); + } + } - /** - * Defines the route configuration for the - * main application. - */ - function Config ($routeProvider, $httpProvider, $locationProvider) { + /** + * Defines the route configuration for the + * main application. + */ + function Config($stateProvider, $httpProvider, $locationProvider) { - // Resolver that will attempt to load the currently - // authenticated user prior to loading the page. - var resolveUser = { - user: function(users) { - return users.getCached(); - } - } + // Resolver that will attempt to load the currently + // authenticated user prior to loading the page. + var resolveUser = { + user: function (users) { + return users.getCached(); + } + }; - $routeProvider - .when('/', { - templateUrl: '/static/scripts/views/repos.html', - controller: 'ReposCtrl', - resolve: resolveUser - }) - .when('/login', { - templateUrl: '/static/scripts/views/login.html', - controller: 'UserLoginCtrl' - }) - .when('/profile', { - templateUrl: '/static/scripts/views/user.html', - controller: 'UserCtrl', - resolve: resolveUser - }) - .when('/users', { - templateUrl: '/static/scripts/views/users.html', - controller: 'UsersCtrl', - resolve: resolveUser - }) - .when('/new', { - templateUrl: '/static/scripts/views/repos_add.html', - controller: 'RepoAddCtrl', - resolve: resolveUser - }) - .when('/:owner/:name', { - templateUrl: '/static/scripts/views/builds.html', - controller: 'BuildsCtrl', - resolve: resolveUser - }) - .when('/:owner/:name/edit', { - templateUrl: '/static/scripts/views/repos_edit.html', - controller: 'RepoEditCtrl', - resolve: resolveUser - }) - .when('/:owner/:name/edit/env', { - templateUrl: '/static/scripts/views/repos_env.html', - controller: 'RepoEditCtrl', - resolve: resolveUser - }) - .when('/:owner/:name/delete', { - templateUrl: '/static/scripts/views/repos_del.html', - controller: 'RepoEditCtrl', - resolve: resolveUser - }) - .when('/:owner/:name/:number', { - templateUrl: '/static/scripts/views/build.html', - controller: 'BuildCtrl', - resolve: resolveUser - }) - .when('/:owner/:name/:number/:step', { - templateUrl: '/static/scripts/views/build_out.html', - controller: 'BuildOutCtrl', - resolve: resolveUser - }); + $stateProvider + .state('app', { + abstract: true, + views: { + 'layout': { + templateUrl: '/static/scripts/views/layout.html', + controller: function ($scope, $routeParams, repos, users) { + users.getCached().then(function (payload) { + $scope.user = payload.data; + }); + } + } + } + }) + .state('app.index', { + url: '/', + views: { + 'toolbar': { + templateUrl: '/static/scripts/views/repos/index/toolbar.html' + }, + 'content': { + templateUrl: '/static/scripts/views/repos/index/content.html', + controller: 'ReposCtrl', + resolve: resolveUser + } + }, + title: 'Dashboard' + }) + .state('login', { + url: '/login', + views: { + 'layout': { + templateUrl: '/static/scripts/views/login.html', + controller: 'UserLoginCtrl', + resolve: resolveUser + } + }, + title: 'Login' + }) + .state('app.profile', { + url: '/profile', + views: { + 'toolbar': {templateUrl: '/static/scripts/views/profile/toolbar.html'}, + 'content': { + templateUrl: '/static/scripts/views/profile/content.html', + controller: 'UserCtrl', + resolve: resolveUser + } + }, + title: 'Profile' + }) + .state('app.users', { + url: '/users', + views: { + 'toolbar': {templateUrl: '/static/scripts/views/users/toolbar.html'}, + 'content': { + templateUrl: '/static/scripts/views/users/content.html', + controller: 'UsersCtrl', + resolve: resolveUser + } + }, + title: 'Users' + }) + .state('app.new_repo', { + url: '/new', + views: { + 'toolbar': {templateUrl: '/static/scripts/views/repos/add/toolbar.html'}, + 'content': { + templateUrl: '/static/scripts/views/repos/add/content.html', + controller: 'RepoAddCtrl', + resolve: resolveUser + } + }, + title: 'Add Repository' + }) + .state('app.builds', { + url: '/:owner/:name', + views: { + 'toolbar': { + templateUrl: '/static/scripts/views/builds/index/toolbar.html', + controller: 'RepoEditCtrl', + resolve: resolveUser + }, + 'content': { + templateUrl: '/static/scripts/views/builds/index/content.html', + controller: 'BuildsCtrl' + } + }, + title: 'Builds' + }) + .state('app.repo_edit', { + url: '/:owner/:name/edit', + views: { + 'toolbar': { + templateUrl: '/static/scripts/views/repos/toolbar.html', + controller: 'RepoEditCtrl', + resolve: resolveUser + }, + 'content': { + templateUrl: '/static/scripts/views/repos/edit.html', + controller: 'RepoEditCtrl', + resolve: resolveUser + } + }, + title: 'Edit Repository' + }) + .state('app.repo.env', { + url: '/:owner/:name/edit/env', + views: { + 'toolbar': {templateUrl: '/static/scripts/views/repos/toolbar.html'}, + 'content': {templateUrl: '/static/scripts/views/repos/env.html'} + }, + controller: 'RepoEditCtrl', + resolve: resolveUser + }) + .state('app.repo.del', { + url: '/:owner/:name/delete', + views: { + 'toolbar': {templateUrl: '/static/scripts/views/repos/toolbar.html'}, + 'content': {templateUrl: '/static/scripts/views/repos/del.html'} + }, + controller: 'RepoEditCtrl', + resolve: resolveUser + }) + .state('app.build', { + url: '/:owner/:name/:number', + views: { + 'toolbar': { + templateUrl: '/static/scripts/views/builds/show/toolbar.html', + controller: 'BuildCtrl', + resolve: resolveUser + }, + 'content': { + templateUrl: '/static/scripts/views/builds/show/content.html', + controller: 'BuildCtrl', + resolve: resolveUser + } + }, + title: 'Build' + }) + .state('app.job', { + url: '/:owner/:name/:number/:step', + views: { + 'toolbar': { + templateUrl: '/static/scripts/views/builds/step/toolbar.html', + controller: 'BuildOutCtrl', + resolve: resolveUser + }, + 'content': { + templateUrl: '/static/scripts/views/builds/step/content.html', + controller: 'BuildOutCtrl', + resolve: resolveUser + }, + title: 'Build Job' + } + }); - // Enables html5 mode - $locationProvider.html5Mode(true) + // Enables html5 mode + $locationProvider.html5Mode(true); - // Appends the Bearer token to authorize every - // outbound http request. - $httpProvider.defaults.headers.common.Authorization = 'Bearer '+localStorage.getItem('access_token'); + // Appends the Bearer token to authorize every + // outbound http request. + $httpProvider.defaults.headers.common.Authorization = 'Bearer ' + localStorage.getItem('access_token'); - // Intercepts every oubput http response and redirects - // the user to the logic screen if the request was rejected. - $httpProvider.interceptors.push(function($q, $location) { - return { - 'responseError': function(rejection) { - if (rejection.status === 401 && rejection.config.url !== "/api/user") { - $location.path('/login'); - } - if (rejection.status === 0) { - // this happens when the app is down or - // the browser loses internet connectivity. - } - return $q.reject(rejection); - } - }; - }); - } + // Intercepts every oubput http response and redirects + // the user to the logic screen if the request was rejected. + $httpProvider.interceptors.push(function ($q, $location) { + return { + 'responseError': function (rejection) { + if (rejection.status === 401 && rejection.config.url !== "/api/user") { + $location.path('/login'); + } + if (rejection.status === 0) { + // this happens when the app is down or + // the browser loses internet connectivity. + } + return $q.reject(rejection); + } + }; + }); + } + function RouteChange($rootScope, repos, logs) { + $rootScope.$on('$stateChangeStart', function () { + repos.unsubscribe(); + logs.unsubscribe(); + }); - function RouteChange($rootScope, repos, logs) { - $rootScope.$on('$routeChangeStart', function (event, next) { - repos.unsubscribe(); - logs.unsubscribe(); - }); + $rootScope.$on('$stateChangeSuccess', function (event, current) { + if (current.title) { + document.title = current.title + ' · drone'; + } + }); + } - $rootScope.$on('$routeChangeSuccess', function (event, current, previous) { - if (current.$$route.title) { - document.title = current.$$route.title + ' · drone'; - } - }); - } - - angular - .module('drone') - .config(Authorize) - .config(Config) - .run(RouteChange); + angular + .module('drone') + .config(Authorize) + .config(Config) + .run(RouteChange); })(); diff --git a/cmd/drone-server/static/scripts/services/repos.js b/cmd/drone-server/static/scripts/services/repos.js index 66795143..ce73c934 100644 --- a/cmd/drone-server/static/scripts/services/repos.js +++ b/cmd/drone-server/static/scripts/services/repos.js @@ -2,116 +2,116 @@ (function () { - /** - * The RepoService provides access to repository - * data using REST API calls. - */ - function RepoService($http, $window) { + /** + * The RepoService provides access to repository + * data using REST API calls. + */ + function RepoService($http, $window) { - var callback, - websocket, - token = localStorage.getItem('access_token'); + var callback, + websocket, + token = localStorage.getItem('access_token'); - /** - * Gets a list of all repositories. - */ - this.list = function() { - return $http.get('/api/user/repos'); - }; + /** + * Gets a list of all repositories. + */ + this.list = function () { + return $http.get('/api/user/repos'); + }; - /** - * Gets a repository by name. - * - * @param {string} Name of the repository. - */ - this.get = function(repoName) { - return $http.get('/api/repos/'+repoName); - }; + /** + * Gets a repository by name. + * + * @param {string} Name of the repository. + */ + this.get = function (repoName) { + return $http.get('/api/repos/' + repoName); + }; - /** - * Creates a new repository. - * - * @param {object} JSON representation of a repository. - */ - this.post = function(repoName) { - return $http.post('/api/repos/' + repoName); - }; + /** + * Creates a new repository. + * + * @param {object} JSON representation of a repository. + */ + this.post = function (repoName) { + return $http.post('/api/repos/' + repoName); + }; - /** - * Updates an existing repository. - * - * @param {object} JSON representation of a repository. - */ - this.update = function(repo) { - return $http.patch('/api/repos/'+repo.full_name, repo); - }; + /** + * Updates an existing repository. + * + * @param {object} JSON representation of a repository. + */ + this.update = function (repo) { + return $http.patch('/api/repos/' + repo.full_name, repo); + }; - /** - * Deletes a repository. - * - * @param {string} Name of the repository. - */ - this.delete = function(repoName) { - return $http.delete('/api/repos/'+repoName); - }; + /** + * Deletes a repository. + * + * @param {string} Name of the repository. + */ + this.delete = function (repoName) { + return $http.delete('/api/repos/' + repoName); + }; - /** - * Watch a repository. - * - * @param {string} Name of the repository. - */ - this.watch = function(repoName) { - return $http.post('/api/repos/'+repoName+'/watch'); - }; + /** + * Watch a repository. + * + * @param {string} Name of the repository. + */ + this.watch = function (repoName) { + return $http.post('/api/repos/' + repoName + '/watch'); + }; - /** - * Unwatch a repository. - * - * @param {string} Name of the repository. - */ - this.unwatch = function(repoName) { - return $http.delete('/api/repos/'+repoName+'/unwatch'); - }; + /** + * Unwatch a repository. + * + * @param {string} Name of the repository. + */ + this.unwatch = function (repoName) { + return $http.delete('/api/repos/' + repoName + '/unwatch'); + }; - var callback, - events, - token = localStorage.getItem('access_token'); + var callback, + events, + token = localStorage.getItem('access_token'); - /** - * Subscribes to a live update feed for a repository - * - * @param {string} Name of the repository. - */ - this.subscribe = function(repo, _callback) { - callback = _callback; + /** + * Subscribes to a live update feed for a repository + * + * @param {string} Name of the repository. + */ + this.subscribe = function (repo, _callback) { + callback = _callback; - events = new EventSource("/api/stream/" + repo + "?access_token=" + token, { withCredentials: true }); - events.onmessage = function (event) { - if (callback !== undefined) { - callback(angular.fromJson(event.data)); - } - }; - events.onerror = function (event) { - callback = undefined; - if (events !== undefined) { - events.close(); - events = undefined; - } - console.log('user event stream closed due to error.', event); - }; - }; + events = new EventSource("/api/stream/" + repo + "?access_token=" + token, {withCredentials: true}); + events.onmessage = function (event) { + if (callback !== undefined) { + callback(angular.fromJson(event.data)); + } + }; + events.onerror = function (event) { + callback = undefined; + if (events !== undefined) { + events.close(); + events = undefined; + } + console.log('user event stream closed due to error.', event); + }; + }; - this.unsubscribe = function() { - callback = undefined; - if (events !== undefined) { - events.close(); - events = undefined; - } - }; - } + this.unsubscribe = function () { + callback = undefined; + if (events !== undefined) { + events.close(); + events = undefined; + } + }; + } - angular - .module('drone') - .service('repos', RepoService); + angular + .module('drone') + .service('repos', RepoService); })(); diff --git a/cmd/drone-server/static/scripts/views/build.html b/cmd/drone-server/static/scripts/views/build.html deleted file mode 100644 index d7a51a92..00000000 --- a/cmd/drone-server/static/scripts/views/build.html +++ /dev/null @@ -1,64 +0,0 @@ -
- - - - - {{ "+"+user.login }} -
- -
- -
- - {{ repo.owner }} / {{ repo.name }} - - {{ build.number }} -
- -
- - - - -
- -
- - - -
- -
-
-
-
-
-
-

{{ build.head_commit.message }}

-

{{ build.head_commit.author.login }} pushed to {{ build.head_commit.branch }} {{ build.started_at | fromNow }}

-
# {{build.number}}
-
-
-
- -
- -
-
-
-
-

-
- {{ key.toUpperCase() }}={{ value }} -
-

-
# {{job.number}}
-
- -
-
- - - - - diff --git a/cmd/drone-server/static/scripts/views/build_out.html b/cmd/drone-server/static/scripts/views/build_out.html deleted file mode 100644 index a62a4377..00000000 --- a/cmd/drone-server/static/scripts/views/build_out.html +++ /dev/null @@ -1,68 +0,0 @@ -
- - - - - {{ "+"+user.login }} -
- -
- -
- - {{ repo.owner }} / {{ repo.name }} - - {{ build.sequence }} - - {{ task.sequence }} -
- -
- - - -
- -
- - - -
- -
-
-
-
-
-
-
-

{{ build.head_commit.message }}

-

{{ build.head_commit.author.login }} pushed to {{ build.head_commit.branch }} {{ build.started_at | fromNow }}

-
-
- -
-
- -
-
-

-
- {{ key.toUpperCase() }}={{ value }} -
-

-
-
-
- - - - - 

-		
-	

-
-
-
-	
-	
diff --git a/cmd/drone-server/static/scripts/views/builds.html b/cmd/drone-server/static/scripts/views/builds.html
deleted file mode 100644
index 0ef2e972..00000000
--- a/cmd/drone-server/static/scripts/views/builds.html
+++ /dev/null
@@ -1,39 +0,0 @@
-

-	
-	
-	
-	
-	{{ "+"+user.login }}
-

-
-

-
-	

-		
-		{{ repo.owner }} / {{ repo.name }}
-	

-
-	

-		
-		
-		
-	

-
-

-
-
-
-

-	

-		
-			

-				

-			

-			

-				
{{ build.head_commit.message }}

-				
{{ build.head_commit.author.login }} pushed to {{ build.head_commit.branch }} {{ build.started_at | fromNow }}

-				
# {{build.number}}

-			

-		
-	

-

diff --git a/cmd/drone-server/static/scripts/views/builds/index/content.html b/cmd/drone-server/static/scripts/views/builds/index/content.html
new file mode 100644
index 00000000..cb113cdf
--- /dev/null
+++ b/cmd/drone-server/static/scripts/views/builds/index/content.html
@@ -0,0 +1,18 @@
+

+  

+    
+      

+        

+      

+      

+        
{{ build.head_commit.message }}

+
+        

+          {{ build.head_commit.author.login }} pushed to {{ build.head_commit.branch}} {{ build.started_at | fromNow }}
+        

+
+        
# {{build.number}}

+      

+    
+  

+

\ No newline at end of file
diff --git a/cmd/drone-server/static/scripts/views/builds/index/toolbar.html b/cmd/drone-server/static/scripts/views/builds/index/toolbar.html
new file mode 100644
index 00000000..c79f647e
--- /dev/null
+++ b/cmd/drone-server/static/scripts/views/builds/index/toolbar.html
@@ -0,0 +1,18 @@
+

+  
+    home
+  
+  {{ repo.owner }} / {{ repo.name }}
+

+
+

+  
+    edit
+  
+  
+  
+

\ No newline at end of file
diff --git a/cmd/drone-server/static/scripts/views/builds/show/content.html b/cmd/drone-server/static/scripts/views/builds/show/content.html
new file mode 100644
index 00000000..fa7d9446
--- /dev/null
+++ b/cmd/drone-server/static/scripts/views/builds/show/content.html
@@ -0,0 +1,40 @@
+

+
+  

+    

+      

+        

+      

+      

+        
{{ build.head_commit.message }}

+
+        
{{ build.head_commit.author.login }} pushed to {{ build.head_commit.branch}} {{ build.started_at | fromNow }}

+
+        
# {{build.number}}

+      

+    

+  

+  

+    
Build jobs

+  

+  

+    
+      

+        

+      

+      

+        

+          

+          {{ key.toUpperCase() }}={{ value }}
+        

+        

+        
# {{job.number}}

+      

+    
+  

+

+
+

+  
+  
+

diff --git a/cmd/drone-server/static/scripts/views/builds/show/toolbar.html b/cmd/drone-server/static/scripts/views/builds/show/toolbar.html
new file mode 100644
index 00000000..9dee2b14
--- /dev/null
+++ b/cmd/drone-server/static/scripts/views/builds/show/toolbar.html
@@ -0,0 +1,20 @@
+

+  
+    home
+  
+  {{ repo.owner }} / {{ repo.name }}
+  
+  #{{ build.number }}
+

+
+

+  
+    edit
+  
+  
+  
+

\ No newline at end of file
diff --git a/cmd/drone-server/static/scripts/views/builds/step/content.html b/cmd/drone-server/static/scripts/views/builds/step/content.html
new file mode 100644
index 00000000..3c3a578f
--- /dev/null
+++ b/cmd/drone-server/static/scripts/views/builds/step/content.html
@@ -0,0 +1,37 @@
+

+
+  

+    

+      

+        

+        

+      

+      

+        
{{ build.head_commit.message }}

+
+        
{{ build.head_commit.author.login }} pushed to {{ build.head_commit.branch}} {{ build.started_at | fromNow }}

+      

+    

+
+    

+      

+
+      

+      

+        

+          

+            {{ key.toUpperCase() }}={{ value }}
+          

+        

+      

+    

+  

+
+
+  

+  
+

+
+
+
+
\ No newline at end of file
diff --git a/cmd/drone-server/static/scripts/views/builds/step/toolbar.html b/cmd/drone-server/static/scripts/views/builds/step/toolbar.html
new file mode 100644
index 00000000..8fc3302c
--- /dev/null
+++ b/cmd/drone-server/static/scripts/views/builds/step/toolbar.html
@@ -0,0 +1,22 @@
+

+  
+    home
+  
+  {{ repo.owner }} / {{ repo.name }}
+   
+  Build # {{ build.number }}
+  
+  Job #{{ task.number }}
+

+
+

+  
+    edit
+  
+  
+  
+

\ No newline at end of file
diff --git a/cmd/drone-server/static/scripts/views/layout.html b/cmd/drone-server/static/scripts/views/layout.html
new file mode 100644
index 00000000..6b2068f4
--- /dev/null
+++ b/cmd/drone-server/static/scripts/views/layout.html
@@ -0,0 +1,15 @@
+

+  
+  
+    help
+  
+  
+    supervisor_account
+  
+  
+    settings
+  
+  {{ "+"+user.login }}
+

+

+

\ No newline at end of file
diff --git a/cmd/drone-server/static/scripts/views/login.html b/cmd/drone-server/static/scripts/views/login.html
index 44e16719..83bb4b90 100644
--- a/cmd/drone-server/static/scripts/views/login.html
+++ b/cmd/drone-server/static/scripts/views/login.html
@@ -1,67 +1,74 @@
-	
+
 
 
-	

-	

-	  
Oops. There was an unexpected error. Please try again.

-	  
There was an error authorizing your account.

-	  
Login is restricted to approved organization members only

-	  
Self-registration is disabled. Please contact the system admin to grant access.

-	

-	
Login

+  

+  

+    
Oops. There was an unexpected error. Please try again.

+    
There was an error authorizing your account.

+    
Login is restricted to approved organization members only

+    
Self-registration is disabled. Please contact the system admin to grant
+      access.
+    

+  

+  
Login

 
diff --git a/cmd/drone-server/static/scripts/views/user.html b/cmd/drone-server/static/scripts/views/profile/content.html
similarity index 66%
rename from cmd/drone-server/static/scripts/views/user.html
rename to cmd/drone-server/static/scripts/views/profile/content.html
index 7d2f27e8..4dd819d6 100644
--- a/cmd/drone-server/static/scripts/views/user.html
+++ b/cmd/drone-server/static/scripts/views/profile/content.html
@@ -1,19 +1,3 @@
-

-	
-	
-	
-	
-	{{ "+"+user.login }}
-

-
-

-
-	

-		
-		Profile
-	

-

-
 

 	

 		
Login info

@@ -34,8 +18,12 @@
 	

 		
Tokens

 		

-			
+		    

+			    
+			

+			

 			
+			

 		

 
 		
No Personal Tokens Exist

diff --git a/cmd/drone-server/static/scripts/views/profile/toolbar.html b/cmd/drone-server/static/scripts/views/profile/toolbar.html
new file mode 100644
index 00000000..6c829800
--- /dev/null
+++ b/cmd/drone-server/static/scripts/views/profile/toolbar.html
@@ -0,0 +1,6 @@
+

+	
+        home
+	
+	Profile
+

\ No newline at end of file
diff --git a/cmd/drone-server/static/scripts/views/repos.html b/cmd/drone-server/static/scripts/views/repos.html
deleted file mode 100644
index ceb9be6d..00000000
--- a/cmd/drone-server/static/scripts/views/repos.html
+++ /dev/null
@@ -1,34 +0,0 @@
-

-	
-	
-	
-	
-	{{ "+"+user.login }}
-

-
-

-	

-		Dashboard
-	

-
-	

-		
-	

-

-
-

-
-
-	

-		
-			

-				

-			

-			

-				
{{ repo.owner }} / {{ repo.name }}

-				
{{ repo.clone_url }}

-			

-		
-
-	

-

diff --git a/cmd/drone-server/static/scripts/views/repos_add.html b/cmd/drone-server/static/scripts/views/repos/add/content.html
similarity index 67%
rename from cmd/drone-server/static/scripts/views/repos_add.html
rename to cmd/drone-server/static/scripts/views/repos/add/content.html
index 74b2c3b0..f16e1bda 100644
--- a/cmd/drone-server/static/scripts/views/repos_add.html
+++ b/cmd/drone-server/static/scripts/views/repos/add/content.html
@@ -1,18 +1,3 @@
-

-	
-	
-	
-	
-	{{ "+"+user.login }}
-

-
-

-	

-		
-		Add Repository
-	

-

-
 

 		

 			
Register your repository with Drone to enable automated testing. Note that Drone
diff --git a/cmd/drone-server/static/scripts/views/repos/add/toolbar.html b/cmd/drone-server/static/scripts/views/repos/add/toolbar.html
new file mode 100644
index 00000000..1d842098
--- /dev/null
+++ b/cmd/drone-server/static/scripts/views/repos/add/toolbar.html
@@ -0,0 +1,6 @@
+

+	
+        home
+	
+	Add Repository
+

\ No newline at end of file
diff --git a/cmd/drone-server/static/scripts/views/repos/del.html b/cmd/drone-server/static/scripts/views/repos/del.html
new file mode 100644
index 00000000..56c36d09
--- /dev/null
+++ b/cmd/drone-server/static/scripts/views/repos/del.html
@@ -0,0 +1,17 @@
+

+
+
+	

+		
+Warning: this action cannot be undone.
+	

+
+

\ No newline at end of file
diff --git a/cmd/drone-server/static/scripts/views/repos/edit.html b/cmd/drone-server/static/scripts/views/repos/edit.html
new file mode 100644
index 00000000..efa5b872
--- /dev/null
+++ b/cmd/drone-server/static/scripts/views/repos/edit.html
@@ -0,0 +1,75 @@
+

+  

+    
Settings

+
+    

+      
Post Commit Hooks

+      

+        
+        
+      

+    

+    

+      
Pull Request Hooks

+      

+        
+        
+      

+    

+    
+      
Private Variables

+      

+        Inject private variables into your build environment
+      

+    
+    
+      
Delete

+      
Delete this repository and its build history

+    
+  

+
+  

+    
Admin settings

+
+    

+      
Trusted (Evelvate Privilege)

+      

+        
+        
+      

+    

+    

+      
Timeout in minutes

+      

+        
+        {{ repo.timeout }} minutes
+      

+    

+  

+
+  

+    
Badges

+
+    

+      
Markdown

+      

+        
[![Build Status]({{ window.location.origin }}/api/badges/{{ repo.full_name }}/status.svg)]({{ window.location.origin }}/{{ repo.full_name }})

+      

+    

+    

+      
CCMenu

+      

+        
{{ window.location.origin }}/api/badges/{{ repo.full_name }}/cc.xml

+      

+    

+  

+
+  

+    
Public Key

+
+    

+      
{{ repo.keypair.public }}

+    

+  

+

\ No newline at end of file
diff --git a/cmd/drone-server/static/scripts/views/repos_env.html b/cmd/drone-server/static/scripts/views/repos/env.html
similarity index 54%
rename from cmd/drone-server/static/scripts/views/repos_env.html
rename to cmd/drone-server/static/scripts/views/repos/env.html
index 508530a1..b4913c42 100644
--- a/cmd/drone-server/static/scripts/views/repos_env.html
+++ b/cmd/drone-server/static/scripts/views/repos/env.html
@@ -1,25 +1,3 @@
-

-	
-	
-	
-	
-	{{ "+"+user.login }}
-

-
-

-
-	

-		
-		{{ repo.owner }} / {{ repo.name }}
-	

-
-	

-		
-		
-		
-	

-
-

 

 	

 		
add
 		
 	

-

+

\ No newline at end of file
diff --git a/cmd/drone-server/static/scripts/views/repos/index/content.html b/cmd/drone-server/static/scripts/views/repos/index/content.html
new file mode 100644
index 00000000..4e416957
--- /dev/null
+++ b/cmd/drone-server/static/scripts/views/repos/index/content.html
@@ -0,0 +1,14 @@
+

+    

+    	
+    		

+    			

+    		

+    		

+    			
{{ repo.owner }} / {{ repo.name }}

+    			
{{ repo.clone_url }}

+    		

+    	
+
+    

+

\ No newline at end of file
diff --git a/cmd/drone-server/static/scripts/views/repos/index/toolbar.html b/cmd/drone-server/static/scripts/views/repos/index/toolbar.html
new file mode 100644
index 00000000..851e529a
--- /dev/null
+++ b/cmd/drone-server/static/scripts/views/repos/index/toolbar.html
@@ -0,0 +1,9 @@
+

+	Dashboard
+

+
+

+	
+	   add
+	
+

\ No newline at end of file
diff --git a/cmd/drone-server/static/scripts/views/repos/toolbar.html b/cmd/drone-server/static/scripts/views/repos/toolbar.html
new file mode 100644
index 00000000..6d7f1b35
--- /dev/null
+++ b/cmd/drone-server/static/scripts/views/repos/toolbar.html
@@ -0,0 +1,18 @@
+

+  
+    home
+  
+  {{ repo.owner }} / {{ repo.name }}
+

+
+

+  
+    edit
+  
+  
+  
+

\ No newline at end of file
diff --git a/cmd/drone-server/static/scripts/views/repos_del.html b/cmd/drone-server/static/scripts/views/repos_del.html
deleted file mode 100644
index 1a1e4896..00000000
--- a/cmd/drone-server/static/scripts/views/repos_del.html
+++ /dev/null
@@ -1,42 +0,0 @@
-

-	
-	
-	
-	
-	{{ "+"+user.login }}
-

-
-

-
-	

-		
-		{{ repo.owner }} / {{ repo.name }}
-	

-
-	

-		
-		
-		
-	

-
-

-
-
-

-
-
-	

-		
-Warning: this action cannot be undone.
-	

-
-
-

diff --git a/cmd/drone-server/static/scripts/views/repos_edit.html b/cmd/drone-server/static/scripts/views/repos_edit.html
deleted file mode 100644
index 5243bb36..00000000
--- a/cmd/drone-server/static/scripts/views/repos_edit.html
+++ /dev/null
@@ -1,95 +0,0 @@
-

-	
-	
-	
-	
-	{{ "+"+user.login }}
-

-
-

-
-	

-		
-		{{ repo.owner }} / {{ repo.name }}
-	

-
-	

-		
-		
-		
-		
-	

-
-

-
-
-

-	

-		
Settings

-		

-			
Post Commit Hooks

-			

-				
-				
-			

-		

-		

-			
Pull Request Hooks

-			

-				
-				
-			

-		

-		
-			
Private Variables

-			

-				Inject private variables into your build environment
-			

-		
-		
-			
Delete

-			
Delete this repository and its build history

-		
-	

-
-	

-		
Admin settings

-		

-			
Trusted (Evelvate Privilege)

-			

-				
-				
-			

-		

-		

-			
Timeout in minutes

-			

-				
-				{{ repo.timeout }} minutes
-			

-		

-	

-
-	

-		
Badges

-		

-			
Markdown

-			

-				
[![Build Status]({{ window.location.origin }}/api/badges/{{ repo.full_name }}/status.svg)]({{ window.location.origin }}/{{ repo.full_name }})

-			

-		

-		

-			
CCMenu

-			

-				
{{ window.location.origin }}/api/badges/{{ repo.full_name }}/cc.xml

-			

-		

-	

-
-	

-		
Public Key

-		

-			
{{ repo.keypair.public }}

-		

-	

-

diff --git a/cmd/drone-server/static/scripts/views/users.html b/cmd/drone-server/static/scripts/views/users.html
deleted file mode 100644
index ad5eda52..00000000
--- a/cmd/drone-server/static/scripts/views/users.html
+++ /dev/null
@@ -1,41 +0,0 @@
-

-	
-	
-	
-	
-	{{ "+"+user.login }}
-

-
-

-	

-		
-		Users
-	

-

-
-

-
-	

-		

-			
-			
-
-		

-	

-
-	

-		

-			

-				
-			

-			

-				
{{ user.login }} Admin

-				
{{ user.email }}

-				
-				
-			

-		

-	

-
-
-

diff --git a/cmd/drone-server/static/scripts/views/users/content.html b/cmd/drone-server/static/scripts/views/users/content.html
new file mode 100644
index 00000000..22529680
--- /dev/null
+++ b/cmd/drone-server/static/scripts/views/users/content.html
@@ -0,0 +1,36 @@
+

+
+  

+    

+      
+      
+
+    

+  

+
+  

+    

+      

+        
+      

+      

+        
{{ user.login }}
+          Admin
+        

+        
{{ user.email }}

+        
+        
+      

+    

+  

+
+
+

\ No newline at end of file
diff --git a/cmd/drone-server/static/scripts/views/users/toolbar.html b/cmd/drone-server/static/scripts/views/users/toolbar.html
new file mode 100644
index 00000000..1db4fb57
--- /dev/null
+++ b/cmd/drone-server/static/scripts/views/users/toolbar.html
@@ -0,0 +1,6 @@
+

+  
+    home
+  
+  Users
+

\ No newline at end of file
diff --git a/cmd/drone-server/static/styles/drone.css b/cmd/drone-server/static/styles/drone.css
index 250cf324..b8f75d3c 100644
--- a/cmd/drone-server/static/styles/drone.css
+++ b/cmd/drone-server/static/styles/drone.css
@@ -3,727 +3,732 @@
 
 /*  RESETS */
 
-    html, body { margin: 0; padding: 0; }
-    h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, cite, code, del, dfn, em, img, q, s, samp, small, strike, strong, sub, sup, tt, var, dd, dl, dt, li, ol, ul, fieldset, form, label, legend, button, table, caption, tbody, tfoot, thead, tr, th, td { margin: 0; padding: 0; border: 0; font-weight: normal; font-style: normal; font-size: 100%; line-height: 1; font-family: inherit; }
-    table { border-collapse: collapse; border-spacing: 0; }
-    ol, ul { list-style: none; }
-    q:before, q:after, blockquote:before, blockquote:after { content: ""; }
+html, body {
+    margin: 0;
+    padding: 0;
+}
 
-    * {
-        -webkit-box-sizing: border-box;
-        -moz-box-sizing: border-box;
-        box-sizing: border-box;
-    }
+h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, cite, code, del, dfn, em, img, q, s, samp, small, strike, strong, sub, sup, tt, var, dd, dl, dt, li, ol, ul, fieldset, form, label, legend, button, table, caption, tbody, tfoot, thead, tr, th, td {
+    margin: 0;
+    padding: 0;
+    border: 0;
+    font-weight: normal;
+    font-style: normal;
+    font-size: 100%;
+    line-height: 1;
+    font-family: inherit;
+}
 
+table {
+    border-collapse: collapse;
+    border-spacing: 0;
+}
+
+ol, ul {
+    list-style: none;
+}
+
+q:before, q:after, blockquote:before, blockquote:after {
+    content: "";
+}
+
+* {
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    box-sizing: border-box;
+}
 
 /*  TRANSITIONS & ANIMATIONS */
 
-    .transition-fade {
-      -webkit-transition: all 0s ease-out;
-      -moz-transition: all 0s ease-out;
-      -o-transition: all 0s ease-out;
-      -ms-transition: all 0s ease-out;
-      transition: all 0s ease-out;
-    }
-
-    .show .transition-fade {
-      -webkit-transition: all 0s ease-in;
-      -moz-transition: all 0s ease-in;
-      -o-transition: all 0s ease-in;
-      -ms-transition: all 0s ease-in;
-      transition: all 0s ease-in;
-    }
+.transition-fade {
+    -webkit-transition: all 0s ease-out;
+    -moz-transition: all 0s ease-out;
+    -o-transition: all 0s ease-out;
+    -ms-transition: all 0s ease-out;
+    transition: all 0s ease-out;
+}
 
+.show .transition-fade {
+    -webkit-transition: all 0s ease-in;
+    -moz-transition: all 0s ease-in;
+    -o-transition: all 0s ease-in;
+    -ms-transition: all 0s ease-in;
+    transition: all 0s ease-in;
+}
 
 /*  FLEXBOX */
 
-    .flex-parent {
-        display: -webkit-box;
-        display: -moz-box;
-        display: -ms-flexbox;
-        display: -webkit-flex;
-        display: flex;
-    }
+.flex-parent {
+    display: -webkit-box;
+    display: -moz-box;
+    display: -ms-flexbox;
+    display: -webkit-flex;
+    display: flex;
+}
 
-    .flex-center {
-        display: -webkit-box;
-        display: -moz-box;
-        display: -ms-flexbox;
-        display: -webkit-flex;
-        display: flex;
-        -webkit-align-items: center;
-        align-items: center;
-    }
+.flex-center {
+    display: -webkit-box;
+    display: -moz-box;
+    display: -ms-flexbox;
+    display: -webkit-flex;
+    display: flex;
+    -webkit-align-items: center;
+    align-items: center;
+}
 
-    .flex-item {
-        -webkit-flex: 1 1 auto;
-        -moz-flex: 1 1 auto;
-        -o-flex: 1 1 auto;
-        -ms-flex: 1 1 auto;
-        flex: 1 1 auto;
-    }
+.flex-item {
+    -webkit-flex: 1 1 auto;
+    -moz-flex: 1 1 auto;
+    -o-flex: 1 1 auto;
+    -ms-flex: 1 1 auto;
+    flex: 1 1 auto;
+}
 
+/*  TABLE MAGIC */
 
-  /*  TABLE MAGIC */
+table {
+    padding: 0;
+    border-collapse: collapse;
+    width: auto;
+    min-height: 100%;
+}
 
-      table {
-          padding: 0;
-          border-collapse: collapse;
-          width: auto;
-          min-height: 100%;
-      }
+tbody {
+    width: 100%;
+}
 
-      tbody {
-        width: 100%;
-      }
+th, td, tr {
+    border: 0;
+    margin: 0;
+    padding-top: 0;
+    padding-bottom: 16px;
+}
 
-      th, td, tr {
-          border: 0;
-          margin: 0;
-          padding-top: 0;
-          padding-bottom: 16px;
-      }
+tr {
+    border-bottom: solid 1px rgba(0, 0, 0, 0.025);
+    cursor: pointer;
+}
 
-      tr {
-          border-bottom: solid 1px rgba(0,0,0,0.025);
-          cursor: pointer;
-      }
+tr:first-of-type {
+    cursor: default;
+}
 
-          tr:first-of-type {
-              cursor: default;
-          }
+tr:not(:first-of-type):hover {
+    background-color: rgba(228, 241, 254, 0.2);
+}
 
-          tr:not(:first-of-type):hover {
-              background-color: rgba(228,241,254,0.2);
-          }
+th {
+    text-align: left;
+    font-weight: 400;
+    font-size: 12px;
+    color: rgba(0, 0, 0, 0.54);
+    text-transform: uppercase;
+    letter-spacing: 0.8px;
+    padding: 16px 24px;
+    height: 59px;
+}
 
-      th {
-          text-align: left;
-          font-weight: 400;
-          font-size: 12px;
-          color: rgba(0,0,0,0.54);
-          text-transform: uppercase;
-          letter-spacing: 0.8px;
-          padding: 16px 24px;
-          height: 59px;
-      }
+td {
+    height: 72px;
+    vertical-align: middle;
+    font-weight: 400;
+    font-size: 14px;
+    color: rgba(0, 0, 0, 0.87);
+    line-height: 150%;
+    padding: 16px 24px;
+}
 
-      td {
-          height: 72px;
-          vertical-align: middle;
-          font-weight: 400;
-          font-size:  14px;
-          color: rgba(0,0,0,0.87);
-          line-height: 150%;
-          padding: 16px 24px;
-      }
+td.type-icon:first-of-type {
+    vertical-align: middle;
+    text-align: center;
+}
 
-        td.type-icon:first-of-type {
-            vertical-align: middle;
-            text-align: center;
-        }
+th:first-of-type, td:first-of-type {
+    padding-left: 32px;
+}
 
-          th:first-of-type, td:first-of-type {
-              padding-left: 32px;
-          }
+th:last-of-type, td:last-of-type {
+    padding-right: 32px;
+}
 
-          th:last-of-type, td:last-of-type {
-              padding-right: 32px;
-          }
+.status {
+    position: relative;
+}
 
-      .status {
-          position: relative;
-      }
-
-      .status:before {
-          cursor: pointer;
-          width: 20px;
-          height: 20px;
-          color: #fff;
-          font-size: 14px;
-          font-family: "Material-Design-Iconic-Font";
-          opacity: 1;
-      }
-
-      .status.success:before {
-        font-size: 20px;
-          content: '\f084';
-          color: #26A65B;
-      }
-
-      .status.failure:before,
-      .status.killed:before,
-      .status.error:before {
-        font-size: 20px;
-          content: '\f082';
-          color: #EF5350;
-          opacity: 0.85;
-      }
+.status.success:before {
+    font-size: 20px;
+    content: '\f084';
+    color: #26A65B;
+}
 
+.status.failure:before,
+.status.killed:before,
+.status.error:before {
+    font-size: 20px;
+    content: '\f082';
+    color: #EF5350;
+    opacity: 0.85;
+}
 
 /*  CARD STUFF */
 
-    ul.cardset {
-        background-color: transparent;
-        width: 100%;
-        height: 100%;
-        display: -webkit-box;
-        display: -moz-box;
-        display: -ms-flexbox;
-        display: -webkit-flex;
-        display: flex;
-        -webkit-flex-flow: row wrap;
-        -ms-flex-flow: row wrap;
-        flex-flow: row wrap;
-        padding: 28px;
-        padding-top: 0;
-        margin-top: -8px;
-    }
-
-    .cardset li {
-        -webkit-flex: 1 1 auto;
-        -moz-flex: 1 1 auto;
-        -o-flex: 1 1 auto;
-        -ms-flex: 1 1 auto;
-        flex: 1 1 auto;
-        width: 25%;
-        padding: 0 4px;
-        outline: none;
-        -webkit-appearance: none;
-    }
-
-    .cardset.list li {
-        -webkit-flex: 1 1 100%;
-        -moz-flex: 1 1 100%;
-        -o-flex: 1 1 100%;
-        -ms-flex: 1 1 100%;
-        flex: 1 1 100%;
-        padding: 4px;
-    }
-
-    .cardset li.dummy {
-
-    }
-
-    .card {
-        width: 100%;
-        height: 260px;
-        background-color: #fff;
-        border-radius: 0;
-        box-shadow: 0 0 1px rgba(0,0,0,0.125);
-        cursor: pointer;
-        overflow: hidden;
-        position: relative;
-        outline: none;
-        -webkit-appearance: none;
-    }
-
-        .card a {
-            position: absolute;
-            top: 0;
-            right: 0;
-            left: 0;
-            bottom: 0;
-            width: 100%;
-            height: 100%;
-            z-index: 1;
-            -webkit-transition: all 0.15s ease;
-            -moz-transition: all 0.15s ease;
-            -o-transition: all 0.15s ease;
-            -ms-transition: all 0.15s ease;
-            transition: all 0.15s ease;
-        }
-
-            .card a:hover {
-                background-color: rgba(52,152,219,0.1);
-            }
-
-        .card .top {
-            padding: 16px;
-            background-color: transparent;
-        }
-
-        .card .bottom {
-            padding: 16px;
-            padding-top: 64px;
-            height: 220px;
-            background-color: transparent;
-        }
-
-        .card .time-ran {
-            font-size: 12px;
-            line-height: 135%;
-            font-weight: 400;
-            color: #9a9a9a;
-            float: left;
-        }
-
-            .card.success .time-ran {
-                color: #26A65B
-            }
-
-
-            .card.killed .time-ran,
-            .card.error .time-ran,
-            .card.failure .time-ran {
-                color: #EF5350
-            }
-
-        .card .time-duration {
-            font-size: 12px;
-            line-height: 135%;
-            font-weight: 300;
-            color: #7c7c7c;
-            float: left;
-            clear: left;
-        }
-
-        .card .status {
-            float: right;
-        }
-
-        .card .title {
-            font-size: 16px;
-            line-height: 135%;
-            font-weight: 400;
-            color: #cfcfcf;
-            margin-bottom: 16px;
-        }
-
-        .card .title.upper {
-            font-size: 13px;
-            color: #9a9a9a;
-            margin-bottom: 2px;
-        }
-
-        .card .title.lower {
-            color: dfdfdf;
-        }
-
-        .card .author {
-            font-size: 12px;
-            line-height: 135%;
-            font-weight: 400;
-            margin-bottom: 16px;
-            color: #afafaf;
-            position: absolute;
-            bottom: 0;
-        }
-
-        .card .branch {
-            position: absolute;
-            bottom: 33px;
-            left: auto;
-            display: inline-block;
-            font-size: 12px;
-            line-height: 135%;
-            font-weight: 300;
-            text-transform: uppercase;
-            letter-spacing: 0.5px;
-            margin-bottom: 4px;
-            color: #eee;
-            padding: 1px 4px;
-            background-color: #7a7a7a
-        }
-
-        .card .sha {
-            font-size: 11px;
-            line-height: 135%;
-            font-weight: 300;
-            text-transform: uppercase;
-            margin-bottom: 16px;
-            color: #8a8a8a;
-        }
-
-
-        /*  LIST */
-
-        .cardset.list {
-            margin-top: -8px;
-        }
-
-        .cardset.list li {
-            padding: 0 4px;
-        }
-
-        .list .card {
-            background-color: #fff;
-        }
-
-            .list .card a:hover {
-                background-color: rgba(255,255,255,0.05);
-            }
-
-        .list .card .meta {
-            width: 120px;
-            margin-right: 32px;
-            float: left;
-        }
-
-        .list .card .build-details {
-            width: 120px;
-            margin-right: 32px;
-            float: left;
-        }
-
-        .list .card .details {
-            width: auto;
-            padding-right: 50px;
-            overflow: hidden;
-        }
-
-        .list .card .push-details {
-            font-size: 13px;
-            line-height: 135%;
-            font-weight: 300;
-            color: #7a7a7a;
-            margin-bottom: 0;
-        }
-
-            .list .card p span {
-                background-color: #8a8a8a;
-                padding: 1px 4px;
-                margin: 0 4px;
-                color: #000;
-                font-weight: 400;
-                letter-spacing: 0.5px;
-                font-size: 10px;
-            }
-
-        .list .card {
-            height: auto;
-            padding-bottom: 0;
-            min-height: 70px;
-        }
-
-        .list .card p {
-            margin-bottom: 2px;
-            font-size: 13px;
-            font-weight: 300;
-        }
-
-        .list .card .build-number {
-            display: block;
-            width: 50px;
-            margin-right: 32px;
-            float: left;
-        }
-
-            .list .card .build-number p {
-                display: inline-block;
-                font-size: 16px;
-                line-height: 135%;
-                font-weight: 300;
-                margin-bottom: 0;
-                color: #fff;
-                padding: 1px 6px;
-                border-radius: 5px;
-                min-width: 20px;
-
-            }
-
-            .success .build-number p {
-                background-color: #26A65B;
-            }
-
-            .killed .build-number p,
-            .error .build-number p,
-            .failed .build-number p {
-                background-color: #EF5350;
-            }
-
-        .list .card .message {
-            font-size: 14px;
-            line-height: 135%;
-            font-weight: 300;
-            color: #cfcfcf;
-            margin-bottom: 8px;
-            letter-spacing: 0.35px;
-        }
-
-        .list .card .author {
-            position: static;
-            font-size: 20px;
-            line-height: 135%;
-            font-weight: 400;
-            clear: left;
-            color: #3f3f3f;
-            margin-bottom: 8px;
-        }
-
-        .list .card .time-ran {
-            font-size: 13px;
-            line-height: 140%;
-            font-weight: 300;
-            color: #7a7a7a;
-            margin-bottom: 0;
-        }
-
-        /*  HALF LIST */
-
-        .cardset.list.commit-header {
-            padding-bottom: 0;
-            margin-bottom: 0;
-        }
-
-        .cardset.list.commit-header .card {
-            min-height: 200px;
-            background-color: #282828;
-            margin-bottom: 0;
-            cursor: default;
-            border-bottom: none;
-        }
-
-        .cardset.list.half-list {
-            margin-top: 4px;
-        }
-
-        .cardset.list.half-list li {
-            -webkit-flex: 1 1 50%;
-            -moz-flex: 1 1 50%;
-            -o-flex: 1 1 50%;
-            -ms-flex: 1 1 50%;
-            flex: 1 1 50%;
-            padding: 4px;
-            margin-bottom: 0;
-        }
-
-        .cardset.list.half-list .card {
-            height: 80px;
-        }
-
-        .cardset.list.half-list .status {
-            float: left;
-            width: 50px;
-        }
-
-        .cardset.list.half-list .details {
-            padding-left: 0;
-        }
-
-
-    .dummy .card {
-        background-color: rgba(255,255,255,0.05);
-        box-shadow: none;
-        cursor: default;
-    }
-
-    .dummy:nth-last-child(1) .card, .dummy:nth-last-child(1) .card, .dummy:nth-last-child(1) .card, .dummy:nth-last-child(1) .card {
-        display: none;
-    }
-
-    .half-list .dummy .card {
-        display: none !important;
-    }
-
-    /*  OUTPUT */
-
-        .card.output {
-            background-color: rgba(0,0,0,0.5);
-            padding: 16px;
-            margin-top: 4px;
-        }
-
-    /*  DATASET */
-
-        .card .dataset {
-            display: -webkit-box;
-            display: -moz-box;
-            display: -ms-flexbox;
-            display: -webkit-flex;
-            display: flex;
-            -webkit-flex-flow:row wrap;
-            flex-flow:row wrap;
-            padding: 16px 0;
-            position: relative;
-        }
-
-        .card .dataset a {
-            position: absolute;
-            top: 0;
-            right: 0;
-            bottom: 0;
-            left: 0;
-            width: 100%;
-            border-radius: 0;
-        }
-
-        .card .dataset a:hover {
-            background-color: rgba(52,152,219,0.05);
-        }
-
-        .card .dataset > div {
-            padding: 0 16px;
-            padding-bottom: 0;
-            -webkit-box-flex: 1 1 auto;
-            -moz-box-flex: 1 1 auto;
-            -webkit-flex: 1 1 auto;
-            -ms-flex: 1 1 auto;
-            flex: 1 1 auto;
-        }
-
-        .card .dataset p {
-            font-size: 16px;
-            font-weight: 400;
-            line-height: 135%;
-        }
-
-        .card .dataset > div:nth-of-type(1) {
-            -webkit-box-flex: 0 0 128px;
-            -moz-box-flex: 0 0 128px;
-            -webkit-flex: 0 0 128px;
-            -ms-flex: 0 0 128px;
-            flex: 0 0 128px;
-        }
-
-        .card .dataset > div:nth-of-type(2) {
-
-        }
-
-        .card .dataset > div:nth-of-type(3) {
-            text-align: left;
-            -webkit-box-flex: 1 1 300px;
-            -moz-box-flex: 1 1 300px;
-            -webkit-flex: 1 1 300px;
-            -ms-flex: 1 1 300px;
-            flex: 1 1 300px;
-            margin-left: 128px;
-        }
-
-        .card .dataset .number {
-            padding: 5px;
-            display: inline-block;
-            width: 60px;
-            border-radius: 5px;
-            color: #fafafa;
-            font-size: 16px;
-            text-align: center;
-        }
-
-            .card.success .dataset .number {
-                background-color: #26A65B;
-            }
-
-            .card.error .dataset .number,
-            .card.killed .dataset .number,
-            .card.failure .dataset .number {
-                background-color: #EF5350;
-            }
-
-        .card .dataset .branch-sha {
-            font-size: 17px
-        }
-
-        .card .dataset .author-time {
-            font-size: 14px;
-            font-weight: 400;
-            color: #bababa;
-        }
-
-        .card .dataset .commit-message {
-            font-size: 14px;
-            font-weight: 400;
-            color: #7f7f7f;
-        }
+ul.cardset {
+    background-color: transparent;
+    width: 100%;
+    height: 100%;
+    display: -webkit-box;
+    display: -moz-box;
+    display: -ms-flexbox;
+    display: -webkit-flex;
+    display: flex;
+    -webkit-flex-flow: row wrap;
+    -ms-flex-flow: row wrap;
+    flex-flow: row wrap;
+    padding: 28px;
+    padding-top: 0;
+    margin-top: -8px;
+}
+
+.cardset li {
+    -webkit-flex: 1 1 auto;
+    -moz-flex: 1 1 auto;
+    -o-flex: 1 1 auto;
+    -ms-flex: 1 1 auto;
+    flex: 1 1 auto;
+    width: 25%;
+    padding: 0 4px;
+    outline: none;
+    -webkit-appearance: none;
+}
+
+.cardset.list li {
+    -webkit-flex: 1 1 100%;
+    -moz-flex: 1 1 100%;
+    -o-flex: 1 1 100%;
+    -ms-flex: 1 1 100%;
+    flex: 1 1 100%;
+    padding: 4px;
+}
+
+.cardset li.dummy {
+
+}
+
+.card {
+    width: 100%;
+    height: 260px;
+    background-color: #fff;
+    border-radius: 0;
+    box-shadow: 0 0 1px rgba(0, 0, 0, 0.125);
+    cursor: pointer;
+    overflow: hidden;
+    position: relative;
+    outline: none;
+    -webkit-appearance: none;
+}
+
+.card a {
+    position: absolute;
+    top: 0;
+    right: 0;
+    left: 0;
+    bottom: 0;
+    width: 100%;
+    height: 100%;
+    z-index: 1;
+    -webkit-transition: all 0.15s ease;
+    -moz-transition: all 0.15s ease;
+    -o-transition: all 0.15s ease;
+    -ms-transition: all 0.15s ease;
+    transition: all 0.15s ease;
+}
+
+.card a:hover {
+    background-color: rgba(52, 152, 219, 0.1);
+}
+
+.card .top {
+    padding: 16px;
+    background-color: transparent;
+}
+
+.card .bottom {
+    padding: 16px;
+    padding-top: 64px;
+    height: 220px;
+    background-color: transparent;
+}
+
+.card .time-ran {
+    font-size: 12px;
+    line-height: 135%;
+    font-weight: 400;
+    color: #9a9a9a;
+    float: left;
+}
+
+.card.success .time-ran {
+    color: #26A65B
+}
+
+.card.killed .time-ran,
+.card.error .time-ran,
+.card.failure .time-ran {
+    color: #EF5350
+}
+
+.card .time-duration {
+    font-size: 12px;
+    line-height: 135%;
+    font-weight: 300;
+    color: #7c7c7c;
+    float: left;
+    clear: left;
+}
+
+.card .status {
+    float: right;
+}
+
+.card .title {
+    font-size: 16px;
+    line-height: 135%;
+    font-weight: 400;
+    color: #cfcfcf;
+    margin-bottom: 16px;
+}
+
+.card .title.upper {
+    font-size: 13px;
+    color: #9a9a9a;
+    margin-bottom: 2px;
+}
+
+.card .title.lower {
+    color: dfdfdf;
+}
+
+.card .author {
+    font-size: 12px;
+    line-height: 135%;
+    font-weight: 400;
+    margin-bottom: 16px;
+    color: #afafaf;
+    position: absolute;
+    bottom: 0;
+}
+
+.card .branch {
+    position: absolute;
+    bottom: 33px;
+    left: auto;
+    display: inline-block;
+    font-size: 12px;
+    line-height: 135%;
+    font-weight: 300;
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+    margin-bottom: 4px;
+    color: #eee;
+    padding: 1px 4px;
+    background-color: #7a7a7a
+}
+
+.card .sha {
+    font-size: 11px;
+    line-height: 135%;
+    font-weight: 300;
+    text-transform: uppercase;
+    margin-bottom: 16px;
+    color: #8a8a8a;
+}
+
+/*  LIST */
+
+.cardset.list {
+    margin-top: -8px;
+}
+
+.cardset.list li {
+    padding: 0 4px;
+}
+
+.list .card {
+    background-color: #fff;
+}
+
+.list .card a:hover {
+    background-color: rgba(255, 255, 255, 0.05);
+}
+
+.list .card .meta {
+    width: 120px;
+    margin-right: 32px;
+    float: left;
+}
+
+.list .card .build-details {
+    width: 120px;
+    margin-right: 32px;
+    float: left;
+}
+
+.list .card .details {
+    width: auto;
+    padding-right: 50px;
+    overflow: hidden;
+}
+
+.list .card .push-details {
+    font-size: 13px;
+    line-height: 135%;
+    font-weight: 300;
+    color: #7a7a7a;
+    margin-bottom: 0;
+}
+
+.list .card p span {
+    background-color: #8a8a8a;
+    padding: 1px 4px;
+    margin: 0 4px;
+    color: #000;
+    font-weight: 400;
+    letter-spacing: 0.5px;
+    font-size: 10px;
+}
+
+.list .card {
+    height: auto;
+    padding-bottom: 0;
+    min-height: 70px;
+}
+
+.list .card p {
+    margin-bottom: 2px;
+    font-size: 13px;
+    font-weight: 300;
+}
+
+.list .card .build-number {
+    display: block;
+    width: 50px;
+    margin-right: 32px;
+    float: left;
+}
+
+.list .card .build-number p {
+    display: inline-block;
+    font-size: 16px;
+    line-height: 135%;
+    font-weight: 300;
+    margin-bottom: 0;
+    color: #fff;
+    padding: 1px 6px;
+    border-radius: 5px;
+    min-width: 20px;
+
+}
+
+.success .build-number p {
+    background-color: #26A65B;
+}
+
+.killed .build-number p,
+.error .build-number p,
+.failed .build-number p {
+    background-color: #EF5350;
+}
+
+.list .card .message {
+    font-size: 14px;
+    line-height: 135%;
+    font-weight: 300;
+    color: #cfcfcf;
+    margin-bottom: 8px;
+    letter-spacing: 0.35px;
+}
+
+.list .card .author {
+    position: static;
+    font-size: 20px;
+    line-height: 135%;
+    font-weight: 400;
+    clear: left;
+    color: #3f3f3f;
+    margin-bottom: 8px;
+}
+
+.list .card .time-ran {
+    font-size: 13px;
+    line-height: 140%;
+    font-weight: 300;
+    color: #7a7a7a;
+    margin-bottom: 0;
+}
+
+/*  HALF LIST */
+
+.cardset.list.commit-header {
+    padding-bottom: 0;
+    margin-bottom: 0;
+}
+
+.cardset.list.commit-header .card {
+    min-height: 200px;
+    background-color: #282828;
+    margin-bottom: 0;
+    cursor: default;
+    border-bottom: none;
+}
+
+.cardset.list.half-list {
+    margin-top: 4px;
+}
+
+.cardset.list.half-list li {
+    -webkit-flex: 1 1 50%;
+    -moz-flex: 1 1 50%;
+    -o-flex: 1 1 50%;
+    -ms-flex: 1 1 50%;
+    flex: 1 1 50%;
+    padding: 4px;
+    margin-bottom: 0;
+}
+
+.cardset.list.half-list .card {
+    height: 80px;
+}
+
+.cardset.list.half-list .status {
+    float: left;
+    width: 50px;
+}
+
+.cardset.list.half-list .details {
+    padding-left: 0;
+}
+
+.dummy .card {
+    background-color: rgba(255, 255, 255, 0.05);
+    box-shadow: none;
+    cursor: default;
+}
+
+.dummy:nth-last-child(1) .card, .dummy:nth-last-child(1) .card, .dummy:nth-last-child(1) .card, .dummy:nth-last-child(1) .card {
+    display: none;
+}
+
+.half-list .dummy .card {
+    display: none !important;
+}
+
+/*  OUTPUT */
+
+.card.output {
+    background-color: rgba(0, 0, 0, 0.5);
+    padding: 16px;
+    margin-top: 4px;
+}
+
+/*  DATASET */
+
+.card .dataset {
+    display: -webkit-box;
+    display: -moz-box;
+    display: -ms-flexbox;
+    display: -webkit-flex;
+    display: flex;
+    -webkit-flex-flow: row wrap;
+    flex-flow: row wrap;
+    padding: 16px 0;
+    position: relative;
+}
+
+.card .dataset a {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    border-radius: 0;
+}
+
+.card .dataset a:hover {
+    background-color: rgba(52, 152, 219, 0.05);
+}
+
+.card .dataset > div {
+    padding: 0 16px;
+    padding-bottom: 0;
+    -webkit-box-flex: 1 1 auto;
+    -moz-box-flex: 1 1 auto;
+    -webkit-flex: 1 1 auto;
+    -ms-flex: 1 1 auto;
+    flex: 1 1 auto;
+}
+
+.card .dataset p {
+    font-size: 16px;
+    font-weight: 400;
+    line-height: 135%;
+}
+
+.card .dataset > div:nth-of-type(1) {
+    -webkit-box-flex: 0 0 128px;
+    -moz-box-flex: 0 0 128px;
+    -webkit-flex: 0 0 128px;
+    -ms-flex: 0 0 128px;
+    flex: 0 0 128px;
+}
+
+.card .dataset > div:nth-of-type(2) {
+
+}
+
+.card .dataset > div:nth-of-type(3) {
+    text-align: left;
+    -webkit-box-flex: 1 1 300px;
+    -moz-box-flex: 1 1 300px;
+    -webkit-flex: 1 1 300px;
+    -ms-flex: 1 1 300px;
+    flex: 1 1 300px;
+    margin-left: 128px;
+}
+
+.card .dataset .number {
+    padding: 5px;
+    display: inline-block;
+    width: 60px;
+    border-radius: 5px;
+    color: #fafafa;
+    font-size: 16px;
+    text-align: center;
+}
+
+.card.success .dataset .number {
+    background-color: #26A65B;
+}
+
+.card.error .dataset .number,
+.card.killed .dataset .number,
+.card.failure .dataset .number {
+    background-color: #EF5350;
+}
+
+.card .dataset .branch-sha {
+    font-size: 17px
+}
+
+.card .dataset .author-time {
+    font-size: 14px;
+    font-weight: 400;
+    color: #bababa;
+}
+
+.card .dataset .commit-message {
+    font-size: 14px;
+    font-weight: 400;
+    color: #7f7f7f;
+}
 
 /*  STRUCTURE */
 
-    html {
-        margin: 0;
-        padding: 0;
-        font-family: "Roboto", "Arial";
-        font-weight: 300;
-        font-size: 16px;
-        height: 100%;
+html {
+    margin: 0;
+    padding: 0;
+    font-family: "Roboto", "Arial";
+    font-weight: 300;
+    font-size: 16px;
+    height: 100%;
 
-    }
+}
 
-    body {
-        margin: 0;
-        padding: 0;
-        height: 100%;
-        background: #fafafa;
-        padding-bottom: 72px;
-    }
+body {
+    margin: 0;
+    padding: 0;
+    height: 100%;
+    background: #fafafa;
+    padding-bottom: 72px;
+}
 
-    .truncate {
-        text-overflow: ellipsis;
-        white-space: nowrap;
-        overflow-y: hidden;
-    }
+.truncate {
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    overflow-y: hidden;
+}
 
-    .float-left {
-        float: left;
-    }
+.float-left {
+    float: left;
+}
 
-    .float-right {
-        float: right;
-    }
+.float-right {
+    float: right;
+}
 
-    #container {
-        display: inline;
-    }
+#container {
+    display: inline;
+}
 
-    footer {
-        display: none;
-        min-height: 128px;
-        background-color: #5f5f5f;
-    }
+footer {
+    display: none;
+    min-height: 128px;
+    background-color: #5f5f5f;
+}
 
-    section {
-        display: block;
-        width: 100%;
-        padding: 16px 74px;
-    }
+section {
+    display: block;
+    width: 100%;
+    padding: 16px 74px;
+}
 
-        section.central-container {
-            height: auto;
-            min-height: 100%;
-            margin-top: -72px;
-            /*margin-bottom: 72px;*/
-            position: relative;
-            padding-top: 0;
-        }
+section.central-container {
+    height: auto;
+    min-height: 100%;
+    margin-top: -72px;
+    /*margin-bottom: 72px;*/
+    position: relative;
+    padding-top: 0;
+}
 
-        section:nth-of-type(even) {
+section:nth-of-type(even) {
 
-        }
+}
 
+.show section:first-of-type {
+    margin-top: 0px;
+}
 
+.pane {
+    background-color: transparent;
+    margin: 12px;
+    /*box-shadow: 0 0 1px rgba(0,0,0,0.05);*/
+    /*border-radius: 3px;*/
+    overflow: hidden;
+    height: auto;
+    min-height: 100%;
+    /*padding-bottom: 88px;*/
+    box-sizing: content-box;
+}
 
-        .show section:first-of-type {
-            margin-top: 0px;
-        }
+.pane.contains-cardset {
+    background-color: #fafafa;
+}
 
-    .pane {
-        background-color: transparent;
-        margin: 12px;
-        /*box-shadow: 0 0 1px rgba(0,0,0,0.05);*/
-        /*border-radius: 3px;*/
-        overflow: hidden;
-        height: auto;
-        min-height: 100%;
-        /*padding-bottom: 88px;*/
-        box-sizing: content-box;
-    }
+.pane.fixed {
+    -webkit-flex: 0 0 400px;
+    -moz-flex: 0 0 400px;
+    -o-flex: 0 0 400px;
+    -ms-flex: 0 0 400px;
+    flex: 0 0 400px;
+}
 
-    .pane.contains-cardset {
-        background-color: #fafafa;
-    }
+.pane.restrict-center {
+    max-width: 1100px;
+    margin-left: auto;
+    margin-right: auto;
+}
 
-    .pane.fixed {
-        -webkit-flex: 0 0 400px;
-        -moz-flex: 0 0 400px;
-        -o-flex: 0 0 400px;
-        -ms-flex: 0 0 400px;
-        flex: 0 0 400px;
-    }
-
-    .pane.restrict-center {
-        max-width: 1100px;
-        margin-left: auto;
-        margin-right: auto;
-    }
 /*
     header {
         height: 64px;
@@ -734,300 +739,269 @@
         overflow: hidden;
     }
 */
-    .dockable {
-        background-color: #fafafa;
-    }
+.dockable {
+    background-color: #fafafa;
+}
 
-    .show .dockable {
-        position: fixed;
-        z-index: 100;
-        top: 0;
-        left: 0;
-        right: 0;
-        width: 100%;
-        margin-top: 0;
-        background-color: rgba(0,0,0,0.65);
-        /*box-shadow: 0 1px 0 0 rgba(0,0,0,0.025);*/
-    }
+.show .dockable {
+    position: fixed;
+    z-index: 100;
+    top: 0;
+    left: 0;
+    right: 0;
+    width: 100%;
+    margin-top: 0;
+    background-color: rgba(0, 0, 0, 0.65);
+    /*box-shadow: 0 1px 0 0 rgba(0,0,0,0.025);*/
+}
 
-      nav {
-          width: 100%;
-          height: 60px;
-          background-color: transparent;
-          /*box-shadow: 0 1px 0 0 rgba(0,0,0,0.075); */
-          /*border-bottom: solid 1px rgba(0,0,0,0.065);*/
-          padding: 0 32px;
-          overflow: hidden;
-      }
+nav {
+    width: 100%;
+    height: 60px;
+    background-color: transparent;
+    /*box-shadow: 0 1px 0 0 rgba(0,0,0,0.075); */
+    /*border-bottom: solid 1px rgba(0,0,0,0.065);*/
+    padding: 0 32px;
+    overflow: hidden;
+}
 
-          .nav-item {
-              margin-right: 0;
-              margin-left: 16px;
-              height: auto;
-              opacity: 0.65;
-              cursor: pointer;
-          }
+.nav-item {
+    margin-right: 0;
+    margin-left: 16px;
+    height: auto;
+    opacity: 0.65;
+    cursor: pointer;
+}
 
-          .nav-item.float-left {
-              margin-left: 0;
-              margin-right: 10px;
-          }
+.nav-item.float-left {
+    margin-left: 0;
+    margin-right: 10px;
+}
 
+.nav-item:hover {
+    opacity: 1;
+}
 
-          .nav-item:hover {
-              opacity: 1;
-          }
+.nav-item i {
+    color: rgba(255, 255, 255, 0.749);
+}
 
-          .nav-item:after,
-          .nav-item:before {
-              font-family: "Material-Design-Iconic-Font";
-              color: rgba(255,255,255,0.749);
-          }
+.nav-item {
+    font-size: 20px;
+    line-height: 20px;
+    padding: 19px 0;
+    text-decoration: none;
+}
 
-          .nav-item {
-              font-size: 20px;
-              line-height: 20px;
-              padding: 19px 0;
-              text-decoration:none;
-          }
+.nav-item.unstar,
+.nav-item.star {
+    font-size: 14px;
+    background: transparent;
+    line-height: 20px;
+}
 
-          .nav-item.settings:before {
-              font-size: 22px;
-              content: '\f060';
-          }
+input.nav-item {
+    position: relative;
+    height: 59px;
+    width: 170px;
+    display: block;
+    background-color: transparent;
+    border: none;
+    font-weight: 400;
+    font-size: 15px;
+    color: #1c1c1c;
+    letter-spacing: 0.2px;
+    font-family: "Roboto", Arial;
+    outline: none;
+    -webkit-appearance: none;
+    opacity: 1;
+    padding-top: 20px;
+    cursor: text;
+}
 
+.nav-item.search:before {
+    font-size: 22px;
+    content: '\f05f';
+    opacity: 1 !important;
+    color: #2f2f2f;
+}
 
-          .nav-item.unstar,
-          .nav-item.star {
-            font-size:14px;
-            background:transparent;
-            line-height:20px;
-          }
+.nav-item.search {
+    color: #2f2f2f;
+    opacity: 1 !important;
+    cursor: default;
+}
 
-          .nav-item.star:after {
-            font-size: 24px;
-            content: "\f2e7";
-          }
-          .nav-item.unstar:after {
-            font-size: 24px;
-            content: "\f2e5";
-          }
+.title {
+    font-weight: 400;
+    font-size: 16px;
+    color: rgba(0, 0, 0, 0.65);
+    letter-spacing: 0.2px;
+    line-height: 60px;
+}
 
-          .nav-item.add:after {
-            font-size: 24px;
-            content: "\f0fd";
+header .title {
+    flex: 1 1 auto;
+}
 
-          }
+header .user {
+    text-align: right;
+    line-height: 70px;
+}
 
-          input.nav-item {
-              position: relative;
-              height: 59px;
-              width: 170px;
-              display: block;
-              background-color: transparent;
-              border: none;
-              font-weight: 400;
-              font-size: 15px;
-              color: #1c1c1c;
-              letter-spacing: 0.2px;
-              font-family: "Roboto", Arial;
-              outline: none;
-              -webkit-appearance: none;
-              opacity: 1;
-              padding-top: 20px;
-              cursor: text;
-          }
+header .user img {
+    border-radius: 50%;
+    width: 34px;
+    height: 34px;
+    display: inline-block;
+    vertical-align: middle;
+    margin-right: 22px;
+    margin-left: 15px;
+}
 
-          .nav-item.search:before {
-              font-size: 22px;
-              content: '\f05f';
-              opacity: 1 !important;
-              color: #2f2f2f;
-          }
+header .user span {
+    font-size: 16px;
+    color: rgba(255, 255, 255, 0.8);
+    display: inline-block;
+    vertical-align: middle;
+}
 
-          .nav-item.search {
-              color: #2f2f2f;
-              opacity: 1 !important;
-              cursor: default;
-          }
+.menu-item {
+    height: 40px;
+    width: auto;
+    margin: 7px 16px;
+    opacity: 0.8;
+    display: block;
+    cursor: pointer;
+    position: relative;
+    -webkit-transition: all 0.25s ease;
+    -moz-transition: all 0.25s ease;
+    -o-transition: all 0.25s ease;
+    -ms-transition: all 0.25s ease;
+    transition: all 0.25s ease;
+    text-decoration: none;
+}
 
-      .title {
-          font-weight: 400;
-          font-size: 16px;
-          color: rgba(0,0,0,0.65);
-          letter-spacing: 0.2px;
-          line-height: 60px;
-      }
+.logo {
+    margin-left: 0;
+}
 
-      header .title {
-        flex: 1 1 auto;
-      }
+/*
+  .logo:hover {
+      opacity: 1;
+  }
 
-      header .user {
-        text-align: right;
-        line-height: 70px;
-      }
+  .logo:before {
+      content: '';
+      display: block;
+      height: 100%;
+      width: 50px;
+      background: url("/static/images/logo.svg") no-repeat left center;
+      background-size: 60%;
+      -webkit-filter: contrast(150%);
+      filter: contrast(100%);
+  }
 
-      header .user img {
-        border-radius: 50%;
-        width: 34px;
-        height: 34px;
-        display: inline-block;
-        vertical-align: middle;
-        margin-right: 22px;
-        margin-left: 15px;
-      }
+  .logo:after {
+      display: none;
+      position: absolute;
+      top: 50%;
+      margin-top: -10px;
+      left: 43px;
+      content: 'Drone';
+      height: 100%;
+      line-height: 100%;
+      font-size: 20px;
+      letter-spacing: 0.5px;
+      color: #fff;
+      opacity: 1;
+      font-weight: 400;
+  }
+  */
 
-      header .user span {
-        font-size: 16px;
-        color: rgba(255, 255, 255, 0.8);
-        display: inline-block;
-        vertical-align: middle;
-      }
+.material-icons.md-18 {
+    font-size: 18px;
+}
 
-      .menu-item {
-          height: 40px;
-          width: auto;
-          margin: 7px 16px;
-          opacity: 0.8;
-          display: block;
-          cursor: pointer;
-          position: relative;
-          -webkit-transition: all 0.25s ease;
-          -moz-transition: all 0.25s ease;
-          -o-transition: all 0.25s ease;
-          -ms-transition: all 0.25s ease;
-          transition: all 0.25s ease;
-          text-decoration:none;
-      }
+.material-icons.md-24 {
+    font-size: 24px;
+}
 
-      .logo {
-        margin-left: 0;
-      }
+.material-icons.md-36 {
+    font-size: 36px;
+}
 
-      /*
-        .logo:hover {
-            opacity: 1;
-        }
+.material-icons.md-48 {
+    font-size: 48px;
+}
 
-        .logo:before {
-            content: '';
-            display: block;
-            height: 100%;
-            width: 50px;
-            background: url("/static/images/logo.svg") no-repeat left center;
-            background-size: 60%;
-            -webkit-filter: contrast(150%);
-            filter: contrast(100%);
-        }
+.menu-item {
+    margin-right: 0;
+    height: auto;
+    opacity: 0.65;
+}
 
-        .logo:after {
-            display: none;
-            position: absolute;
-            top: 50%;
-            margin-top: -10px;
-            left: 43px;
-            content: 'Drone';
-            height: 100%;
-            line-height: 100%;
-            font-size: 20px;
-            letter-spacing: 0.5px;
-            color: #fff;
-            opacity: 1;
-            font-weight: 400;
-        }
-        */
+.menu-item:hover {
+    opacity: 1;
+}
 
-        .menu-item {
-            margin-right: 0;
-            height: auto;
-            opacity: 0.65;
-        }
+.menu-item i {
+    color: #2f2f2f;
+}
 
-        .menu-item:hover {
-            opacity: 1;
-        }
+img.menu-item {
+    border-radius: 50%;
+    height: 28px;
+    width: 28px;
+    margin: 18px 0 18px 7px;
+    display: block;
+}
 
-        .menu-item:before {
-            font-family: "Material-Design-Iconic-Font";
-            color: #2f2f2f;
-        }
+.menu-item {
+    font-size: 20px;
+    line-height: 20px;
+    padding: 10px 0;
+}
 
-        img.menu-item {
-            border-radius: 50%;
-            height: 28px;
-            width: 28px;
-            margin: 18px 0 18px 7px;
-            display: block;
-        }
+.menu-item.user-name {
+    height: 50px;
+    font-size: 14px;
+    line-height: 14px;
+    letter-spacing: 0.5px;
+    color: #3c3c3c;
+    font-weight: 400;
+    margin: 0;
+    padding: 20px 0 18px 0;
+}
 
-        .menu-item {
-            font-size: 20px;
-            line-height: 20px;
-            padding: 10px 0;
-        }
+.subnav {
+    background: rgba(255, 255, 255, 0.8);
+    padding: 0px 25px;
+    height: 70px;
+    position: relative;
+}
 
-        .menu-item.settings:before {
-            font-size: 20px;
-            content: "\f060";
-        }
+.subnav .icon {
+    display: inline-block;
+    display: block;
+    line-height: 70px;
+    text-decoration: none;
+    font-size: 22px;
+    color: #999;
+    margin-left: 10px;
+}
 
-        .menu-item.users:before {
-            font-size: 20px;
-            content: "\f006";
-        }
+.subnav .icon.icon-settings:before {
+    content: "\f060";
+    font-family: "Material-Design-Iconic-Font";
+}
 
-        .menu-item.help:before {
-            font-size: 20px;
-            content: '\f033';
-        }
+.subnav .menu {
+    position: absolute;
+    top: 0px;
+    right: 25px;
+}
 
-        .menu-item.plugins:before {
-            font-size: 23px;
-            content: '\f292';
-        }
-
-        .menu-item.user-name {
-            height: 50px;
-            font-size: 14px;
-            line-height: 14px;
-            letter-spacing: 0.5px;
-            color: #3c3c3c;
-            font-weight: 400;
-            margin: 0;
-            padding: 20px 0 18px 0;
-        }
-
-
-
-
-    .subnav {
-      background:rgba(255,255,255,0.8);
-      padding:0px 25px;
-      height:70px;
-      position:relative;
-    }
-
-      .subnav .icon {
-        display:inline-block;
-        display: block;
-        line-height:70px;
-        text-decoration:none;
-        font-size:22px;
-        color:#999;
-        margin-left:10px;
-      }
-
-        .subnav .icon.icon-settings:before {
-          content: "\f060";
-          font-family: "Material-Design-Iconic-Font";
-        }
-
-      .subnav .menu {
-        position: absolute;
-        top: 0px;
-        right: 25px;
-      }
 /*
     .breadcrumb {
         padding: 0;
@@ -1101,114 +1075,114 @@
           color: #fafafa !important;
       }
 */
-      .test {
-          position: absolute;
-          top: -72px;
-          height: 72px;
-          line-height: 72px;
-      }
+.test {
+    position: absolute;
+    top: -72px;
+    height: 72px;
+    line-height: 72px;
+}
 
-      .test span {
-        display: block;
-          color: #efefef;
-          font-weight: 400;
-          font-size: 1.1rem;
-          margin-top: 2px;
-          letter-spacing: 0.025rem;
-      }
+.test span {
+    display: block;
+    color: #efefef;
+    font-weight: 400;
+    font-size: 1.1rem;
+    margin-top: 2px;
+    letter-spacing: 0.025rem;
+}
 
-      /*.breadcrumb span {
-        display:inline-block;
-        font-size: 20px;
-        vertical-align: middle;
-        color: #efefef;
-        font-weight: 300;
-      }
+/*.breadcrumb span {
+  display:inline-block;
+  font-size: 20px;
+  vertical-align: middle;
+  color: #efefef;
+  font-weight: 300;
+}
 
-      .breadcrumb a {
-        display:inline-block;
-        vertical-align:middle;
-        text-decoration:none;
-        font-size: 18px;
-        color: #cfcfcf;
-        font-weight: 300;
-        line-height: 70px;
-      }
-      .breadcrumb span.spacer:after {
-        font-family: "Material-Design-Iconic-Font";
-        content: "\f29c";
-        display:inline-block;
-        vertical-align:middle;
-        opacity:0.3;
-        line-height:70px;
-      }
+.breadcrumb a {
+  display:inline-block;
+  vertical-align:middle;
+  text-decoration:none;
+  font-size: 18px;
+  color: #cfcfcf;
+  font-weight: 300;
+  line-height: 70px;
+}
+.breadcrumb span.spacer:after {
+  font-family: "Material-Design-Iconic-Font";
+  content: "\f29c";
+  display:inline-block;
+  vertical-align:middle;
+  opacity:0.3;
+  line-height:70px;
+}
 
-      .breadcrumb a.icon-home {
-        display:inline-block;
-        margin-left:0px;
-        margin-right:10px;
-        margin-left:-2px;
-      }
-      .breadcrumb a.icon-home:after {
-        font-family: "Material-Design-Iconic-Font";
-        display:inline-block;
-        vertical-align:middle;
-        opacity:0.3;
-        line-height:70px;
-        content: "\f297";
-        font-size:26px;
-      }
-    */
+.breadcrumb a.icon-home {
+  display:inline-block;
+  margin-left:0px;
+  margin-right:10px;
+  margin-left:-2px;
+}
+.breadcrumb a.icon-home:after {
+  font-family: "Material-Design-Iconic-Font";
+  display:inline-block;
+  vertical-align:middle;
+  opacity:0.3;
+  line-height:70px;
+  content: "\f297";
+  font-size:26px;
+}
+*/
 
+/*  INFO PANE */
 
+.banner {
+    height: 73px;
+    width: 100%;
+    background-color: #89C4F4;
+    position: relative;
+}
 
+.banner .badge {
+    position: absolute;
+    bottom: 0;
+    left: 50%;
+    margin-left: -30px;
+    margin-bottom: -30px;
+    border-radius: 50%;
+    width: 60px;
+    height: 60px;
+    background-color: #fafafa;
+    border: solid 3px #fff;
+}
 
-  /*  INFO PANE */
-
-      .banner {
-          height: 73px;
-          width: 100%;
-          background-color: #89C4F4;
-          position: relative;
-      }
-
-      .banner .badge {
-          position: absolute;
-          bottom: 0;
-          left: 50%;
-          margin-left: -30px;
-          margin-bottom: -30px;
-          border-radius: 50%;
-          width: 60px;
-          height: 60px;
-          background-color: #fafafa;
-          border: solid 3px #fff;
-      }
-
-      .badge .status:before {
-        position: absolute;
-        left: 50%;
-        margin-left: -20px;
-        top: 50%;
-        margin-top: -20px;
-        font-size: 40px;
-      }
+.badge .status:before {
+    position: absolute;
+    left: 50%;
+    margin-left: -20px;
+    top: 50%;
+    margin-top: -20px;
+    font-size: 40px;
+}
 
 [ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {
-  display: none !important;
+    display: none !important;
 }
 
 body {
-    background:#f5f5f5;
+    background: #f5f5f5;
 }
+
 header {
-    background:#FFF;
+    background: #FFF;
 }
+
 header[show-nav] {
-    display:none;
+    display: none;
 }
+
 section.central-container {
-    margin-top:50px;
+    margin-top: 50px;
 }
 
 header {
@@ -1216,8 +1190,8 @@ header {
     background: #FFF;
     line-height: 60px;
     overflow: hidden;
-    padding-left:15px;
-    padding-right:25px;
+    padding-left: 15px;
+    padding-right: 25px;
 }
 
 header .logo {
@@ -1227,110 +1201,101 @@ header .logo {
     width: 33px;
     background: url("/static/images/logo.svg") no-repeat center center;
     background-size: 33px;
-    float:left;
+    float: left;
 }
 
 .toolbar {
-    background:#424242;
-    position:relative;
-    height:56px;
+    background: #424242;
+    position: relative;
+    height: 56px;
     position: sticky;
     top: 0px;
-    z-index:1;
-
-    box-shadow: 0 2px 5px 0 rgba(0,0,0,0.26);
+    z-index: 1;
+    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
     box-shadow: none;
 }
+
 .toolbar .breadcrumb {
-    max-width:900px;
-    margin:0px auto;
-    line-height:56px;
-    height:56px;
+    max-width: 900px;
+    margin: 0px auto;
+    line-height: 56px;
+    height: 56px;
 }
+
 .breadcrumb a {
-    color:#FFF;
-    font-size:20px;
-    line-height:56px;
-    height:56px;
-    text-decoration:none;
-    display:inline-block;
+    color: #FFF;
+    font-size: 20px;
+    line-height: 56px;
+    height: 56px;
+    text-decoration: none;
+    display: inline-block;
 }
+
 .breadcrumb span {
-    color: rgba(255,255,255,0.749);
-    line-height:56px;
-    height:56px;
-}
-.breadcrumb span:before {
-    font-family: "Material-Design-Iconic-Font";
-    color: rgba(255,255,255,0.749);
-    line-height:56px;
-    content: "\f29c";
+    color: rgba(255, 255, 255, 0.749);
+    line-height: 56px;
+    height: 56px;
 }
 
 .breadcrumb a.icon-home {
     position: absolute;
     left: -50px;
 }
-.breadcrumb a.icon-home:after {
-    font-family: "Material-Design-Iconic-Font";
+
+.breadcrumb a.icon-home i {
     line-height:56px;
-    color: rgba(255,255,255,0.749);
-    content: "\f297";
-    font-size:24px;
+    color: rgba(255, 255, 255, 0.749);
     vertical-align: middle;
 }
 
 .menu {
-    position:absolute;
-    right:25px;
-    top:0px;
+    position: absolute;
+    right: 25px;
+    top: 0px;
 }
 
-
 pre.success {
-    border-left:10px solid #81C784;
+    border-left: 10px solid #81C784;
     background: #424242;
 }
 
 pre.error,
 pre.killed,
 pre.failure {
-    border-left:10px solid #E57373;
+    border-left: 10px solid #E57373;
     background: #424242;
 }
 
-
 article > pre {
-    font-family: "Droid Sans Mono","Roboto","Arial";
+    font-family: "Droid Sans Mono", "Roboto", "Arial";
     font-size: 13px;
-    color:#fff;
+    color: #fff;
     background: #424242;
     line-height: 18px;
     white-space: pre-wrap;
     word-wrap: break-word;
     padding: 30px;
-    margin-top:30px;
-    border-radius:2px;
+    margin-top: 30px;
+    border-radius: 2px;
 }
 
-
 article {
-    padding:0px 20px;
-    max-width:900px;
-    margin:0px auto;
+    padding: 0px 20px;
+    max-width: 900px;
+    margin: 0px auto;
     box-sizing: content-box;
-    margin-bottom:30px;
-    padding-top:15px;
+    margin-bottom: 30px;
+    padding-top: 15px;
 }
 
 section {
-    background:#FFF;
-    padding:0px;
-    margin-top:30px;
-    border-radius:2px;
+    background: #FFF;
+    padding: 0px;
+    margin-top: 30px;
+    border-radius: 2px;
 
-    border:1px solid #EEE;
-    border:none;
+    border: 1px solid #EEE;
+    border: none;
 }
 
 section h2 {
@@ -1352,17 +1317,7 @@ section .row {
 }
 
 section a.row:hover {
-    background:#FAFAFA;
-}
-
-section a.row:after {
-    content: "\f29c";
-    font-family: Material-Design-Iconic-Font;
-    line-height: 74px;
-    font-size: 26px;
-    color: rgb(204, 204, 204);
-    position: absolute;
-    right: 25px;
+    background: #FAFAFA;
 }
 
 section .row > div:first-child {
@@ -1370,7 +1325,7 @@ section .row > div:first-child {
     border-bottom: 1px solid #EEE;
     width: 200px;
     min-width: 200px;
-    font-size:14px;
+    font-size: 14px;
     color: #757575;
 }
 
@@ -1379,59 +1334,60 @@ section .row > div:last-child {
     flex: 1 1 auto;
     padding: 30px 30px;
     border-bottom: 1px solid #EEE;
-    font-size:14px;
+    font-size: 14px;
 }
 
 section .row:last-child > div {
-    border-bottom:none;
+    border-bottom: none;
 }
 
 section .build-row .build-num {
     display: inline-block;
     width: 40px;
-    height:40px;
-    line-height:40px;
+    height: 40px;
+    line-height: 40px;
     border-radius: 50%;
-    color: rgba(255,255,255,0.9);
+    color: rgba(255, 255, 255, 0.9);
     font-size: 16px;
     text-align: center;
 
-  width: 36px;
-  height: 36px;
-  line-height: 36px;
+    width: 36px;
+    height: 36px;
+    line-height: 36px;
 }
 
 section .build-row .build-num.success:after {
-  cursor: pointer;
-  width: 20px;
-  height: 20px;
-  color: rgba(255, 255, 255, 0.701961);
-  font-size: 20px;
-  font-family: Material-Design-Iconic-Font;
-  opacity: 1;
-  font-size: 16px;
-  content: '\f084';
+    cursor: pointer;
+    width: 20px;
+    height: 20px;
+    color: rgba(255, 255, 255, 0.701961);
+    font-size: 20px;
+    font-family: Material-Design-Iconic-Font;
+    opacity: 1;
+    font-size: 16px;
+    content: '\f084';
 }
+
 section .build-row .build-num.killed:after,
 section .build-row .build-num.error:after,
 section .build-row .build-num.failure:after {
-  cursor: pointer;
-  width: 20px;
-  height: 20px;
-  color: rgba(255, 255, 255, 0.701961);
-  font-size: 20px;
-  font-family: Material-Design-Iconic-Font;
-  opacity: 1;
-  font-size: 16px;
-  content: "\f082";
+    cursor: pointer;
+    width: 20px;
+    height: 20px;
+    color: rgba(255, 255, 255, 0.701961);
+    font-size: 20px;
+    font-family: Material-Design-Iconic-Font;
+    opacity: 1;
+    font-size: 16px;
+    content: "\f082";
 }
 
-
 section .build-row > div:last-child {
-    padding-left:0px;
+    padding-left: 0px;
 }
+
 section a.build-row:after {
-    content:"";
+    content: "";
     -line-height: 115px;
 }
 
@@ -1441,8 +1397,9 @@ section a.build-row:after {
 }
 
 .success {
-    background:#66BB6A;
+    background: #66BB6A;
 }
+
 .error,
 .killed,
 .failure {
@@ -1458,66 +1415,69 @@ section a.build-row:after {
 }
 
 section .icon {
-  background:#BDBDBD;
-  display: inline-block;
+    background: #BDBDBD;
+    display: inline-block;
     width: 40px;
     height: 40px;
     line-height: 40px;
     border-radius: 50%;
-    color: rgba(255,255,255,0.9);
+    color: rgba(255, 255, 255, 0.9);
     font-size: 16px;
     text-align: center;
 
-  width: 36px;
-  height: 36px;
-  line-height: 36px;
+    width: 36px;
+    height: 36px;
+    line-height: 36px;
 }
+
 section .icon-repo:after {
-  font-size: 18px;
-  content: '\f001';
-  color: rgba(255, 255, 255, 0.701961);
-  width: 24px;
-  font-family: "octicons";
+    font-size: 18px;
+    content: '\f001';
+    color: rgba(255, 255, 255, 0.701961);
+    width: 24px;
+    font-family: "octicons";
 }
 
 section .build-row > div:first-child {
-    width:70px;
+    width: 70px;
     min-width: 70px;
 }
 
 section .build-row h3 {
-    color:#212121;
-    font-size:18px;
-    margin-bottom:10px;
+    color: #212121;
+    font-size: 18px;
+    margin-bottom: 10px;
     margin-top: 4px;
 }
 
 section .build-row strong {
-    color:#616161;
-    font-weight:normal;
+    color: #616161;
+    font-weight: normal;
 }
 
 section .build-row.sub-build-row > div {
-    padding-top:20px;
-    padding-bottom:20px;
+    padding-top: 20px;
+    padding-bottom: 20px;
 }
+
 section .build-row.sub-build-row h3 {
-    color:#212121;
-    font-size:13px;
-    margin-bottom:0px;
+    color: #212121;
+    font-size: 13px;
+    margin-bottom: 0px;
     margin-top: 12px;
     /*font-family: "Droid Sans Mono","Roboto","Arial";*/
 }
 
 section .build-row.sub-build-row h3 > div {
-    margin-bottom:7px;
+    margin-bottom: 7px;
 }
+
 section .build-row.sub-build-row h3 > div:last-child {
-    margin-bottom:0px;
+    margin-bottom: 0px;
 }
 
 section > .search {
-    padding:30px;
+    padding: 30px;
 
     padding: 20px;
     padding-bottom: 5px;
@@ -1528,13 +1488,14 @@ section > .search a {
     background: #00BCD4;
     background: #9E9E9E;
     padding: 12px 20px;
-    color: rgba(255,255,255,0.8);
-    float:right;
+    color: rgba(255, 255, 255, 0.8);
+    float: right;
     transition: all .5s;
-    border-radius:2px;
-    text-transform:uppercase;
-    font-size:14px;
+    border-radius: 2px;
+    text-transform: uppercase;
+    font-size: 14px;
 }
+
 section > .search a:hover {
     background: #00ACC1;
 }
@@ -1542,36 +1503,35 @@ section > .search a:hover {
 pre.snippet {
     white-space: pre-wrap;
     word-wrap: break-word;
-    font-size:13px;
-    line-height:18px;
-    color:#9E9E9E;
-    font-family: "Droid Sans Mono","Roboto","Arial";
+    font-size: 13px;
+    line-height: 18px;
+    color: #9E9E9E;
+    font-family: "Droid Sans Mono", "Roboto", "Arial";
 }
 
-
 pre.snippet-padding {
-    padding:30px;
+    padding: 30px;
 }
 
-textarea:focus, input:focus{
+textarea:focus, input:focus {
     outline: 0;
 }
 
 .alert {
-  padding: 20px;
-  text-align: center;
-  margin-top:20px;
-  margin-bottom:20px;
+    padding: 20px;
+    text-align: center;
+    margin-top: 20px;
+    margin-bottom: 20px;
 }
 
 .alert-success {
-  background: #DCEDC8;
-  color: #33691E;
+    background: #DCEDC8;
+    color: #33691E;
 }
 
 .alert-error {
-  background: #F44336;
-  color: #FFCDD2;
+    background: #F44336;
+    color: #FFCDD2;
 }
 
 .clearfix:after {
@@ -1584,172 +1544,170 @@ textarea:focus, input:focus{
 }
 
 @media (max-width: 990px) {
+    .breadcrumb {
+        padding-left: 20px;
+    }
     .breadcrumb a.icon-home {
         position: static;
-        padding-right:20px;
-        padding-left:20px;
+        padding-right: 20px;
     }
+
     article {
-        padding-top:0px;
-        margin-top:-5px;
+        padding-top: 0px;
+        margin-top: -5px;
     }
 }
 
-
-
-
 /*
 http://codepen.io/batazor/pen/KwKryj
 */
 
 .switch {
-  display: inline-block;
-  position: relative;
-  width: 50px;
-  height: 20.833333333333336px;
-  border-radius: 10.416666666666668px;
-  background: #E0E0E0;
-  -webkit-transition: background 0.28s cubic-bezier(0.4, 0, 0.2, 1);
-          transition: background 0.28s cubic-bezier(0.4, 0, 0.2, 1);
-  vertical-align: middle;
-  cursor: pointer;
+    display: inline-block;
+    position: relative;
+    width: 50px;
+    height: 20.833333333333336px;
+    border-radius: 10.416666666666668px;
+    background: #E0E0E0;
+    -webkit-transition: background 0.28s cubic-bezier(0.4, 0, 0.2, 1);
+    transition: background 0.28s cubic-bezier(0.4, 0, 0.2, 1);
+    vertical-align: middle;
+    cursor: pointer;
 }
+
 .switch::before {
-  content: '';
-  position: absolute;
-  top: -2.604166666666667px;
-  left: -2.604166666666667px;
-  width: 26.04166666666667px;
-  height: 26.04166666666667px;
-  background: #bdbdbd;
-  border-radius: 50%;
-  -webkit-transition: left 0.28s cubic-bezier(0.4, 0, 0.2, 1), background 0.28s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.28s cubic-bezier(0.4, 0, 0.2, 1);
-          transition: left 0.28s cubic-bezier(0.4, 0, 0.2, 1), background 0.28s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.28s cubic-bezier(0.4, 0, 0.2, 1);
+    content: '';
+    position: absolute;
+    top: -2.604166666666667px;
+    left: -2.604166666666667px;
+    width: 26.04166666666667px;
+    height: 26.04166666666667px;
+    background: #bdbdbd;
+    border-radius: 50%;
+    -webkit-transition: left 0.28s cubic-bezier(0.4, 0, 0.2, 1), background 0.28s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.28s cubic-bezier(0.4, 0, 0.2, 1);
+    transition: left 0.28s cubic-bezier(0.4, 0, 0.2, 1), background 0.28s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.28s cubic-bezier(0.4, 0, 0.2, 1);
 }
+
 .switch:active::before {
-  box-shadow: 0 2px 10.416666666666668px rgba(0,0,0,0.28), 0 0 0 25px rgba(0,0,0,0.1);
+    box-shadow: 0 2px 10.416666666666668px rgba(0, 0, 0, 0.28), 0 0 0 25px rgba(0, 0, 0, 0.1);
 }
+
+input {
+    font-size: 14px;
+    padding: 10px 20px;
+    width: 400px;
+    border: 1px solid #d9d9d9;
+    outline: none;
+}
+
 input:checked + .switch {
-  background: rgba(0,150,136,0.5);
-  background: rgba(102, 187, 106, 0.5);
+    background: rgba(0, 150, 136, 0.5);
+    background: rgba(102, 187, 106, 0.5);
 }
+
 input:checked + .switch::before {
-  left: 26.562499999999996px;
-  background: #009688;
-  background: #66bb6a;
+    left: 26.562499999999996px;
+    background: #009688;
+    background: #66bb6a;
 }
+
 input:checked + .switch:active::before {
-  box-shadow: 0 2px 10.416666666666668px rgba(0,0,0,0.28), 0 0 0 25px rgba(0,150,136,0.2);
+    box-shadow: 0 2px 10.416666666666668px rgba(0, 0, 0, 0.28), 0 0 0 25px rgba(0, 150, 136, 0.2);
 }
 
 .row.row-user div:first-child {
-    width:50px;
-    max-width:50px;
-    min-width:50px;
+    width: 50px;
+    max-width: 50px;
+    min-width: 50px;
 }
 
 .row.row-user div:last-child {
-    position:relative;
+    position: relative;
 }
+
 .row-user img {
-    background:#E0E0E0;
-    border-radius:50%;
-    width:36px;
-    height:36px;
-    border:none;
+    background: #E0E0E0;
+    border-radius: 50%;
+    width: 36px;
+    height: 36px;
+    border: none;
 }
+
 .row-user h3 {
-    white-space:nowrap;
+    white-space: nowrap;
     color: #212121;
     font-size: 18px;
     margin-bottom: 10px;
     margin-top: 4px;
 }
+
 .row-user small {
     background: #4CAF50;
-    color:#FFF;
-    display:inline-block;
+    color: #FFF;
+    display: inline-block;
     text-transform: uppercase;
-    font-size:13px;
-    margin-left:10px;
-    line-height:18px;
-    padding:0px 3px;
-    border-radius:2px;
+    font-size: 13px;
+    margin-left: 10px;
+    line-height: 18px;
+    padding: 0px 3px;
+    border-radius: 2px;
 }
 
 .row-env {
     padding: 15px 0px;
     border-bottom: 1px solid #EEE;
-    position:relative;
+    position: relative;
     color: #757575;
-    font-family:'Droid Sans Mono','Roboto','Arial';
+    font-family: 'Droid Sans Mono', 'Roboto', 'Arial';
     font-size: 14px;
 }
+
 .row-env span {
-    color:#2196F3;
-    display:inline-block;
+    color: #2196F3;
+    display: inline-block;
 }
+
 .row-env div {
-    display:inline-block;
+    display: inline-block;
 }
 
 .btn-admin,
 .btn-remove {
-    border:none;
+    border: none;
     background: #E0E0E0;
-    color: rgba(255,255,255,0.9);
-    border-radius:50%;
-    width:25px;
-    height:25px;
-    border-radius:50%;
+    color: rgba(255, 255, 255, 0.9);
+    border-radius: 50%;
+    width: 25px;
+    height: 25px;
+    border-radius: 50%;
     text-align: center;
-    cursor:pointer;
+    cursor: pointer;
     vertical-align: middle;
 }
 
-
 .btn-remove:hover {
     background: #EF5350;
     color: #FFF;
 }
-.btn-remove:before {
-    content: "\f102";
-    font-family:"Material-Design-Iconic-Font";
-    /*line-height:25px;
-    width:25px;*/
-    vertical-align: middle;
-    text-align: center;
-    display:inline-block;
-    font-size:16px;
-}
+
 .btn-admin.btn-checked,
 .btn-admin:hover {
     background: #4CAF50;
     color: #FFF;
 }
-.btn-admin:before {
-    content: "\f08e";
-    font-family:"Material-Design-Iconic-Font";
-    /*line-height:25px;
-    width:25px;*/
-    vertical-align: middle;
-    text-align: center;
-    display:inline-block;
-    font-size:16px;
-}
-
-
 
 .row-env .btn-remove {
     position: absolute;
     right: 0px;
     top: 12px;
 }
+
 .row-user .btn-remove {
     position: absolute;
     right: 0px;
     top: 40px;
 }
+
 .row-user .btn-admin {
     position: absolute;
     right: 40px;
@@ -1757,112 +1715,120 @@ input:checked + .switch:active::before {
 }
 
 .slider-label {
-  display:inline-block;
-  margin-left:10px;
-}
-input[type="range"]:focus ~ .slider-label {
-  display:inline-block;
+    display: inline-block;
+    margin-left: 10px;
 }
 
+input[type="range"]:focus ~ .slider-label {
+    display: inline-block;
+}
 
 input[type=range] {
-  -webkit-appearance: none;
-  margin: 6px 0;
-  width: 200px;
+    -webkit-appearance: none;
+    margin: 6px 0;
+    width: 200px;
 }
+
 input[type=range]:focus {
-  outline: none;
+    outline: none;
 }
+
 input[type=range]::-webkit-slider-runnable-track {
-  width: 100%;
-  height: 8px;
-  cursor: pointer;
-  animate: 0.2s;
-  box-shadow: none;
-  background: rgba(0,150,136,0.5);
-  background: rgba(102, 187, 106, 0.5);
-  border-radius: 5px;
-  border: none;
+    width: 100%;
+    height: 8px;
+    cursor: pointer;
+    animate: 0.2s;
+    box-shadow: none;
+    background: rgba(0, 150, 136, 0.5);
+    background: rgba(102, 187, 106, 0.5);
+    border-radius: 5px;
+    border: none;
 }
+
 input[type=range]::-webkit-slider-thumb {
-  box-shadow: none;
-  border: none;
-  height: 26px;
-  width: 26px;
-  border-radius: 50px;
-  background: #009688;
-  background: #66bb6a;
-  cursor: pointer;
-  -webkit-appearance: none;
-  margin-top: -10px;
+    box-shadow: none;
+    border: none;
+    height: 26px;
+    width: 26px;
+    border-radius: 50px;
+    background: #009688;
+    background: #66bb6a;
+    cursor: pointer;
+    -webkit-appearance: none;
+    margin-top: -10px;
 }
+
 input[type=range]:focus::-webkit-slider-runnable-track {
-  background: rgba(0,150,136,0.5);
-  background: rgba(102, 187, 106, 0.5);
+    background: rgba(0, 150, 136, 0.5);
+    background: rgba(102, 187, 106, 0.5);
 }
+
 input[type=range]::-moz-range-track {
-  width: 100%;
-  height: 8px;
-  cursor: pointer;
-  animate: 0.2s;
-  box-shadow: none;
-  background: rgba(0,150,136,0.5);
-  background: rgba(102, 187, 106, 0.5);
-  border-radius: 5px;
-  border: none;
+    width: 100%;
+    height: 8px;
+    cursor: pointer;
+    animate: 0.2s;
+    box-shadow: none;
+    background: rgba(0, 150, 136, 0.5);
+    background: rgba(102, 187, 106, 0.5);
+    border-radius: 5px;
+    border: none;
 }
+
 input[type=range]::-moz-range-thumb {
-  box-shadow: none;
-  border: none;
-  height: 26px;
-  width: 26px;
-  border-radius: 50px;
-  background: #009688;
-  background: #66bb6a;
-  cursor: pointer;
+    box-shadow: none;
+    border: none;
+    height: 26px;
+    width: 26px;
+    border-radius: 50px;
+    background: #009688;
+    background: #66bb6a;
+    cursor: pointer;
 }
+
 input[type=range]::-ms-track {
-  width: 100%;
-  height: 8.4px;
-  cursor: pointer;
-  animate: 0.2s;
-  background: transparent;
-  border-color: transparent;
-  border-width: 16px 0;
-  color: transparent;
+    width: 100%;
+    height: 8.4px;
+    cursor: pointer;
+    animate: 0.2s;
+    background: transparent;
+    border-color: transparent;
+    border-width: 16px 0;
+    color: transparent;
 }
+
 input[type=range]::-ms-fill-lower {
-  background: #2a6495;
-  border: 0.2px solid #010101;
-  border-radius: 2.6px;
-  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
+    background: #2a6495;
+    border: 0.2px solid #010101;
+    border-radius: 2.6px;
+    box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
 }
+
 input[type=range]::-ms-fill-upper {
-  background: #3071a9;
-  border: 0.2px solid #010101;
-  border-radius: 2.6px;
-  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
+    background: #3071a9;
+    border: 0.2px solid #010101;
+    border-radius: 2.6px;
+    box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
 }
+
 input[type=range]::-ms-thumb {
-  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
-  border: 1px solid #000000;
-  height: 36px;
-  width: 16px;
-  border-radius: 3px;
-  background: #ffffff;
-  cursor: pointer;
+    box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
+    border: 1px solid #000000;
+    height: 36px;
+    width: 16px;
+    border-radius: 3px;
+    background: #ffffff;
+    cursor: pointer;
 }
+
 input[type=range]:focus::-ms-fill-lower {
-  background: #3071a9;
+    background: #3071a9;
 }
+
 input[type=range]:focus::-ms-fill-upper {
-  background: #367ebd;
+    background: #367ebd;
 }
 
-
-
-
-
 /*
 header {
   background:transparent;
diff --git a/pkg/runner/builtin/runner.go b/pkg/runner/builtin/runner.go
index 3b7240d7..428181a5 100644
--- a/pkg/runner/builtin/runner.go
+++ b/pkg/runner/builtin/runner.go
@@ -8,6 +8,8 @@ import (
 	"io/ioutil"
 	"os"
 	"time"
+	"crypto/tls"
+	"crypto/x509"
 
 	"github.com/drone/drone/Godeps/_workspace/src/github.com/samalba/dockerclient"
 	"github.com/drone/drone/pkg/docker"
@@ -23,6 +25,11 @@ var (
 
 	// Docker host address from environment variable
 	DockerHost = os.Getenv("DOCKER_HOST")
+
+	// Docker TLS variables
+	DockerHostCa = os.Getenv("DOCKER_CA")
+	DockerHostKey = os.Getenv("DOCKER_KEY")
+	DockerHostCert = os.Getenv("DOCKER_CERT")
 )
 
 func init() {
@@ -40,6 +47,7 @@ type Runner struct {
 func (r *Runner) Run(w *queue.Work) error {
 	var workers []*worker
 	var client dockerclient.Client
+	var tlc *tls.Config
 
 	defer func() {
 		recover()
@@ -86,14 +94,34 @@ func (r *Runner) Run(w *queue.Work) error {
 	w.Build.Status = types.StateRunning
 	err := r.SetBuild(w.User, w.Repo, w.Build)
 	if err != nil {
+		log.Errorf("failure to set build. %s", err)
 		return err
 	}
 
+	// create the Docket client TLS config
+	if len(DockerHostCert) > 0 && len(DockerHostKey) > 0 && len(DockerHostCa) > 0 {
+		cert, err := tls.LoadX509KeyPair(DockerHostCert, DockerHostKey)
+		if err != nil {
+			log.Errorf("failure to load SSL cert and key. %s", err)
+		}
+		caCert, err := ioutil.ReadFile(DockerHostCa)
+		if err != nil {
+			log.Errorf("failure to load SSL CA cert. %s", err)
+		}
+		caCertPool := x509.NewCertPool()
+		caCertPool.AppendCertsFromPEM(caCert)
+		tlc = &tls.Config{
+			Certificates:       []tls.Certificate{cert},
+			RootCAs:            caCertPool,
+		}
+	}
+
 	// create the Docker client. In this version of Drone (alpha)
 	// we do not spread builds across clients, but this can and
 	// (probably) will change in the future.
-	client, err = dockerclient.NewDockerClient(DockerHost, nil)
+	client, err = dockerclient.NewDockerClient(DockerHost, tlc)
 	if err != nil {
+		log.Errorf("failure to connect to docker. %s", err)
 		return err
 	}
 
@@ -106,6 +134,7 @@ func (r *Runner) Run(w *queue.Work) error {
 		job.Started = time.Now().UTC().Unix()
 		err = r.SetJob(w.Repo, w.Build, job)
 		if err != nil {
+			log.Errorf("failure to set job. %s", err)
 			return err
 		}
 
@@ -121,6 +150,7 @@ func (r *Runner) Run(w *queue.Work) error {
 		}
 		in, err := json.Marshal(work)
 		if err != nil {
+			log.Errorf("failure to marshalise work. %s", err)
 			return err
 		}
 
diff --git a/pkg/server/hooks.go b/pkg/server/hooks.go
index aeca92c8..4d68299a 100644
--- a/pkg/server/hooks.go
+++ b/pkg/server/hooks.go
@@ -91,7 +91,7 @@ func PostHook(c *gin.Context) {
 	build.Status = common.StatePending
 	build.RepoID = repo.ID
 
-	// featch the .drone.yml file from the database
+	// fetch the .drone.yml file from the database
 	raw, err := remote.Script(user, repo, build)
 	if err != nil {
 		log.Errorf("failure to get .drone.yml for %s. %s", repo.FullName, err)