Skip to content

K
kus-admin
Commit 67b59ad4 by talequale
Options

slider style

parents a5b262b1 2b93f563
Showing with 178 additions and 30 deletions
src/main.jsx
......@@ -24,13 +24,16 @@ export default function() {
)}
</div>;
const w = window;
w.addEventListener('resize', function() {
let resizeFn;
w.addEventListener('resize', Store.debounce(resizeFn = function() {
tmpStore.set({
isMobile: w.innerWidth < 1025,
width: w.innerWidth
});
});
},1000/20));
resizeFn();
tmpStore.set('loaded', true);
};
src/view/cmp/card/card.scss
......@@ -44,15 +44,27 @@ $cardTypes: (
border-color: map_get($theme, base);
box-shadow: 0 30px 30px -10px desaturate(rgba(map_get($theme, shadow), 0.5), 15%);
@media (max-width: $mobile) {
box-shadow: 0 25px 20px -10px desaturate(rgba(map_get($theme, shadow), 0.7), 5%);
}
&:hover {
border-color: map_get($theme, border);
box-shadow: 0 35px 40px -20px desaturate(rgba(map_get($theme, shadow), 0.5), 15%);
@media (max-width: $mobile) {
box-shadow: 0 5px 12px rgba(map_get($theme, shadow), 0.5);
}
}
&:active,
&:focus {
box-shadow: none;
outline: none;
@media (max-width: $mobile) {
box-shadow: 0px 4px 12px rgba(map_get($theme, shadow), 1);
}
}
.card__button {
......@@ -90,6 +102,14 @@ $cardTypes: (
line-height: 1.333333;
word-break: break-word;
overflow: hidden;
@media (max-width: $mobile) {
margin: 12px 0 8px;
max-height: 54px;
font-weight: 400;
font-size: 14px;
line-height: 18px;
}
}
.card__title span {
......@@ -145,6 +165,10 @@ button.card__button {
border-radius: 8px;
transition: all 0.3s ease;
cursor: pointer;
@media (max-width: $mobile) {
min-height: 216px;
}
}
.card--disabled {
......@@ -162,6 +186,10 @@ button.card__button {
max-height: 90px;
font-size: 13px;
line-height: 17px;
@media (max-width: $mobile) {
max-height: 84px;
}
}
.card--disabled .card__image {
......
src/view/cmp/cardSlider/CardSlider.jsx
......@@ -8,39 +8,62 @@ const CardSlider = D.declare('view.cmp.CardSlider', (cfg) => {
hash = {},
items = [],
cardWidth = 160,
minPadding = 20,
minPadding = 10,
mobilePadding = 10,
wrap,
width,
fullCardsCount,
padding,
updateSize = function () {
width = dom.clientWidth;
width = dom.clientWidth - paddingLeft - paddingRight;
fullCardsCount = width / (cardWidth + minPadding) | 0;
padding = (width - fullCardsCount * cardWidth) / (fullCardsCount - 1);
padding = mobile ? mobilePadding: (width - fullCardsCount * cardWidth) / (fullCardsCount - 1);
wrap.style.width = (items.length * (padding + cardWidth) - padding) + 'px';
},
update = function () {
updateSize();
updateVisibleDom();
};
let paddingLeft = 30, paddingRight = 30, mobile = false;
tmpStore.sub('width', Store.debounce(function (w) {
let firstItem = Math.round(dom.scrollLeft / (cardWidth + padding));
console.log(firstItem);
update();
dom.scrollLeft = firstItem * (cardWidth + padding);
}, 30));
let waitTimeout = false;
let tuning = false;
let tuning;
let leftestItem = 0;
let lastLeftestItem = 0;
let tuneScrollPosition = function () {
let leftButtonDisabled = new Store.Value.Boolean(true), rightButtonDisabled = new Store.Value.Boolean(true);
let updateButtonsState = function() {
let fromLeft = dom.scrollLeft;
let firstItem = Math.round( fromLeft / ( cardWidth + padding ));
leftButtonDisabled.set(firstItem===0);
rightButtonDisabled.set(firstItem+fullCardsCount===items.length);
};
let untune = function() {
updateButtonsState();
tuning = false;
};
let tuneScrollPosition = function (x) {
if(tuning)
return untune();
waitTimeout = false;
tuning = true;
let fromLeft = dom.scrollLeft;
let firstItem = Math.round(fromLeft / (cardWidth + padding) - (lastLeftestItem > leftestItem ? 0.4 : -0.4));
let toLeft = Math.round(firstItem * (cardWidth + padding));
let firstItem, toLeft;
if(x){
firstItem = Math.round( fromLeft / ( cardWidth + padding ));
if(firstItem+x<0 || firstItem+fullCardsCount+x>items.length){
return untune();
}
toLeft = Math.round( (firstItem + x) * ( cardWidth + padding ));
}else{
firstItem = Math.round( fromLeft / ( cardWidth + padding ) - ( lastLeftestItem > leftestItem ? 0.4 : -0.4 ) );
toLeft = Math.round( firstItem * ( cardWidth + padding ) );
}
let deltaMove = (toLeft - fromLeft) / Math.ceil(200 / (1000 / 60));
while (deltaMove > 0 && deltaMove < 1) {
deltaMove *= 2;
......@@ -49,15 +72,15 @@ const CardSlider = D.declare('view.cmp.CardSlider', (cfg) => {
deltaMove = toLeft - fromLeft;
}
let tune = function () {
if (Math.abs(toLeft - dom.scrollLeft) > (cardWidth + padding)) {
return tuning = false;
if (Math.abs(toLeft - dom.scrollLeft) > (cardWidth + padding)*1.3) {
return untune();
}
if (Math.sign(toLeft - dom.scrollLeft) !== Math.sign(deltaMove)) {
return tuning = false;
return untune();
}
if (Math.abs(dom.scrollLeft - toLeft) < Math.abs(deltaMove)) {
dom.scrollLeft = toLeft;
return tuning = false;
return untune();
} else {
dom.scrollLeft += deltaMove;
requestAnimationFrame(tune);
......@@ -66,7 +89,7 @@ const CardSlider = D.declare('view.cmp.CardSlider', (cfg) => {
if (Math.abs(deltaMove) > 0) {
requestAnimationFrame(tune);
} else {
tuning = false;
return untune();
}
};
......@@ -83,12 +106,30 @@ const CardSlider = D.declare('view.cmp.CardSlider', (cfg) => {
};
let dom;
let theDOM = <div class="card-slider">
<button class="button button--round card-slider__control card-slider__control--prev" type="button"
<button class={D.cls(
'button',
'button--round',
'card-slider__control',
'card-slider__control--prev',
{'card-slider__control-disabled': leftButtonDisabled}
)} type="button"
onClick={()=>{
tuneScrollPosition(-1);
}}
aria-label="Показать предыдущую карточку">
<ArrPrev width="14" height="12"/>
</button>
<button className="button button--round card-slider__control card-slider__control--next" type="button"
aria-label="Показать предыдущую карточку">
<button class={D.cls(
'button',
'button--round',
'card-slider__control',
'card-slider__control--next',
{'card-slider__control-disabled': rightButtonDisabled}
)} type="button"
onClick={()=>{
tuneScrollPosition(1);
}}
aria-label="Показать следующую карточку">
<ArrNext width="14" height="12"/>
</button>
{dom = <div class='card-slider__scroller'>
......@@ -137,7 +178,7 @@ const CardSlider = D.declare('view.cmp.CardSlider', (cfg) => {
}
}
for (let i = from; i < to; i++) {
let x = i * (cardWidth + padding);
let x = paddingLeft + i * (cardWidth + padding);
if (hash[i].x !== x) {
hash[i].dom.style.left = (hash[i].x = x) + 'px';
}
......@@ -151,7 +192,7 @@ const CardSlider = D.declare('view.cmp.CardSlider', (cfg) => {
lastFrom = from;
lastTo = to;
last = true;
updateButtonsState();
};
dom.addEventListener('scroll', Store.debounce(function () {
......@@ -166,6 +207,19 @@ const CardSlider = D.declare('view.cmp.CardSlider', (cfg) => {
});
tmpStore.sub('width', Store.debounce(function (w) {
let firstItem = Math.round(dom.scrollLeft / (cardWidth + padding));
update();
dom.scrollLeft = firstItem * (cardWidth + padding);
}, 30));
tmpStore.sub('isMobile', function(is) {
mobile = is;
paddingLeft = paddingRight = is ? 10 : 30;
update();
});
return theDOM;
});
......
src/view/cmp/cardSlider/CardSlider.scss
.card-slider {
position: relative;
margin: 0 30px 0 -30px;
padding: 0 60px 0 30px;
margin: 0 35px 0 -30px;
padding: 17px 25px 0 0;
overflow: hidden;
@media (max-width: $desktopMin) {
margin-right: 0;
}
@media (max-width: $tablet) {
margin: 0 -30px;
padding: 20px 0;
width: calc(100% + 60px);
}
@media (max-width: $mobile) {
margin: 0 -20px;
padding: 7px 0;
width: calc(100% + 40px);
}
}
.card-slider::before {
content: "";
position: absolute;
top: 0;
right: 23px;
width: 45px;
height: 270px;
background: linear-gradient(270deg, rgba(247, 247, 247, 0.04) 84.99%, rgba(112, 112, 112, 0.42) 101.29%);
border-radius: 4px;
transform: rotate(-180deg);
opacity: 0.8;
pointer-events: none;
@media (max-width: $tablet) {
display: none;
}
}
.card-slider__scroller {
box-sizing: border-box;
margin-bottom: -40px;
padding-bottom: 40px;
width: 100%;
position: relative;
overflow-x: scroll;
......@@ -26,13 +62,27 @@
.card-slider__control {
position: absolute;
top: 50%;
transform: translateY(-30px);
z-index: 1;
@media (max-width: $tablet) {
transform: translateY(-50px);
}
@media (max-width: $mobile) {
opacity: 0;
pointer-events: none;
}
}
.card-slider__control--prev {
left: 0;
left: 3px;
}
.card-slider__control--next {
right: 0;
right: 3px;
}
.card-slider__control-disabled {
display: none;
}
src/view/page/account/accountPage.scss
......@@ -4,6 +4,10 @@
flex-direction: column;
padding: 0;
background-color: $bg-accent;
@media (max-width: $tablet) {
padding: 0;
}
}
.account-page__wrapper {
......@@ -65,6 +69,7 @@
padding-right: 30px;
width: 100%;
overflow-y: auto;
overflow-x: hidden;
}
@media (max-width: $tablet) {
......@@ -75,6 +80,14 @@
.account-page__cards {
padding-top: 10px;
@media (max-width: $tablet) {
padding: 30px;
}
@media (max-width: $mobile) {
padding: 23px 20px;
}
}
.account-page__title {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment