Commit 7e2b77cab4fc240ff573d53b9fb252d50e36288e
1 parent
c1890c1a
Exists in
master
and in
1 other branch
(WIP) - Import Michael Parenteau's awesome theme
Showing
15 changed files
with
160 additions
and
47 deletions
Show diff stats
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 */ | ... | ... |
129 Bytes
174 Bytes
119 Bytes
406 Bytes
1.04 KB
675 Bytes
417 Bytes
1.22 KB
1.65 KB
3.21 KB