RK2

.gitignore

@@ -1,4 +1,4 @@
 node_modules/
 .idea/
 /components/precompiled-templates.js
-/images/
+nginx/ssl/

components/AdCard/AdCard.hbs

@@ -1,89 +1,89 @@
-<div class='ad-card' id='card-{{id}}'>
-    <!-- ID is used for js not styles -->
-    <img class='ad_card__img1' src='{{images.[0]}}' alt='Ad card image' />
-    <div class='ad-card__image-pagination-div'>
-        <!-- Здесь будут кружочки -->
-        <!--        <div class="circle-full"></div>-->
-        <!--        <div class="circle-empty"></div>-->
-    </div>
-
-    <button class='ad-card__button'>
-        <svg
-            width='43'
-            height='43'
-            viewBox='0 0 43 43'
-            fill='none'
-            xmlns='http://www.w3.org/2000/svg'
-        >
-            <g style='mix-blend-mode:multiply' filter='url(#filter0_d_181_2)'>
-                <circle cx='21.5' cy='17.5' r='17.5' fill='#9D9999' />
-            </g>
-            <path
-                fill-rule='evenodd'
-                clip-rule='evenodd'
-                d='M22 13.0001C20.5005 11.2526 17.9948 10.7126 16.116 12.3128C14.2372 13.913 13.9727 16.5884 15.4481 18.481C16.6749 20.0545 20.3873 23.3732 21.6041 24.4474C21.7402 24.5676 21.8082 24.6276 21.8877 24.6512C21.9569 24.6718 22.0327 24.6718 22.1021 24.6512C22.1815 24.6276 22.2495 24.5676 22.3857 24.4474C23.6024 23.3732 27.3148 20.0545 28.5416 18.481C30.017 16.5884 29.7848 13.8961 27.8737 12.3128C25.9626 10.7294 23.4995 11.2526 22 13.0001Z'
-                stroke='white'
-                stroke-width='2'
-                stroke-linecap='round'
-                stroke-linejoin='round'
-            />
-            <defs>
-                <filter
-                    id='filter0_d_181_2'
-                    x='0'
-                    y='0'
-                    width='43'
-                    height='43'
-                    filterUnits='userSpaceOnUse'
-                    color-interpolation-filters='sRGB'
-                >
-                    <feFlood flood-opacity='0' result='BackgroundImageFix' />
-                    <feColorMatrix
-                        in='SourceAlpha'
-                        type='matrix'
-                        values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0'
-                        result='hardAlpha'
-                    />
-                    <feOffset dy='4' />
-                    <feGaussianBlur stdDeviation='2' />
-                    <feComposite in2='hardAlpha' operator='out' />
-                    <feColorMatrix
-                        type='matrix'
-                        values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0'
-                    />
-                    <feBlend
-                        mode='normal'
-                        in2='BackgroundImageFix'
-                        result='effect1_dropShadow_181_2'
-                    />
-                    <feBlend
-                        mode='normal'
-                        in='SourceGraphic'
-                        in2='effect1_dropShadow_181_2'
-                        result='shape'
-                    />
-                </filter>
-            </defs>
-        </svg>
-    </button>
-
-    <div class='ad-card__info'>
-        <div class='ad-card__location'>
-            <p class='ad-card__p1'>{{city}}</p>
-            <p class='ad-card__p2'>{{address}}</p>
-            <a href='{{onMap}}' class='ad-card__href'>Показать на карте</a>
-        </div>
-        <div class='ad-card__author-info'>
-            <img
-                class='ad-card__img2'
-                src='{{authorAvatar}}'
-                alt='User avatar'
-            />
-            <p>{{authorName}}</p>
-            <div class='ad-card__score-container'>
-                <img class='ad-card__img3' src='images/star.png' alt='star' />
-                <span class='ad-card__score'>{{authorRating}}</span>
-            </div>
-        </div>
-    </div>
+<div class='ad-card' id='card-{{id}}'>
+    <!-- ID is used for js not styles -->
+    <img class='ad_card__img1' src='{{images.[0].path}}' alt='Ad card image' />
+    <div class='ad-card__image-pagination-div'>
+        <!-- Здесь будут кружочки -->
+        <!--        <div class="circle-full"></div>-->
+        <!--        <div class="circle-empty"></div>-->
+    </div>
+
+    <button class='ad-card__button'>
+        <svg
+            width='43'
+            height='43'
+            viewBox='0 0 43 43'
+            fill='none'
+            xmlns='http://www.w3.org/2000/svg'
+        >
+            <g style='mix-blend-mode:multiply' filter='url(#filter0_d_181_2)'>
+                <circle cx='21.5' cy='17.5' r='17.5' fill='#9D9999' />
+            </g>
+            <path
+                fill-rule='evenodd'
+                clip-rule='evenodd'
+                d='M22 13.0001C20.5005 11.2526 17.9948 10.7126 16.116 12.3128C14.2372 13.913 13.9727 16.5884 15.4481 18.481C16.6749 20.0545 20.3873 23.3732 21.6041 24.4474C21.7402 24.5676 21.8082 24.6276 21.8877 24.6512C21.9569 24.6718 22.0327 24.6718 22.1021 24.6512C22.1815 24.6276 22.2495 24.5676 22.3857 24.4474C23.6024 23.3732 27.3148 20.0545 28.5416 18.481C30.017 16.5884 29.7848 13.8961 27.8737 12.3128C25.9626 10.7294 23.4995 11.2526 22 13.0001Z'
+                stroke='white'
+                stroke-width='2'
+                stroke-linecap='round'
+                stroke-linejoin='round'
+            />
+            <defs>
+                <filter
+                    id='filter0_d_181_2'
+                    x='0'
+                    y='0'
+                    width='43'
+                    height='43'
+                    filterUnits='userSpaceOnUse'
+                    color-interpolation-filters='sRGB'
+                >
+                    <feFlood flood-opacity='0' result='BackgroundImageFix' />
+                    <feColorMatrix
+                        in='SourceAlpha'
+                        type='matrix'
+                        values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0'
+                        result='hardAlpha'
+                    />
+                    <feOffset dy='4' />
+                    <feGaussianBlur stdDeviation='2' />
+                    <feComposite in2='hardAlpha' operator='out' />
+                    <feColorMatrix
+                        type='matrix'
+                        values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0'
+                    />
+                    <feBlend
+                        mode='normal'
+                        in2='BackgroundImageFix'
+                        result='effect1_dropShadow_181_2'
+                    />
+                    <feBlend
+                        mode='normal'
+                        in='SourceGraphic'
+                        in2='effect1_dropShadow_181_2'
+                        result='shape'
+                    />
+                </filter>
+            </defs>
+        </svg>
+    </button>
+
+    <div class='ad-card__info'>
+        <div class='ad-card__location'>
+            <p class='ad-card__p1'>{{cityName}}</p>
+            <p class='ad-card__p2'>{{address}}</p>
+            <a href='{{onMap}}' class='ad-card__href'>Показать на карте</a>
+        </div>
+        <div class='ad-card__author-info'>
+            <img
+                class='ad-card__img2'
+                src='{{author.avatar}}'
+                alt='User avatar'
+            />
+            <p>{{author.name}}</p>
+            <div class='ad-card__score-container'>
+                <img class='ad-card__img3' src='/star.png' alt='star' />
+                <span class='ad-card__score'>{{author.rating}}</span>
+            </div>
+        </div>
+    </div>
 </div>

components/AdCard/AdCard.ts

@@ -27,7 +27,7 @@
     }
 
     render() {
         const template = Handlebars.templates['AdCard.hbs'];
         const templateContainer = document.createElement('div');
 
         templateContainer.innerHTML = template(this.#data);
@@ -98,7 +98,7 @@
         setTimeout(() => {
             this.#makeCircleActive(toShowIndex);
             this.#currentImgIndex = toShowIndex;
-            imgElem.src = this.#data.images[toShowIndex];
+            imgElem.src = this.#data.images[toShowIndex].path;
         }, SCROLL_DELAY);
     }
 
@@ -110,7 +110,7 @@
         setTimeout(() => {
             this.#makeCircleActive(0);
             this.#currentImgIndex = 0;
-            imgElem.src = this.#data.images[0];
+            imgElem.src = this.#data.images[0].path;
         }, SCROLL_DELAY);
     }
 

components/AdListPage/AdListPage.hbs

@@ -3,6 +3,6 @@
         <h1 class='ad-list-page__title'>Список объявлений</h1>
         <button class='ad-list-page__add-button js-add-btn'>Добавить объявление</button>
     </div>
-    <div class='js-advert-list'>
+    <div class='ad-list-page__adverts-container js-advert-list'>
     </div>
 </div>

components/AdListPage/AdListPage.sass

@@ -1,73 +1,83 @@
-@use '../../mixins'
-
-.ad-list-page
-    margin-top: 40px
-    width: 80%
-    margin: 0 auto
-
-    &__title
-        font-weight: 500
-
-    &__upper-container
-        display: flex
-        justify-content: space-between
-        align-items: end
-        margin: 20px 0
-    &__add-button
-        @include mixins.button
-        background-color: #FF5255
-
-
-.horizontal-ad-card
-    border: 1px solid black
-    border-radius: 10px
-    display: flex
-    flex-direction: row
-    gap: 40px
-    padding: 15px
-
-    &__img
-        width: 250px
-        border-radius: 10px
-
-    &__info
-        display: flex
-        width: 100%
-        flex-direction: column
-        justify-content: space-between
-        position: relative
-
-    &__notification-bell
-        position: absolute
-        width: 32px
-        top: 0px
-        right: 0px
-        cursor: pointer
-
-    &__city
-        font-size: 32px
-
-    &__address
-        font-size: 20px
-
-    &__buttons-container
-        display: flex
-        gap: 30px
-
-    &__open-btn
-        @include mixins.button
-        width: 200px
-        height: 38px
-        background-color: #5289FF
-
-    &__edit-btn
-        @include mixins.button
-        height: 38px
-
-    &__del-btn
-        @include mixins.button
-        background-color: #FF5900
-        height: 38px
-
-
+@use '../../mixins'
+
+.ad-list-page
+    margin-top: 40px
+    width: 80%
+    margin: 0 auto
+
+    &__title
+        font-weight: 500
+
+    &__upper-container
+        display: flex
+        justify-content: space-between
+        align-items: end
+        margin: 20px 0
+    &__add-button
+        @include mixins.button
+        background-color: #FF5255
+
+    &__adverts-container
+        display: flex
+        flex-direction: column
+        gap: 10px
+
+
+.horizontal-ad-card
+    border: 1px solid black
+    border-radius: 10px
+    display: flex
+    flex-direction: row
+    gap: 40px
+    padding: 15px
+    transition: 0.3s all
+
+    &:hover
+        background-color: #cecece
+        border: 1px solid #4b4b4b
+
+    &__img
+        width: 250px
+        border-radius: 10px
+
+    &__info
+        display: flex
+        width: 100%
+        flex-direction: column
+        justify-content: space-between
+        position: relative
+
+    &__notification-bell
+        position: absolute
+        width: 32px
+        top: 0px
+        right: 0px
+        cursor: pointer
+
+    &__city
+        font-size: 32px
+
+    &__address
+        font-size: 20px
+
+    &__buttons-container
+        display: flex
+        gap: 30px
+
+    &__open-btn
+        @include mixins.button
+        width: 200px
+        height: 38px
+        background-color: #5289FF
+
+    &__edit-btn
+        @include mixins.button
+        height: 38px
+
+    &__del-btn
+        @include mixins.button
+        background-color: #FF5900
+        height: 38px
+
+