Merge branch 'm3' of gitlab.quokka.pub:Zibx/kus-admin into m3

src/view/cmp/button/button.scss

@@ -154,6 +154,39 @@
   }
 }
 
+.button--round {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  padding: 0;
+  width: 46px;
+  height: 46px;
+  min-width: auto;
+  min-height: auto;
+  color: $text-main;
+  background-color: $bg-main;
+  border-radius: 50%;
+  box-shadow: 2px 0 5px rgba(97, 96, 96, 0.25);
+
+  &:hover,
+  &:active {
+    color: $text-main;
+    box-shadow: 0 0 2px rgba(97, 96, 96, 0.25);
+  }
+
+  &:focus {
+    color: $text-main;
+    box-shadow: 0 0 0 rgba(97, 96, 96, 0.25);
+  }
+
+  &:disabled {
+    color: $text-main;
+    opacity: 0.5;
+    pointer-events: none;
+  }
+}
+
 .button--primary svg:last-child,
 .button--bordered svg:last-child,
 .button--secondary svg:last-child {
@@ -165,3 +198,9 @@
 .button--secondary svg:first-child {
   left: 18px;
 }
+
+.button--round svg:first-child:last-child {
+  position: static;
+  transform: none;
+  display: block;
+}

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

@@ -107,6 +107,8 @@ const CardSlider = D.declare('view.cmp.CardSlider', (cfg) => {
     let dom;
     let theDOM = <div class="card-slider">
         <button class={D.cls(
+                'button',
+                'button--round',
                 'card-slider__control',
                 'card-slider__control--prev',
                 {'card-slider__control-disabled': leftButtonDisabled}
@@ -118,6 +120,8 @@ const CardSlider = D.declare('view.cmp.CardSlider', (cfg) => {
             <ArrPrev width="14" height="12"/>
         </button>
         <button class={D.cls(
+                'button',
+                'button--round',
                 'card-slider__control',
                 'card-slider__control--next',
                 {'card-slider__control-disabled': rightButtonDisabled}
@@ -125,7 +129,7 @@ const CardSlider = D.declare('view.cmp.CardSlider', (cfg) => {
                 onClick={()=>{
                     tuneScrollPosition(1);
                 }}
-                aria-label="Показать предыдущую карточку">
+                aria-label="Показать следующую карточку">
             <ArrNext width="14" height="12"/>
         </button>
         {dom = <div class='card-slider__scroller'>

src/view/cmp/cardSlider/CardSlider.scss

+.card-slider {
+	position: relative;
+	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;
@@ -14,6 +58,31 @@
 	flex-direction: column;
 	margin-bottom: 30px;
 }
+
+.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: 3px;
+}
+
+.card-slider__control--next {
+	right: 3px;
+}
 .card-slider__control-disabled {
 	display: none;
 }
+

src/view/page/account/Account.jsx

@@ -20,7 +20,7 @@ const Account = D.declare('view.page.Account', () => {
             <div class="account-page__content">
                 <div class="account-page__content-inner">
                     <div class="account-page__cards">
-                        <h2 class="readers-only">Список непросмотренных карточек</h2>
+                        <h2 class="account-page__title">Новые карточки для вашей должности:</h2>
                         <CardSlider
                           items={_=> store.sub(
                             [

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) {
@@ -72,3 +77,20 @@
 		max-height: none;
 	}
 }
+
+.account-page__cards {
+	padding-top: 10px;
+
+	@media (max-width: $tablet) {
+		padding: 30px;
+	}
+
+	@media (max-width: $mobile) {
+		padding: 23px 20px;
+	}
+}
+
+.account-page__title {
+	@include headline;
+	margin: 0 0 10px;
+}