From 229e88a4382bfc0771d94e3677201aa258183764 Mon Sep 17 00:00:00 2001 From: Alexander Simonov Date: Sun, 12 Jul 2015 22:32:46 +0300 Subject: [PATCH] Little refactoring of all assets. JS code better identing. --- cmd/drone-server/static/index.html | 66 +- .../static/scripts/controllers/builds.js | 374 +-- .../static/scripts/controllers/repos.js | 194 +- cmd/drone-server/static/scripts/drone.js | 422 +-- .../static/scripts/services/repos.js | 196 +- .../static/scripts/views/layout.html | 22 +- .../static/scripts/views/login.html | 135 +- .../static/scripts/views/repos/edit.html | 135 +- .../static/scripts/views/repos/toolbar.html | 14 +- .../static/scripts/views/users/content.html | 52 +- .../static/scripts/views/users/toolbar.html | 10 +- cmd/drone-server/static/styles/drone.css | 2556 +++++++++-------- 12 files changed, 2112 insertions(+), 2064 deletions(-) diff --git a/cmd/drone-server/static/index.html b/cmd/drone-server/static/index.html index 16cf68cd..36bd223c 100644 --- a/cmd/drone-server/static/index.html +++ b/cmd/drone-server/static/index.html @@ -1,46 +1,46 @@ - - + + - - - - - - - - - + + + + + + + + + -
+
- - - - - - + + + + + + - - - - - - + + + + + + - - - - - - + + + + + + - - - + + + diff --git a/cmd/drone-server/static/scripts/controllers/builds.js b/cmd/drone-server/static/scripts/controllers/builds.js index 514d95fe..6a28a17b 100644 --- a/cmd/drone-server/static/scripts/controllers/builds.js +++ b/cmd/drone-server/static/scripts/controllers/builds.js @@ -1,221 +1,221 @@ (function () { - /** - * 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; + /** + * 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; - // 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) { + /** + * 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; + var number = $stateParams.number; + var owner = $stateParams.owner; + var name = $stateParams.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 the build - builds.get(fullName, number).then(function(payload){ - $scope.build = payload.data; - }).catch(function(err){ - $scope.error = err; - }); + // Gets the build + builds.get(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(); - }); - } + repos.subscribe(fullName, function (event) { + if (event.number !== parseInt(number)) { + return; // ignore + } + // update the build + $scope.build = event; + $scope.$apply(); + }); + } - /** - * BuildOutCtrl responsible for rendering a build output. - */ - function BuildOutCtrl($scope, $stateParams, $window, logs, builds, repos, users) { + /** + * BuildOutCtrl responsible for rendering a build output. + */ + function BuildOutCtrl($scope, $stateParams, $window, logs, builds, repos, users) { - 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; + 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; - }); - }; + $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; + }); + }; - $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; - }); - }; + $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; + }); + }; - $scope.tail = function() { - tail = !tail; - }; + $scope.tail = function () { + tail = !tail; + }; - 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(); + 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(); - // start streaming the current build - if ($scope.task.status === 'running') { - stream(); - } else { - // resets our streaming state - streaming = false; - } - }); - } + // start streaming the current build + if ($scope.task.status === 'running') { + stream(); + } else { + // resets our streaming state + streaming = false; + } + }); + } - 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/repos.js b/cmd/drone-server/static/scripts/controllers/repos.js index e499949f..19768d74 100644 --- a/cmd/drone-server/static/scripts/controllers/repos.js +++ b/cmd/drone-server/static/scripts/controllers/repos.js @@ -1,115 +1,115 @@ (function () { - /** - * 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; - }); + /** + * 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 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, $stateParams, repos, users) { + var owner = $stateParams.owner; + var name = $stateParams.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 bfcad6f6..3c85fcf7 100644 --- a/cmd/drone-server/static/scripts/drone.js +++ b/cmd/drone-server/static/scripts/drone.js @@ -2,226 +2,230 @@ (function () { - /** - * Creates the angular application. - */ - angular.module('drone', [ - 'ngRoute', - 'ui.filters', - 'ui.router' - ]); + /** + * 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 ($stateProvider, $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(); + } + }; - $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; - console.log(repos.list()); - }); - } - } - }, - resolve: resolveUser - }) - .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', - templateUrl: '/static/scripts/views/login.html', - title: 'Login', - controller: 'UserLoginCtrl' - }) - .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: 'BuildsCtrl' - }, - 'content': { - templateUrl: '/static/scripts/views/builds/index/content.html', - controller: 'BuildsCtrl' - } - } - }) - .state('app.repo_edit', { - url: '/:owner/:name/edit', - views: { - 'toolbar': { templateUrl: '/static/scripts/views/repos/toolbar.html' }, - 'content': { templateUrl: '/static/scripts/views/repos/edit.html' } - }, - controller: 'RepoEditCtrl', - resolve: resolveUser - }) - .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' }, - 'content': { templateUrl: '/static/scripts/views/builds/show/content.html' } - }, - controller: 'BuildCtrl', - resolve: resolveUser - }) - .state('app.build_step', { - url: '/:owner/:name/:number/:step', - views: { - 'toolbar': { templateUrl: '/static/scripts/views/builds/step/toolbar.html' }, - 'content': { templateUrl: '/static/scripts/views/builds/step/content.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', + templateUrl: '/static/scripts/views/login.html', + title: 'Login', + controller: 'UserLoginCtrl' + }) + .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: 'BuildsCtrl' + }, + 'content': { + templateUrl: '/static/scripts/views/builds/index/content.html', + controller: 'BuildsCtrl' + } + } + }) + .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'}, + 'content': {templateUrl: '/static/scripts/views/builds/show/content.html'} + }, + controller: 'BuildCtrl', + resolve: resolveUser + }) + .state('app.build_step', { + url: '/:owner/:name/:number/:step', + views: { + 'toolbar': {templateUrl: '/static/scripts/views/builds/step/toolbar.html'}, + 'content': {templateUrl: '/static/scripts/views/builds/step/content.html'} + }, + controller: 'BuildOutCtrl', + resolve: resolveUser + }); - // 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('$stateChangeStart', function () { - repos.unsubscribe(); - logs.unsubscribe(); - }); + $rootScope.$on('$stateChangeSuccess', function (event, current) { + if (current.title) { + document.title = current.title + ' · drone'; + } + }); + } - $rootScope.$on('$stateChangeSuccess', function (event, current, previous) { - if (current.title) { - document.title = current.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/layout.html b/cmd/drone-server/static/scripts/views/layout.html index 82fd25a6..6b2068f4 100644 --- a/cmd/drone-server/static/scripts/views/layout.html +++ b/cmd/drone-server/static/scripts/views/layout.html @@ -1,15 +1,15 @@
- - - help - - - supervisor_account - - - settings - - {{ "+"+user.login }} + + + 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.
-
- + +
+
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. +
+
+ diff --git a/cmd/drone-server/static/scripts/views/repos/edit.html b/cmd/drone-server/static/scripts/views/repos/edit.html index c0338a79..efa5b872 100644 --- a/cmd/drone-server/static/scripts/views/repos/edit.html +++ b/cmd/drone-server/static/scripts/views/repos/edit.html @@ -1,70 +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
- -
+
+

Settings

-
-

Admin settings

-
-
Trusted (Evelvate Privilege)
-
- - -
-
-
-
Timeout in minutes
-
- - {{ repo.timeout }} minutes -
-
-
+
+
Post Commit Hooks
+
+ + +
+
+
+
Pull Request Hooks
+
+ + +
+
+ +
Private Variables
+
+ Inject private variables into your build environment +
+ + +
Delete
+
Delete this repository and its build history
+ +
-
-

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
-
-
-
+
+

Admin settings

-
-

Public Key

-
- 
{{ repo.keypair.public }}
-
-
+
+
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/toolbar.html b/cmd/drone-server/static/scripts/views/repos/toolbar.html index 3430cfd6..9be485c7 100644 --- a/cmd/drone-server/static/scripts/views/repos/toolbar.html +++ b/cmd/drone-server/static/scripts/views/repos/toolbar.html @@ -1,10 +1,12 @@ -
- - {{ repo.owner }} / {{ repo.name }} +
+ + home + + {{ repo.owner }} / {{ repo.name }}
- - - + + +
\ No newline at end of file diff --git a/cmd/drone-server/static/scripts/views/users/content.html b/cmd/drone-server/static/scripts/views/users/content.html index 82b4051e..22529680 100644 --- a/cmd/drone-server/static/scripts/views/users/content.html +++ b/cmd/drone-server/static/scripts/views/users/content.html @@ -1,30 +1,36 @@
-
-
- - +
+ + + - -
+ +
-
-
-
- -
-
-

{{ user.login }} Admin

-

{{ user.email }}

- - -
-
-
+
+
+
+ +
+
+

{{ 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 index d9f4c8e9..1db4fb57 100644 --- a/cmd/drone-server/static/scripts/views/users/toolbar.html +++ b/cmd/drone-server/static/scripts/views/users/toolbar.html @@ -1,6 +1,6 @@ -
- - home - - Users +
+ + 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 8dc35319..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,258 +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 i { - 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.unstar, - .nav-item.star { - font-size:14px; - background:transparent; - line-height:20px; - } +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; +} - 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.search:before { - font-size: 22px; - content: '\f05f'; - opacity: 1 !important; - color: #2f2f2f; - } +.nav-item.search { + color: #2f2f2f; + opacity: 1 !important; + cursor: default; +} - .nav-item.search { - color: #2f2f2f; - opacity: 1 !important; - cursor: default; - } +.title { + font-weight: 400; + font-size: 16px; + color: rgba(0, 0, 0, 0.65); + letter-spacing: 0.2px; + line-height: 60px; +} - .title { - font-weight: 400; - font-size: 16px; - color: rgba(0,0,0,0.65); - letter-spacing: 0.2px; - line-height: 60px; - } +header .title { + flex: 1 1 auto; +} - header .title { - flex: 1 1 auto; - } +header .user { + text-align: right; + line-height: 70px; +} - header .user { - text-align: right; - line-height: 70px; - } +header .user img { + border-radius: 50%; + width: 34px; + height: 34px; + display: inline-block; + vertical-align: middle; + margin-right: 22px; + margin-left: 15px; +} - header .user img { - border-radius: 50%; - width: 34px; - height: 34px; - display: inline-block; - vertical-align: middle; - margin-right: 22px; - margin-left: 15px; - } +header .user span { + font-size: 16px; + color: rgba(255, 255, 255, 0.8); + display: inline-block; + vertical-align: middle; +} - header .user span { - font-size: 16px; - color: rgba(255, 255, 255, 0.8); - display: inline-block; - vertical-align: middle; - } +.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; +} - .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; - } +.logo { + margin-left: 0; +} - .logo { - margin-left: 0; - } +/* + .logo:hover { + opacity: 1; + } - /* - .logo:hover { - opacity: 1; - } + .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%); + } - .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%); - } + .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; + } + */ - .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; - } - */ +.material-icons.md-18 { + font-size: 18px; +} - .material-icons.md-18 { font-size: 18px; } - .material-icons.md-24 { font-size: 24px; } - .material-icons.md-36 { font-size: 36px; } - .material-icons.md-48 { font-size: 48px; } +.material-icons.md-24 { + font-size: 24px; +} - .menu-item { - margin-right: 0; - height: auto; - opacity: 0.65; - } +.material-icons.md-36 { + font-size: 36px; +} - .menu-item:hover { - opacity: 1; - } +.material-icons.md-48 { + font-size: 48px; +} - .menu-item i { - color: #2f2f2f; - } +.menu-item { + margin-right: 0; + height: auto; + opacity: 0.65; +} - img.menu-item { - border-radius: 50%; - height: 28px; - width: 28px; - margin: 18px 0 18px 7px; - display: block; - } +.menu-item:hover { + opacity: 1; +} - .menu-item { - font-size: 20px; - line-height: 20px; - padding: 10px 0; - } +.menu-item i { + color: #2f2f2f; +} - .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; - } +img.menu-item { + border-radius: 50%; + height: 28px; + width: 28px; + margin: 18px 0 18px 7px; + display: block; +} - .subnav { - background:rgba(255,255,255,0.8); - padding:0px 25px; - height:70px; - position:relative; - } +.menu-item { + font-size: 20px; + line-height: 20px; + padding: 10px 0; +} - .subnav .icon { - display:inline-block; - display: block; - line-height:70px; - text-decoration:none; - font-size:22px; - color:#999; - margin-left:10px; - } +.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 .icon.icon-settings:before { - content: "\f060"; - font-family: "Material-Design-Iconic-Font"; - } +.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; +} - .subnav .menu { - position: absolute; - top: 0px; - right: 25px; - } /* .breadcrumb { padding: 0; @@ -1059,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 { @@ -1174,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 { @@ -1185,108 +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 i { - /* line-height:56px; */ - color: rgba(255,255,255,0.749); - /* font-size:24px; */ + line-height:56px; + 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 { @@ -1308,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 { @@ -1326,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; } @@ -1335,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; } @@ -1397,8 +1397,9 @@ section a.build-row:after { } .success { - background:#66BB6A; + background: #66BB6A; } + .error, .killed, .failure { @@ -1414,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; @@ -1484,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; } @@ -1498,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 { @@ -1540,142 +1544,152 @@ 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; + 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-admin.btn-checked, .btn-admin:hover { background: #4CAF50; @@ -1687,11 +1701,13 @@ input:checked + .switch:active::before { right: 0px; top: 12px; } + .row-user .btn-remove { position: absolute; right: 0px; top: 40px; } + .row-user .btn-admin { position: absolute; right: 40px; @@ -1699,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;