Alex/flox
1
0
Fork 0
mirror of https://github.com/devfake/flox.git synced 2024-11-15 06:32:34 +01:00
Code Issues Releases Wiki Activity

close hidden-content

Browse Source
This commit is contained in:
devfake 2016-02-24 12:21:42 +01:00
parent 34c1b2b8a3
commit e3c7ea11e7
7 changed files with 128 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
client/app/partials/flox-item.js
View File

@ -7,9 +7,11 @@ class FloxItem extends React.Component {
return (
<div className={'item ' + this.props.loadClass + (this.props.isActive ? ' active' : '')} onClick={this.changeActiveKey.bind(this)}>
<div className={'item ' + this.props.loadClass + (this.props.isActive ? ' active' : '')} onClick={this.props.isActive ? null : this.changeActiveKey.bind(this)}>
<div className="item-hidden-content">
<span className="item-title" title={title}>{title}</span>
<span className="item-title">{title}</span>
<i className="icon-close-small" onClick={this.closeHiddenContent.bind(this)}></i>
<a href={"https://www.youtube.com/results?search_query=" + title + " Trailer"} target="_blank" className="trailer-btn">Watch Trailer</a>
</div>
<div className="item-image">
{this.props.image ? <img src={this.props.image} /> : <i className="icon-no-image"></i>}
@ -34,6 +36,10 @@ class FloxItem extends React.Component {
changeActiveKey() {
this.props.changeActiveKey(this.props.id);
}
closeHiddenContent() {
this.props.changeActiveKey(null);
}
}
export default FloxItem;

46
client/assets/sass/_item.scss
View File

@ -12,6 +12,11 @@
&:nth-child(5n) {
margin: 50px 0 0 0;
.item-hidden-content {
left: auto;
right: -20px;
}
}
}
@ -68,6 +73,7 @@
.active & {
z-index: 200;
cursor: default;
}
&:hover {
@ -80,6 +86,7 @@
background: #0b0b0b;
width: 444px;
height: 360px;
padding: 20px;
display: none;
position: absolute;
top: -20px;
@ -144,4 +151,43 @@
.light-theme & {
color: $dark;
}
.item-hidden-content & {
font-size: 20px;
margin: 0 0 0 210px;
overflow: visible;
white-space: normal;
}
}
.trailer-btn {
background: $main;
color: #fff;
text-transform: uppercase;
font-size: 15px;
padding: 10px 0;
text-align: center;
width: 185px;
position: absolute;
bottom: 15px;
left: 20px;
&:hover {
background: darken($main, 5%);
}
&:active {
background: darken($main, 10%);
}
}
.icon-close-small {
position: absolute;
top: 15px;
right: 15px;
cursor: pointer;
&:active {
opacity: .8;
}
}

20
client/assets/sass/_sprite.scss
View File

@ -11,13 +11,19 @@ Icon classes can be used entirely standalone. They are named after their origina
*/
.icon-add {
background-image: url(../img/sprite.png);
background-position: -64px -18px;
background-position: -128px -18px;
width: 32px;
height: 32px;
}
.icon-close-small {
background-image: url(../img/sprite.png);
background-position: -129px -64px;
width: 16px;
height: 16px;
}
.icon-close {
background-image: url(../img/sprite.png);
background-position: -96px -18px;
background-position: -64px -18px;
width: 32px;
height: 32px;
}
@ -35,31 +41,31 @@ Icon classes can be used entirely standalone. They are named after their origina
}
.icon-search {
background-image: url(../img/sprite.png);
background-position: -128px -18px;
background-position: -64px -64px;
width: 32px;
height: 32px;
}
.icon-star-active {
background-image: url(../img/sprite.png);
background-position: -160px -18px;
background-position: 0px -64px;
width: 32px;
height: 32px;
}
.icon-star {
background-image: url(../img/sprite.png);
background-position: 0px -64px;
background-position: -32px -64px;
width: 32px;
height: 32px;
}
.icon-time-active {
background-image: url(../img/sprite.png);
background-position: -32px -64px;
background-position: -160px -18px;
width: 32px;
height: 32px;
}
.icon-time {
background-image: url(../img/sprite.png);
background-position: -64px -64px;
background-position: -96px -18px;
width: 32px;
height: 32px;
}

BIN
client/assets/sprites/close-small.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.0 KiB

56
public/assets/css/app.css
View File

@ -435,13 +435,19 @@ Icon classes can be used entirely standalone. They are named after their origina
*/
.icon-add {
background-image: url(../img/sprite.png);
background-position: -64px -18px;
background-position: -128px -18px;
width: 32px;
height: 32px; }
.icon-close-small {
background-image: url(../img/sprite.png);
background-position: -129px -64px;
width: 16px;
height: 16px; }
.icon-close {
background-image: url(../img/sprite.png);
background-position: -96px -18px;
background-position: -64px -18px;
width: 32px;
height: 32px; }
@ -459,31 +465,31 @@ Icon classes can be used entirely standalone. They are named after their origina
.icon-search {
background-image: url(../img/sprite.png);
background-position: -128px -18px;
background-position: -64px -64px;
width: 32px;
height: 32px; }
.icon-star-active, .icon-star.active {
background-image: url(../img/sprite.png);
background-position: -160px -18px;
background-position: 0px -64px;
width: 32px;
height: 32px; }
.icon-star {
background-image: url(../img/sprite.png);
background-position: 0px -64px;
background-position: -32px -64px;
width: 32px;
height: 32px; }
.icon-time-active, .icon-time.active {
background-image: url(../img/sprite.png);
background-position: -32px -64px;
background-position: -160px -18px;
width: 32px;
height: 32px; }
.icon-time {
background-image: url(../img/sprite.png);
background-position: -64px -64px;
background-position: -96px -18px;
width: 32px;
height: 32px; }
@ -645,6 +651,9 @@ Icon classes can be used entirely standalone. They are named after their origina
position: relative; }
.item:nth-child(5n) {
margin: 50px 0 0 0; }
.item:nth-child(5n) .item-hidden-content {
left: auto;
right: -20px; }
.rating {
float: right;
@ -705,12 +714,14 @@ Icon classes can be used entirely standalone. They are named after their origina
top: -5px;
opacity: 0; }
.active .item-image {
z-index: 200; }
z-index: 200;
cursor: default; }
.item-hidden-content {
background: #0b0b0b;
width: 444px;
height: 360px;
padding: 20px;
display: none;
position: absolute;
top: -20px;
@ -762,6 +773,35 @@ Icon classes can be used entirely standalone. They are named after their origina
max-width: 100%; }
.light-theme .item-title {
color: #1b1b1b; }
.item-hidden-content .item-title {
font-size: 20px;
margin: 0 0 0 210px;
overflow: visible;
white-space: normal; }
.trailer-btn {
background: #ba59d2;
color: #fff;
text-transform: uppercase;
font-size: 15px;
padding: 10px 0;
text-align: center;
width: 185px;
position: absolute;
bottom: 15px;
left: 20px; }
.trailer-btn:hover {
background: #b245cd; }
.trailer-btn:active {
background: #a735c3; }
.icon-close-small {
position: absolute;
top: 15px;
right: 15px;
cursor: pointer; }
.icon-close-small:active {
opacity: .8; }
.modal-wrap {
background: rgba(14, 14, 14, 0.98);

BIN
public/assets/img/sprite.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 8.3 KiB

After

Width:  |  Height:  |  Size: 8.5 KiB

15
public/assets/js/app.js
View File

@ -441,14 +441,20 @@ var FloxItem = function (_React$Component) {
return _react2.default.createElement(
'div',
{ className: 'item ' + this.props.loadClass + (this.props.isActive ? ' active' : ''), onClick: this.changeActiveKey.bind(this) },
{ className: 'item ' + this.props.loadClass + (this.props.isActive ? ' active' : ''), onClick: this.props.isActive ? null : this.changeActiveKey.bind(this) },
_react2.default.createElement(
'div',
{ className: 'item-hidden-content' },
_react2.default.createElement(
'span',
{ className: 'item-title', title: title },
{ className: 'item-title' },
title
),
_react2.default.createElement('i', { className: 'icon-close-small', onClick: this.closeHiddenContent.bind(this) }),
_react2.default.createElement(
'a',
{ href: "https://www.youtube.com/results?search_query=" + title + " Trailer", target: '_blank', className: 'trailer-btn' },
'Watch Trailer'
)
),
_react2.default.createElement(
@ -485,6 +491,11 @@ var FloxItem = function (_React$Component) {
value: function changeActiveKey() {
this.props.changeActiveKey(this.props.id);
}
}, {
key: 'closeHiddenContent',
value: function closeHiddenContent() {
this.props.changeActiveKey(null);
}
}]);
return FloxItem;