diff options
| -rw-r--r-- | src/web/js/components/MiddlePanel.react.js | 18 | ||||
| -rw-r--r-- | src/web/static/css/one-page-app.css | 15 |
2 files changed, 25 insertions, 8 deletions
diff --git a/src/web/js/components/MiddlePanel.react.js b/src/web/js/components/MiddlePanel.react.js index d2c4df5b..4fe14c09 100644 --- a/src/web/js/components/MiddlePanel.react.js +++ b/src/web/js/components/MiddlePanel.react.js @@ -35,20 +35,22 @@ var TableLine = React.createClass({ var liked = (<Glyphicon glyph={this.state.liked?"star":"star-empty"} onClick={this.toogleLike} />); return (<div className="list-group-item"> - <h4>{title}</h4> - {read} {liked} {this.props.title} + <h5><strong>{title}</strong></h5><div /> + <div>{read} {liked} {this.props.title}</div> </div> ); }, toogleRead: function() { - this.setState({read: !this.state.read}); - MiddlePanelActions.changeRead(this.props.category_id, - this.props.feed_id, this.props.article_id, !this.state.read); + this.setState({read: !this.state.read}, function() { + MiddlePanelActions.changeRead(this.props.category_id, + this.props.feed_id, this.props.article_id, this.state.read); + }.bind(this)); }, toogleLike: function() { - this.setState({liked: !this.state.liked}); - MiddlePanelActions.changeLike(this.props.category_id, - this.props.feed_id, this.props.article_id, !this.state.liked); + this.setState({liked: !this.state.liked}, function() { + MiddlePanelActions.changeLike(this.props.category_id, + this.props.feed_id, this.props.article_id, this.state.liked); + }.bind(this)); }, }); diff --git a/src/web/static/css/one-page-app.css b/src/web/static/css/one-page-app.css index d25e3886..02aa405a 100644 --- a/src/web/static/css/one-page-app.css +++ b/src/web/static/css/one-page-app.css @@ -87,3 +87,18 @@ #middle-panel .input-group { margin-bottom: 10px; } +#middle-panel div.list-group-item{ + padding: 5px 8px; + cursor: pointer; +} +#middle-panel div.list-group-item:hover { + background-color: #f0f0f0; +} +#middle-panel div.list-group-item>h5 { + margin: 0px; +} +#middle-panel div.list-group-item>div:last-child{ + width: 100%; + max-height: 22px; + overflow: hidden; +} |