Adapt modal, add close button on psw change, fix some issues

frontend-park-mail-ru · Dec 15, 2024 · 1df67ea · 1df67ea
1 parent 130934a
commit 1df67ea
Show file tree

Hide file tree

Showing 8 changed files with 87 additions and 20 deletions.
diff --git a/public/components/CreateRoomModal/CreateRoomModal.scss b/public/components/CreateRoomModal/CreateRoomModal.scss
@@ -35,9 +35,9 @@
   }
 
   &__content {
-    max-width: 600px;
-    width: 700px;
-    height: 400px;
+    max-width: 800px;
+    width: 800px;
+    height: 500px;
     transform: scale(0.5);
     transition: 0.4s all;
     background-color: $modal-content-background;
@@ -49,7 +49,7 @@
     }
 
     &_title {
-      font-size: 32px;
+      font-size: $font-size-extra-large;
       margin-bottom: 16px;
       text-align: center;
     }
@@ -78,10 +78,11 @@
   }
 }
 
-@include smallTablet {
+@include extraLargeTablet {
   .create-room-modal {
     &__content {
-      width: 550px;
+      width: 600px;
+      height: 400px;
     }
     &__close-icon {
       width: 24px;
@@ -90,6 +91,14 @@
   }
 }
 
+@include smallTablet {
+  .create-room-modal {
+    &__content {
+      width: 550px;
+    }
+  }
+}
+
 @include mobile {
   .create-room-modal {
     &__content {
@@ -113,15 +122,15 @@
       padding: 24px;
 
       &_title {
-        font-size: 24px;
+        font-size: $font-size-large;
         margin-bottom: 12px;
       }
       &_search {
         &_desc {
-          font-size: 14px;
+          font-size: $font-size-small;
         }
         &_input {
-          font-size: 14px;
+          font-size: $font-size-small;
         }
       }
     }
@@ -139,15 +148,15 @@
       padding: 24px;
 
       &_title {
-        font-size: 20px;
+        font-size: $font-size-menu;
         margin-bottom: 10px;
       }
       &_search {
         &_desc {
-          font-size: 12px;
+          font-size: $font-size-extra-small;
         }
         &_input {
-          font-size: 12px;
+          font-size: $font-size-extra-small;
         }
       }
     }

diff --git a/public/components/GridMoviesList/GridMoviesList.scss b/public/components/GridMoviesList/GridMoviesList.scss
@@ -3,7 +3,7 @@
   flex-direction: column;
   align-items: center;
 
-  height: 200px;
+  height: 300px;
   overflow-y: scroll;
 
   &::-webkit-scrollbar {
@@ -55,6 +55,12 @@
   }
 }
 
+@include extraLargeTablet {
+  .grid-list {
+    height: 200px;
+  }
+}
+
 @include mobile {
   .grid-list {
     &__container {

diff --git a/public/components/PasswordChangeModal/PasswordChangeModal.hbs b/public/components/PasswordChangeModal/PasswordChangeModal.hbs
@@ -1,5 +1,11 @@
 <div id='password-modal' class='password-modal'>
   <div id='password-modal-content' class='password-modal__content'>
+    <img
+      id='password-modal-close-button'
+      class='password-modal__close-icon'
+      src='/assets/icons/closeNoShadowIcon.svg'
+      alt=''
+    />
     <h4 class='password-modal__content_text'>Смена пароля</h4>
     <div class='password-modal__input'>
       <label for='password-prev-value'>

diff --git a/public/components/PasswordChangeModal/PasswordChangeModal.scss b/public/components/PasswordChangeModal/PasswordChangeModal.scss
@@ -17,6 +17,18 @@
   z-index: 10000;
   backdrop-filter: blur(3px);
 
+  &__close-icon {
+    position: absolute;
+    width: 26px;
+    height: 26px;
+    top: 15px;
+    right: 15px;
+
+    &:hover {
+      cursor: pointer;
+    }
+  }
+
   &__active {
     opacity: 1;
     pointer-events: all;
@@ -110,15 +122,28 @@
   }
 }
 
+@include extraLargeTablet {
+  .password-modal {
+    &__close-icon {
+      width: 24px;
+      height: 24px;
+    }
+  }
+}
+
 @include mobile {
-  .modal {
+  .password-modal {
     &__content {
       width: 350px;
     }
+    &__close-icon {
+      width: 22px;
+      height: 22px;
+    }
   }
 }
 @include extraSmallMobile {
-  .modal {
+  .password-modal {
     &__content {
       padding: 24px;
       width: 90vw;
@@ -128,5 +153,17 @@
         margin-bottom: 25px;
       }
     }
+    &__close-icon {
+      width: 18px;
+      height: 18px;
+    }
+  }
+}
+@include tinyMobile {
+  .password-modal {
+    &__close-icon {
+      width: 16px;
+      height: 16px;
+    }
   }
 }
diff --git a/public/components/PasswordChangeModal/PasswordChangeModal.ts b/public/components/PasswordChangeModal/PasswordChangeModal.ts
@@ -56,6 +56,15 @@ export class PasswordChangeModal {
     );
   }
 
+  handleCloseButtonClick() {
+    const closeButton = document.getElementById(
+      'password-modal-close-button',
+    ) as HTMLElement;
+    closeButton.addEventListener('click', () => {
+      this.hideModal();
+    });
+  }
+
   validatePasswordConrirmField(
     passwordValue: string,
     passwordConfirmValue: string,
@@ -159,6 +168,7 @@ export class PasswordChangeModal {
     }
 
     this.onSubmitClick();
+    this.handleCloseButtonClick();
   }
 
   hideModal() {

diff --git a/public/components/SeriesList/SeriesList.ts b/public/components/SeriesList/SeriesList.ts
@@ -41,10 +41,10 @@ export class SeriesList {
   }
 
   renderSeasonsBlock() {
-    const seasonsBlock = document.getElementById(
-      'series-list-seasons',
-    ) as HTMLDivElement;
     if (this.#seasons) {
+      const seasonsBlock = document.getElementById(
+        'series-list-seasons',
+      ) as HTMLDivElement;
       const seasonsMenu = new SeasonsMenu(
         seasonsBlock,
         this.#seasons.length,

diff --git a/public/pages/ProfilePage/ProfilePage.scss b/public/pages/ProfilePage/ProfilePage.scss
@@ -97,7 +97,7 @@
         gap: 8px;
         font-size: $font-size-medium;
         border: 1.5px solid $brand;
-        padding: 0.5em 1em 1em 1em;
+        padding: 0.5em 1em;
 
         border-radius: 0.5em;
         transition: transform 0.2s ease;

diff --git a/public/types/movie.ts b/public/types/movie.ts
@@ -36,7 +36,6 @@ export type MovieDetailed = {
   seasons?: Season[];
   isFromFavorites?: boolean;
   withSubscription?: boolean;
-  //For rating test
   userRating?: number;
 };