Commit 55f6db972f0aab3c631c7523f892d9bf35414b40

Authored by Nathan Broadbent
1 parent 34f719db
Exists in master and in 1 other branch production

Changed ul/li in backtrace 'table' to th/td. Subpixel rendering caused the lines…

… to go out of sync depending on zoom levels for webkit browsers. Sure, you shouldn't use tables for layouts, but when you have a 'heading' and a 'column' for a 'table' of data ... that's what they're for! [ci skip]
app/views/notices/_backtrace.html.haml
1 1 .window
2 2 %table.backtrace
3   - %tr
  3 + %tr.padding
  4 + %th
  5 + %td
  6 + - lines.each do |line|
  7 + %tr
  8 + %th.line-numbers= line_number_with_link(@app, line)
  9 + %td.lines{:class => (Notice.in_app_backtrace_line?(line) ? 'in-app' : nil)}
  10 + = line['file']
  11 + →
  12 + %strong= line['method']
  13 + %tr.padding
4 14 %th
5   - %ul.line-numbers
6   - - lines.each do |line|
7   - %li= line_number_with_link(@app, line)
8 15 %td
9   - %ul.lines
10   - - lines.each do |line|
11   - - in_app = line['file'].to_s.gsub!('[PROJECT_ROOT]','') && !line['file'].to_s.match(/^\/vendor\//)
12   - %li{:class => (in_app ? 'in-app' : nil)}
13   - = line['file']
14   - →
15   - %strong= line['method']
16 16  
... ...
public/stylesheets/application.css
... ... @@ -683,38 +683,49 @@ table.deploys td.when {
683 683 margin: 0;
684 684 }
685 685  
  686 +table.backtrace td, table.backtrace th {
  687 + border-top: none;
  688 +}
686 689 table.backtrace td {
687 690 width: 100%;
688 691 padding: 0;
689 692 margin: 0;
690 693 color: #C7C7C7;
691   - background-color: #222 !important;
692   -}
693   -table.backtrace ul.line-numbers {
694   - padding-top: 1px;
  694 + background-color: #222;
695 695 }
696   -table.backtrace ul.line-numbers li {
  696 +
  697 +/* remove alternating color rules */
  698 +table.backtrace tr:nth-child(2n+1) td { background-color: #222; }
  699 +table.backtrace tr:first-child td { border-top: 0; }
  700 +
  701 +table.backtrace th.line-numbers {
697 702 border-bottom: 1px solid #F0F0F0;
698 703 font-size: 13px;
699   - line-height: 20px;
700 704 text-align: right;
  705 + vertical-align: middle;
  706 + padding: 1px 6px 1px 7px;
701 707 }
702 708  
703   -table.backtrace ul.lines {
704   - padding: 10px 8px;
705   - overflow: auto;
706   -}
707   -table.backtrace ul.lines li {
  709 +table.backtrace td.lines {
708 710 border-bottom: 1px solid #2A2A2A;
709 711 font-size: 13px;
710   - line-height: 20px;
  712 + padding-left: 8px;
  713 + vertical-align: middle;
711 714 white-space: nowrap;
712 715 }
713   -table.backtrace ul.lines li.in-app {
  716 +table.backtrace td.lines.in-app {
714 717 color: #2adb2e;
715 718 background-color: #2f2f2f;
716 719 }
717 720  
  721 +/* Extra empty rows at top and bottom of table */
  722 +table.backtrace tr.padding th, table.backtrace tr.padding td {
  723 + height: 10px;
  724 + margin: 0;
  725 + padding: 0;
  726 +}
  727 +
  728 +
718 729 span.click_span {
719 730 font-size: 0.7em;
720 731 }
... ...