Skip to content

Commit a498c2a

Browse files
author
wfbn8821
committed
feat: Add a light overlay on the cards which are not visible
Improve design when a short card is over a long card Fixes #5
1 parent dd6745c commit a498c2a

File tree

4 files changed

+71
-40
lines changed

4 files changed

+71
-40
lines changed

‎lib/assets/styles.css‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,18 @@
66
position: absolute;
77
transition: left 1s cubic-bezier(0, 0.7, 0.7, 1), z-index 1s cubic-bezier(0, 0.7, 0.7, 1);
88
box-sizing: border-box; }
9+
._1H7C65wd8WJqBtCRmAfokb .rcs-center:after, ._1H7C65wd8WJqBtCRmAfokb .rcs-left-stack:after, ._1H7C65wd8WJqBtCRmAfokb .rcs-right-stack:after {
10+
content: "";
11+
position: absolute;
12+
top: 0;
13+
left: 0;
14+
right: 0;
15+
height: 100%;
16+
background-color: #fff;
17+
opacity: 0;
18+
transition: opacity 1s cubic-bezier(0, 0.7, 0.7, 1); }
19+
._1H7C65wd8WJqBtCRmAfokb .rcs-left-stack:after, ._1H7C65wd8WJqBtCRmAfokb .rcs-right-stack:after {
20+
opacity: 0.7; }
921

1022
._22yQcZhJvmCSA52vE9VrUe {
1123
position: fixed;

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "react-card-scroll",
3-
"version": "2.1.1",
3+
"version": "2.2.0",
44
"description": "A React component to navigate horizontally between cards of same width",
55
"main": "lib/index.js",
66
"scripts": {

‎src/index.js‎

Lines changed: 38 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -83,46 +83,49 @@ let CardScroll = React.createClass({
8383
onClick={this.scrollCardsWrap({toLeft: true})}>
8484
<div className={s.arrow}></div>
8585
</div>
86-
:null}
86+
:null}
87+
8788
{this.showArrows() && this.canScrollRight()?
8889
<div className={s.rightArrow}
8990
onClick={this.scrollCardsWrap()}>
9091
<div className={s.arrow}></div>
91-
</div>
92-
:null}
93-
<div className={s.container}
94-
style={{marginLeft: this.maxOffset, marginRight: this.maxOffset}}
95-
ref={updateContainer}>
96-
{React.Children.map(this.props.children, (child, index) => {
97-
const offset = getOffset({
98-
index,
99-
firstVisibleIndex:currentCard,
100-
lastVisibleIndex:lastCard,
101-
visibleStack: this.props.visibleStack,
102-
stackSpace: this.props.stackSpace
103-
})
104-
let position = offset
105-
let zIndex = -currentCard+index
106-
let className = "rcs-left-stack"
107-
if(offset==0){
108-
position = (index-currentCard)*this.widths.card
109-
if(index == lastCard && currentCard != lastCard){
110-
zIndex = 0
111-
}
112-
className = "rcs-center"
113-
} else if(offset>0){
114-
position = offset + (lastCard-currentCard)*this.widths.card
115-
zIndex = lastCard-index-1
116-
className = "rcs-right-stack"
92+
</div>
93+
:null}
94+
95+
96+
<div className={s.container}
97+
style={{marginLeft: this.maxOffset, marginRight: this.maxOffset}}
98+
ref={updateContainer}>
99+
{React.Children.map(this.props.children, (child, index) => {
100+
const offset = getOffset({
101+
index,
102+
firstVisibleIndex:currentCard,
103+
lastVisibleIndex:lastCard,
104+
visibleStack: this.props.visibleStack,
105+
stackSpace: this.props.stackSpace
106+
})
107+
let position = offset
108+
let zIndex = -currentCard+index
109+
let className = "rcs-left-stack"
110+
if(offset==0){
111+
position = (index-currentCard)*this.widths.card
112+
if(index == lastCard && currentCard != lastCard){
113+
zIndex = 0
117114
}
118-
const style = {left: position, zIndex}
119-
return (
120-
<div className={`${className} ${childrenClass}`} style={style} ref={index == 0 && updateChild}>
121-
{child}
122-
</div>
123-
);
124-
})}
125-
</div>
115+
className = "rcs-center"
116+
} else if(offset>0){
117+
position = offset + (lastCard-currentCard)*this.widths.card
118+
zIndex = lastCard-index-1
119+
className = "rcs-right-stack"
120+
}
121+
const style = {left: position, zIndex}
122+
return (
123+
<div className={`${className} ${childrenClass}`} style={style} ref={index == 0 && updateChild}>
124+
{child}
125+
</div>
126+
);
127+
})}
128+
</div>
126129
</div>
127130
)
128131
},

‎src/styles.scss‎

Lines changed: 20 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -3,15 +3,34 @@ $padding: 4px;
33
$outMargin: -15px;
44
$outPadding: $padding - $outMargin;
55

6+
$grid-columns: 12 !default;
7+
$grid-gutter-width: 1.875rem !default; // 30px
8+
69
.container {
710
position: relative;
811
z-index: 0;
912
box-sizing: border-box;
1013
:global(.rcs-center), :global(.rcs-left-stack), :global(.rcs-right-stack){
1114
position: absolute;
12-
transition: left 1s cubic-bezier(0,.7,.7,1), z-index 1s cubic-bezier(0,.7,.7,1);
15+
transition:
16+
left 1s cubic-bezier(0,.7,.7,1),
17+
z-index 1s cubic-bezier(0,.7,.7,1);
1318
box-sizing: border-box;
1419
}
20+
:global(.rcs-center):after, :global(.rcs-left-stack):after, :global(.rcs-right-stack):after{
21+
content: "";
22+
position: absolute;
23+
top: 0;
24+
left: 0;
25+
right: 0;
26+
height: 100%;
27+
background-color: #fff;
28+
opacity: 0;
29+
transition: opacity 1s cubic-bezier(0,.7,.7,1);
30+
}
31+
:global(.rcs-left-stack):after, :global(.rcs-right-stack):after{
32+
opacity: 0.7;
33+
}
1534
}
1635

1736
@mixin arrow{
@@ -79,9 +98,6 @@ $grid-breakpoints: (
7998
xl: 1200px
8099
) !default;
81100

82-
$grid-columns: 12 !default;
83-
$grid-gutter-width: 1.875rem !default; // 30px
84-
85101
@mixin make-col-span($size, $columns: $grid-columns) {
86102
width: percentage($size / $columns);
87103
}

0 commit comments

Comments
 (0)