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 615 /* Apps Table */
616 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 619 table.apps td { padding: 16px 20px; }
620 620 table.apps th { padding: 10px 20px; }
621 621  
... ... @@ -665,9 +665,12 @@ td.count, td.issue_link {
665 665 }
666 666  
667 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 675 table.errs td.app .environment {
673 676 font-size: 0.8em;
... ... @@ -676,12 +679,10 @@ table.errs td.app .environment {
676 679 table.errs td.message a {
677 680 display: block;
678 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 687 table.errs td.message em {
687 688 color: #727272;
... ...
app/helpers/problems_helper.rb
  Diff comments   View file @afa378c
... ... @@ -3,17 +3,6 @@ module ProblemsHelper
3 3 t(format('problems.confirm.%s', action)) unless Errbit::Config.confirm_err_actions.eql? false
4 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 6 def gravatar_tag(email, options = {})
18 7 return nil unless email.present?
19 8  
... ...
app/views/problems/_table.html.haml
  Diff comments   View file @afa378c
... ... @@ -17,13 +17,13 @@
17 17 %td.select
18 18 = check_box_tag "problems[]", problem.id, selected_problems.member?(problem.id.to_s)
19 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 21 - if current_page?(:controller => 'problems')
22 22 %span.environment= link_to problem.environment, problems_path(:environment => problem.environment)
23 23 - else
24 24 %span.environment= link_to problem.environment, app_path(problem.app, :environment => problem.environment)
25 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 27 %em= problem.where
28 28 - if problem.comments_count > 0
29 29 - comment = problem.comments.last
... ...
spec/helpers/problems_helper_spec.rb
  Diff comments   View file @afa378c
1 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 2 describe "#gravatar_tag" do
19 3 let(:email) { "gravatar@example.com" }
20 4 let(:email_hash) { Digest::MD5.hexdigest email }
... ...