improved the homepage formatting to pull latest status per repo

This commit is contained in:
Brad Rydzewski 2014-07-09 18:11:28 -07:00
parent 50b659cadb
commit 638c4b514a
9 changed files with 85 additions and 57 deletions

View file

@ -3,5 +3,6 @@
Artur Rodrigues <arturhoo@gmail.com> Artur Rodrigues <arturhoo@gmail.com>
Brad Rydzewski <brad@drone.io> Brad Rydzewski <brad@drone.io>
Justin Keller <justin@commando.io>
Martin Charles <martincharles07@gmail.com> Martin Charles <martincharles07@gmail.com>
Thomas Burke <burke@drone.io> Thomas Burke <burke@drone.io>

View file

@ -7,7 +7,7 @@ var app = angular.module('app', [
app.config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider) { app.config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider) {
$routeProvider.when('/', { $routeProvider.when('/', {
templateUrl: '/views/index.html', templateUrl: '/views/home.html',
controller: 'HomeController', controller: 'HomeController',
title: 'Dashboard', title: 'Dashboard',
resolve: { resolve: {

View file

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

View file

@ -383,6 +383,14 @@ nav div.options .pure-button i {
color: #262626; color: #262626;
font-family: 'Open Sans'; font-family: 'Open Sans';
} }
.cards .card[data-status="Success"] em {
border-top: 5px solid #68c598;
}
.cards .card[data-status="Killed"] em,
.cards .card[data-status="Failure"] em,
.cards .card[data-status="Error"] em {
border-top: 5px solid #e97041;
}
.cards .card .l-box { .cards .card .l-box {
background: #FFF; background: #FFF;
border: 1px solid #DDD; border: 1px solid #DDD;
@ -1015,19 +1023,11 @@ nav div.options .pure-button i {
#repopage section .card[data-status="Success"]:nth-child(2) .l-box { #repopage section .card[data-status="Success"]:nth-child(2) .l-box {
border-color: #68c598; border-color: #68c598;
} }
#repopage section .card[data-status="Success"] em {
border-top: 5px solid #68c598;
}
#repopage section .card[data-status="Killed"]:nth-child(2) .l-box, #repopage section .card[data-status="Killed"]:nth-child(2) .l-box,
#repopage section .card[data-status="Failure"]:nth-child(2) .l-box, #repopage section .card[data-status="Failure"]:nth-child(2) .l-box,
#repopage section .card[data-status="Error"]:nth-child(2) .l-box { #repopage section .card[data-status="Error"]:nth-child(2) .l-box {
border-color: #e97041; border-color: #e97041;
} }
#repopage section .card[data-status="Killed"] em,
#repopage section .card[data-status="Failure"] em,
#repopage section .card[data-status="Error"] em {
border-top: 5px solid #e97041;
}
#repopage section .card[data-status="Started"] em:before, #repopage section .card[data-status="Started"] em:before,
#repopage section .card[data-status="Pending"] em:before { #repopage section .card[data-status="Pending"] em:before {
-webkit-animation: progress 1s linear infinite; -webkit-animation: progress 1s linear infinite;

View file

@ -294,6 +294,20 @@ nav {
color:@c0; color:@c0;
font-family:@sans; font-family:@sans;
&[data-status="Success"] {
em {
border-top:5px solid @cok;
}
}
&[data-status="Killed"],
&[data-status="Failure"],
&[data-status="Error"] {
em {
border-top:5px solid @cneg;
}
}
.l-box { .l-box {
background:#FFF; background:#FFF;
border:1px solid #DDD; border:1px solid #DDD;
@ -922,9 +936,6 @@ nav {
&:nth-child(2) .l-box { &:nth-child(2) .l-box {
border-color: @cok; border-color: @cok;
} }
em {
border-top:5px solid @cok;
}
} }
.card[data-status="Killed"], .card[data-status="Killed"],
@ -933,9 +944,6 @@ nav {
&:nth-child(2) .l-box { &:nth-child(2) .l-box {
border-color: @cneg; border-color: @cneg;
} }
em {
border-top:5px solid @cneg;
}
} }
.card[data-status="Started"] em:before, .card[data-status="Started"] em:before,
@ -1112,7 +1120,8 @@ nav {
} }
} }
// special thanks to:
// http://www.designcouch.com/home/why/2013/09/19/ios7-style-pure-css-toggle/
.toggle { .toggle {
margin-bottom:10px; margin-bottom:10px;
&:nth-child(2) { &:nth-child(2) {

File diff suppressed because one or more lines are too long

View file

@ -1 +1,35 @@
dashboard.html <article id="homepage">
<nav>
<a href="/"><span class="fa fa-th"></span></a>
<a href="/">dashboard</a>
</nav>
<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="/{{ commit | fullPath }}" ng-repeat="commit in feed | limitTo:4" data-status="{{ commit.status }}">
<div class="l-box">
<h2>{{ commit.owner }} <span class="separator">/</span> {{ commit.name }}</h2>
<em>{{ commit.finished_at | fromNow }}</em>
<img ng-src="{{ commit.gravatar | gravatar }}" />
</div>
</a>
</div>
</section>
<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,33 +0,0 @@
<article id="homepage">
<nav>
<a href="/"><span class="fa fa-th"></span></a>
<a href="/">dashboard</a>
</nav>
<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>
<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

@ -85,15 +85,31 @@ LIMIT 20
` `
// SQL query to retrieve the latest Commits for a user's repositories. // SQL query to retrieve the latest Commits for a user's repositories.
//const listUserCommitsQuery = `
//SELECT r.repo_remote, r.repo_host, r.repo_owner, r.repo_name, c.*
//FROM commits c, repos r, perms p
//WHERE c.repo_id=r.repo_id
//AND r.repo_id=p.repo_id
//AND p.user_id=?
//AND c.commit_status NOT IN ('Started', 'Pending')
//ORDER BY commit_id DESC
//LIMIT 20
//`
const listUserCommitsQuery = ` const listUserCommitsQuery = `
SELECT r.repo_remote, r.repo_host, r.repo_owner, r.repo_name, c.* SELECT r.repo_remote, r.repo_host, r.repo_owner, r.repo_name, c.*
FROM commits c, repos r
WHERE c.repo_id=r.repo_id
AND c.commit_id IN (
SELECT max(c.commit_id)
FROM commits c, repos r, perms p FROM commits c, repos r, perms p
WHERE c.repo_id=r.repo_id WHERE c.repo_id=r.repo_id
AND r.repo_id=p.repo_id AND r.repo_id=p.repo_id
AND p.user_id=? AND p.user_id=?
AND c.commit_id
AND c.commit_status NOT IN ('Started', 'Pending') AND c.commit_status NOT IN ('Started', 'Pending')
ORDER BY commit_id DESC GROUP BY r.repo_id
LIMIT 20 ) ORDER BY c.commit_created DESC LIMIT 5;
` `
// SQL query to retrieve the latest Commits across all branches. // SQL query to retrieve the latest Commits across all branches.