Commit 7e2b77cab4fc240ff573d53b9fb252d50e36288e

Authored by Jared Pace
1 parent c1890c1a
Exists in master and in 1 other branch production

(WIP) - Import Michael Parenteau's awesome theme

app/views/layouts/application.html.haml
@@ -10,20 +10,22 @@ @@ -10,20 +10,22 @@
10 = stylesheet_link_tag 'reset', 'application' 10 = stylesheet_link_tag 'reset', 'application'
11 = yield :head 11 = yield :head
12 %body{:id => controller.controller_name, :class => controller.action_name} 12 %body{:id => controller.controller_name, :class => controller.action_name}
13 - #header  
14 - = link_to 'Hypnotoad', root_path, :id => 'site-name' 13 + %header
  14 + %div
  15 + = link_to 'Hypnotoad', root_path, :id => 'site-name'
15 16
16 = render :partial => 'shared/navigation' 17 = render :partial => 'shared/navigation'
17 18
18 - #content-title  
19 - %h1= yield :title  
20 - %span.meta= yield :meta  
21 - - if (action_bar = yield(:action_bar)).present?  
22 - #action-bar  
23 - = action_bar  
24 - #content  
25 - = render :partial => 'shared/flash_messages'  
26 - = yield 19 + %section#content-wrapper
  20 + #content-title
  21 + %h1= yield :title
  22 + %span.meta= yield :meta
  23 + - if (action_bar = yield(:action_bar)).present?
  24 + #action-bar
  25 + = action_bar
  26 + #content
  27 + = render :partial => 'shared/flash_messages'
  28 + = yield
27 #footer 29 #footer
28 - Powered by Hypnotoad. All Glory to the Hypnotoad. 30 + Powered by Errbit.
29 = yield :scripts 31 = yield :scripts
30 \ No newline at end of file 32 \ No newline at end of file
app/views/projects/index.html.haml
1 -- content_for :title, 'Projects'  
2 -- content_for :action_bar, link_to('new project', new_project_path) 1 +- content_for :title, 'Apps'
  2 +- content_for :action_bar do
  3 + %span= link_to('Add a New App', new_project_path, :class => 'add')
3 4
4 %table.projects 5 %table.projects
5 %thead 6 %thead
@@ -12,7 +13,11 @@ @@ -12,7 +13,11 @@
12 %tr 13 %tr
13 %td.name= link_to project.name, project_path(project) 14 %td.name= link_to project.name, project_path(project)
14 %td.deploy= project.last_deploy_at ? project.last_deploy_at.to_s(:micro) : 'n/a' 15 %td.deploy= project.last_deploy_at ? project.last_deploy_at.to_s(:micro) : 'n/a'
15 - %td.count= link_to project.errs.unresolved.count, project_errs_path(project) 16 + %td.count
  17 + - if project.errs.any?
  18 + = link_to project.errs.unresolved.count, project_errs_path(project)
  19 + - else
  20 + \-
16 - if @projects.none? 21 - if @projects.none?
17 %tr 22 %tr
18 %td{:colspan => 3} 23 %td{:colspan => 3}
app/views/shared/_navigation.html.haml
1 #nav-bar 1 #nav-bar
2 %ul 2 %ul
3 //%li= link_to 'Dashboard', admin_dashboard_path, :class => active_if_here(:dashboards) 3 //%li= link_to 'Dashboard', admin_dashboard_path, :class => active_if_here(:dashboards)
4 - %li= link_to 'Projects', projects_path, :class => active_if_here(:projects)  
5 - %li= link_to 'Errors', errs_path, :class => active_if_here(:errs) 4 + %li.projects{:class => active_if_here(:projects)}= link_to 'Apps', projects_path
  5 + %li.errors{:class => active_if_here(:errs)}= link_to 'Errs', errs_path
6 %div.clear 6 %div.clear
7 \ No newline at end of file 7 \ No newline at end of file
public/stylesheets/application.css
@@ -4,7 +4,7 @@ html { @@ -4,7 +4,7 @@ html {
4 font-size: 62.8%; font-family: "Lucida Grande","Lucida Sans",Arial,sans-serif; 4 font-size: 62.8%; font-family: "Lucida Grande","Lucida Sans",Arial,sans-serif;
5 } 5 }
6 body { 6 body {
7 - margin: 0 auto; padding: 0 5px; width: 900px; 7 + margin: 0; padding: 0;
8 font-size: 1.3em; line-height: 1.4em; 8 font-size: 1.3em; line-height: 1.4em;
9 } 9 }
10 10
@@ -29,19 +29,33 @@ h6 { font-size: 0.9em; line-height: 1.2em; } @@ -29,19 +29,33 @@ h6 { font-size: 0.9em; line-height: 1.2em; }
29 p { margin-bottom: 1em; } 29 p { margin-bottom: 1em; }
30 30
31 /* Links */ 31 /* Links */
32 -a { color: #BF3838; text-decoration: none;}  
33 -a:visited { color: #674646;}  
34 -a:hover { color: #BF3838; text-decoration: underline; } 32 +a { color: #0069cc; text-decoration: none;}
  33 +a:visited { color: #0069cc;}
  34 +a:hover { color: #0069cc; text-decoration: underline; }
35 a.action { float: right; font-size: 0.9em;} 35 a.action { float: right; font-size: 0.9em;}
36 36
37 -/* Header */  
38 -#header {  
39 - height: 90px; 37 +header > div, #nav-bar, #content-wrapper, #footer {
  38 + width: 900px;
  39 + margin: 0 auto;
40 position: relative; 40 position: relative;
41 } 41 }
42 -#header #site-name {  
43 - font-size: 2.31em; font-weight: bold; line-height: 90px; text-decoration: none; text-transform: uppercase;  
44 - color: #585858; 42 +
  43 +/* Header */
  44 +header {
  45 + height: 75px;
  46 + margin-bottom: 24px;
  47 + border-bottom: 1px solid #fff;
  48 + background: #000 url(images/header.png) 0 0 repeat-x;
  49 +}
  50 +header #site-name {
  51 + display: block;
  52 + width: 88px;
  53 + height: 31px;
  54 + position: absolute;
  55 + top: 22px;
  56 + left: 2px;
  57 + background: transparent url(images/logo.png) 0 0 no-repeat;
  58 + text-indent: -5000em;
45 } 59 }
46 #header #session-links { 60 #header #session-links {
47 position: absolute; top: 15px; right: 0; 61 position: absolute; top: 15px; right: 0;
@@ -50,41 +64,100 @@ a.action { float: right; font-size: 0.9em;} @@ -50,41 +64,100 @@ a.action { float: right; font-size: 0.9em;}
50 64
51 /* Navigation */ 65 /* Navigation */
52 #nav-bar { 66 #nav-bar {
53 - margin-bottom: 20px;  
54 - background-color: #585858; 67 + margin-bottom: 24px;
  68 + height: 41px;
  69 +}
  70 +#nav-bar li {
  71 + float: left;
  72 + margin-right: 18px;
  73 + color: #666;
  74 + background: #FFF url(images/button-bg.png) 0 bottom repeat-x;
  75 + border-radius: 50px;
  76 + -moz-border-radius: 50px;
  77 + -webkit-border-radius: 50px;
  78 + border: 1px solid #bbb;
55 } 79 }
56 -#nav-bar li { float: left; }  
57 #nav-bar li a { 80 #nav-bar li a {
58 - display: block; padding: 20px 30px;  
59 - color: #fff;  
60 - font-size: 1.231em; font-weight: bold; line-height: 1em; text-decoration: none; 81 + color: #666;
  82 + display: block;
  83 + padding: 0 20px 0 40px;
  84 + font-size: 14px; font-weight: bold; line-height: 39px; text-decoration: none;
  85 + text-shadow: 1px 1px 0px #FFF; -webkit-text-shadow: 1px 1px 0px #FFF;
  86 + background: transparent 10px 8px no-repeat;
  87 +}
  88 +#nav-bar li a:hover { color: #666;}
  89 +#nav-bar li.projects a { background-image: url(images/icons/briefcase.png); }
  90 +#nav-bar li.errors a { background-image: url(images/icons/error.png); }
  91 +#nav-bar li:hover {
  92 + box-shadow: 0 0 3px #69c;
  93 + -moz-box-shadow: 0 0 3px #69c;
  94 + -webkit-box-shadow: 0 0 3px #69c;
  95 +}
  96 +#nav-bar li.active {
  97 + border-color: #fff;
  98 + background-color: #CCC;
  99 + background-image: none;
  100 + box-shadow: inset 0 0 5px #999;
  101 + -moz-box-shadow: inset 0 0 5px #999;
  102 + -webkit-box-shadow: inset 0 0 5px #999;
  103 +}
  104 +
  105 +/* Content Wrapper */
  106 +section#content-wrapper {
  107 + border: 1px solid #C6C6C6;
61 } 108 }
62 -#nav-bar li a:hover { background-color: #686868; }  
63 -#nav-bar li a.active { background-color: #BF3838;}  
64 109
65 /* Content Title */ 110 /* Content Title */
66 #content-title { 111 #content-title {
67 - padding: 30px 20px; border: 1px solid #C6C6C6; border-bottom: none;  
68 - background-color: #FFF; 112 + padding: 30px 20px;
  113 + border-top: 1px solid #FFF;
  114 + border-bottom: 1px solid #FFF;
  115 + background-color: #e2e2e2;
69 } 116 }
70 #content-title h1 { 117 #content-title h1 {
71 padding: 0; margin: 0; border: none; 118 padding: 0; margin: 0; border: none;
72 - font-size: 2em; line-height: 1em; font-weight: bold; font-style: italic; font-family: georgia, times, serif; 119 + color: #666;
  120 + font-size: 2em; line-height: 1em; font-weight: bold; font-family: arial, sans-serif;
73 } 121 }
74 #content-title .meta { font-size: 0.9em; color: #787878; } 122 #content-title .meta { font-size: 0.9em; color: #787878; }
75 123
76 /* Action Bar */ 124 /* Action Bar */
77 #action-bar { 125 #action-bar {
78 - padding: 5px 20px; border: 1px solid #C6C6C6; border-top:none; border-bottom: none;  
79 - color: #E2E2E2; background-color: #585858;  
80 - text-align: right; 126 + position: absolute;
  127 + top: 25px; right: 20px;
  128 +}
  129 +#action-bar span {
  130 + display: inline-block;
  131 + margin-left: 18px;
  132 + text-decoration: none;
  133 + color: #666;
  134 + background: #FFF url(images/button-bg.png) 0 bottom repeat-x;
  135 + border-radius: 50px;
  136 + -moz-border-radius: 50px;
  137 + -webkit-border-radius: 50px;
  138 + border: 1px solid #bbb;
  139 +}
  140 +#action-bar span a {
  141 + color: #666;
  142 + display: block;
  143 + padding: 0 20px 0 40px;
  144 + font-size: 14px; font-weight: bold; line-height: 39px; text-decoration: none;
  145 + text-shadow: 1px 1px 0px #FFF; -webkit-text-shadow: 1px 1px 0px #FFF;
  146 + background: transparent 10px 8px no-repeat;
  147 +}
  148 +#action-bar a:hover { text-decoration: none;}
  149 +#action-bar span:hover {
  150 + box-shadow: 0 0 3px #69c;
  151 + -moz-box-shadow: 0 0 3px #69c;
  152 + -webkit-box-shadow: 0 0 3px #69c;
  153 +}
  154 +#action-bar a.add {
  155 + background-image: url(images/icons/add.png);
81 } 156 }
82 -#action-bar a { color: #E2E2E2; text-decoration: none; }  
83 -#action-bar a:hover { color: #FFF; text-decoration: underline;}  
84 157
85 /* Content */ 158 /* Content */
86 #content { 159 #content {
87 - padding: 20px; border: 1px solid #C6C6C6; 160 + padding: 20px; border-top: 1px solid #C6C6C6;
88 background-color: #FFF; 161 background-color: #FFF;
89 } 162 }
90 163
@@ -148,8 +221,24 @@ form > div > span { @@ -148,8 +221,24 @@ form > div > span {
148 } 221 }
149 222
150 /* Tables */ 223 /* Tables */
151 -table { width: 100%; border: 1px solid #C6C6C6; margin-bottom: 1.5em; }  
152 -table th, table td { border-bottom: 1px solid #C6C6C6; padding: 10px 8px; text-align: left; } 224 +table {
  225 + width: 100%;
  226 + border: 1px solid #C6C6C6;
  227 + margin-bottom: 1.5em;
  228 + border-collapse: separate;
  229 +}
  230 +table thead th {
  231 + border-top: 1px solid #FFF;
  232 + border-bottom: 1px solid #FFF;
  233 +}
  234 +table tbody tr:first-child td {
  235 + border-top: 1px solid #C6C6C6;
  236 +}
  237 +table th, table td {
  238 + border-top: 1px solid #C6C6C6;
  239 + padding: 10px 8px;
  240 + text-align: left;
  241 +}
153 table th { background-color: #E2E2E2; font-weight: bold; text-transform: uppercase; white-space: nowrap; } 242 table th { background-color: #E2E2E2; font-weight: bold; text-transform: uppercase; white-space: nowrap; }
154 table tbody tr:nth-child(odd) td { background-color: #F9F9F9; } 243 table tbody tr:nth-child(odd) td { background-color: #F9F9F9; }
155 table .main { width: 100%; } 244 table .main { width: 100%; }
@@ -195,6 +284,8 @@ pre { @@ -195,6 +284,8 @@ pre {
195 } 284 }
196 285
197 /* Projects Table */ 286 /* Projects Table */
  287 +table.projects tbody tr:hover td ,table.errs tbody tr:hover td { background-color: #F2F2F2;}
  288 +
198 table.projects td.name, table.errs td.message { 289 table.projects td.name, table.errs td.message {
199 width: 100%; 290 width: 100%;
200 } 291 }
@@ -205,7 +296,22 @@ td.latest { @@ -205,7 +296,22 @@ td.latest {
205 white-space: nowrap; 296 white-space: nowrap;
206 } 297 }
207 td.count { 298 td.count {
208 - text-align: right; 299 + text-align: center;
  300 +}
  301 +
  302 +.count a {
  303 + display: inline-block;
  304 + padding: 0.1em 0.7em;
  305 + color: #fff;
  306 + background: #cc0033 url(images/error-badge-bg.png) 0 bottom repeat-x;
  307 + border: 1px solid #900;
  308 + border-radius: 18px;
  309 + -moz-border-radius: 18px;
  310 + -webkit-border-radius: 18px;
  311 + font-weight: bold;
  312 +}
  313 +.count a:hover {
  314 + text-decoration: none;
209 } 315 }
210 316
211 /* Err Tables */ 317 /* Err Tables */
public/stylesheets/images/button-bg.png 0 → 100644

129 Bytes

public/stylesheets/images/content-fade.png 0 → 100644

174 Bytes

public/stylesheets/images/error-badge-bg.png 0 → 100644

119 Bytes

public/stylesheets/images/header.png 0 → 100644

406 Bytes

public/stylesheets/images/icons/add.png 0 → 100644

1.04 KB

public/stylesheets/images/icons/briefcase.png 0 → 100644

675 Bytes

public/stylesheets/images/icons/bullet-red-sm.png 0 → 100644

417 Bytes

public/stylesheets/images/icons/edit.png 0 → 100644

1.22 KB

public/stylesheets/images/icons/error.png 100755 → 100644

695 Bytes | W: | H:

1.05 KB | W: | H:

  • 2-up
  • Swipe
  • Onion skin
public/stylesheets/images/icons/trash.png 0 → 100644

1.65 KB

public/stylesheets/images/logo.png 0 → 100644

3.21 KB