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() { ...@@ -24,13 +24,16 @@ export default function() {
)} )}
</div>; </div>;
const w = window; const w = window;
w.addEventListener('resize', function() { let resizeFn;
w.addEventListener('resize', Store.debounce(resizeFn = function() {
tmpStore.set({ tmpStore.set({
isMobile: w.innerWidth < 1025, isMobile: w.innerWidth < 1025,
width: w.innerWidth width: w.innerWidth
}); });
}); },1000/20));
resizeFn();
tmpStore.set('loaded', true); tmpStore.set('loaded', true);
}; };
src/view/cmp/card/card.scss
...@@ -44,15 +44,27 @@ $cardTypes: ( ...@@ -44,15 +44,27 @@ $cardTypes: (
border-color: map_get($theme, base); border-color: map_get($theme, base);
box-shadow: 0 30px 30px -10px desaturate(rgba(map_get($theme, shadow), 0.5), 15%); 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 { &:hover {
border-color: map_get($theme, border); border-color: map_get($theme, border);
box-shadow: 0 35px 40px -20px desaturate(rgba(map_get($theme, shadow), 0.5), 15%); 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, &:active,
&:focus { &:focus {
box-shadow: none; box-shadow: none;
outline: none; outline: none;
@media (max-width: $mobile) {
box-shadow: 0px 4px 12px rgba(map_get($theme, shadow), 1);
}
} }
.card__button { .card__button {
...@@ -90,6 +102,14 @@ $cardTypes: ( ...@@ -90,6 +102,14 @@ $cardTypes: (
line-height: 1.333333; line-height: 1.333333;
word-break: break-word; word-break: break-word;
overflow: hidden; 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 { .card__title span {
...@@ -145,6 +165,10 @@ button.card__button { ...@@ -145,6 +165,10 @@ button.card__button {
border-radius: 8px; border-radius: 8px;
transition: all 0.3s ease; transition: all 0.3s ease;
cursor: pointer; cursor: pointer;
@media (max-width: $mobile) {
min-height: 216px;
}
} }
.card--disabled { .card--disabled {
...@@ -162,6 +186,10 @@ button.card__button { ...@@ -162,6 +186,10 @@ button.card__button {
max-height: 90px; max-height: 90px;
font-size: 13px; font-size: 13px;
line-height: 17px; line-height: 17px;
@media (max-width: $mobile) {
max-height: 84px;
}
} }
.card--disabled .card__image { .card--disabled .card__image {
......
src/view/cmp/cardSlider/CardSlider.jsx
...@@ -8,39 +8,62 @@ const CardSlider = D.declare('view.cmp.CardSlider', (cfg) => { ...@@ -8,39 +8,62 @@ const CardSlider = D.declare('view.cmp.CardSlider', (cfg) => {
hash = {}, hash = {},
items = [], items = [],
cardWidth = 160, cardWidth = 160,
minPadding = 20, minPadding = 10,
mobilePadding = 10,
wrap, wrap,
width, width,
fullCardsCount, fullCardsCount,
padding, padding,
updateSize = function () { updateSize = function () {
width = dom.clientWidth; width = dom.clientWidth - paddingLeft - paddingRight;
fullCardsCount = width / (cardWidth + minPadding) | 0; 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'; wrap.style.width = (items.length * (padding + cardWidth) - padding) + 'px';
}, },
update = function () { update = function () {
updateSize(); updateSize();
updateVisibleDom(); 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 waitTimeout = false;
let tuning = false; let tuning;
let leftestItem = 0; let leftestItem = 0;
let lastLeftestItem = 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; waitTimeout = false;
tuning = true; tuning = true;
let fromLeft = dom.scrollLeft; let fromLeft = dom.scrollLeft;
let firstItem = Math.round(fromLeft / (cardWidth + padding) - (lastLeftestItem > leftestItem ? 0.4 : -0.4)); let firstItem, toLeft;
let toLeft = Math.round(firstItem * (cardWidth + padding)); 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)); let deltaMove = (toLeft - fromLeft) / Math.ceil(200 / (1000 / 60));
while (deltaMove > 0 && deltaMove < 1) { while (deltaMove > 0 && deltaMove < 1) {
deltaMove *= 2; deltaMove *= 2;
...@@ -49,15 +72,15 @@ const CardSlider = D.declare('view.cmp.CardSlider', (cfg) => { ...@@ -49,15 +72,15 @@ const CardSlider = D.declare('view.cmp.CardSlider', (cfg) => {
deltaMove = toLeft - fromLeft; deltaMove = toLeft - fromLeft;
} }
let tune = function () { let tune = function () {
if (Math.abs(toLeft - dom.scrollLeft) > (cardWidth + padding)) { if (Math.abs(toLeft - dom.scrollLeft) > (cardWidth + padding)*1.3) {
return tuning = false; return untune();
} }
if (Math.sign(toLeft - dom.scrollLeft) !== Math.sign(deltaMove)) { if (Math.sign(toLeft - dom.scrollLeft) !== Math.sign(deltaMove)) {
return tuning = false; return untune();
} }
if (Math.abs(dom.scrollLeft - toLeft) < Math.abs(deltaMove)) { if (Math.abs(dom.scrollLeft - toLeft) < Math.abs(deltaMove)) {
dom.scrollLeft = toLeft; dom.scrollLeft = toLeft;
return tuning = false; return untune();
} else { } else {
dom.scrollLeft += deltaMove; dom.scrollLeft += deltaMove;
requestAnimationFrame(tune); requestAnimationFrame(tune);
...@@ -66,7 +89,7 @@ const CardSlider = D.declare('view.cmp.CardSlider', (cfg) => { ...@@ -66,7 +89,7 @@ const CardSlider = D.declare('view.cmp.CardSlider', (cfg) => {
if (Math.abs(deltaMove) > 0) { if (Math.abs(deltaMove) > 0) {
requestAnimationFrame(tune); requestAnimationFrame(tune);
} else { } else {
tuning = false; return untune();
} }
}; };
...@@ -83,12 +106,30 @@ const CardSlider = D.declare('view.cmp.CardSlider', (cfg) => { ...@@ -83,12 +106,30 @@ const CardSlider = D.declare('view.cmp.CardSlider', (cfg) => {
}; };
let dom; let dom;
let theDOM = <div class="card-slider"> 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="Показать предыдущую карточку"> aria-label="Показать предыдущую карточку">
<ArrPrev width="14" height="12"/> <ArrPrev width="14" height="12"/>
</button> </button>
<button className="button button--round card-slider__control card-slider__control--next" type="button" <button class={D.cls(
aria-label="Показать предыдущую карточку"> '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"/> <ArrNext width="14" height="12"/>
</button> </button>
{dom = <div class='card-slider__scroller'> {dom = <div class='card-slider__scroller'>
...@@ -137,7 +178,7 @@ const CardSlider = D.declare('view.cmp.CardSlider', (cfg) => { ...@@ -137,7 +178,7 @@ const CardSlider = D.declare('view.cmp.CardSlider', (cfg) => {
} }
} }
for (let i = from; i < to; i++) { for (let i = from; i < to; i++) {
let x = i * (cardWidth + padding); let x = paddingLeft + i * (cardWidth + padding);
if (hash[i].x !== x) { if (hash[i].x !== x) {
hash[i].dom.style.left = (hash[i].x = x) + 'px'; hash[i].dom.style.left = (hash[i].x = x) + 'px';
} }
...@@ -151,7 +192,7 @@ const CardSlider = D.declare('view.cmp.CardSlider', (cfg) => { ...@@ -151,7 +192,7 @@ const CardSlider = D.declare('view.cmp.CardSlider', (cfg) => {
lastFrom = from; lastFrom = from;
lastTo = to; lastTo = to;
last = true; last = true;
updateButtonsState();
}; };
dom.addEventListener('scroll', Store.debounce(function () { dom.addEventListener('scroll', Store.debounce(function () {
...@@ -166,6 +207,19 @@ const CardSlider = D.declare('view.cmp.CardSlider', (cfg) => { ...@@ -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; return theDOM;
}); });
......
src/view/cmp/cardSlider/CardSlider.scss
.card-slider { .card-slider {
position: relative; position: relative;
margin: 0 30px 0 -30px; margin: 0 35px 0 -30px;
padding: 0 60px 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 { .card-slider__scroller {
box-sizing: border-box; box-sizing: border-box;
margin-bottom: -40px;
padding-bottom: 40px;
width: 100%; width: 100%;
position: relative; position: relative;
overflow-x: scroll; overflow-x: scroll;
...@@ -26,13 +62,27 @@ ...@@ -26,13 +62,27 @@
.card-slider__control { .card-slider__control {
position: absolute; position: absolute;
top: 50%; top: 50%;
transform: translateY(-30px);
z-index: 1; z-index: 1;
@media (max-width: $tablet) {
transform: translateY(-50px);
}
@media (max-width: $mobile) {
opacity: 0;
pointer-events: none;
}
} }
.card-slider__control--prev { .card-slider__control--prev {
left: 0; left: 3px;
} }
.card-slider__control--next { .card-slider__control--next {
right: 0; right: 3px;
}
.card-slider__control-disabled {
display: none;
} }
src/view/page/account/accountPage.scss
...@@ -4,6 +4,10 @@ ...@@ -4,6 +4,10 @@
flex-direction: column; flex-direction: column;
padding: 0; padding: 0;
background-color: $bg-accent; background-color: $bg-accent;
@media (max-width: $tablet) {
padding: 0;
}
} }
.account-page__wrapper { .account-page__wrapper {
...@@ -65,6 +69,7 @@ ...@@ -65,6 +69,7 @@
padding-right: 30px; padding-right: 30px;
width: 100%; width: 100%;
overflow-y: auto; overflow-y: auto;
overflow-x: hidden;
} }
@media (max-width: $tablet) { @media (max-width: $tablet) {
...@@ -75,6 +80,14 @@ ...@@ -75,6 +80,14 @@
.account-page__cards { .account-page__cards {
padding-top: 10px; padding-top: 10px;
@media (max-width: $tablet) {
padding: 30px;
}
@media (max-width: $mobile) {
padding: 23px 20px;
}
} }
.account-page__title { .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