Download as
Browse Code »

Commit adbac57c1eb7de6c9706d50567e128770395908f

Authored by Bob Lail
1 parent 7fb52ff1
Exists in master and in 1 other branch production

tighten up the UI: 

 - move navigation to the header
 - pagination links don't need to be buttons
 - tighten up subnav in Errs#show
Showing 2 changed files with 78 additions and 109 deletions   Show diff stats
app/views/layouts/application.html.haml
  Diff comments   View file @adbac57
@@ -17,10 +17,8 @@ @@ -17,10 +17,8 @@
17 #header 17 #header
18 %div 18 %div
19 = link_to 'Errbit', root_path, :id => 'site-name' 19 = link_to 'Errbit', root_path, :id => 'site-name'
  20 + = render 'shared/navigation' if current_user
20 = render 'shared/session' 21 = render 'shared/session'
21 -  
22 - = render 'shared/navigation' if current_user  
23 -  
24 #content-wrapper 22 #content-wrapper
25 #content-title 23 #content-title
26 %h1= yield :title 24 %h1= yield :title
public/stylesheets/application.css
  Diff comments   View file @adbac57
1 html { 1 html {
2 margin: 0; padding: 0; 2 margin: 0; padding: 0;
3 - color: #585858; background-color: #E2E2E2; 3 + color: #585858; background-color: #d0d0d0;
4 font-size: 62.8%; font-family: Helvetica, "Lucida Grande","Lucida Sans",Arial,sans-serif; 4 font-size: 62.8%; font-family: Helvetica, "Lucida Grande","Lucida Sans",Arial,sans-serif;
5 } 5 }
6 body { 6 body {
@@ -17,7 +17,7 @@ body { @@ -17,7 +17,7 @@ body {
17 .nowrap { white-space: nowrap; } 17 .nowrap { white-space: nowrap; }
18 18
19 /* Headings */ 19 /* Headings */
20 -h1, h2, h3, h4, h5, h6 { padding: 0.2em 0; margin-bottom: 1em; border-bottom: 1px solid #E2E2E2;} 20 +h1, h2, h3, h4, h5, h6 { padding: 0.2em 0; margin-bottom: 1em; border-bottom: 1px solid #dedede;}
21 h1 { font-size: 2.0em; line-height: 1.2em; text-shadow: 1px 1px 0px #FFF; -webkit-text-shadow: 1px 1px 0px #FFF;} 21 h1 { font-size: 2.0em; line-height: 1.2em; text-shadow: 1px 1px 0px #FFF; -webkit-text-shadow: 1px 1px 0px #FFF;}
22 h2 { font-size: 1.7em; line-height: 1.2em; } 22 h2 { font-size: 1.7em; line-height: 1.2em; }
23 h3 { font-size: 1.5em; line-height: 1.2em; } 23 h3 { font-size: 1.5em; line-height: 1.2em; }
@@ -42,20 +42,24 @@ a.action { float: right; font-size: 0.9em;} @@ -42,20 +42,24 @@ a.action { float: right; font-size: 0.9em;}
42 42
43 /* Header */ 43 /* Header */
44 #header { 44 #header {
45 - height: 75px;  
46 margin-bottom: 24px; 45 margin-bottom: 24px;
47 border-bottom: 1px solid #fff; 46 border-bottom: 1px solid #fff;
48 - background: #000 url(images/header.png) 0 0 repeat-x; 47 + background: black;
  48 + position:relative;
  49 +}
  50 +#header > div {
  51 + height:64px;
49 } 52 }
50 #header #site-name { 53 #header #site-name {
51 display: block; 54 display: block;
52 width: 88px; 55 width: 88px;
53 height: 31px; 56 height: 31px;
54 position: absolute; 57 position: absolute;
55 - top: 22px; 58 + top: 26px;
56 left: 2px; 59 left: 2px;
57 - background: transparent url(images/logo.png) 0 0 no-repeat;  
58 - text-indent: -5000em; 60 + font-size: 2.5em;
  61 + font-weight:bold;
  62 + color: white !important;
59 } 63 }
60 #header #session-links { 64 #header #session-links {
61 position: absolute; top: 18px; right: 0; 65 position: absolute; top: 18px; right: 0;
@@ -64,49 +68,50 @@ a.action { float: right; font-size: 0.9em;} @@ -64,49 +68,50 @@ a.action { float: right; font-size: 0.9em;}
64 #header #session-links li { 68 #header #session-links li {
65 float: right; 69 float: right;
66 margin-left: 10px; 70 margin-left: 10px;
67 - color: #FFF; 71 + color: #ccc;
68 background-color: #000; 72 background-color: #000;
69 - border-radius: 6px;  
70 - -moz-border-radius: 6px;  
71 - -webkit-border-radius: 6px; 73 + border-radius: 30px;
  74 + -moz-border-radius: 30px;
  75 + -webkit-border-radius: 30px;
72 border: 1px solid #484B4F; 76 border: 1px solid #484B4F;
73 font-size: 14px; 77 font-size: 14px;
74 - font-weight: bold;  
75 } 78 }
76 #header #session-links li:hover { 79 #header #session-links li:hover {
77 box-shadow: 0 0 3px #69c; 80 box-shadow: 0 0 3px #69c;
78 -moz-box-shadow: 0 0 3px #69c; 81 -moz-box-shadow: 0 0 3px #69c;
79 -webkit-box-shadow: 0 0 3px #69c; 82 -webkit-box-shadow: 0 0 3px #69c;
80 } 83 }
  84 +#header #session-links li:hover a {
  85 + color: white;
  86 +}
81 #header #session-links a { 87 #header #session-links a {
82 - color: #FFF;  
83 - padding: 0 10px 0 30px;  
84 - line-height: 37px; 88 + color: #ccc;
  89 + padding: 0 14px;
  90 + line-height: 30px;
85 } 91 }
86 #header #session-links a:hover { 92 #header #session-links a:hover {
87 text-decoration: none; 93 text-decoration: none;
88 } 94 }
89 -#header #session-links #sign-out {  
90 - background: transparent url(images/icons/bullet-red-sm.png) 12px 50% no-repeat;  
91 -}  
92 -#header #session-links #edit-profile {  
93 - padding-left: 10px;  
94 -}  
95 95
96 /* Navigation */ 96 /* Navigation */
97 #nav-bar { 97 #nav-bar {
98 - margin-bottom: 24px;  
99 - height: 41px; 98 + position: absolute;
  99 + bottom: 0;
  100 + left: 128px;
100 } 101 }
101 #nav-bar li { 102 #nav-bar li {
102 float: left; 103 float: left;
103 - margin-right: 18px; 104 + height: 38px;
  105 + margin-right: 12px;
104 color: #666; 106 color: #666;
105 background: #FFF url(images/button-bg.png) 0 bottom repeat-x; 107 background: #FFF url(images/button-bg.png) 0 bottom repeat-x;
106 - border-radius: 50px;  
107 - -moz-border-radius: 50px;  
108 - -webkit-border-radius: 50px;  
109 - border: 1px solid #bbb; 108 + border-top-left-radius: 12px;
  109 + border-top-right-radius: 12px;
  110 + -moz-border-top-left-radius: 12px;
  111 + -moz-border-top-right-radius: 12px;
  112 + -webkit-border-top-left-radius: 12px;
  113 + -webkit-border-top-right-radius: 12px;
  114 + border: 1px solid #bbb;
110 } 115 }
111 #nav-bar li a { 116 #nav-bar li a {
112 color: #666; 117 color: #666;
@@ -120,18 +125,18 @@ a.action { float: right; font-size: 0.9em;} @@ -120,18 +125,18 @@ a.action { float: right; font-size: 0.9em;}
120 #nav-bar li.apps a { background-image: url(images/icons/briefcase.png); } 125 #nav-bar li.apps a { background-image: url(images/icons/briefcase.png); }
121 #nav-bar li.errs a { background-image: url(images/icons/error.png); } 126 #nav-bar li.errs a { background-image: url(images/icons/error.png); }
122 #nav-bar li.users a { background-image: url(images/icons/user.png); } 127 #nav-bar li.users a { background-image: url(images/icons/user.png); }
123 -#nav-bar li:hover { 128 +#nav-bar li:not(.active):hover {
124 box-shadow: 0 0 3px #69c; 129 box-shadow: 0 0 3px #69c;
125 -moz-box-shadow: 0 0 3px #69c; 130 -moz-box-shadow: 0 0 3px #69c;
126 -webkit-box-shadow: 0 0 3px #69c; 131 -webkit-box-shadow: 0 0 3px #69c;
127 } 132 }
128 -#nav-bar li.active {  
129 - border-color: #fff;  
130 - background-color: #CCC; 133 +#nav-bar li.active {
  134 + border-color: #fff;
  135 + background-color: #d0d0d0;
131 background-image: none; 136 background-image: none;
132 - box-shadow: inset 0 0 5px #999;  
133 - -moz-box-shadow: inset 0 0 5px #999;  
134 - -webkit-box-shadow: inset 0 0 5px #999; 137 + border-width:1px 1px 0;
  138 + margin-bottom:-2px;
  139 + height:40px;
135 } 140 }
136 141
137 /* Content Wrapper */ 142 /* Content Wrapper */
@@ -144,7 +149,7 @@ a.action { float: right; font-size: 0.9em;} @@ -144,7 +149,7 @@ a.action { float: right; font-size: 0.9em;}
144 padding: 30px 20px; 149 padding: 30px 20px;
145 border-top: 1px solid #FFF; 150 border-top: 1px solid #FFF;
146 border-bottom: 1px solid #FFF; 151 border-bottom: 1px solid #FFF;
147 - background-color: #e2e2e2; 152 + background-color: #ececec;
148 } 153 }
149 #content-comments { 154 #content-comments {
150 background-color: #ffffff; 155 background-color: #ffffff;
@@ -327,11 +332,6 @@ form div.buttons button.sign_in { @@ -327,11 +332,6 @@ form div.buttons button.sign_in {
327 padding-left: 40px; 332 padding-left: 40px;
328 background: transparent url(images/icons/right-arrow.png) 3px 3px no-repeat; 333 background: transparent url(images/icons/right-arrow.png) 3px 3px no-repeat;
329 } 334 }
330 -form > div > span {  
331 - display: block; margin-top: 0.5em;  
332 - font-size: 0.85em;  
333 - color: #787878;  
334 -}  
335 form strong.option { 335 form strong.option {
336 display: block; 336 display: block;
337 margin: 0.7em 0; 337 margin: 0.7em 0;
@@ -386,15 +386,18 @@ table thead th { @@ -386,15 +386,18 @@ table thead th {
386 border-top: 1px solid #FFF; 386 border-top: 1px solid #FFF;
387 border-bottom: 1px solid #FFF; 387 border-bottom: 1px solid #FFF;
388 } 388 }
389 -table tbody tr:first-child td {  
390 - border-top: 1px solid #C6C6C6;  
391 -}  
392 table th, table td { 389 table th, table td {
393 border-top: 1px solid #C6C6C6; 390 border-top: 1px solid #C6C6C6;
394 padding: 10px 8px; 391 padding: 10px 8px;
395 text-align: left; 392 text-align: left;
396 } 393 }
397 -table th { background-color: #E2E2E2; font-weight: bold; text-transform: uppercase; white-space: nowrap; } 394 +table tbody tr:first-child th, table tbody tr:first-child td {
  395 + border-top: none;
  396 +}
  397 +table thead + tbody tr:first-child td {
  398 + border-top: 1px solid #C6C6C6;
  399 +}
  400 +table th { background-color: #ececec; font-weight: bold; text-transform: uppercase; white-space: nowrap; }
398 table tbody tr:nth-child(odd) td { background-color: #F9F9F9; } 401 table tbody tr:nth-child(odd) td { background-color: #F9F9F9; }
399 table .main { width: 100%; } 402 table .main { width: 100%; }
400 403
@@ -431,56 +434,9 @@ pre { @@ -431,56 +434,9 @@ pre {
431 margin: 24px 0; 434 margin: 24px 0;
432 text-align: center; 435 text-align: center;
433 } 436 }
434 -.pagination a, .pagination em, .pagination span {  
435 - display: inline-block;  
436 - padding: 0 0.8em;  
437 - margin: 0 0.2em;  
438 - line-height: 30px;  
439 - color: #666;  
440 - background: #FFF url(images/button-bg.png) 0 50% repeat-x;  
441 - border: 1px solid #BBB;  
442 - border-radius: 5px;  
443 - -moz-border-radius: 5px;  
444 - -webkit-border-radius: 5px;  
445 -}  
446 -.pagination a:hover {  
447 - text-decoration: none !important;  
448 - box-shadow: 0px 0px 4px #69C;  
449 - -moz-box-shadow: 0px 0px 4px #69C;  
450 - -webkit-box-shadow: 0px 0px 4px #69C  
451 -}  
452 -.pagination .previous_page, .pagination .next_page {  
453 - padding: 0 1em;  
454 - margin: 0 2.5em 0 0;  
455 - line-height: 39px;  
456 - border-radius: 39px;  
457 - -moz-border-radius: 39px;  
458 - -webkit-border-radius: 39px;  
459 -}  
460 -.pagination .next_page {  
461 - margin: 0 0 0 2.5em;  
462 -}  
463 -.pagination .disabled {  
464 - opacity: 0.5;  
465 - -moz-opacity: 0.5;  
466 - -webkit-opacity: 0.5;  
467 - cursor: no-drop;  
468 -}  
469 .pagination em { 437 .pagination em {
470 - padding: 0em 0.6em;  
471 - line-height: 26px;  
472 - background-color: #CCC;  
473 - background-image: none;  
474 - border-color: #FFF;  
475 - box-shadow: inset 0 0 5px #999;  
476 - -moz-box-shadow: inset 0 0 5px #999;  
477 - -webkit-box-shadow: inset 0 0 5px #999;  
478 font-style: normal; 438 font-style: normal;
479 -}  
480 -.pagination .gap {  
481 - padding: 0 0.4em;  
482 - border: none;  
483 - background: none; 439 + font-weight: bold;
484 } 440 }
485 441
486 /* Buttons */ 442 /* Buttons */
@@ -495,10 +451,9 @@ a.button { @@ -495,10 +451,9 @@ a.button {
495 border-radius: 30px; 451 border-radius: 30px;
496 -moz-border-radius: 30px; 452 -moz-border-radius: 30px;
497 -webkit-border-radius: 30px; 453 -webkit-border-radius: 30px;
498 - box-shadow: inset 0px 0px 4px #FFF;  
499 - -moz-box-shadow: inset 0px 0px 4px #FFF;  
500 - -webkit-box-shadow: inset 0px 0px 4px #FFF;  
501 line-height: 30px; 454 line-height: 30px;
  455 + min-width: 54px;
  456 + text-align: center;
502 } 457 }
503 input[type="submit"]:hover.button, 458 input[type="submit"]:hover.button,
504 a:hover.button { 459 a:hover.button {
@@ -512,26 +467,36 @@ a.button.active { @@ -512,26 +467,36 @@ a.button.active {
512 border-color: #fff; 467 border-color: #fff;
513 background-color: #CCC; 468 background-color: #CCC;
514 background-image: none; 469 background-image: none;
515 - box-shadow: inset 0 0 5px #999;  
516 - -moz-box-shadow: inset 0 0 5px #999;  
517 - -webkit-box-shadow: inset 0 0 5px #999;  
518 } 470 }
519 471
520 472
521 /* Tab Bar */ 473 /* Tab Bar */
522 .tab-bar { 474 .tab-bar {
523 - margin-bottom: 24px;  
524 - background-color: #E2E2E2;  
525 - border: 1px solid #BBB; 475 + margin-top: 12px;
  476 +}
  477 +#content .tab-bar a.button {
  478 + border-bottom:0;
  479 + margin-bottom:0;
  480 + border-top-left-radius:12px;
  481 + border-top-right-radius:12px;
  482 + border-bottom-left-radius:0;
  483 + border-bottom-right-radius:0;
  484 + height:30px;
  485 +}
  486 +#content .tab-bar a.button.active {
  487 + background-color:white;
  488 + border-color:#ccc;
  489 + border-style:solid;
  490 + border-width:1px 1px 0;
  491 + margin-bottom:-1px;
  492 + height:31px;
526 } 493 }
527 .tab-bar ul { 494 .tab-bar ul {
528 - padding: 9px 12px;  
529 - border-top: 1px solid #FFF;  
530 - border-bottom: 1px solid #FFF; 495 + padding: 9px 0 0;
  496 + line-height:0;
531 } 497 }
532 .tab-bar li { 498 .tab-bar li {
533 display: inline-block; 499 display: inline-block;
534 - margin-right: 14px;  
535 } 500 }
536 501
537 /* Watchers and Issue Tracker Forms */ 502 /* Watchers and Issue Tracker Forms */
@@ -586,6 +551,10 @@ table.apps tbody tr:hover td ,table.errs tbody tr:hover td { background-color: # @@ -586,6 +551,10 @@ table.apps tbody tr:hover td ,table.errs tbody tr:hover td { background-color: #
586 table.apps td.name, table.errs td.message { 551 table.apps td.name, table.errs td.message {
587 width: 100%; 552 width: 100%;
588 } 553 }
  554 +td.message .line {
  555 + display:inline-block;
  556 + margin-left:1em;
  557 +}
589 td.deploy { 558 td.deploy {
590 white-space: nowrap; 559 white-space: nowrap;
591 } 560 }
@@ -685,6 +654,8 @@ table.deploys td.when { @@ -685,6 +654,8 @@ table.deploys td.when {
685 width: 100%; 654 width: 100%;
686 margin-bottom: 1em; 655 margin-bottom: 1em;
687 overflow: auto; 656 overflow: auto;
  657 + border:1px solid #ccc;
  658 + padding:1px;
688 } 659 }
689 660
690 .window table { 661 .window table {