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,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 */ |
129 Bytes
174 Bytes
119 Bytes
406 Bytes
1.04 KB
675 Bytes
417 Bytes
1.22 KB
1.65 KB
3.21 KB