From d74d5fb39e49e899e19dfc2710f9bebd5a357e8e Mon Sep 17 00:00:00 2001
From: Kris Aubuchon <shout@k-ris.com>
Date: Thu, 3 Jul 2014 23:40:49 -0400
Subject: [PATCH] truncating loooooooooong name fields

---
 .../templates/group/index.js.handlebars       |  2 +-
 .../templates/poster_expansion.handlebars     | 25 +++++++------
 .../stylesheets/common/base/header.scss       |  4 ++
 .../stylesheets/common/base/topic-post.scss   |  5 +++
 .../stylesheets/desktop/poster_expansion.scss | 37 ++++++++++---------
 app/assets/stylesheets/desktop/user.scss      | 22 +++++++++++
 app/assets/stylesheets/mobile/user.scss       |  4 ++
 7 files changed, 69 insertions(+), 30 deletions(-)

diff --git a/app/assets/javascripts/discourse/templates/group/index.js.handlebars b/app/assets/javascripts/discourse/templates/group/index.js.handlebars
index 810bf21bd94..ab0dea2779c 100644
--- a/app/assets/javascripts/discourse/templates/group/index.js.handlebars
+++ b/app/assets/javascripts/discourse/templates/group/index.js.handlebars
@@ -8,7 +8,7 @@
           <a href="{{unbound url}}">{{unbound title}}</a>
         </span>
         {{#if byName}}
-          <span class="title">
+          <span class="name">
             {{unbound byName}}
           </span>
         {{/if}}
diff --git a/app/assets/javascripts/discourse/templates/poster_expansion.handlebars b/app/assets/javascripts/discourse/templates/poster_expansion.handlebars
index bc635c1e899..c2bb9825d6f 100644
--- a/app/assets/javascripts/discourse/templates/poster_expansion.handlebars
+++ b/app/assets/javascripts/discourse/templates/poster_expansion.handlebars
@@ -7,20 +7,21 @@
       <h2><a {{bind-attr href="usernameUrl"}}>{{name}}</a></h2>
     {{/if}}
 
-    {{#if showBadges}}
-      <div class="badge-section">
-        {{#each user.featured_user_badges}}
-          {{user-badge badge=badge}}
-        {{/each}}
-        {{#if showMoreBadges}}
-          {{#link-to 'user.badges' user class="btn more-user-badges"}}
-            {{i18n badges.more_badges count=moreBadgesCount}}
-          {{/link-to}}
-        {{/if}}
-      </div>
-    {{/if}}
+
   </div>
 
+  {{#if showBadges}}
+    <div class="badge-section">
+      {{#each user.featured_user_badges}}
+        {{user-badge badge=badge}}
+      {{/each}}
+      {{#if showMoreBadges}}
+        {{#link-to 'user.badges' user class="btn more-user-badges"}}
+          {{i18n badges.more_badges count=moreBadgesCount}}
+        {{/link-to}}
+      {{/if}}
+    </div>
+  {{/if}}
   {{#if user}}
     <div class="metadata">
       {{#if user.location}}<h3><i class="fa fa-map-marker"></i> {{user.location}}</h3>{{/if}}
diff --git a/app/assets/stylesheets/common/base/header.scss b/app/assets/stylesheets/common/base/header.scss
index efe7727e095..0935bd8b414 100644
--- a/app/assets/stylesheets/common/base/header.scss
+++ b/app/assets/stylesheets/common/base/header.scss
@@ -44,6 +44,10 @@
       a {
         color: $header_primary;
         font-size: 14px;
+        max-width: 200px;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
       }
     }
     button.login-button {
diff --git a/app/assets/stylesheets/common/base/topic-post.scss b/app/assets/stylesheets/common/base/topic-post.scss
index 7fc7ce0379b..529ec063f59 100644
--- a/app/assets/stylesheets/common/base/topic-post.scss
+++ b/app/assets/stylesheets/common/base/topic-post.scss
@@ -6,6 +6,11 @@
  span {
    font-size: 13px;
    padding-right: 8px;
+   display: inline-block;
+   max-width: 280px;
+   white-space: nowrap;
+   overflow: hidden;
+   text-overflow: ellipsis;
    a {
      color: scale-color($primary, $lightness: 30%);
    }
diff --git a/app/assets/stylesheets/desktop/poster_expansion.scss b/app/assets/stylesheets/desktop/poster_expansion.scss
index a0ef3c851c8..7bf523fad5c 100644
--- a/app/assets/stylesheets/desktop/poster_expansion.scss
+++ b/app/assets/stylesheets/desktop/poster_expansion.scss
@@ -13,20 +13,27 @@
   h1 {
     display: inline-block;
     min-width: 120px;
-    font-size: 30px;
-    line-height: 33px;
-    margin-bottom: 8px;
-
+    font-size: 25px;
+    line-height: 1.25;
+    display: block;
+    max-width: 280px;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
     a {
       color: $primary;
     }
   }
 
   h2 {
-    font-size: 20px;
-    line-height: 22px;
+    font-size: 15px;
+    line-height: 1.25;
     font-weight: normal;
-    margin-bottom: 5px;
+    display: block;
+    max-width: 280px;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
 
     a {
       color: $primary;
@@ -51,10 +58,11 @@
   }
 
   .metadata {
-    float: right;
+    position: absolute;
+    right: 20px;
+    top: 10px;
     max-width: 180px;
     text-align: right;
-    margin-top: 5px;
   }
 
   .bottom {
@@ -101,16 +109,12 @@
       float: left;
     }
 
-
-
-    h2 {
-      line-height: 12px;
-    }
-
     .badge-section {
       margin-top: 10px;
+      float: left;
+      width: 300px;
+
       h3 {
-        line-height: 43px;
         color: $primary;
         font-size: 14px;
         margin-bottom: -8px;
@@ -120,7 +124,6 @@
     .more-user-badges {
       @extend .user-badge;
       padding: 3px 8px;
-      line-height: 19px;
       font-size: 13px;
     }
   }
diff --git a/app/assets/stylesheets/desktop/user.scss b/app/assets/stylesheets/desktop/user.scss
index 59d9f4f8d49..c1d5cd67cea 100644
--- a/app/assets/stylesheets/desktop/user.scss
+++ b/app/assets/stylesheets/desktop/user.scss
@@ -102,6 +102,12 @@
 
   table.group-members {
     width: 100%;
+    p {
+      max-width: 600px;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
     th.seen {
       text-align: right;
     }
@@ -175,6 +181,10 @@
         margin-bottom: 6px;
         font-weight: normal;
         margin-top: 5px;
+        max-width: 100%;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
       }
 
       a[href] {
@@ -331,6 +341,18 @@
     .title {
       display: block;
       font-size: 14px;
+      max-width: 80%;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+    .name {
+      display: block;
+      font-size: 14px;
+      max-width: 400px;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
     }
     .edit-reason {
       background-color: scale-color($highlight, $lightness: 25%);
diff --git a/app/assets/stylesheets/mobile/user.scss b/app/assets/stylesheets/mobile/user.scss
index 1a5d7aef2bf..640c8bf16d6 100644
--- a/app/assets/stylesheets/mobile/user.scss
+++ b/app/assets/stylesheets/mobile/user.scss
@@ -117,6 +117,10 @@
         font-size: 20px;
         margin-bottom: 6px;
         font-weight: normal;
+        max-width: 100%;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
       }
 
       a[href] {