Merge branch 'koibaev-dev' into result-dev

frontend-park-mail-ru · Dec 15, 2024 · c97e46c · c97e46c
2 parents d84d0f8 + 8cc67bd
commit c97e46c
Show file tree

Hide file tree

Showing 21 changed files with 144 additions and 40 deletions.
diff --git a/public/assets/icons/starIconWhite.svg b/public/assets/icons/starIconWhite.svg
diff --git a/public/assets/images/cowatchBackground.webp b/public/assets/images/cowatchBackground.webp
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/GridBlock/GridBlock.hbs b/public/components/GridBlock/GridBlock.hbs
@@ -16,8 +16,14 @@
           <div class='grid-block__element_desc_stats'>
             <span>{{this.country}}</span>
             <span>{{this.releaseDate}}</span>
-
-            <span>{{this.rating}}</span>
+            <div>
+              <span>{{this.rating}}</span>
+              <img
+                class='grid-block__star-icon'
+                src='/assets/icons/starIconWhite.svg'
+                alt=''
+              />
+            </div>
 
           </div>
         </div>

diff --git a/public/components/GridBlock/GridBlock.scss b/public/components/GridBlock/GridBlock.scss
@@ -61,6 +61,10 @@
       grid-row: span 2 / span 2;
       font-size: 40px;
 
+      .grid-block__star-icon {
+        height: 20px;
+      }
+
       .grid-block__element_desc {
         padding: 24px;
 
@@ -73,6 +77,10 @@
       grid-column-start: 2;
       font-size: $font-size-extra-large;
 
+      .grid-block__star-icon {
+        height: 12px;
+      }
+
       .grid-block__element_desc {
         &_stats {
           font-weight: 400;
@@ -84,6 +92,10 @@
       font-size: $font-size-extra-large;
       grid-column-start: 2;
 
+      .grid-block__star-icon {
+        height: 12px;
+      }
+
       .grid-block__element_desc {
         &_stats {
           font-weight: 400;

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/MovieBigCard/MovieBigCard.hbs b/public/components/MovieBigCard/MovieBigCard.hbs
@@ -5,7 +5,15 @@
     <div class='movie-big-card__desc_stats'>
       <span>{{movie.country}}</span>
       <span>{{movie.releaseDate}}</span>
-      <span>{{movie.rating}}</span>
+      <div class=''>
+        <span>{{movie.rating}}</span>
+        <img
+          class='movie-big-card__star-icon'
+          src='/assets/icons/starIconWhite.svg'
+          alt=''
+        />
+      </div>
+
     </div>
   </div>
 </div>
diff --git a/public/components/MovieBigCard/MovieBigCard.scss b/public/components/MovieBigCard/MovieBigCard.scss
@@ -6,6 +6,10 @@
   position: relative;
   transition: all 0.2s ease;
 
+  &__star-icon {
+    height: 14px;
+  }
+
   &__image {
     width: 100%;
     height: 100%;

diff --git a/public/components/MovieDescription/MovieDescription.hbs b/public/components/MovieDescription/MovieDescription.hbs
@@ -4,7 +4,7 @@
       <div class='movie-description__content'>
         <img class='movie-description__title' src={{movie.titleImage}} alt='' />
         <div class='movie-description__info'>
-          <span class='rating'>{{movie.rating}}</span>
+          <span class='rating'>{{movieRating}}</span>
           <span class='movie-description__info_text'>{{movie.releaseDate}},
             {{movie.country}}
           </span>

diff --git a/public/components/MovieDescription/MovieDescription.ts b/public/components/MovieDescription/MovieDescription.ts
@@ -130,6 +130,7 @@ export class MovieDescription {
         isUserAuth: !!userStore.getUser().email,
         isPremiumUser: userStore.getUser().isPremium,
         withSubscription: moviePageStore.getMovie()?.withSubscription,
+        movieRating: moviePageStore.getMovie()?.rating.toFixed(1),
       });
 
       this.checkFavorite();

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/RateBlock/RateBlock.ts b/public/components/RateBlock/RateBlock.ts
@@ -111,7 +111,7 @@ export class RateBlock {
   renderTemplate() {
     this.#parent.innerHTML = template({
       isUserAuth: !!userStore.getUser().email,
-      rating: this.#movie?.rating,
+      rating: this.#movie?.rating.toFixed(1),
       userRating: this.#movie?.userRating,
       isUserVoted: this.#movie?.userRating !== 0,
     });

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/consts.ts b/public/consts.ts
@@ -184,3 +184,12 @@ export const CARD_PREVIEW_HIDING_TIMEOUT = 300;
 export const PLAYER_CONTROLL_HIDING_TIMEOUT = 3000;
 export const NOTIFIER_WRAPPER_CLEAN_TIMEOUT = 300;
 export const CLOSING_SERIES_MENU_TIMEOUT = 300;
+
+export const DEVICES_LIST = [
+  'iPad Simulator',
+  'iPhone Simulator',
+  'iPod Simulator',
+  'iPad',
+  'iPhone',
+  'iPod',
+];
diff --git a/public/index.ts b/public/index.ts
@@ -32,7 +32,7 @@ root.appendChild(previewElement);
 
 if ('serviceWorker' in navigator) {
   navigator.serviceWorker
-    .register('sw.js', { scope: '/' })
+    .register('/sw.js', { scope: '/' })
     .then(() => console.log('serviceWorker has been registered'))
     .catch((err) => {
       console.log('SW ERR: ', err);

diff --git a/public/modules/IsMobileDevice.ts b/public/modules/IsMobileDevice.ts
@@ -1,3 +1,5 @@
+import { DEVICES_LIST } from 'consts';
+
 export const isMobileDevice = () => {
   return window.matchMedia('only screen and (max-width: 750px)').matches;
 };
@@ -8,14 +10,7 @@ export const isTabletOrMobileLandscape = () => {
 
 export const isiOS = () => {
   return (
-    [
-      'iPad Simulator',
-      'iPhone Simulator',
-      'iPod Simulator',
-      'iPad',
-      'iPhone',
-      'iPod',
-    ].includes(navigator.platform) ||
+    DEVICES_LIST.includes(navigator.platform) ||
     (navigator.userAgent.includes('Mac') && 'ontouchend' in document)
   );
 };

diff --git a/public/pages/ProfilePage/ProfilePage.scss b/public/pages/ProfilePage/ProfilePage.scss
@@ -96,7 +96,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;