Download as
Browse Code »

Commit afa378caef91b362bf90d61295b8a64dd0921a8f

Authored by Stephen Crosby
1 parent ff341e5e
Exists in master

Refs #1011 problems index layout fix 

Long names in the problems index can blow up the table layout, causing
ugliness and potentially horizontal scrolling. This change adds
whitespace: nowrap and sets a few td widths to keep the layout from
jumping around.
Showing 4 changed files with 13 additions and 39 deletions   Show diff stats
app/assets/stylesheets/errbit.css.erb
  Diff comments   View file @afa378c
@@ -615,7 +615,7 @@ div.issue_tracker.nested label.r_on, div.issue_tracker.nested label.r_on:hover, @@ -615,7 +615,7 @@ div.issue_tracker.nested label.r_on, div.issue_tracker.nested label.r_on:hover,
615 /* Apps Table */ 615 /* Apps Table */
616 table.apps tbody tr:hover td ,table.errs tbody tr:hover td { background-color: #F2F2F2;} 616 table.apps tbody tr:hover td ,table.errs tbody tr:hover td { background-color: #F2F2F2;}
617 617
618 -table.apps td.name, table.errs td.message { width: 100%; } 618 +table.apps td.name { width: 100%; }
619 table.apps td { padding: 16px 20px; } 619 table.apps td { padding: 16px 20px; }
620 table.apps th { padding: 10px 20px; } 620 table.apps th { padding: 10px 20px; }
621 621
@@ -665,9 +665,12 @@ td.count, td.issue_link { @@ -665,9 +665,12 @@ td.count, td.issue_link {
665 } 665 }
666 666
667 /* Err Tables */ 667 /* Err Tables */
668 -table.errs td.app {  
669 - padding-right: 2em;  
670 - width: 20%; 668 +table.errs td.app .name {
  669 + display: block;
  670 + width: 150px;
  671 + white-space: nowrap;
  672 + text-overflow: ellipsis;
  673 + overflow: hidden;
671 } 674 }
672 table.errs td.app .environment { 675 table.errs td.app .environment {
673 font-size: 0.8em; 676 font-size: 0.8em;
@@ -676,12 +679,10 @@ table.errs td.app .environment { @@ -676,12 +679,10 @@ table.errs td.app .environment {
676 table.errs td.message a { 679 table.errs td.message a {
677 display: block; 680 display: block;
678 word-wrap: break-word; 681 word-wrap: break-word;
679 - /* PjpG - configuration in WHAT & WHERE table's columns using ellipsis to avoid oversizing table's width */  
680 - width: 300px;  
681 - overflow: hidden;  
682 - text-overflow: ellipsis;  
683 - -o-text-overflow: ellipsis;  
684 - /* ------ */ 682 + width: 440px;
  683 + white-space: nowrap;
  684 + text-overflow: ellipsis;
  685 + overflow: hidden;
685 } 686 }
686 table.errs td.message em { 687 table.errs td.message em {
687 color: #727272; 688 color: #727272;
app/helpers/problems_helper.rb
  Diff comments   View file @afa378c
@@ -3,17 +3,6 @@ module ProblemsHelper @@ -3,17 +3,6 @@ module ProblemsHelper
3 t(format('problems.confirm.%s', action)) unless Errbit::Config.confirm_err_actions.eql? false 3 t(format('problems.confirm.%s', action)) unless Errbit::Config.confirm_err_actions.eql? false
4 end 4 end
5 5
6 - def truncated_problem_message(problem)  
7 - msg = problem.message  
8 - return if msg.blank?  
9 -  
10 - # Truncate & insert invisible chars so that firefox can emulate  
11 - # 'word-wrap: break-word' CSS rule  
12 - truncate(msg, length: 300, escape: false).  
13 - scan(/.{1,5}/).map { |s| h(s) }.  
14 - join("​").html_safe  
15 - end  
16 -  
17 def gravatar_tag(email, options = {}) 6 def gravatar_tag(email, options = {})
18 return nil unless email.present? 7 return nil unless email.present?
19 8
app/views/problems/_table.html.haml
  Diff comments   View file @afa378c
@@ -17,13 +17,13 @@ @@ -17,13 +17,13 @@
17 %td.select 17 %td.select
18 = check_box_tag "problems[]", problem.id, selected_problems.member?(problem.id.to_s) 18 = check_box_tag "problems[]", problem.id, selected_problems.member?(problem.id.to_s)
19 %td.app 19 %td.app
20 - = link_to problem.app.name, app_path(problem.app) 20 + = link_to problem.app.name, app_path(problem.app), class: 'name', title: problem.app.name
21 - if current_page?(:controller => 'problems') 21 - if current_page?(:controller => 'problems')
22 %span.environment= link_to problem.environment, problems_path(:environment => problem.environment) 22 %span.environment= link_to problem.environment, problems_path(:environment => problem.environment)
23 - else 23 - else
24 %span.environment= link_to problem.environment, app_path(problem.app, :environment => problem.environment) 24 %span.environment= link_to problem.environment, app_path(problem.app, :environment => problem.environment)
25 %td.message 25 %td.message
26 - = link_to truncated_problem_message(problem), app_problem_path(problem.app, problem) 26 + = link_to problem.message, app_problem_path(problem.app, problem), title: problem.message
27 %em= problem.where 27 %em= problem.where
28 - if problem.comments_count > 0 28 - if problem.comments_count > 0
29 - comment = problem.comments.last 29 - comment = problem.comments.last
spec/helpers/problems_helper_spec.rb
  Diff comments   View file @afa378c
1 describe ProblemsHelper do 1 describe ProblemsHelper do
2 - describe '#truncated_problem_message' do  
3 - it 'is html safe' do  
4 - problem = double('problem', message: '#<NoMethodError: ...>')  
5 - truncated = helper.truncated_problem_message(problem)  
6 - expect(truncated).to be_html_safe  
7 - expect(truncated).to_not include('<', '>')  
8 - end  
9 -  
10 - it 'does not double escape html' do  
11 - problem = double('problem', message: '#<NoMethodError: ...>')  
12 - truncated = helper.truncated_problem_message(problem)  
13 - expect(truncated).to be_html_safe  
14 - expect(truncated).to_not include('&amp;')  
15 - end  
16 - end  
17 -  
18 describe "#gravatar_tag" do 2 describe "#gravatar_tag" do
19 let(:email) { "gravatar@example.com" } 3 let(:email) { "gravatar@example.com" }
20 let(:email_hash) { Digest::MD5.hexdigest email } 4 let(:email_hash) { Digest::MD5.hexdigest email }