Merge pull request #92 from Medical-Information-Portal-Stethoscope/fe…

…at/adaptive-personal-info feat(profile): make adaptive tab editing user info
Medical-Information-Portal-Stethoscope · Oct 20, 2023 · a0e3d4e · a0e3d4e
2 parents 98670ca + 035c438
commit a0e3d4e
Show file tree

Hide file tree

Showing 9 changed files with 181 additions and 13 deletions.
diff --git a/src/components/sidebar/sidebar.module.scss b/src/components/sidebar/sidebar.module.scss
@@ -77,6 +77,7 @@
       display: flex;
       column-gap: 24px;
       padding-top: 30px;
+      padding-bottom: 0;
     }
 
     @media screen and (max-width: calc($media-tablet-small-extra - 1px)) {

diff --git a/src/components/user-profile/components/password-changing/password-changing.module.scss b/src/components/user-profile/components/password-changing/password-changing.module.scss
@@ -1,32 +1,72 @@
 @import 'assets/styles/abstracts/variables/colors';
 @import 'assets/styles/abstracts/variables/fonts';
+@import 'assets/styles/abstracts/variables/media-queries';
 @import 'assets/styles/abstracts/placeholders';
+@import 'assets/styles/abstracts/functions';
 
 .userProfile {
   &_form {
-    margin-top: 20px;
+    margin-top: 17px;
     padding: 32px;
     box-sizing: border-box;
     border-radius: 16px;
     border: 1px solid rgba(189, 189, 189, 0.36);
+
+    @media screen and (max-width: calc($media-tablet-small-extra - 1px)) {
+      margin-top: 14px;
+      padding: 0;
+      border: none;
+    }
   }
 
   &_title {
     @extend %heading-size-small;
+
+    @media screen and (max-width: calc($media-desktop-small - 1px)) {
+      font-size: calc-fluid-element(
+        calc($font-size-text-large * 10),
+        calc($font-size-heading-3 * 10),
+        $media-tablet-small,
+        $media-desktop-small
+      );
+    }
+
+    @media screen and (max-width: $media-tablet-large) {
+      font-weight: 700;
+      line-height: $font-line-height-text-large;
+      letter-spacing: normal;
+    }
+
+    @media screen and (max-width: $media-tablet-small) {
+      font-size: $font-size-text-large;
+    }
   }
 
   &_inputs {
-    margin: 32px 0 27px;
+    margin: 32px 0 28px;
 
     > div {
       &:not(:first-child) {
         margin-top: 15px;
       }
     }
+
+    @media screen and (max-width: $media-tablet-large) {
+      margin-bottom: 25px;
+    }
+
+    @media screen and (max-width: calc($media-tablet-small-extra - 1px)) {
+      margin-top: 24px;
+      margin-bottom: 21px;
+    }
   }
 
   &_button {
     width: 100%;
+
+    @media screen and (max-width: $media-tablet-large) {
+      max-width: 335px;
+    }
   }
 
   &_nav {

diff --git a/src/components/user-profile/components/password-changing/password-changing.tsx b/src/components/user-profile/components/password-changing/password-changing.tsx
@@ -1,5 +1,6 @@
 import { FC, Dispatch, SetStateAction, useState, useEffect } from 'react';
 import { useFormik } from 'formik';
+import { useWindowDimensions } from 'hooks/useWindowDimensions';
 import * as Yup from 'yup';
 import Input from 'shared/input/input';
 import Button from 'shared/buttons/button/button';
@@ -9,6 +10,7 @@ import {
   schemaPassword,
   schemaCurrentPassword,
 } from 'utils/data/validation/yup-schema';
+import { tabletAlbumOrientation } from 'utils/constants';
 import styles from './password-changing.module.scss';
 
 interface IPasswordChangingProps {
@@ -22,6 +24,8 @@ export const PasswordChanging: FC<IPasswordChangingProps> = ({
     current_password: string[];
   }>(null);
 
+  const isSmallScreenDevice = useWindowDimensions() <= tabletAlbumOrientation;
+
   const formik = useFormik({
     initialValues: {
       password_current: '',
@@ -97,6 +101,7 @@ export const PasswordChanging: FC<IPasswordChangingProps> = ({
           extraClass={styles.userProfile_button}
           type="submit"
           label="Сохранить новый пароль"
+          size={isSmallScreenDevice ? 'small' : 'medium'}
           hasSpinner
           spinnerSize="small"
           spinnerColor="white"

diff --git a/src/components/user-profile/components/personal-data/personal-data.module.scss b/src/components/user-profile/components/personal-data/personal-data.module.scss
@@ -1,7 +1,9 @@
 @import 'assets/styles/abstracts/variables/colors';
 @import 'assets/styles/abstracts/variables/fonts';
+@import 'assets/styles/abstracts/variables/media-queries';
 @import 'assets/styles/abstracts/variables/animations';
 @import 'assets/styles/abstracts/placeholders';
+@import 'assets/styles/abstracts/functions';
 
 .userProfile {
   &_form {
@@ -12,16 +14,55 @@
 
     > button {
       max-width: 224px;
+      min-width: max-content;
+    }
+
+    @media screen and (max-width: $media-tablet-large) {
+      > button {
+        min-width: 335px;
+      }
+    }
+
+    @media screen and (max-width: calc($media-tablet-small-extra - 1px)) {
+      padding: 0;
+      border: none;
+
+      > button {
+        max-width: 100%;
+        width: 100%;
+      }
     }
   }
 
   &_title {
     @extend %heading-size-small;
+
+    @media screen and (max-width: calc($media-desktop-small - 1px)) {
+      font-size: calc-fluid-element(
+        calc($font-size-text-large * 10),
+        calc($font-size-heading-3 * 10),
+        $media-tablet-small,
+        $media-desktop-small
+      );
+    }
+
+    @media screen and (max-width: $media-desktop-large) {
+      font-weight: 700;
+      letter-spacing: normal;
+    }
+
+    @media screen and (max-width: calc($media-tablet-small - 1px)) {
+      font-size: $font-size-text-large;
+    }
   }
 
   &_inputs {
     margin: 28px 0 7px;
 
+    @media screen and (max-width: calc($media-tablet-small-extra - 1px)) {
+      margin-bottom: 2px;
+    }
+
     > div {
       > div {
         background-color: $color-neutral-100;

diff --git a/src/components/user-profile/user-profile.module.scss b/src/components/user-profile/user-profile.module.scss
@@ -1,8 +1,10 @@
 @import 'assets/styles/abstracts/variables/colors';
 @import 'assets/styles/abstracts/variables/fonts';
+@import 'assets/styles/abstracts/variables/media-queries';
 @import 'assets/styles/abstracts/variables/wrappers';
-@import 'assets/styles/abstracts/placeholders';
 @import 'assets/styles/abstracts/variables/animations';
+@import 'assets/styles/abstracts/placeholders';
+@import 'assets/styles/abstracts/functions';
 
 .userProfile {
   max-width: $wrapper-articles-preview-desktop;
@@ -12,6 +14,18 @@
 
     &_password {
       max-width: $wrapper-profile-password-desktop;
+
+      > button {
+        @extend %text-size-medium-semibold;
+
+        > span {
+          column-gap: 7px;
+        }
+      }
+    }
+
+    @media screen and (max-width: $media-tablet-large) {
+      max-width: 472px;
     }
   }
 
@@ -20,6 +34,10 @@
     flex-direction: column;
     row-gap: 32px;
 
+    @media screen and (max-width: $media-tablet-large) {
+      row-gap: 24px;
+    }
+
     > button {
       width: max-content;
     }
@@ -31,6 +49,23 @@
     column-gap: 32px;
     @extend %text-size-large;
 
+    @media screen and (max-width: calc($media-desktop-small - 1px)) {
+      font-size: calc-fluid-element(
+        calc($font-size-text-medium * 10),
+        calc($font-size-text-large * 10),
+        $media-tablet-small,
+        $media-desktop-small
+      );
+    }
+
+    @media screen and (max-width: $media-tablet-large) {
+      letter-spacing: $font-letter-spacing-main;
+    }
+
+    @media screen and (max-width: calc($media-tablet-small - 1px)) {
+      font-size: $font-size-text-medium;
+    }
+
     &_heading {
       font-weight: 400;
       color: $color-neutral-500;
@@ -46,6 +81,25 @@
   &_title {
     @extend %heading-size-medium;
     margin-bottom: 32px;
+
+    @media screen and (max-width: calc($media-desktop-small - 1px)) {
+      font-size: calc-fluid-element(
+        calc($font-size-heading-3 * 10),
+        calc($font-size-heading-2 * 10),
+        $media-tablet-small,
+        $media-desktop-small
+      );
+    }
+
+    @media screen and (max-width: $media-tablet-large) {
+      margin-bottom: 28px;
+      font-weight: 600;
+      letter-spacing: $font-letter-spacing-main;
+    }
+
+    @media screen and (max-width: calc($media-tablet-small - 1px)) {
+      font-size: $font-size-heading-3;
+    }
   }
 
   &_subtitle {
@@ -59,6 +113,10 @@
 
   &_box {
     margin-top: 38px;
+
+    @media screen and (max-width: $media-tablet-large) {
+      margin-top: 30px;
+    }
   }
 
   &_button_password {

diff --git a/src/components/user-profile/user-profile.tsx b/src/components/user-profile/user-profile.tsx
@@ -1,19 +1,18 @@
-import { useState } from 'react';
 import classNames from 'classnames';
 import { useAppSelector } from 'services/app/hooks';
 import { showUserPersonalData } from 'services/features/user/selectors';
 import { Icon } from 'shared/icons';
 import Button from 'shared/buttons/button/button';
+import { useProfileTab } from 'pages/profile/profile-page';
 import { PersonalData } from './components/personal-data/personal-data';
 import { PasswordChanging } from './components/password-changing/password-changing';
 import styles from './user-profile.module.scss';
 
 function UserProfile() {
-  const [isProfileTab, setIsProfileTab] = useState(true);
-
+  const { isProfileTab, setIsProfileTab } = useProfileTab();
   const { user } = useAppSelector(showUserPersonalData);
 
-  const handeUserRole = () => {
+  const handleUserRole = () => {
     switch (user?.role) {
       case 'admin':
         return (
@@ -49,7 +48,7 @@ function UserProfile() {
             <div className={styles.userProfile_general}>
               <div className={styles.userProfile_status}>
                 <h4 className={styles.userProfile_status_heading}>Статус</h4>
-                {handeUserRole()}
+                {handleUserRole()}
               </div>
               {user?.role === 'user' && (
                 <p className={styles.userProfile_quote}>

diff --git a/src/pages/profile/profile-page.module.scss b/src/pages/profile/profile-page.module.scss
@@ -21,14 +21,20 @@ $indent-mobile: calc-fluid-element(
 
 .wrapper {
   display: grid;
-  grid-template-columns: 360px 74.7%;
+  grid-template-columns: 360px auto;
   column-gap: 5.59%;
   max-width: $wrapper-main-content-desktop;
   margin: 0 auto;
   padding: 48px 0 80px;
 
   @media screen and (max-width: calc($media-desktop-large - 1px)) {
     margin: 0 $indent-section-sides-desktop;
+    column-gap: calc-fluid-element(
+      43px,
+      102px,
+      $media-desktop-small,
+      $media-desktop-large
+    );
   }
 
   @media screen and (max-width: calc($media-desktop-medium - 1px)) {
@@ -41,7 +47,8 @@ $indent-mobile: calc-fluid-element(
 
   @media screen and (max-width: $media-tablet-large) {
     grid-template-columns: 1fr;
-    padding-top: 104px;
+    row-gap: 35px;
+    padding: 104px 0 32px;
   }
 
   @media screen and (max-width: calc($media-tablet-small - 1px)) {

diff --git a/src/pages/profile/profile-page.tsx b/src/pages/profile/profile-page.tsx
@@ -1,17 +1,27 @@
-import { useLocation, Outlet } from 'react-router-dom';
+import React, { useState } from 'react';
+import { useLocation, Outlet, useOutletContext } from 'react-router-dom';
 import { useScrollToTop } from 'hooks/useScrollToTop';
 import classNames from 'classnames';
 import Footer from 'components/footer/footer';
 import { Header } from 'components/header';
 import Sidebar from 'components/sidebar/sidebar';
+import { useWindowDimensions } from 'hooks/useWindowDimensions';
+import { tabletAlbumOrientation } from 'utils/constants';
 import routes from 'utils/routes';
 import styles from './profile-page.module.scss';
 
+type TContextType = {
+  isProfileTab: boolean;
+  setIsProfileTab: React.Dispatch<React.SetStateAction<boolean>>;
+};
+
 function ProfilePage() {
   const { pathname } = useLocation();
   const isRouteCreatingAnArticle = pathname.endsWith(
     `${routes.profile}/${routes.publication}`
   );
+  const isSmallScreenDevice = useWindowDimensions() <= tabletAlbumOrientation;
+  const [isProfileTab, setIsProfileTab] = useState(true);
 
   useScrollToTop();
 
@@ -23,12 +33,13 @@ function ProfilePage() {
           [styles[`wrapper--publication`]]: isRouteCreatingAnArticle,
         })}
       >
-        <Sidebar />
-        <Outlet />
+        {!isProfileTab && isSmallScreenDevice ? null : <Sidebar />}
+        <Outlet context={{ isProfileTab, setIsProfileTab }} />
       </main>
       <Footer />
     </>
   );
 }
 
 export default ProfilePage;
+export const useProfileTab = () => useOutletContext<TContextType>();