refactor edition-button

css/main.css

@@ -16,7 +16,7 @@
     
 .ascribe-table-header-column {
     display: table;
-    height:4em;
+    height:3em;
 }
 
 .ascribe-table-header-column > span {
@@ -44,7 +44,7 @@
     display: table;
     font-family: 'Source Sans Pro';
     font-size: 1.2em;
-    height:4em;
+    height:3em;
 }
 
 .ascribe-table-item-column > * {
@@ -52,11 +52,10 @@
     vertical-align: middle;
 }
 
-.btn-ascribe, .btn-ascribe:hover, .btn-ascribe:active, .btn-ascribe:focus {
-    background-color: rgba(2, 182, 163, 0.5);
-    border-color: rgba(2, 182, 163, 0.5);
-}
-
 .ascribe-table-item-selected {
     background-color: rgba(2, 182, 163, 0.5);
 }
+
+.ascribe-table-item-selectable {
+    cursor: default;
+}

js/components/ascribe_table/table_item_selectable.js

@@ -11,7 +11,8 @@ let TableItemSelectable = React.createClass({
     propTypes: {
         columnList: React.PropTypes.arrayOf(React.PropTypes.instanceOf(TableColumnContentModel)),
         columnContent: React.PropTypes.object,
-        parentId: React.PropTypes.number
+        parentId: React.PropTypes.number,
+        className: React.PropTypes.string
     },
 
     selectItem() {
@@ -25,7 +26,7 @@ let TableItemSelectable = React.createClass({
 
         return (
             <TableItem 
-                classNames={tableItemClasses}
+                classNames={tableItemClasses + ' ' + this.props.className}
                 columnList={this.props.columnList}
                 columnContent={this.props.columnContent}
                 onClick={this.selectItem}>

js/components/ascribe_table/table_item_subtable.js

@@ -74,6 +74,7 @@ let TableItemSubtable = React.createClass({
                             {this.state.editionList[this.props.columnContent.id].map((edition, i) => {
                                 return (
                                     <TableItemSelectable
+                                        className="ascribe-table-item-selectable"
                                         selectItem={this.selectItem}
                                         parentId={this.props.columnContent.id}
                                         key={i}>
@@ -93,9 +94,10 @@ let TableItemSubtable = React.createClass({
                     <TableItemWrapper
                         columnList={this.props.columnList}
                         columnContent={this.props.columnContent}
-                        columnWidth={10}></TableItemWrapper>
-                    <div className="col-xs-2 col-sm-2 col-md-2 col-lg-2 ascribe-table-item-column">
-                        <TableItemSubtableButton content="Editions" onClick={this.loadEditionList}>
+                        columnWidth={12}>
+                    </TableItemWrapper>
+                    <div className="col-xs-1 col-sm-1 col-md-1 col-lg-1 ascribe-table-item-column">
+                        <TableItemSubtableButton content="+" onClick={this.loadEditionList}>
                         </TableItemSubtableButton>
                     </div>
                 </div>

js/components/ascribe_table/table_item_subtable_button.js

@@ -10,7 +10,7 @@ let TableItemSubtableButton = React.createClass({
     render() {
         return (
             <span>
-                <button type="button" className="btn btn-ascribe btn-primary btn-sm" onClick={this.props.onClick}>
+                <button type="button" className="btn btn-default btn-sm ascribe-table-expand-button" onClick={this.props.onClick}>
                     {this.props.content}
                 </button>
             </span>