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

src/global-styles/base.scss

@@ -32,7 +32,7 @@ img {
 	min-height: calc(var(--vh, 1vh) * 100);
 
 	@media (max-width: $mobile) {
-		padding-top: 50px;
+		padding-top: 60px;
 	}
 }
 

src/global-styles/typography.scss

@@ -30,6 +30,13 @@
 	font-weight: 700;
 	font-size: 18px;
 	line-height: 24px;
+
+	@media (max-width: $mobile) {
+		font-weight: 500;
+		font-size: 16px;
+		line-height: 20px;
+		letter-spacing: 0.15px;
+	}
 }
 
 @mixin mainSubtitle {
@@ -74,6 +81,13 @@
 	font-size: 15px;
 	line-height: 20px;
 	color: $gray-dark;
+
+	@media (max-width: $mobile) {
+		font-weight: 400;
+		font-size: 16px;
+		line-height: 19px;
+		letter-spacing: 0.25px;
+	}
 }
 
 @mixin caption {

src/global-styles/variables.scss

@@ -23,3 +23,5 @@ $font: 'SF Pro Text', Arial, sans-serif;
 $font-mobile: 'Helvetica Neue', Arial, sans-serif;
 
 $mobile: 767px;
+$tablet: 1024px;
+$desktopMin: 1279px;

src/view/block/account/account.scss

+.account {
+	position: relative;
+
+	@media (max-width: $tablet) {
+		padding-top: 50px;
+	}
+
+	@media (max-width: $mobile) {
+		padding-top: 48px;
+		padding-bottom: 80px;
+	}
+}
+
 .account__headline {
 	margin: 0 0 14px;
 	font-weight: 500;
 	font-size: 17px;
 	line-height: 22px;
 	color: $gray-medium;
+
+	@media (max-width: $mobile) {
+		font-weight: 400;
+		font-size: 16px;
+		line-height: 19px;
+		letter-spacing: 0.25px;
+	}
 }
 
 .account__info {
 	@include mainCaption;
 	padding-bottom: 10px;
 	border-bottom: 1px solid #747474;
+
+	@media (max-width: $mobile) {
+		padding-bottom: 19px;
+	}
 }
 
 .account__info p {
@@ -23,6 +47,15 @@
 	font-size: 24px;
 	line-height: 32px;
 	color: $text-main;
+
+	@media (max-width: $tablet) {
+		position: static;
+	}
+
+	@media (max-width: $mobile) {
+		font-size: 20px;
+		line-height: 25px;
+	}
 }
 
 .account__name svg {
@@ -31,6 +64,12 @@
 	right: 100%;
 	transform: translate(-18px, 0);
 	color: $accent-main;
+
+	@media (max-width: $tablet) {
+		right: auto;
+		left: 0;
+		transform: none;
+	}
 }
 
 .title-name-word {

src/view/block/header/Header.jsx

@@ -10,7 +10,7 @@ const Header = D.declare('view.block.Header', () => {
     const tempPageMenuHidden = new Store.Value.Boolean(true);
     return <header class={D.cls(
         "page-header", {
-            "page-header--inner": (NOT(store.valEqual( 'navigation.current', 'login')))
+            "page-header--inner": (NOT(store.valEqual( 'navigation.current', 'Login')))
         })}   >
         <div class="button-temp">
             <button type={"button"} onClick={()=>tempPageMenuHidden.toggle()}>

src/view/block/header/Header.scss

@@ -102,6 +102,13 @@
 	}
 }
 
+.page-header__user-block .page-header__logout-link:active,
+.page-header__user-block .page-header__logout-link:focus {
+	@media (max-width: $mobile) {
+		color: $gray-dark;
+	}
+}
+
 .page-header__user-block .page-header__profile-link {
 	padding-right: 0;
 	padding-left: 48px;
@@ -125,6 +132,13 @@
 	}
 }
 
+.page-header__user-block .page-header__profile-link:active svg,
+.page-header__user-block .page-header__profile-link:focus svg {
+	@media (max-width: $mobile) {
+		color: $accent-dark;
+	}
+}
+
 .button-temp {
 	position: absolute;
 	top: 0;

src/view/block/ratingBlock/ratingBlock.scss

@@ -16,6 +16,12 @@
 	@include mainTitle;
 	margin-bottom: 4px;
 	color: $text-main;
+
+	@media (max-width: $mobile) {
+		font-size: 32px;
+		line-height: 50px;
+		letter-spacing: 0.01em;
+	}
 }
 
 .rating-block__result sup {
@@ -25,10 +31,22 @@
 	margin-left: 3px;
 	font-size: 24px;
 	line-height: 32px;
+
+	@media (max-width: $mobile) {
+		top: auto;
+		margin-left: 8px;
+		font-size: 32px;
+		line-height: 50px;
+		letter-spacing: 0.01em;
+	}
 }
 
 .rating-block__progress {
 	margin-bottom: 9px;
+
+	@media (max-width: $mobile) {
+		margin-bottom: 12px;
+	}
 }
 
 .rating-block__stage {
@@ -45,17 +63,35 @@
 
 .rating-block__stage table {
 	border-collapse: collapse;
+
+	@media (max-width: $mobile) {
+		margin-top: 8px;
+		font-weight: 400;
+		font-size: 14px;
+		line-height: 18px;
+		letter-spacing: 0.1px;
+	}
 }
 
 .rating-block__stage th,
 .rating-block__stage td {
 	padding: 5px 0;
+
+	@media (max-width: $mobile) {
+		padding: 2px 0;
+	}
 }
 
 .rating-block__stage th {
 	min-width: 112px;
 	text-align: left;
 	font-weight: 500;
+
+	@media (max-width: $mobile) {
+		padding-right: 5px;
+		min-width: auto;
+		font-weight: 400;
+	}
 }
 
 .rating-block__stage time.available {

src/view/page/account/accountPage.scss

@@ -16,6 +16,14 @@
 	width: 320px;
 	background-color: $bg-main;
 	overflow: hidden;
+
+	@media (max-width: $desktopMin) {
+		margin-left: -10px;
+	}
+
+	@media (max-width: $tablet) {
+		display: none;
+	}
 }
 
 .account-page__menu-inner {
@@ -24,12 +32,26 @@
 	width: calc(100% + 40px);
 	max-height: calc(100vh - 90px);
 	overflow-y: scroll;
+
+	@media (max-width: $desktopMin) {
+		padding-right: 20px;
+		width: 100%;
+		overflow-y: auto;
+	}
 }
 
 .account-page__content {
 	flex-grow: 1;
 	max-width: calc(100% - 320px);
 	overflow: hidden;
+
+	@media (max-width: $desktopMin) {
+		max-width: calc(100% - 310px);
+	}
+
+	@media (max-width: $tablet) {
+		max-width: 100%;
+	}
 }
 
 .account-page__content-inner {
@@ -38,4 +60,15 @@
 	width: calc(100% + 40px);
 	max-height: calc(100vh - 120px);
 	overflow-y: scroll;
+
+	@media (max-width: $desktopMin) {
+		padding-right: 30px;
+		width: 100%;
+		overflow-y: auto;
+	}
+
+	@media (max-width: $tablet) {
+		padding: 0;
+		max-height: none;
+	}
 }

src/view/page/account/profilePage.scss

@@ -9,6 +9,10 @@
 	background-color: $bg-accent;
 	z-index: 100;
 	overflow-y: auto;
+
+	@media (max-width: $mobile) {
+		padding: 40px 20px;
+	}
 }
 
 .profile-page__link-back {

src/view/page/login/loginPage.scss

@@ -65,6 +65,18 @@
 	}
 }
 
+.login-page__back-link:active {
+	@media (max-width: $mobile) {
+		color: $accent-dark;
+	}
+}
+
+.login-page__back-link:focus {
+	@media (max-width: $mobile) {
+		color: $accent-medium;
+	}
+}
+
 .login-page__headline {
 	@include headline;
 	margin: 0;