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