flayks/housesof
2
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Carousel: Create a bigger hover/click area for controls

Browse Source
This commit is contained in:
Félix Péault
2020-02-14 10:13:20 +01:00
parent ef23d90eb6
commit dfcc3f9f7a
3 changed files with 47 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
src/organisms/Carousel.svelte
View File

@@ -20,12 +20,15 @@
// Hover function
hover = event => {
const to = event.currentTarget.dataset.to
const button = event.currentTarget.querySelector('button')
const photoActive = document.querySelector('.gallery .active')
const photoToHover = (to === 'prev') ? photoActive.previousSibling : photoActive.nextSibling
if (event.type === 'mouseenter') {
photoToHover.classList.add('hover')
button.focus()
} else {
photoToHover.classList.remove('hover')
button.blur()
}
}
@@ -62,22 +65,19 @@
</div>
<div class="carousel__controls">
<button class="button-control button-control--white dir-left" data-to="prev" aria-label="Previous"
on:click={photoPrev}
on:mouseenter={hover}
on:mouseleave={hover}
>
<IconArrow direction="left" color="#ff6c89" className="icon" />
<IconArrow direction="left" color="#fff" className="icon" hidden="true" />
</button>
<button class="button-control button-control--white dir-right" data-to="next" aria-label="Next"
on:mouseenter={hover}
on:mouseleave={hover}
on:click={photoNext}
>
<IconArrow direction="right" color="#ff6c89" className="icon" />
<IconArrow direction="right" color="#fff" className="icon" hidden="true" />
</button>
<div class="carousel__controls--area prev" data-to="prev" on:mouseenter={hover} on:mouseleave={hover} on:click={photoPrev}>
<button class="button-control button-control--white dir-left" aria-label="Previous">
<IconArrow direction="left" color="#ff6c89" className="icon" />
<IconArrow direction="left" color="#fff" className="icon" hidden="true" />
</button>
</div>
<div class="carousel__controls--area next" data-to="next" on:mouseenter={hover} on:mouseleave={hover} on:click={photoNext}>
<button class="button-control button-control--white dir-right" aria-label="Next">
<IconArrow direction="right" color="#ff6c89" className="icon" />
<IconArrow direction="right" color="#fff" className="icon" hidden="true" />
</button>
</div>
</div>
{#if viewer}

16
src/style/atoms/_button-control.scss
View File

@@ -46,21 +46,21 @@
&--white {
background-color: #fff;
&:hover {
&:hover, &:focus {
background-color: $color-secondary;
}
}
&--pink {
background-color: rgba($color-secondary, 0.4);
&:hover {
&:hover, &:focus {
background-color: rgba($color-secondary, 0.75);
}
}
&--gray {
background-color: $color-gray;
&:hover {
&:hover, &:focus {
background-color: $color-text;
}
}
@@ -75,7 +75,7 @@
transform: translate3d(100%, -50%, 0);
}
&:hover {
&:hover, &:focus {
.icon:not([aria-hidden]) {
opacity: 0;
transform: translate3d(-100%, 0, 0);
@@ -92,7 +92,7 @@
transform: translate3d(-150%, -50%, 0);
}
&:hover {
&:hover, &:focus {
.icon:not([aria-hidden]) {
opacity: 0;
transform: translate3d(100%, 0, 0);
@@ -110,7 +110,7 @@
transform: translate3d(0, -150%, 0);
}
&:hover {
&:hover, &:focus {
.icon:not([aria-hidden]) {
opacity: 0;
transform: translate3d(0, 100%, 0);
@@ -128,7 +128,7 @@
transform: translate3d(0, 150%, 0);
}
&:hover {
&:hover, &:focus {
.icon:not([aria-hidden]) {
opacity: 0;
transform: translate3d(0, -100%, 0);
@@ -178,7 +178,7 @@
}
// Hover
&:hover {
&:hover, &:focus {
background-color: rgba($color-lightpurple, 0.65);
* {

36
src/style/organisms/_carousel.scss
View File

@@ -29,7 +29,7 @@
&__images {
position: relative;
height: 0;
padding-bottom: calc(100% / 1.5);
padding-bottom: calc(100% / 1.5); // Ratio 3.2
// Photo
&--photo {
@@ -118,25 +118,35 @@
display: none;
@include breakpoint (sm) {
position: absolute;
z-index: 11;
top: 0;
left: 0;
right: 0;
bottom: 0;
display: flex;
justify-content: space-between;
pointer-events: none;
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 100%;
z-index: 11;
}
.dir-left {
transform: translateX(-50%);
// Hover and clicking area
&--area {
display: flex;
align-items: center;
justify-content: center;
width: 12%;
height: 100%;
cursor: pointer;
&.prev {
margin-left: -6%;
}
.dir-right {
transform: translateX(50%);
&.next {
margin-right: -6%;
}
}
a {
box-shadow: 0 2px 21px rgba(#000, 0.15);
button {
box-shadow: 0 2px 20px rgba(#000, 0.15);
}
}