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

…at/adaptive-personal-account Feat/adaptive personal account
Medical-Information-Portal-Stethoscope · Oct 24, 2023 · 428c749 · 428c749
2 parents 4496f06 + 461d4a6
commit 428c749
Show file tree

Hide file tree

Showing 23 changed files with 956 additions and 176 deletions.
diff --git a/src/assets/styles/abstracts/variables/colors.scss b/src/assets/styles/abstracts/variables/colors.scss
@@ -3,6 +3,7 @@ $color-neutral-700: #484554;
 $color-neutral-600: #666372;
 $color-neutral-500: #838090;
 $color-neutral-400: #ada9bb;
+$color-neutral-350: #bdbdbd;
 $color-neutral-300: #bbb;
 $color-neutral-150: #ececec;
 $color-neutral-100: #f4f4f4;

diff --git a/src/assets/styles/abstracts/variables/fonts.scss b/src/assets/styles/abstracts/variables/fonts.scss
@@ -12,6 +12,7 @@ $font-size-text-medium-small: 1.6rem;
 $font-size-text-medium-additional: 1.6rem;
 $font-size-text-small: 1.4rem;
 $font-size-text-small-extra: 1.2rem;
+$font-size-text-small-extra-extra: 0.9rem;
 $font-size-mobile-text-medium: 1.6rem;
 
 $font-line-height-huge: calc(8rem / $font-size-huge * 100%);
@@ -40,3 +41,4 @@ $font-line-height-mobile-text-medium: calc(
 );
 
 $font-letter-spacing-main: 0.4px;
+$font-letter-spacing-tablet: 0.2px;
diff --git a/src/components/cards/article-preview/article-preview.module.scss b/src/components/cards/article-preview/article-preview.module.scss
@@ -46,6 +46,12 @@ $border: 1px solid
     }
   }
 
+  &--favorites {
+    @media screen and (max-width: calc($media-desktop-medium - 1px)) {
+      padding: 16px;
+    }
+  }
+
   &--news,
   &--fullPageNews {
     max-width: 1208px;
@@ -79,6 +85,10 @@ $border: 1px solid
       row-gap: 16px;
     }
   }
+
+  @media screen and (max-width: calc($media-tablet-small-extra - 1px)) {
+    row-gap: 12px;
+  }
 }
 
 .imageWrapper {
@@ -157,6 +167,30 @@ $border: 1px solid
     }
   }
 
+  &--favorites {
+    @media screen and (max-width: calc($media-desktop-large - 1px)) {
+      height: calc-fluid-element(
+        180,
+        320,
+        $media-desktop-small,
+        $media-desktop-large
+      );
+    }
+
+    @media screen and (max-width: calc($media-desktop-medium - 1px)) {
+      > button {
+        &:last-child {
+          top: 7px;
+          right: 7px;
+        }
+      }
+    }
+
+    @media screen and (max-width: $media-desktop-small) {
+      height: 180px;
+    }
+  }
+
   &--fullPageNews,
   &--news {
     height: 292px;
@@ -243,6 +277,12 @@ $border: 1px solid
     }
   }
 
+  &--favorites {
+    @media screen and (max-width: calc($media-desktop-medium - 1px)) {
+      min-height: 148px;
+    }
+  }
+
   &--fullPageNews,
   &--news {
     min-height: 243px;
@@ -281,6 +321,15 @@ $border: 1px solid
   @media screen and (max-width: calc($media-tablet-small - 1px)) {
     font-size: $font-size-text-medium;
   }
+
+  &--favorites {
+    @media screen and (max-width: calc($media-desktop-medium - 1px)) {
+      font-size: $font-size-text-medium;
+      font-weight: 600;
+      line-height: $font-line-height-text-medium;
+      letter-spacing: $font-letter-spacing-main;
+    }
+  }
 }
 
 .text {
@@ -346,6 +395,15 @@ $border: 1px solid
     margin-top: 16px;
   }
 
+  &--favorites {
+    @media screen and (max-width: calc($media-desktop-medium - 1px)) {
+      height: 64px;
+      font-size: $font-size-text-small;
+      line-height: $font-line-height-text-small;
+      letter-spacing: $font-letter-spacing-main;
+    }
+  }
+
   &--fullPageArticle {
     @media screen and (max-width: $media-tablet-large) {
       height: 48px;

diff --git a/src/components/cards/article-preview/article-preview.tsx b/src/components/cards/article-preview/article-preview.tsx
@@ -25,7 +25,13 @@ interface ICardArticlePreviewProps {
     } | null;
     views_count: number;
   };
-  type: 'media' | 'news' | 'fullPageArticle' | 'fullPageNews' | 'default';
+  type:
+    | 'media'
+    | 'news'
+    | 'favorites'
+    | 'fullPageArticle'
+    | 'fullPageNews'
+    | 'default';
   hasFavoriteButton?: boolean;
   extraClass?: string;
   route: string;
@@ -84,7 +90,14 @@ const CardArticlePreview: FC<ICardArticlePreviewProps> = ({
               )}
             >
               <div className={styles.title}>
-                <h3 className={styles.heading}>{title}</h3>
+                <h3
+                  className={classNames(
+                    styles.heading,
+                    styles[`heading--${type}`]
+                  )}
+                >
+                  {title}
+                </h3>
                 <p className={classNames(styles.text, styles[`text--${type}`])}>
                   {converMdToHTML(annotation, true)}
                 </p>

diff --git a/src/components/sidebar/sidebar.module.scss b/src/components/sidebar/sidebar.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';
 
 .sidebar {
   display: flex;
@@ -17,32 +19,89 @@
     height: calc(100vh - 56px); // height of button with indents
   }
 
+  &_wrapper {
+    @media screen and (max-width: $media-tablet-large) {
+      display: flex;
+      flex-direction: column;
+    }
+  }
+
   &_header {
     display: flex;
     align-items: center;
     gap: 24px;
     padding-bottom: 56px;
+
+    @media screen and (max-width: $media-tablet-large) {
+      padding-bottom: 24px;
+    }
+  }
+
+  &_info {
+    max-width: 245px;
   }
 
   &_title {
     @extend %heading-size-small;
     letter-spacing: $font-letter-spacing-main;
     padding-bottom: 8px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+
+    @media screen and (max-width: $media-tablet-small) {
+      font-size: $font-size-heading-3;
+    }
   }
 
   &_subtitle {
-    @extend %text-article;
+    @extend %text-description;
     color: $color-neutral-500;
   }
 
+  &_nav {
+    @media screen and (max-width: $media-tablet-large) {
+      order: 4;
+    }
+  }
+
   &_list {
     padding-bottom: 40px;
+
+    @media screen and (max-width: $media-tablet-large) {
+      display: flex;
+      column-gap: 24px;
+      padding-top: 30px;
+      padding-bottom: 0;
+    }
+
+    @media screen and (max-width: calc($media-tablet-small-extra - 1px)) {
+      column-gap: 16px;
+    }
   }
 
   &_list_item {
     @extend %heading-size-small;
     letter-spacing: $font-letter-spacing-main;
     padding-bottom: 16px;
+
+    @media screen and (max-width: $media-tablet-large) {
+      min-width: 100px;
+      padding-bottom: 0;
+      text-align: center;
+      font-size: calc-fluid-element(
+        calc($font-size-text-small-extra-extra * 10),
+        calc($font-size-heading-3 * 10),
+        $media-tablet-small,
+        $media-desktop-small
+      );
+      font-weight: 500;
+      letter-spacing: $font-letter-spacing-tablet;
+    }
+
+    @media screen and (max-width: $media-tablet-small) {
+      font-size: $font-size-text-small-extra-extra;
+    }
   }
 
   &_item {
@@ -52,6 +111,14 @@
     width: 100%;
     padding: 12px;
 
+    @media screen and (max-width: $media-tablet-large) {
+      padding-right: 7px;
+      padding-left: 7px;
+      border: 0.5px solid rgba($color: $color-neutral-350, $alpha: 0.36);
+      border-radius: 12px;
+      box-sizing: border-box;
+    }
+
     &_active {
       display: inline-block;
       width: 100%;
@@ -60,9 +127,19 @@
       background-color: $color-brand-primary-100;
       border-radius: 12px;
       padding: 12px;
+
+      @media screen and (max-width: $media-tablet-large) {
+        padding-right: 0;
+        padding-left: 0;
+        border: none;
+      }
     }
   }
 
+  &_subscribe {
+    order: 3;
+  }
+
   &_email {
     @extend %text-article;
     color: $color-neutral-600;
@@ -85,6 +162,10 @@
   &_border {
     margin: 32px 0;
     border-top: 1px solid rgba(189, 189, 189, 0.36);
+
+    @media screen and (max-width: $media-tablet-large) {
+      margin-top: 0;
+    }
   }
 
   &_logout {
@@ -110,5 +191,9 @@
     * {
       transition: $transition-button;
     }
+
+    @media screen and (max-width: $media-tablet-large) {
+      display: none;
+    }
   }
 }
diff --git a/src/components/sidebar/sidebar.tsx b/src/components/sidebar/sidebar.tsx
@@ -106,7 +106,7 @@ function Sidebar() {
   return (
     <div className={styles.sidebar} ref={sidebarRef}>
       <div className={isButtonToTopVisible ? styles.sidebar_content : ''}>
-        <div>
+        <div className={styles.sidebar_wrapper}>
           <div className={styles.sidebar_header}>
             <Avatar
               user={
@@ -117,14 +117,14 @@ function Sidebar() {
                 }
               }
             />
-            <div>
+            <div className={styles.sidebar_info}>
               <h2
                 className={styles.sidebar_title}
               >{`${user?.first_name} ${user?.last_name}`}</h2>
               <p className={styles.sidebar_subtitle}>{handleUserRole()}</p>
             </div>
           </div>
-          <nav>
+          <nav className={styles.sidebar_nav}>
             <ul className={styles.sidebar_list}>
               <li className={styles.sidebar_list_item}>
                 <NavLink
@@ -167,15 +167,19 @@ function Sidebar() {
               </li>
             </ul>
           </nav>
-          <p className={styles.sidebar_email}>Еженедельная рассылка на email</p>
-          <div className={styles.sidebar_mailingList}>
-            <ConsentCheckbox
-              id={nanoid()}
-              name="mailingList"
-              isChecked={hasSubscription}
-              onChange={handleUserSubscription}
-            />
-            <p className={styles.sidebar_label}>Подписаться на рассылку</p>
+          <div className={styles.sidebar_subscribe}>
+            <p className={styles.sidebar_email}>
+              Еженедельная рассылка на email
+            </p>
+            <div className={styles.sidebar_mailingList}>
+              <ConsentCheckbox
+                id={nanoid()}
+                name="mailingList"
+                isChecked={hasSubscription}
+                onChange={handleUserSubscription}
+              />
+              <p className={styles.sidebar_label}>Подписаться на рассылку</p>
+            </div>
           </div>
           <div className={styles.sidebar_border} />
           <button