From 3556e8c3c2c86929b398732a9d49020993bc2b62 Mon Sep 17 00:00:00 2001
From: diminator <dimi.dejonghe@gmail.com>
Date: Thu, 2 Jul 2015 14:40:04 +0200
Subject: [PATCH] ellipsis

---
 .../accordion_list_item.js                    |  5 ++++-
 sass/main.scss                                | 21 +++++++++++++++++++
 2 files changed, 25 insertions(+), 1 deletion(-)

diff --git a/js/components/ascribe_accordion_list/accordion_list_item.js b/js/components/ascribe_accordion_list/accordion_list_item.js
index f7bfa925..a298729e 100644
--- a/js/components/ascribe_accordion_list/accordion_list_item.js
+++ b/js/components/ascribe_accordion_list/accordion_list_item.js
@@ -46,7 +46,10 @@ let AccordionListItem = React.createClass({
                             </div>
                         </div>
                         <div className="col-xs-8 col-sm-9 col-md-9 col-lg-9 col-md-offset-1 col-lg-offset-1 accordion-list-item-header">
-                            <h1 onClick={this.handleClick}>{this.props.content.title}</h1>
+                            <OverlayTrigger delay={500} placement="left"
+                                overlay={<Tooltip>{this.props.content.title}</Tooltip>}>
+                                <h1 className="truncate" onClick={this.handleClick}>{this.props.content.title}</h1>
+                            </OverlayTrigger>
                             <h3>{getLangText('by %s', this.props.content.artist_name)}</h3>
                             <div>
                                 <span>{this.props.content.date_created.split('-')[0]}</span>
diff --git a/sass/main.scss b/sass/main.scss
index 8eb9cc8c..1bfcee6d 100644
--- a/sass/main.scss
+++ b/sass/main.scss
@@ -52,6 +52,27 @@ html {
     border-color: #CCC
 }
 
+.truncate {
+    white-space: nowrap;
+    width: 4em;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    @media only screen and (min-width: 400px) {
+        width: 8em;
+    }
+    @media only screen and (min-width: 600px) {
+        width: 12em;
+    }
+    @media only screen and (min-width: 1000px) {
+        width: 14em;
+    }
+    @media only screen and (min-width: 1200px) {
+        width: 16em;
+    }
+    @media only screen and (min-width: 1400px) {
+        width: 18em;
+    }
+}
 .navbar-right {
     margin-right: 0;
 }