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 10 = stylesheet_link_tag 'reset', 'application'
11 11 = yield :head
12 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 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 29 #footer
28   - Powered by Hypnotoad. All Glory to the Hypnotoad.
  30 + Powered by Errbit.
29 31 = yield :scripts
30 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 5 %table.projects
5 6 %thead
... ... @@ -12,7 +13,11 @@
12 13 %tr
13 14 %td.name= link_to project.name, project_path(project)
14 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 21 - if @projects.none?
17 22 %tr
18 23 %td{:colspan => 3}
... ...
app/views/shared/_navigation.html.haml
1 1 #nav-bar
2 2 %ul
3 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 6 %div.clear
7 7 \ No newline at end of file
... ...
public/stylesheets/application.css
... ... @@ -4,7 +4,7 @@ html {
4 4 font-size: 62.8%; font-family: "Lucida Grande","Lucida Sans",Arial,sans-serif;
5 5 }
6 6 body {
7   - margin: 0 auto; padding: 0 5px; width: 900px;
  7 + margin: 0; padding: 0;
8 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 29 p { margin-bottom: 1em; }
30 30  
31 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 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 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 60 #header #session-links {
47 61 position: absolute; top: 15px; right: 0;
... ... @@ -50,41 +64,100 @@ a.action { float: right; font-size: 0.9em;}
50 64  
51 65 /* Navigation */
52 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 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 110 /* Content Title */
66 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 117 #content-title h1 {
71 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 122 #content-title .meta { font-size: 0.9em; color: #787878; }
75 123  
76 124 /* Action Bar */
77 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 158 /* Content */
86 159 #content {
87   - padding: 20px; border: 1px solid #C6C6C6;
  160 + padding: 20px; border-top: 1px solid #C6C6C6;
88 161 background-color: #FFF;
89 162 }
90 163  
... ... @@ -148,8 +221,24 @@ form > div > span {
148 221 }
149 222  
150 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 242 table th { background-color: #E2E2E2; font-weight: bold; text-transform: uppercase; white-space: nowrap; }
154 243 table tbody tr:nth-child(odd) td { background-color: #F9F9F9; }
155 244 table .main { width: 100%; }
... ... @@ -195,6 +284,8 @@ pre {
195 284 }
196 285  
197 286 /* Projects Table */
  287 +table.projects tbody tr:hover td ,table.errs tbody tr:hover td { background-color: #F2F2F2;}
  288 +
198 289 table.projects td.name, table.errs td.message {
199 290 width: 100%;
200 291 }
... ... @@ -205,7 +296,22 @@ td.latest {
205 296 white-space: nowrap;
206 297 }
207 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 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