Sha256: 37a61b01a3a23fc0b53e17683a93197d35e2bf6e08c19975f0c7c7f77303800f
Contents?: true
Size: 1.73 KB
Versions: 8
Compression:
Stored size: 1.73 KB
Contents
var React = require('react');
var Mui = require('material-ui');
var Paper = Mui.Paper;
var $ = require('jquery');
/**
* @prop channel
*/
var Channel = React.createClass({
componentDidMount: function() {
// Font-size adaptation based on card width
$('.text-fit').each(function() {
$(this).css('font-size', '2em');
while( $(this).width() > $('.name-wrapper').width() - 10 ) {
$(this).css('font-size', (parseInt($(this).css('font-size')) - 1) + "px" );
}
});
},
handleClick: function() {
this.props.onSetPlaying(this.props.chId);
},
render: function() {
var style = {
backgroundImage: 'url(' + this.props.channel.screenshot + ')',
backgroundSize: '100% 100%'
};
var iconStyle = {
backgroundColor: this.props.channel.icon
};
var border = this.props.playing ? {
outline: 'solid 5px rgba(255,255,0,0.75)'
} : null;
return (
<Paper className='channel' style={style} ref='channelRef' onTouchTap={this.handleClick} >
<div className='channel-div' style={border}>
<div className='channel-caption'>
<div className='icon-name-wrapper'>
<div className='channel-icon' ref='channelIcon' style={iconStyle} > </div>
<div className='name-wrapper'>
<span className='channel-name text-fit'>{this.props.channel.name}</span>
</div>
</div>
</div>
</div>
</Paper>);
}
});
module.exports = Channel;
Version data entries
8 entries across 8 versions & 1 rubygems