Merge pull request #59 from JakeSidSmith/ellipsize-repo-names

Ellipsize repo names

Author: ekonstantinidis

src/js/components/repository.js

@@ -16,11 +16,22 @@ var Repository = React.createClass({
   },
 
   render: function () {
+    var organisationName, repositoryName;
+
+    if (typeof this.props.repoName === 'string') {
+      var splitName = this.props.repoName.split('/');
+      organisationName = splitName[0];
+      repositoryName = splitName[1];
+    }
+
     return (
       <div>
         <div className='row repository'>
           <div className='col-xs-2'><img className='avatar' src={this.getAvatar()} /></div>
-          <div className='col-xs-10 name' onClick={this.openBrowser}>{this.props.repoName}</div>
+          <div className='col-xs-10 name' onClick={this.openBrowser}>
+            <span>{'/' + repositoryName}</span>
+            <span>{organisationName}</span>
+          </div>
         </div>
 
         {this.props.repo.map(function (obj) {

src/less/style.less

@@ -302,6 +302,15 @@ input {
     font-size: 18px;
     .FontOpenSansSemibold();
     text-align: right;
+
+    span {
+      display: inline-block;
+      float: right;
+      max-width: 50%;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+      overflow: hidden;
+    }
   }
 }