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 17 #header
18 18 %div
19 19 = link_to 'Errbit', root_path, :id => 'site-name'
  20 + = render 'shared/navigation' if current_user
20 21 = render 'shared/session'
21   -
22   - = render 'shared/navigation' if current_user
23   -
24 22 #content-wrapper
25 23 #content-title
26 24 %h1= yield :title
... ...
public/stylesheets/application.css
  Diff comments   View file @adbac57
1 1 html {
2 2 margin: 0; padding: 0;
3   - color: #585858; background-color: #E2E2E2;
  3 + color: #585858; background-color: #d0d0d0;
4 4 font-size: 62.8%; font-family: Helvetica, "Lucida Grande","Lucida Sans",Arial,sans-serif;
5 5 }
6 6 body {
... ... @@ -17,7 +17,7 @@ body {
17 17 .nowrap { white-space: nowrap; }
18 18  
19 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 21 h1 { font-size: 2.0em; line-height: 1.2em; text-shadow: 1px 1px 0px #FFF; -webkit-text-shadow: 1px 1px 0px #FFF;}
22 22 h2 { font-size: 1.7em; line-height: 1.2em; }
23 23 h3 { font-size: 1.5em; line-height: 1.2em; }
... ... @@ -42,20 +42,24 @@ a.action { float: right; font-size: 0.9em;}
42 42  
43 43 /* Header */
44 44 #header {
45   - height: 75px;
46 45 margin-bottom: 24px;
47 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 53 #header #site-name {
51 54 display: block;
52 55 width: 88px;
53 56 height: 31px;
54 57 position: absolute;
55   - top: 22px;
  58 + top: 26px;
56 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 64 #header #session-links {
61 65 position: absolute; top: 18px; right: 0;
... ... @@ -64,49 +68,50 @@ a.action { float: right; font-size: 0.9em;}
64 68 #header #session-links li {
65 69 float: right;
66 70 margin-left: 10px;
67   - color: #FFF;
  71 + color: #ccc;
68 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 76 border: 1px solid #484B4F;
73 77 font-size: 14px;
74   - font-weight: bold;
75 78 }
76 79 #header #session-links li:hover {
77 80 box-shadow: 0 0 3px #69c;
78 81 -moz-box-shadow: 0 0 3px #69c;
79 82 -webkit-box-shadow: 0 0 3px #69c;
80 83 }
  84 +#header #session-links li:hover a {
  85 + color: white;
  86 +}
81 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 92 #header #session-links a:hover {
87 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 96 /* Navigation */
97 97 #nav-bar {
98   - margin-bottom: 24px;
99   - height: 41px;
  98 + position: absolute;
  99 + bottom: 0;
  100 + left: 128px;
100 101 }
101 102 #nav-bar li {
102 103 float: left;
103   - margin-right: 18px;
  104 + height: 38px;
  105 + margin-right: 12px;
104 106 color: #666;
105 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 116 #nav-bar li a {
112 117 color: #666;
... ... @@ -120,18 +125,18 @@ a.action { float: right; font-size: 0.9em;}
120 125 #nav-bar li.apps a { background-image: url(images/icons/briefcase.png); }
121 126 #nav-bar li.errs a { background-image: url(images/icons/error.png); }
122 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 129 box-shadow: 0 0 3px #69c;
125 130 -moz-box-shadow: 0 0 3px #69c;
126 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 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 142 /* Content Wrapper */
... ... @@ -144,7 +149,7 @@ a.action { float: right; font-size: 0.9em;}
144 149 padding: 30px 20px;
145 150 border-top: 1px solid #FFF;
146 151 border-bottom: 1px solid #FFF;
147   - background-color: #e2e2e2;
  152 + background-color: #ececec;
148 153 }
149 154 #content-comments {
150 155 background-color: #ffffff;
... ... @@ -327,11 +332,6 @@ form div.buttons button.sign_in {
327 332 padding-left: 40px;
328 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 335 form strong.option {
336 336 display: block;
337 337 margin: 0.7em 0;
... ... @@ -386,15 +386,18 @@ table thead th {
386 386 border-top: 1px solid #FFF;
387 387 border-bottom: 1px solid #FFF;
388 388 }
389   -table tbody tr:first-child td {
390   - border-top: 1px solid #C6C6C6;
391   -}
392 389 table th, table td {
393 390 border-top: 1px solid #C6C6C6;
394 391 padding: 10px 8px;
395 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 401 table tbody tr:nth-child(odd) td { background-color: #F9F9F9; }
399 402 table .main { width: 100%; }
400 403  
... ... @@ -431,56 +434,9 @@ pre {
431 434 margin: 24px 0;
432 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 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 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 442 /* Buttons */
... ... @@ -495,10 +451,9 @@ a.button {
495 451 border-radius: 30px;
496 452 -moz-border-radius: 30px;
497 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 454 line-height: 30px;
  455 + min-width: 54px;
  456 + text-align: center;
502 457 }
503 458 input[type="submit"]:hover.button,
504 459 a:hover.button {
... ... @@ -512,26 +467,36 @@ a.button.active {
512 467 border-color: #fff;
513 468 background-color: #CCC;
514 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 473 /* Tab Bar */
522 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 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 498 .tab-bar li {
533 499 display: inline-block;
534   - margin-right: 14px;
535 500 }
536 501  
537 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 551 table.apps td.name, table.errs td.message {
587 552 width: 100%;
588 553 }
  554 +td.message .line {
  555 + display:inline-block;
  556 + margin-left:1em;
  557 +}
589 558 td.deploy {
590 559 white-space: nowrap;
591 560 }
... ... @@ -685,6 +654,8 @@ table.deploys td.when {
685 654 width: 100%;
686 655 margin-bottom: 1em;
687 656 overflow: auto;
  657 + border:1px solid #ccc;
  658 + padding:1px;
688 659 }
689 660  
690 661 .window table {
... ...