Name and Country are truncated if they are too long using css to styl…

…e the ellipses and bootstrap tooltips to display the full text (but only on non-touch devices)
ciremoussadia · Apr 14, 2016 · e333b06 · e333b06
1 parent 8b64173
commit e333b06
Show file tree

Hide file tree

Showing 6 changed files with 22 additions and 8 deletions.
diff --git a/app/assets/javascripts/users.js b/app/assets/javascripts/users.js
@@ -12,6 +12,12 @@ WebsiteOne.define('Users', function () {
         }, 300);
     }
 
+    function enableBootstrapTooltipsOnNonTouchDevices() {
+        if (!('ontouchstart' in document.documentElement)) {
+            $('[data-toggle="tooltip"]').tooltip({delay: { "show": 500, "hide": 100 }});
+        }
+    }
+
     function init() {
         $('.yt_link').on('click', selectVideo);
 
@@ -65,6 +71,8 @@ WebsiteOne.define('Users', function () {
         });
 
         $('#require_users_profile').modal({show: true});
+
+        enableBootstrapTooltipsOnNonTouchDevices();
     }
 
     return {

diff --git a/app/assets/stylesheets/global/users.scss b/app/assets/stylesheets/global/users.scss
@@ -104,6 +104,11 @@
   }
 }
 
+.media-body {
+  display: block;
+  width: 60%;
+}
+
 .media-item {
   height: 100px;
   margin-bottom: 30px;

diff --git a/app/views/users/_user_list.html.erb b/app/views/users/_user_list.html.erb
@@ -6,15 +6,15 @@
                 <%= presenter.gravatar_image(size: 80,
                                              class: 'img-rounded media-object pull-left') %>
                 <div class="media-body index-summary">
-                  <p class="media-heading"><%= presenter.display_name %>
+                  <p class="media-heading" data-toggle="tooltip" title="<%= presenter.display_name %>"><%= presenter.display_name %>
                     <% if user.online? %>
                         <%= image_tag('green-dot.png', size: '10x10', alt: 'Online!') %>
                     <% end %></p>
                   <% if presenter.has_title? %>
                       <p><%= presenter.title_list %></p>
                   <% end %>
                   <% if user.country_name %>
-                      <p><%= presenter.country_name %></p>
+                      <p data-toggle="tooltip" title="<%= presenter.country_name %>"><%= presenter.country_name %></p>
                   <% end %>
                 </div>
               </a>

diff --git a/changelog.md b/changelog.md
@@ -3,3 +3,4 @@
 2016-03-13 @freeranger #855 - Convert 'should' to 'expect'
 2016-03-13 @freeranger #900 - Fix Sponsor alignment
 2016-03-15 @freeranger #849 - Too much whitespace in title on mobile
+2016-03-17 @freeranger #744 - Truncate long names and countries
diff --git a/features/remind_complete_profile.feature b/features/remind_complete_profile.feature
@@ -6,22 +6,22 @@ Feature: Remind User complete profile
 
   Scenario: User has incomplete profile from home page
     Given I exist as a user
-    And I have an incoplete profile
+    And I have an incomplete profile
     When I sign in with valid credentials
     Then I should see "We've noticed that your profile is incomplete."
     And I should see link "Take me to my profile page"
     And I should see button "Continue using the site"
 
   Scenario: User has incomplete profile from home page and choose 'edit registration'
     Given I exist as a user
-    And I have an incoplete profile
+    And I have an incomplete profile
     When I sign in with valid credentials
     And I click "Take me to my profile page"
     Then I should be on the "edit registration" page
 
   Scenario: User has incomplete profile from home page and choose 'continue'
     Given I exist as a user
-    And I have an incoplete profile
+    And I have an incomplete profile
     When I sign in with valid credentials
     And I click "Continue using the site"
     Then I should be on the "home" page
@@ -33,7 +33,7 @@ Feature: Remind User complete profile
 
   Scenario: User has incomplete profile not from home page
     Given I exist as a user
-    And I have an incoplete profile
+    And I have an incomplete profile
     And I visit "projects"
     When I sign in with valid credentials
     Then I should see "We've noticed that your profile is incomplete."

diff --git a/features/step_definitions/user_steps.rb b/features/step_definitions/user_steps.rb
@@ -437,7 +437,7 @@
   page.select(selected_from_list, from: filter)
 end
 
-Given(/^I have an incoplete profile$/) do
+Given(/^I have an incomplete profile$/) do
   @user.bio = ''
   @user.save
-end
+end