updated css styles & angular

This commit is contained in:
Brad Rydzewski 2014-07-09 00:46:15 -07:00
parent c6b880c272
commit c8590391e9
25 changed files with 2306 additions and 4125 deletions

View file

@ -6,8 +6,6 @@ env:
- PATH=$PATH:$GOROOT/bin:$GOPATH/bin
script:
- sudo apt-get -y install libsqlite3-dev sqlite3 1> /dev/null 2> /dev/null
- sudo npm install -g uglify-js
- sudo npm install -g less
- make deps
- make build
- make test

View file

@ -30,7 +30,7 @@ clean:
#@find . -name '*.css' -delete
@rm -r debian/drone/usr/local/bin debian/drone.deb server/server client/client server/template/html
dpkg: lessc rice build deb
dpkg: rice build deb
# embeds content in go source code so that it is compiled
# and packaged inside the go binary file.

View file

@ -51,6 +51,7 @@ func init() {
log.SetSuffix("\033[0m\n")
log.SetOutput(os.Stdout)
log.SetPriority(log.LOG_NOTICE)
docker.Logging = false
}
func main() {
@ -144,6 +145,11 @@ func run(path string) {
return
}
// remove deploy & publish sections
// for now, until I fix bug
s.Publish = nil
s.Deploy = nil
// get the repository root directory
dir := filepath.Dir(path)
code := repo.Repo{

View file

@ -1,22 +1,28 @@
<!doctype html>
<html ng-app="app">
<head>
<meta charset="utf-8" />
<meta charset="utf-8">
<meta name="author" content="Brad Rydzewski" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
<link rel="shortcut icon" href="/favicon.png" />
<link rel="stylesheet" href="//yui.yahooapis.com/pure/0.4.2/pure-min.css" />
<link rel="shortcut icon" href="/favicon.ico" />
<link rel="stylesheet" href="//yui.yahooapis.com/pure/0.5.0/pure-min.css" />
<link rel="stylesheet" href="//yui.yahooapis.com/pure/0.5.0/grids-responsive-min.css" />
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" />
<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Open+Sans" />
<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Orbitron" />
<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Droid+Sans+Mono" />
<link rel="stylesheet" href="/styles/drone.css" />
</head>
<body ng-controller="MainCtrl">
<div ng-include src=" '/views/header.html' "></div>
<div ng-view></div>
<body ng-controller="MainCtrl" ng-cloak>
<div id="container">
<input id="drawer-checkbox" type="checkbox" ng-if="user != undefined" />
<header id="header" ng-include src=" '/views/header.html' "></header>
<aside id="drawer" ng-include src=" '/views/drawer.html' "></aside>
<div ng-view id="body"></div>
</div>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.8/angular.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.8/angular-route.min.js"></script>

View file

@ -1,3 +1 @@
# robotstxt.org
User-agent: *

View file

@ -252,6 +252,7 @@ app.controller("RepoController", function($scope, $http, $routeParams, user, rep
$scope.repo = repo;
// load the repo branch list
/*
$http({method: 'GET', url: '/v1/repos/'+repo.host+'/'+repo.owner+"/"+repo.name+"/branches"}).
success(function(data, status, headers, config) {
$scope.branches = (typeof data==='string')?[]:data;
@ -259,6 +260,7 @@ app.controller("RepoController", function($scope, $http, $routeParams, user, rep
error(function(data, status, headers, config) {
console.log(data);
});
*/
// load the repo commit feed
$http({method: 'GET', url: '/v1/repos/'+repo.host+'/'+repo.owner+"/"+repo.name+"/feed"}).
@ -379,7 +381,7 @@ app.controller("CommitController", function($scope, $http, $routeParams, stdout,
});
// load the repo build stdout
$http({method: 'GET', url: '/v1/repos/'+remote+'/'+owner+"/"+name+"/branches/"+branch+"/commits/"+commit+"/builds/1/console"}).
$http({method: 'GET', url: '/v1/repos/'+remote+'/'+owner+"/"+name+"/branches/"+branch+"/commits/"+commit+"/console"}).
success(function(data, status, headers, config) {
$scope.console = data;
}).

View file

@ -11,7 +11,15 @@ angular.module('app').controller("HomeController", function($scope, $http, feed,
$http({method: 'GET', url: '/v1/user/feed'}).
success(function(data, status, headers, config) {
$scope.feed = (typeof data==='string')?[]:data;
$scope.feed = (typeof data==='string')?[]:data; //.splice(0, 3);
}).
error(function(data, status, headers, config) {
console.log(data);
});
$http({method: 'GET', url: '/v1/user/repos'}).
success(function(data, status, headers, config) {
$scope.repos = (typeof data==='string')?[]:data;
}).
error(function(data, status, headers, config) {
console.log(data);

View file

@ -2,7 +2,7 @@
angular.module('app').filter('gravatar', function() {
return function(gravatar) {
return "https://secure.gravatar.com/avatar/"+gravatar+"?s=32&d=mm"
return "https://secure.gravatar.com/avatar/"+gravatar+"?s=48&d=mm"
}
});
@ -59,4 +59,18 @@ angular.module('app').filter('badgeMarkup', function() {
var path = repo.host+'/'+repo.owner+'/'+repo.name;
return '<a href="'+scheme+'//'+host+'/'+path+'"><img src="'+scheme+'//'+host+'/v1/badge/'+path+'/status.svg?branch=master" /></a>'
}
});
angular.module('app').filter('unique', function() {
return function(input, key) {
var unique = {};
var uniqueList = [];
for(var i = 0; i < input.length; i++){
if(typeof unique[input[i][key]] == "undefined"){
unique[input[i][key]] = "";
uniqueList.push(input[i]);
}
}
return uniqueList;
};
});

171
server/app/styles/base.less Normal file
View file

@ -0,0 +1,171 @@
// Base less file with helper mixins
.hidden {
display: none !important;
visibility: hidden;
}
.invisible {
visibility: hidden;
}
.clearfix {
*zoom: 1;
&:before,
&:after { content: ""; display: table; }
&:after { clear: both; }
}
.nowrap {
white-space:nowrap;
}
.opacity(@num) {
opacity:@num;
@num2:@num*100;
filter:alpha(opacity=@num2);
}
.grayscale(@num:1) {
-webkit-filter: grayscale(@num);
-moz-filter: grayscale(@num);
-ms-filter: grayscale(@num);
-o-filter: grayscale(@num);
filter: grayscale(@num);
}
.transition(@transString: 0) when not (@transString = 0) {
-webkit-transition: @transString;
-moz-transition: @transString;
-ms-transition: @transString;
-o-transition: @transString;
transition: @transString;
}
.gradient(@c1, @c2, @direction:top){
background:@c2;
background-image: -webkit-linear-gradient(@direction, @c1, @c2);
background-image: -moz-linear-gradient(@direction, @c1, @c2);
background-image: -ms-linear-gradient(@direction, @c1, @c2);
background-image: -o-linear-gradient(@direction, @c1, @c2);
background-image: linear-gradient(@direction, @c1, @c2);
}
.gradient2(@c1, @c2, @c3, @direction:top){
background:@c3;
background-image: -webkit-linear-gradient(@direction, @c1, @c2, @c3);
background-image: -moz-linear-gradient(@direction, @c1, @c2, @c3);
background-image: -ms-linear-gradient(@direction, @c1, @c2, @c3);
background-image: -o-linear-gradient(@direction, @c1, @c2, @c3);
background-image: linear-gradient(@direction, @c1, @c2, @c3);
}
.rotate(@deg){
-webkit-transform:rotate(@deg);
-moz-transform:rotate(@deg);
-ms-transform:rotate(@deg);
-o-transform:rotate(@deg);
transform:rotate(@deg);
}
.origin(@o){
-webkit-transform-origin:@o;
-moz-transform-origin:@o;
-ms-transform-origin:@o;
-o-transform-origin:@o;
transform-origin:@o;
}
.filter(@param){
-webkit-filter:@param;
-moz-filter:@param;
-ms-filter:@param;
-o-filter:@param;
filter:@param;
}
.animation(@a){
-webkit-animation:@a;
-moz-animation:@a;
-ms-animation:@a;
-o-animation:@a;
animation:@a;
}
.perspective(@a){
-webkit-perspective:@a;
-moz-perspective:@a;
-ms-perspective:@a;
-o-perspective:@a;
perspective:@a;
}
.border_box {
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
-ms-box-sizing:border-box;
-o-box-sizing:border-box;
box-sizing:border-box;
}
.transform(@param){
-webkit-transform:@param;
-moz-transform:@param;
-ms-transform:@param;
-o-transform:@param;
transform:@param;
}
.fix3d {
-webkit-transform:translate3D(0, 0, 0); //fix 3d flashing
}
.border_box {
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
-ms-box-sizing:border-box;
-o-box-sizing:border-box;
box-sizing:border-box;
}
.invert {
-webkit-filter:invert(100%);
-moz-filter:invert(100%);
-ms-filter:invert(100%);
-o-filter:invert(100%);
filter:invert(100%);
}
.animation(@a){
-webkit-animation:@a;
-moz-animation:@a;
-ms-animation:@a;
-o-animation:@a;
animation:@a;
}
.animation_delay(@a){
-webkit-animation-delay:@a;
-moz-animation-delay:@a;
-ms-animation-delay:@a;
-o-animation-delay:@a;
animation-delay:@a;
}
.transition_delay(@a){
-webkit-transition-delay:@a;
-moz-transition-delay:@a;
-ms-transition-delay:@a;
-o-transition-delay:@a;
transition-delay:@a;
}
.columns(@a){
-webkit-columns:@a;
-moz-columns:@a;
-ms-columns:@a;
-o-columns:@a;
columns:@a;
}

File diff suppressed because it is too large Load diff

View file

@ -1,59 +1,924 @@
@import "reset.less";
@import "base.less";
//@dark
// Standard Colors
//@blue
//@green
//@yellow
//@red
@link: #68c598;
@link2: #4ab1ce;
@cneg: #e97041;
@cok: #68c598;
@c0: #262626;
@c1: #45494b;
@c2: #849299;
// Standard Fonts
@logo: 'Orbitron';
@sans: 'Open Sans';
html {
height: 100%;
}
body {
font-family: @sans;
font-weight: normal;
margin:0px;
color: @c0;
background: #fff;
font-size: 13px;
line-height: 1.3;
-webkit-font-smoothing: antialiased;
height: 100%;
position: relative;
}
// The ngCloak directive is used to prevent the Angular html template
// from being briefly displayed by the browser in its raw (uncompiled)
// form while the application is loading.
[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {
display: none;
}
#container {
.border_box;
padding-top: 55px;
position: relative;
min-width: 100%;
min-height: 100%;
display: flex;
flex-direction: row-reverse;
justify-content: space-between;
}
#header {
background: @c0;
position: fixed;
height: 55px;
top: 0;
left: 0;
right: 0;
z-index: 9;
color: #fff;
font-size: 15px;
line-height: 55px;
text-align: center;
.brand {
display: inline-block;
font-family: @logo;
font-size: 26px;
line-height: 55px;
text-decoration: none;
text-transform: uppercase;
color: #CCC;
}
.burger {
position: absolute;
top:0px;
left: 31px;
height:55px;
font-size: 22px;
color: #CCC;
i.fa {
line-height:55px;
}
}
.login,
.user {
position: absolute;
right: 0px;
top: 0px;
bottom: 0px;
white-space: nowrap;
margin-right: 20px;
display: inline-block;
a {
color: #CCC;
text-decoration: none;
text-transform: uppercase;
line-height: 55px;
font-size: 15px;
img {
border-radius: 50%;
float: right;
width: 32px;
height: 32px;
margin-top: 10px;
margin-left: 20px;
}
}
}
}
#body {
.border_box;
display: flex;
min-width:100%;
flex-direction: row-reverse;
justify-content: space-between;
article {
width:100%;
}
}
#drawer {
visibility: hidden;
position:fixed;
z-index:10;
left:0px;
top:55px;
bottom:0px;
width:255px;
background:#363636;
-webkit-transition: all 0.2s;
-moz-transition: all 0.2s;
transition: all 0.2s;
-webkit-transform: translate3d(-100%, 0, 0);
-moz-transform: translate3d(0, 0, 0);
transform: translate3d(-100%, 0, 0);
ul {
margin-top:20px;
a {
color:#CCC;
text-decoration:none;
padding:10px 0px 10px 30px;
display:block;
font-size:14px;
i {
margin-right:10px;
font-size:16px;
opacity:0.3;
min-width:16px;
display:inline-block;
}
}
span.divider {
display:block;
height:1px;
border-top:1px solid rgba(255,255,255,0.1);
margin-top:15px;
margin-bottom:15px;
}
}
.signout {
position:absolute;
bottom:20px;
right:30px;
color:#CCC;
font-size:16px;
text-transform:uppercase;
text-decoration:none;
i {
margin-left:20px;
}
}
}
#drawer-checkbox {
position:fixed;
top:7px;
left:10px;
width:45px;
height:40px;
display:block;
z-index:9999;
opacity:0;
background:none;
border:none;
cursor:pointer;
&:checked ~ #drawer {
visibility: visible;
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
&:checked ~ #drawer {
visibility: visible;
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
// override the drawers icon to show
// a close symbol, so the user knows
// exactly how to minimize.
&:checked ~ #header {
.fa-bars:before {
content: "\f00d";
color:#999;
}
}
}
nav {
padding-left:30px;
background:#FFF;
min-height: 77px;
max-height: 77px;
line-height: 77px;
font-family: @sans;
font-size: 22px;
white-space: nowrap;
color: rgba(0, 0, 0, 0.7);
border-bottom:1px solid #EEE;
position:relative;
z-index:2;
a {
text-decoration:none;
color: rgba(0, 0, 0, 0.7);
&:last-child {
color: #000;
}
span.fa {
margin-right:20px;
}
}
}
@supports (position:sticky) {
nav {
position: sticky;
top:55px;
}
}
@supports (position:-moz-sticky) {
nav {
position: -moz-sticky;
top:55px;
}
}
@supports (position:-webkit-sticky) {
nav {
position: -webkit-sticky;
top:55px;
}
}
.cards {
//padding:20px 0px 20px 20px;
.card {
.border_box;
padding-right:20px;
padding-bottom:20px;
text-decoration:none;
position:relative;
color:@c0;
font-family:@sans;
.l-box {
background:#FFF;
border:1px solid #DDD;
position:relative;
padding:30px 20px;
height:200px;
.transition(.4s border linear);
.border_box;
//box-shadow: inset 0 0 0 1px #dfdfdf,
// inset 0 0 0 2px #fff,
// 2px 2px 0 transparent;
&:hover {
border:1px solid @c0;
}
em {
position:absolute;
bottom:20px;
right:20px;
left:20px;
height:30px;
line-height:30px;
vertical-align:middle;
//text-transform:uppercase;
text-align:right;
padding-right:45px;
//border-top:1px solid #DDD;
padding-top:20px;
font-size:14px;
color:#666;
}
img {
position:absolute;
right:20px;
bottom:20px;
border-radius:50%;
width:30px;
height:30px;
}
.timeago {
position:absolute;
bottom:85px;
left:25px;
right:25px;
text-align:right;
font-size:14px;
color: #849299;
display:none;
}
}
h2 {
font-size:18px;
font-weight:normal;
min-height:52px;
max-height:52px;
height:52px;
text-align:center;
vertical-align:middle;
line-height:26px;
color:@c0;
.separator {
margin:0px 0px;
}
text-overflow: ellipsis;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
display: -webkit-box;
overflow: hidden;
}
&.card-inactive {
.l-box {
position:relative;
box-shadow: none;
background: @link2;
color:#FFF;
height:180px;
border-color:@link2;
&:hover {
background: darken(@link2,10%);
&:before { background:darken(@link2,10%); }
}
}
h2 {
padding-top:10px;
color:#FFF;
}
em {
position:absolute;
border-top:1px solid rgba(255,255,255,.5);
bottom: 15px;
font-size: 13px;
left: 25px;
right: 25px;
line-height:1.3;
padding:0px;
padding-top:20px;
text-align:center;
display:block;
height:30px;
text-transform:uppercase;
color:#FFF;
}
}
&.card-browse-inactive,
&.card-browse {
text-align:center;
color: @link2;
font-size:16px;
font-weight:bold;
text-transform:uppercase;
.l-box {
padding-top:75px;
background:#FFF;
height:180px;
}
}
&.card-browse-inactive {
.l-box {
box-shadow:none;
}
}
}
.progressContainer {
height:5px;
background-color: @cneg;
position: absolute;
bottom:65px;
left:20px;
right:20px;
.activeProgress, .secondaryProgress {
position: absolute;
top: 0;
left: 0;
bottom: 0;
}
.activeProgress {
background-color: @cok;
}
.secondaryProgress {
background-color: @cok;
}
}
}
#commitpage {
max-width:1180px;
margin:0px auto;
margin-bottom:50px;
margin-top:70px;
section {
margin-top:30px;
.commits {
border: 1px solid #DDD;
border-bottom: 0px solid #DDD;
.border_box;
a {
padding:20px 45px;
display:block;
border-bottom: 1px solid #dadcdd;
color:#262626;
text-decoration:none;
position:relative;
.border_box;
h2 {
font-family: @sans;
font-weight: bold;
font-size: 16px;
margin-bottom:5px;
}
img {
border-radius:50%;
margin-right:10px;
float:left;
display:none;
}
p {
color: #363636;
line-height:22px;
vertical-align:middle;
}
&[data-status]:before {
background: transparent;
width: 7px;
min-width:7px;
max-width:7px;
position: absolute;
left: -1px;
top: 0px;
bottom: 0px;
text-align: left;
color: #fff;
font-size: 20px;
line-height: 50px;
font-family: @sans;
padding-left:2px;
overflow:hidden;
content: " ";
}
&[data-result="Killed"],
&[data-status="Error"],
&[data-status="Failure"] {
background: #fff9f5;
&:before {
background: @cneg;
content: "!";
}
}
&[data-status="Success"]:before {
background: @cok;
}
}
}
}
.date {
span {
display:inline-block;
text-align:right;
font-size:14px;
width:100%;
padding-right:30px;
margin-top:15px;
.border_box;
}
}
}
#loginpage {
.pure-g {
padding: 30px;
border: 1px solid #DDD;
max-width:400px;
margin:0px auto;
margin-top:50px;
.border_box;
a {
display:block;
background:@c1;
color:#fff;
padding:14px 20px;
font-size:15px;
border-radius:5px;
text-decoration:none;
&:hover {
background:@c0;
}
}
[class*="fa-"] {
float:left;
font-size:20px;
position:relative;
top:-3px;
left:-3px;
padding-right:10px;
min-width:27px;
min-height:20px;
}
.pure-u-1 a {
margin-bottom:10px;
}
.pure-u-1:last-child a {
margin-bottom:0px;
}
}
}
#homepage {
width:100%;
background:#f2f5f8;
section {
padding:40px 0px 20px 0px;
border-bottom:1px solid #EEE;
div {
max-width:1180px;
margin:0px auto;
}
&:nth-child(2) {
background:#FFF;
padding:40px 0px 20px 0px;
}
&:nth-child(3) {
border-bottom:0px solid #EEE;
}
}
}
#repospage {
width:100%;
section {
max-width:1180px;
margin:0px auto;
margin-top:30px;
}
}
#userspage {
width:100%;
section {
border-bottom:1px solid #eee;
max-width:768px;
margin:0px auto;
margin-top:30px;
.user {
.transition(.4s border linear);
border:1px solid #eee;
border-bottom:1px solid #fff;
text-decoration:none;
&:last-child {
border-bottom:1px solid #fff;
}
&> div {
.border_box;
padding:20px 25px;
padding-right:0px;
}
img {
border-radius:50%;
width:48px;
height:48px;
}
h4 {
font-size:24px;
margin-bottom:2px;
color:@c0;
small {
font-size: 16px;
color:#666;
margin-left:5px;
}
}
span {
color:#666;
font-size:14px;
}
&:hover {
border:1px solid @c0;
}
}
}
}
#accountpage {
width:100%;
section {
position:relative;
max-width:768px;
margin:0px auto;
margin-top:30px;
border:1px solid #eee;
&.profile {
&> div:first-child {
.border_box;
padding:20px;
text-align:center;
}
&> div:last-child {
.border_box;
padding:20px;
}
.fullname {
font-size:14px;
margin-bottom:2px;
color:#666;
display:block;
}
.email {
font-size:14px;
color:#666;
display:block;
}
}
&.token {
&> div:first-child {
div {
.border_box;
text-align:center;
padding:20px;
color:#666;
font-size:16px;
line-height:22px;
}
i {
margin-right:7px;
}
}
&> div:last-child {
.border_box;
padding:20px;
color:#666;
line-height:22px;
font-size:14px;
}
}
h4 {
margin:10px 0px;
font-size:22px;
}
img {
width:64px;
height:64px;
border-radius:50%;
}
.notifications {
position:absolute;
top:0px;
right:0px;
margin:20px;
}
}
}
#repopage {
width:100%;
background:#f2f5f8;
section {
padding:40px 0px 20px 0px;
border-bottom:1px solid #EEE;
&> div {
max-width:1180px;
margin:0px auto;
}
&:nth-child(even) {
background:#FFF;
}
&:first-child {
background:#FFF;
}
.card[data-status="Success"] {
&:nth-child(2) .l-box {
border-color: @cok;
}
em {
border-top:5px solid @cok;
}
}
.card[data-status="Killed"],
.card[data-status="Failure"],
.card[data-status="Error"] {
&:nth-child(2) .l-box {
border-color: @cneg;
}
em {
border-top:5px solid @cneg;
}
}
.card[data-status="Started"] em:before,
.card[data-status="Pending"] em:before {
-webkit-animation: progress 1s linear infinite;
-moz-animation: progress 1s linear infinite;
animation: progress 1s linear infinite;
position: absolute;
content: ' ';
height: 5px;
top: -5px;
left: 0px;
right: 0px;
margin: 0px;
background: #fee172;
background-image: -webkit-linear-gradient(-45deg, rgba(255, 255, 255, 0.55) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.55) 50%, rgba(255, 255, 255, 0.55) 75%, transparent 75%, transparent);
background-image: linear-gradient(-45deg, rgba(255, 255, 255, 0.55) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.55) 50%, rgba(255, 255, 255, 0.55) 75%, transparent 75%, transparent);
background-repeat: repeat-x;
background-size: 30px 30px;
}
.l-box:after {
font-family: 'FontAwesome';
content: "\f104";
content: "\f0d9";
position: absolute;
right: -20px;
width: 20px;
text-align: center;
color: rgba(0,0,0,0.1);
font-size: 22px;
}
.card:last-child .l-box:after {
content:'';
}
}
}
@-webkit-keyframes progress {
to {
background-position: 30px 0;
}
}
@-moz-keyframes progress {
to {
background-position: 30px 0;
}
}
@keyframes progress {
to {
background-position: 30px 0;
}
}
// pure css styles
@import "vendor/font-awesome.less";
@import "vendor/pure-base.less";
@import "vendor/pure-grids.less";
@import "vendor/pure-forms.less";
@import "vendor/pure-menus.less";
// base variables, mixins, etc
@import "base/variables.less";
@import "base/overflow.less";
@import "base/clearfix.less";
#sidebar {
width: 240px;
min-width: 240px;
position: relative;
display: block;
z-index: 5;
padding: 30px;
.border_box;
// general overrides and resets
@import "general/resets.less";
@import "general/angular.less";
//@import "general/scrollbars.less";
@import "general/forms.less";
//border-left:1px solid #cdcece;
//box-shadow:-3px 0 0 rgba(0,0,0,.05);
// page layouts
//@import "layout/layout.less";
h1 {font-size:28px; font-weight:300;}
h2 {font-size:22px; font-weight:300; margin-bottom:20px;}
dl {padding-top:23px; border-top:1px solid #ddd; margin-top:5px;
// modules
@import "modules/header.less";
@import "modules/article.less";
@import "modules/section.less";
&:first-child {padding-top:0; border-top:none; margin-top:0;}
@import "modules/list-activity.less";
@import "modules/list-repos.less";
@import "modules/list-commits.less";
@import "modules/list-users.less";
@import "modules/user-account.less";
@import "modules/form-search.less";
dt {font-size:12px; color:@c2; text-transform:uppercase; padding:3px 0;}
dd {font-size:14px; padding:3px 0 20px;}
a {text-transform:none;}
small {font-size:12px;}
.large {font-size:18px; padding-bottom:5px;}
.time {float:right; margin-left:8px;}
.photo {margin-right:4px;}
.negative {color:@cneg;}
.photoline {display:inline-block; position:relative; top:-10px; font-weight:bold;}
.small {padding-bottom:5px; font-weight:bold; font-size:12px;}
}
@import "modules/alert.less";
@import "modules/build.less";
@import "modules/authors.less";
@import "modules/branches.less";
@import "modules/stdout.less";
@import "modules/switch.less";
.status {
border:1px solid transparent;
display:block;
text-align:center;
padding:5px 20px;
border-radius:50px;
text-transform:uppercase;
margin:0 -5px 10px;
font-weight:bold;
&:before {float:left; margin-left:-5px;}
&.status_ok {
color:@cok; border-color:@cok;
&:before {content:"\f00c"; font-family:'FontAwesome';}
}
&.status_error {
color:@cneg; border-color:@cneg;
&:before {content:"!";}
}
}
//@import "alerts/alerts.less";
.result {
background:@link2;
background:@cok;
color:#fff;
margin:-30px -30px -6px;
padding:30px;
position:relative;
.status {
color:#fff;
background:rgba(255,255,255,.2);
&:before {
content:"\f00c";
font-family:'FontAwesome';
}
}
dl {
dd {
padding:7px 0;
strong { font-size:16px; }
}
}
//@import "grids/grids.less";
//@import "buttons/buttons.less";
//@import "buttons/custom.less";
//@import "forms/forms.less";
//@import "forms/custom.less";
//@import "menus/menus.less";
//@import "menus/custom.less";
&[data-result="Killed"],
&[data-result="Failure"],
&[data-result="Error"] {
background: @cneg;
.status:before {
content:"!";
}
}
}
}
#main {
flex-grow: 2;
&.output {
background: #525252;
pre {
margin:0px auto;
padding:30px;
color:#FFF;
font-family:'Droid Sans Mono';
font-size:13px;
white-space: pre-wrap;
overflow: hidden;
}
}
}

File diff suppressed because one or more lines are too long

View file

@ -0,0 +1,17 @@
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
list-style:none;
}

View file

@ -1,66 +1,41 @@
<h1>User Account</h1>
<article id="accountpage">
<nav>
<a href="/"><span class="fa fa-th"></span></a>
<a href="/account/profile">my account</a>
</nav>
<div class="row">
<!-- summary column -->
<div class="col-xs-6 col-sm-3">
What to show here?
</div>
<!-- primary column -->
<div class="col-xs-12 col-sm-9">
<div>
<label>Remote</label>
<span>{{ user.remote }}</span>
<section class="pure-g profile">
<div class="pure-u-1-6">
<div>
<a href="https://gravatar.com/" target="_blank">
<img ng-src="https://gravatar.com/avatar/{{ user.gravatar }}?d=identicon" />
</a>
</div>
</div>
<div class="pure-u-5-6">
<div>
<h4>bradrydzewski</h4>
<span class="fullname">Brad Rydzewski</span>
<span class="email">brad.rydzewski@gmail.com</span>
</div>
<div>
<label>Login</label>
<span>{{ user.login }}</span>
<!-- button to toggle HTML5 desktop notifications for build events -->
<div ng-if="notifications.supported && !notifications.granted" class="notifications">
<button ng-click="enableNotifications()" class="pure-button">Enable Notifications</button>
</div>
</div>
</section>
<div>
<label>Gravatar</label>
<img class="gravatar" ng-src="https://secure.gravatar.com/avatar/{{ user.gravatar }}?s=32&d=mm" />
<section class="pure-g token">
<div class="pure-u-1-6">
<div>
<i class="fa fa-key"></i> api key
</div>
</div>
<div>
<label>Email</label>
<input type="text" ng-model="userTemp.email" />
<div class="pure-u-5-6">
<div>
{{ user.token }}
</div>
</div>
<div>
<label>Full Name</label>
<input type="text" ng-model="userTemp.name" />
</div>
<div>
<label>Created</label>
<span>{{ user.created_at | fromNow }}</span>
</div>
<div>
<label>Updated</label>
<span>{{ user.updated_at | fromNow }}</span>
</div>
<div>
<label>Synced</label>
<span>{{ user.synced_at | fromNow }}</span>
</div>
<div>
{{failure}}
</div>
<div ng-if="notifications.supported && !notifications.granted">
<button ng-click="enableNotifications()">Enable Notifications</button>
</div>
<div>
<button ng-click="save()">Save</button>
<button ng-click="cancel()">Cancel</button>
</div>
</div>
</div>
</section>
</article>

View file

@ -1,18 +1,34 @@
<h1>{{ repo.name }}</h1>
<a href="/{{ repo.remote }}/{{ repo.owner}}/{{ repo.name }}">Back</a>
<a href="/{{ repo.remote }}/{{ repo.owner}}/{{ repo.name }}/settings">Settings</a>
<div class="row">
<div class="col-xs-6 col-sm-3">
<span>Commit</span>
<span>{{ commit.sha }}</span>
<br/>
<span>Status</span>
<span>{{ commit.status }}</span>
<aside id="sidebar">
<div class="result" data-result="{{ commit.status }}">
<dl>
<dd><span class="status">{{ commit.status }}</span></dd>
<dd><strong>{{ commit.message }}</strong></dd>
</dl>
</div>
<dl>
<dd><h1>3.5 ms</h1></dd>
</dl>
<dl>
<dd class="large"><strong>commit <u>{{ commit.sha | shortHash}}</u> to <u>{{ commit.branch}}</u> branch</strong></dd>
<dd ng-if="commit.finished_at != 0">{{ commit.finished_at | fromNow }}</dd>
<dd ng-if="commit.finished_at == 0 && commit.started_at != 0">Started {{ commit.started_at | fromNow }}</dd>
<dd ng-if="commit.finished_at == 0 && commit.started_at == 0">Created {{ commit.created_at}}</dd>
</dl>
</aside>
<div id="main" class="output">
<div id="main" class="output" data-result="Failure">
<nav>
<a href="/"><span class="fa fa-th"></span></a>
<span>{{ repo.owner }}</span>
<span>/</span>
<a href="/{{ repo.host }}/{{ repo.owner }}/{{ repo.name }}">{{ repo.name }}</a>
<span>/</span>
<a href="#">{{ commit.sha | shortHash}}</a>
</nav>
<!-- primary column -->
<div class="col-xs-12 col-sm-9">
<pre>{{ console }}</pre>
</div>
</div>

View file

@ -0,0 +1,11 @@
<div onclick="document.getElementById('drawer-checkbox').checked=false;">
<ul>
<li><a href="/"><i class="fa fa-dashboard"></i> Dashboard</a></li>
<li><a href="/account/repos"><i class="fa fa-list"></i> Repositories</a></li>
<li><a href="/account/profile"><i class="fa fa-user"></i> Account</a></li>
<li ng-if="user.admin == true"><span class="divider"></span></li>
<li ng-if="user.admin == true"><a href="/admin/users"><i class="fa fa-users"></i> Users</a></li>
<li ng-if="user.admin == true"><a href="/admin/settings"><i class="fa fa-cog"></i> Settings</a></li>
</ul>
<a href="/logout" class="signout" target="_self">Signout <i class="fa fa-sign-out"></i></a>
</div>

View file

@ -1,12 +1,16 @@
<table border="1">
<tr ng-if="user != undefined">
<td><a href="/">Home</a></td>
<td><a href="/account/profile">{{ user.login }}</a></td>
<td><img ng-src="{{ user.gravatar | gravatar }}" /></td>
</tr>
<tr ng-if="user == undefined">
<td>
<a href="/login">Login</a>
</td>
</tr>
</table>
<a class="burger" href="/" ng-if="user != undefined">
<i class="fa fa-bars"></i>
</a>
<a class="brand" href="/">Drone</a>
<div class="user" ng-if="user != undefined">
<a href="/account/profile">
<img class="avatar" ng-src="{{ user.gravatar | gravatar }}" />
<span class="username">{{ user.login }}</span>
</a>
</div>
<div class="user" ng-if="user == undefined">
<a href="/login">Login</a>
</div>

View file

@ -1,51 +1,33 @@
<h1>Dashboard</h1>
<article id="homepage">
<nav>
<a href="/"><span class="fa fa-th"></span></a>
<a href="/">dashboard</a>
</nav>
<div class="row">
<section>
<div class="pure-g cards">
<a class="pure-u-1 pure-u-md-1-2 pure-u-lg-1-4 pure-u-xl-1-4 card card" href="/{{ repo | fullPath }}" ng-repeat="repo in repos | filter: { active: true } | limitTo:4">
<div class="l-box">
<h2>{{ repo.owner }} <span class="separator">/</span> {{ repo.name }}</h2>
</div>
</a>
</div>
</section>
<!-- primary column -->
<div class="col-xs-12 col-sm-9">
<table class="table table-bordered">
<tr>
<th>Name</th>
<th>Status</th>
<th>Branch</th>
<th>Sha</th>
<th>PR</th>
<th colspan=2>Author</th>
<th>Message</th>
<th>Started</th>
<th>Finished</th>
</tr>
<tr ng-repeat="commit in feed">
<td>
<a href="/{{ commit | fullPath }}">
<span>{{ commit.owner }}</span>
<span>/</span>
<span>{{ commit.name }}</span>
</a>
</td>
<td>
<a href="/{{ commit | fullPath }}/{{ commit.branch }}/{{ commit.sha }}">
<span>{{ commit.status }}</span>
</a>
</td>
<td>
<a href="/{{ commit | fullPath }}/{{ commit.branch }}">
<span>{{ commit.branch }}</span>
</a>
</td>
<td>
<a href="/{{ commit | fullPath }}/{{ commit.branch }}/{{ commit.sha }}">
<span>{{ commit.sha | shortHash }}</span>
</a>
</td>
<td>{{ commit.pull_request }}</td>
<td>{{ commit.author }}</td>
<td><img class="gravatar" ng-src="{{ commit.gravatar | gravatar }}" /></td>
<td>{{ commit.message }}</td>
<td>{{ commit.started_at | fromNow }}</td>
<td>{{ commit.finished_at | fromNow }}</td>
</tr>
</table>
</div>
</div>
<section>
<div class="pure-g cards">
<a class="pure-u-1 pure-u-md-1-2 pure-u-lg-1-4 pure-u-xl-1-4 card card-inactive" href="/{{ repo | fullPath }}" ng-repeat="repo in repos | filter: { active: false } | limitTo:3">
<div class="l-box">
<h2>{{ repo.owner }} <span class="separator">/</span> {{ repo.name }}</h2>
<em><span class="fa fa-plus"></span> Activate</em>
</div>
</a>
<a class="pure-u-1 pure-u-md-1-2 pure-u-lg-1-4 pure-u-xl-1-4 card card-browse-inactive" href="/account/repos">
<div class="l-box">
<span>Browse All</span><br>
<span class="fa fa-long-arrow-down"></span>
</div>
</a>
</div>
</section>
</div>

View file

@ -1,17 +1,29 @@
<h1>Login</h1>
<div class="pure-u-1">
<a href="/login/github.com" target="_self">GitHub</a>
</div>
<div class="pure-u-1">
<a href="/login/enterprise.github.com" target="_self">GitHub Enterprise</a>
</div>
<div class="pure-u-1">
<a href="/login/bitbucket.org" target="_self">Bitbucket</a>
</div>
<div class="pure-u-1">
<a href="/login/stash.atlassian.com" target="_self">Stash</a>
</div>
<div class="pure-u-1">
<a href="/login/gitlab.com" target="_self">GitLab</a>
</div>
<article id="loginpage">
<div class="pure-g">
<div class="pure-u-1">
<a href="/login/github.com" target="_self">
<i class="fa fa fa-github-square"></i> GitHub
</a>
</div>
<div class="pure-u-1">
<a href="/login/enterprise.github.com" target="_self">
<i class="fa fa fa-github-square"></i> GitHub Enterprise
</a>
</div>
<div class="pure-u-1">
<a href="/login/bitbucket.org" target="_self">
<i class="fa fa fa-bitbucket-square"></i> Bitbucket
</a>
</div>
<div class="pure-u-1">
<a href="/login/stash.atlassian.com" target="_self">
<i class="fa fa fa-bitbucket-square"></i> Stash
</a>
</div>
<div class="pure-u-1">
<a href="/login/gitlab.com" target="_self">
<i class="fa fa fa-sign-in"></i> Gitlab
</a>
</div>
</div>
</article>

View file

@ -1,68 +1,24 @@
<h1>{{ repo.name }}</h1>
<article id="repopage">
<nav>
<a href="/"><span class="fa fa-th"></span></a>
<span>{{ repo.owner }}</span>
<span>/</span>
<a href="/{{ repo | fullPath}}">{{ repo.name }}</a>
</nav>
<div class="row" ng-if="repo.active == false">
This repo is not active
<div>URL: {{ repo.url }}</div>
<div>Private: {{ repo.private }}</div>
<div>remote: {{ repo.remote }}</div>
<div>owner: {{ repo.owner }}</div>
<div>name: {{ repo.name }}</div>
<div>
<button ng-click="activate()">Activate</button>
</div>
</div>
<div class="row" ng-if="repo.active == true">
<div class="col-xs-6 col-sm-3">
<a href="/{{ repo.remote }}/{{ repo.owner}}/{{ repo.name }}/settings">Settings</a><br/>
Recently Updated Branches
<ul ng-repeat="commit in branches">
<li>
<a href="/{{ $parent.repo | fullPath }}/{{ commit.branch }}">
<span>{{ commit.branch }}</span>
<section ng-repeat="group in commits | unique: 'branch'">
<div class="pure-g cards">
<h2 class="pure-u-1" style="font-size:22px;margin-bottom:20px;"><i class="fa fa-code-fork"></i> {{group.branch}}</h2>
<a class="pure-u-1 pure-u-md-1-2 pure-u-lg-1-4 pure-u-xl-1-4 card card" href="/{{ repo | fullPath }}/{{ commit.branch }}/{{ commit.sha }}" ng-repeat="commit in commits | filter: { branch: group.branch } | limitTo:4" data-status="{{ commit.status }}">
<div class="l-box">
<h2>{{ commit.message }}</h2>
<em ng-if="commit.finished_at != 0">{{ commit.finished_at | fromNow }}</em>
<em ng-if="commit.finished_at == 0 && commit.started_at != 0">Started {{ commit.started_at | fromNow }}</em>
<em ng-if="commit.finished_at == 0 && commit.started_at == 0">Created {{ commit.created_at}}</em>
<img ng-src="{{ commit.gravatar | gravatar }}" />
</div>
</a>
</li>
</ul>
</div>
<!-- primary column -->
<div class="col-xs-12 col-sm-9">
<table class="table table-bordered">
<tr>
<th>Status</th>
<th>Branch</th>
<th>Sha</th>
<th>PR</th>
<th colspan=2>Author</th>
<th>Message</th>
<th>Started</th>
<th>Finished</th>
</tr>
<tr ng-repeat="commit in commits">
<td>
<a href="/{{ $parent.repo | fullPath }}/{{ commit.branch }}/{{ commit.sha }}">
<span>{{ commit.status }}</span>
</a>
</td>
<td>
<a href="/{{ $parent.repo | fullPath }}/{{ commit.branch }}">
<span>{{ commit.branch }}</span>
</a>
</td>
<td>
<a href="/{{ $parent.repo | fullPath }}/{{ commit.branch }}/{{ commit.sha }}">
<span>{{ commit.sha | shortHash }}</span>
</a>
</td>
<td>{{ commit.pull_request }}</td>
<td>{{ commit.author }}</td>
<td><img class="gravatar" ng-src="https://secure.gravatar.com/avatar/{{ commit.gravatar }}?s=32&d=mm" /></td>
<td>{{ commit.message }}</td>
<td>{{ commit.started_at | fromNow }}</td>
<td>{{ commit.finished_at | fromNow }}</td>
</tr>
</table>
</div>
</div>
</div>
</section>
</article>

View file

@ -1,68 +1,75 @@
<h1>{{ repo.name }}</h1>
<h2>Config</h2>
<article id="repopage">
<nav>
<a href="/"><span class="fa fa-th"></span></a>
<span>{{ repo.owner }}</span>
<span>/</span>
<a href="/{{ repo | fullPath}}">{{ repo.name }}</a>
<span>/</span>
<a href="#">settings</a>
</nav>
<a href="/{{ repo.remote }}/{{ repo.owner}}/{{ repo.name }}">Back</a>
<div class="row">
<section>
<!-- summary column -->
<div class="col-xs-6 col-sm-3">
<!-- badge -->
<a href="/{{ repo.remote }}/{{ repo.owner}}/{{ repo.name }}">
<img ng-src="/v1/badge/{{ repo.remote }}/{{ repo.owner}}/{{ repo.name }}/status.svg" />
</a>
</div>
<!-- primary column -->
<div class="col-xs-12 col-sm-9">
<div>
<label>Post Commit Hook</label>
<input type="checkbox" ng-model="repoTemp.post_commits" />
<!-- summary column -->
<div class="col-xs-6 col-sm-3">
<!-- badge -->
<a href="/{{ repo.remote }}/{{ repo.owner}}/{{ repo.name }}">
<img ng-src="/v1/badge/{{ repo.remote }}/{{ repo.owner}}/{{ repo.name }}/status.svg" />
</a>
</div>
<div>
<label>Pull Reqest Hook</label>
<input type="checkbox" ng-model="repoTemp.pull_requests" />
</div>
<!-- primary column -->
<div class="col-xs-12 col-sm-9">
<div>
<label>Private Variables</label>
<div>--</div>
</div>
<div>
<label>Post Commit Hook</label>
<input type="checkbox" ng-model="repoTemp.post_commits" />
</div>
<div>
<label>Privileged</label>
<input type="checkbox" ng-model="repoTemp.privileged" />
</div>
<div>
<label>Pull Reqest Hook</label>
<input type="checkbox" ng-model="repoTemp.pull_requests" />
</div>
<div>
<label>Timeout</label>
<input type="number" ng-model="repoTemp.timeout" />
</div>
<div>
<label>Private Variables</label>
<div>TODO!</div>
</div>
<div>
<label>URL</label>
<span>{{ repo.url }}</span>
</div>
<div>
<label>Privileged</label>
<input type="checkbox" ng-model="repoTemp.privileged" />
</div>
<div>
<label>Created</label>
<span>{{ repo.created_at | fromNow }}</span>
</div>
<div>
<label>Timeout</label>
<input type="number" ng-model="repoTemp.timeout" />
</div>
<div>
<label>Updated</label>
<span>{{ repo.updated_at | fromNow }}</span>
</div>
<div>
<label>URL</label>
<span>{{ repo.url }}</span>
</div>
<div>
{{failure}}
</div>
<div>
<label>Created</label>
<span>{{ repo.created_at | fromNow }}</span>
</div>
<div>
<button ng-click="save()">Save</button>
<button ng-click="cancel()">Cancel</button>
<div>
<label>Updated</label>
<span>{{ repo.updated_at | fromNow }}</span>
</div>
<div>
{{failure}}
</div>
<div>
<button ng-click="save()">Save</button>
<button ng-click="cancel()">Cancel</button>
</div>
</div>
</div>
</div>
</section>
</article>

View file

@ -0,0 +1,13 @@
<article id="repospage">
<nav>
<a href="/"><span class="fa fa-th"></span></a>
<a href="/account/repos">repositories</a>
</nav>
<section>
<ul>
<li ng-repeat="repo in repos"><a href="/{{ repo | fullPath }}">{{ repo | fullName }}</a></li>
</ul>
</section>
</article>

View file

@ -1,32 +1,22 @@
<div class="row">
<div class="col-xs-6 col-sm-3">
<ul>
<li><a href="/admin/settings">Config</a></li>
<li><a href="/admin/users">Users</a></li>
<li><a href="/admin/workers">Workers</a></li>
<li><a href="/admin/queue">Queue</a></li>
</ul>
</div>
<div id="userspage">
<nav>
<a href="/"><span class="fa fa-th"></span></a>
<a href="/">users</a>
</nav>
<!-- primary column -->
<div class="col-xs-12 col-sm-9">
<table class="table table-bordered" border="1">
<tr>
<th>Remote</th>
<th>Login</th>
<th>Gravatar</th>
<th>Email</th>
<th>Created</th>
<th>Updated</th>
</tr>
<tr ng-repeat="user in users">
<td>{{ user.remote }}</td>
<td>{{ user.login }}</td>
<td><img class="gravatar" ng-src="{{ user.gravatar | gravatar }}" /></td>
<td>{{ user.email }}</td>
<td>{{ user.created_at | toDate}}</td>
<td>{{ user.updated_at | toDate}}</td>
</tr>
</table>
</div>
<section>
<a class="pure-g user" ng-repeat="user in users" href="/admin/users/{{ user.remote }}/{{ user.login}}">
<div class="pure-u-1-8">
<div>
<img class="gravatar" ng-src="{{ user.gravatar | gravatar }}" />
</div>
</div>
<div class="pure-u-7-8">
<div>
<h4>{{ user.login }} <small>{{ user.remote }}</small></h4>
<span class="email">{{ user.email }}</span>
</div>
</div>
</a>
</section>
</div>

View file

@ -33,11 +33,6 @@ func NewSession(users database.UserManager) Session {
// User gets the currently authenticated user from the secure cookie session.
func (s *session) User(r *http.Request) *model.User {
//if true {
// user, _ := s.users.Find(1)
// return user
//}
switch {
case r.FormValue("access_token") == "":
return s.UserCookie(r)

View file

@ -120,5 +120,5 @@ func (c *ImageService) Build(tag, dir string) error {
headers.Set("Content-Type", "application/tar")
// make the request
return c.stream("POST", path, body, os.Stdout, headers)
return c.stream("POST", path, body /*os.Stdout*/, nil, headers)
}