Skip to content

Commit

Permalink
New design
Browse files Browse the repository at this point in the history
  • Loading branch information
@brian-c
brian-c committed Mar 8, 2012
1 parent 0264b1d commit fc7ca4f
Show file tree
Hide file tree
Showing 3 changed files with 214 additions and 110 deletions.
207 changes: 130 additions & 77 deletions public/styles.css
View file
Original file line number Diff line number Diff line change
@@ -1,95 +1,148 @@
body{
padding:0px;
margin:0px;
@-webkit-keyframes warning {
0% {opacity: 1}
50% {opacity: 0.75}
100% {opacity: 1}
}

#wrapper{
width:100%;
margin:0px auto;
html {
background: #000;
font: 14px "Helvetica Neue", Arial, sans-serif;
height: 100%;
}

.project{
position:relative;
width:25%;
height: 225px;
border-left:1px solid black;
border-bottom: 1px solid black;
margin-left: -1px;
float: left;
body {
height: 100%;
margin: 0px;
overflow: auto;
}

.green{
background-color:#00ff33;
}

.yellow_green{
background-color:#ccff66;
}
#wrapper {
box-sizing: border-box;
border: 10px solid #000;
height: 100%;
}

.red{
background-color: red;
}
.ipad-scale #wrapper {
-webkit-transform: scaleX(0.533);
-webkit-transform-origin-x: 0;
width: 187.5%;
}

.yellow{
background-color: yellow;
}
.project {
background-image:
-webkit-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.25));
border: 5px solid #000;
box-sizing: border-box;
float: left;
min-height: 45px;
padding: 5px 10px;
position: relative;
width: 33.3%;
}

.yellow_orange{
background-color: #ffb428;
}
@media screen and (max-width: 800px) {
.project {
width: 50%;
}
}

.orange{
background-color: #ff6600;
}
@media screen and (max-width: 500px) {
.project {
width: 100%;
}
}

.inactive{
background-color:gray;
}
.project.with-details {
z-index: 2;
}

.build_number{
font-size:55px;
padding:0px;
margin: 0px;
position:absolute;
top:5px;
left:5px;
font-family: georgia;
}
.project.building {background-color: #999;}
.project.best {background-color: #0f0;}
.project.better {background-color: #8f0;}
.project.good {background-color: #ff0;}
.project.bad {background-color: #f80;}
.project.worse {background-color: #f00;}
.project.worst {
-webkit-animation: warning 1s infinite ease-in-out;
background-color: #f00;
z-index: 1;
}

.build_number a{
text-decoration:none;
color: black;
}
.project > .heading {
font-size: 18px;
}

.build_number a:hover{
text-decoration:underline;
}
.project > .heading > .name {
color: #fff;
display: inline-block;
font-weight: bold;
max-width: 80%;
overflow: hidden;
text-overflow: ellipsis;
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.5);
white-space: nowrap;
}

.project_name{
position:absolute;
font-family: helvetica;
font-size: 12px;
bottom:0px;
padding:15px 0px;
background: black;
color: white;
width: 100%;
border-top: 1px solid silver;
border-bottom: 1px solid silver;
}
.project > .heading > .build-number {
color: #000;
float: right;
font-weight: bold;
text-decoration: none;
opacity: 0.33;
}

.project_name a{
color: yellow;
text-decoration:none;
}
.project > .details {
background: rgba(0, 0, 0, 0.9);
border-radius: 3px;
box-shadow:
0 0 1px rgba(255, 255, 255, 0.5) inset,
0 3px 10px #000;
color: #fff;
display: none;
left: 10px;
padding: 10px;
position: absolute;
top: 35px;
}

.build_stats{
padding-top:80px;
font-family:helvetica;
font-size:12px;
}
.project.with-details > .details {
display: block;
}

.row{
width:100%;
display: table-row;
}
.project > .details:before {
border: 8px solid transparent;
bottom: 100%;
border-bottom-color: rgba(0, 0, 0, 0.8);
content: " ";
left: 4%;
margin-bottom: -3px;
margin-left: -4px;
position: absolute;
}

.project > .details > .health {
margin: 10px;
white-space: nowrap;
}

.project > .details > .actions {
margin: 5px;
text-align: center;
}

.project > .details > .actions > a {
background: #444;
border-radius: 15px;
box-shadow:
0 1px 0 rgba(255, 255, 255, 0.3) inset,
0 1px 0 #000;
color: #fff;
display: inline-block;
font-size: 10px;
letter-spacing: 1px;
margin-right: 2px;
padding: 2px 10px;
text-decoration: none;
text-shadow: 0 1px 0 #000;
text-transform: uppercase;
}
16 changes: 9 additions & 7 deletions tommy.rb
View file
Original file line number Diff line number Diff line change
Expand Up @@ -58,18 +58,20 @@ def css_for_project(project)
score = project.build_score
if project.is_green?
if score == 100
"green"
"best"
elsif score >= 80
"yellow_green"
"better"
elsif score >= 60
"yellow"
"good"
elsif score >= 40
"yellow_orange"
"bad"
elsif score >= 20
"orange"
"worse"
end
elsif project.is_building?
"building"
else
"red"
"worst"
end
end
end
end
101 changes: 75 additions & 26 deletions views/index.erb
View file
Original file line number Diff line number Diff line change
@@ -1,32 +1,81 @@
<!DOCTYPE html>

<html>
<head>
<title>Tommy</title>
<meta http-equiv="refresh" content="30;url=/">
<link href='styles.css' rel='stylesheet' type='text/css' />
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.3/jquery.min.js' type='text/javascript'></script>
<script>
function show_stats(element){
$(element).find('.build_stats').toggle();
};
</script>
</head>
<body>
<div id="wrapper">
<% @projects.in_groups_of(4) do |group| %>
<% group.each_with_index do |project, index| %>
<head>
<meta charset="utf8" />
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no" />
<meta http-equiv="refresh" content="30;url=/" />

<title>Tommy</title>

<link href="styles.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div id="wrapper">
<% @projects.each do |project| %>
<% if project %>
<span class="project <%= css_for_project(project) %>" onclick="show_stats(this);">
<p class="build_number"><a href="<%= project.last_build_url %>" target="_blank" title="View Build">#<%= project.last_build_number %></a></p>
<ul class="build_stats" style="display:none;">
<li><%= project.health_report %></li>
</ul>
<p class="project_name">&nbsp;&nbsp;&nbsp;<%= project.name %> :: <em><a href="<%= project.last_build_url %>" target="_blank">build</a> &middot; <a href="<%= project.last_complete_url %>" target="_blank">complete</a> &middot; <a href="<%= project.last_failed_url %>" target="_blank">failed</a></em></p>
</span>
<div class="project <%= css_for_project(project) %>">
<div class="heading">
<span class="name"><%= project.name %></span>
<a href="<%= project.last_build_url %>" target="_blank" class="build-number"><%= project.last_build_number %></a>
</div>

<div class="details">
<div class="health"><%= project.health_report %></div>

<div class="actions">
<a href="<%= project.last_build_url %>" target="_blank">Build</a>
<a href="<%= project.last_complete_url %>" target="_blank">Complete</a>
<a href="<%= project.last_failed_url %>" target="_blank">Failed</a>
</div>
</div>
</div>
<% else %>
<span class="project inactive"></span>
<!--No project-->
<% end %>
<% end %>
<% end %>
</div>
</body>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
var DETAILS_CLASS = 'with-details';

var projects = $('.project');
var doc = $(document);

function toggleDetails(e) {
var target = $(this);
var hadDetails = target.hasClass(DETAILS_CLASS);
projects.removeClass(DETAILS_CLASS);
if (!hadDetails) target.addClass(DETAILS_CLASS);
}

doc.on('click', '.project', toggleDetails);
doc.on('touchstart', '.project', toggleDetails);

doc.on('keydown', function(e) {
if (e.keyCode === 27) projects.removeClass(DETAILS_CLASS);
});

// Always take up the full screen.
function adjustProjectHeights() {
var _firstTop = NaN;
for (var howManyAcross = 0; howManyAcross < projects.length; howManyAcross++) {
var offsetTop = $(projects[howManyAcross]).offset().top;
if (isNaN(_firstTop)) _firstTop = offsetTop;
if (offsetTop !== _firstTop) break;
}

projects.height(projects.parent().height() / (projects.length / howManyAcross));
}

$(window).on('resize', adjustProjectHeights);
adjustProjectHeights();

// An iPod driving an HD monitor will stretch the image.
// Compensate by shrinking it a bit.
if (~location.search.indexOf('ipad')) $('html').addClass('ipad-scale');
</script>
</body>
</html>

0 comments on commit fc7ca4f

Please sign in to comment.