From 977eddcfe628355ee1fef6e5c74b9bc4154cc419 Mon Sep 17 00:00:00 2001 From: Tatiana Bocharova Date: Thu, 21 Nov 2024 10:00:52 +0300 Subject: [PATCH 1/7] signin/up mobile version --- src/pages/sign-in/ui/SignIn.hbs | 4 +- src/pages/sign-in/ui/SignIn.scss | 68 +++++++++++++++++++++++++++----- src/pages/sign-up/ui/SignUp.scss | 61 ++++++++++++++++++++++++++-- 3 files changed, 117 insertions(+), 16 deletions(-) diff --git a/src/pages/sign-in/ui/SignIn.hbs b/src/pages/sign-in/ui/SignIn.hbs index 55c20ad..6c12d7a 100644 --- a/src/pages/sign-in/ui/SignIn.hbs +++ b/src/pages/sign-in/ui/SignIn.hbs @@ -27,9 +27,7 @@ required />
- -
-
+
Нет аккаунта? diff --git a/src/pages/sign-in/ui/SignIn.scss b/src/pages/sign-in/ui/SignIn.scss index 48277e0..230e3be 100644 --- a/src/pages/sign-in/ui/SignIn.scss +++ b/src/pages/sign-in/ui/SignIn.scss @@ -31,7 +31,6 @@ } &__info { - margin-bottom: 35px; color: #f1f1f1; font-size: 16px; font-weight: 400; @@ -72,10 +71,11 @@ color: red; font-size: 16px; margin-top: 10px; + text-align: center; } &__submit_btn { - margin-top: 28px; + margin-top: 25px; width: 450px; height: 50px; padding: 10px; @@ -83,18 +83,11 @@ border-radius: 9px; border: none; color: #f1f1f1; - font-size: 24px; + font-size: 25px; font-weight: 400; text-align: center; } - &__checkbox { - width: 20px; - height: 20px; - margin-right: 5px; - accent-color: #FF5F0F; - } - &__additional { margin-top: 10px; color: #f1f1f1; @@ -109,6 +102,7 @@ &__register_site { text-decoration: none; font-weight: 700; + color: #f1f1f1; &:visited { color: #f1f1f1; @@ -118,4 +112,58 @@ text-decoration: underline; } } + + @media (pointer: coarse) { + &__register_site { + text-decoration: underline; + } + } + + @media (max-width: 768px) { + &__input { + width: calc(60vw - 20px); + } + + &__submit_btn { + width: 60vw; + } + + &__additional { + margin-top: 25px; + flex-direction: column; + row-gap: 10px; + } + } + + @media (max-width: 480px) { + &__form { + margin-top: 41px; + } + + &__intro { + min-height: 100px; + } + + &__title { + font-size: 24px; + } + + &__subtitle { + font-size: 18px; + } + + &__info { + font-size: 14px; + } + + &__input { + width: calc(100% - 20px); + font-size: 16px; + } + + &__submit_btn { + width: 100%; + font-size: 18px; + } + } } diff --git a/src/pages/sign-up/ui/SignUp.scss b/src/pages/sign-up/ui/SignUp.scss index e9c6063..9024e33 100644 --- a/src/pages/sign-up/ui/SignUp.scss +++ b/src/pages/sign-up/ui/SignUp.scss @@ -31,7 +31,6 @@ } &__info { - margin-bottom: 35px; color: #f1f1f1; font-size: 16px; font-weight: 400; @@ -72,10 +71,11 @@ color: red; font-size: 16px; margin-top: 15px; + text-align: center; } &__submit_btn { - margin-top: 28px; + margin-top: 25px; width: 450px; height: 50px; padding: 10px; @@ -83,7 +83,7 @@ border-radius: 9px; border: none; color: #f1f1f1; - font-size: 24px; + font-size: 25px; font-weight: 400; text-align: center; } @@ -102,6 +102,7 @@ &__enter_account { text-decoration: none; font-weight: 700; + color: #f1f1f1; &:visited { color: #f1f1f1; @@ -111,4 +112,58 @@ text-decoration: underline; } } + + @media (pointer: coarse) { + &__enter_account { + text-decoration: underline; + } + } + + @media (max-width: 768px) { + &__input { + width: calc(60vw - 20px); + } + + &__submit_btn { + width: 60vw; + } + + &__additional { + margin-top: 25px; + flex-direction: column; + row-gap: 10px; + } + } + + @media (max-width: 480px) { + &__form { + margin-top: 41px; + } + + &__intro { + min-height: 100px; + } + + &__title { + font-size: 24px; + } + + &__subtitle { + font-size: 18px; + } + + &__info { + font-size: 14px; + } + + &__input { + width: calc(100% - 20px); + font-size: 16px; + } + + &__submit_btn { + width: 100%; + font-size: 18px; + } + } } From 83af9d690d54630b2785f215c4aa079d2aff31f2 Mon Sep 17 00:00:00 2001 From: Tatiana Bocharova Date: Thu, 21 Nov 2024 22:17:04 +0300 Subject: [PATCH 2/7] album carousel --- src/pages/artist/ui/Artist.js | 9 +- src/pages/more-albums/ui/MoreAlbums.js | 2 +- src/pages/more-artists/ui/MoreArtists.js | 2 +- src/pages/search/ui/Search.js | 4 +- src/widgets/albumCarousel/api/api.js | 46 ++++++ src/widgets/albumCarousel/index.js | 2 + .../albumCarousel/ui/albumCarousel.hbs | 19 +++ src/widgets/albumCarousel/ui/albumCarousel.js | 151 ++++++++++++++++++ .../albumCarousel/ui/albumCarousel.scss | 109 +++++++++++++ src/widgets/albumList/api/api.js | 8 +- src/widgets/albumList/ui/albumList.hbs | 7 +- src/widgets/albumList/ui/albumList.js | 24 +-- src/widgets/albumList/ui/albumList.scss | 17 +- .../artistCarousel/ui/artistCarousel.hbs | 6 +- .../artistCarousel/ui/artistCarousel.js | 2 +- .../artistCarousel/ui/artistCarousel.scss | 7 + src/widgets/artistList/ui/artistList.hbs | 7 +- src/widgets/artistList/ui/artistList.js | 11 +- src/widgets/artistList/ui/artistList.scss | 17 +- src/widgets/trackList/ui/trackList.hbs | 4 +- src/widgets/trackList/ui/trackList.js | 2 +- 21 files changed, 379 insertions(+), 77 deletions(-) create mode 100644 src/widgets/albumCarousel/api/api.js create mode 100644 src/widgets/albumCarousel/index.js create mode 100644 src/widgets/albumCarousel/ui/albumCarousel.hbs create mode 100644 src/widgets/albumCarousel/ui/albumCarousel.js create mode 100644 src/widgets/albumCarousel/ui/albumCarousel.scss diff --git a/src/pages/artist/ui/Artist.js b/src/pages/artist/ui/Artist.js index 8b2e09e..b51ff66 100644 --- a/src/pages/artist/ui/Artist.js +++ b/src/pages/artist/ui/Artist.js @@ -1,8 +1,7 @@ import { TrackListAPI } from '../../../widgets/trackList/index.js'; -import { AlbumListAPI } from '../../../widgets/albumList/index.js'; import { ArtistCardView } from '../../../widgets/artistCard/index.js'; import { TrackListView } from '../../../widgets/trackList/index.js'; -import { AlbumListView } from '../../../widgets/albumList/index.js'; +import { AlbumCarouselView } from '../../../widgets/albumCarousel/index.js'; import { FooterPlayerView } from '../../../widgets/footerPlayer/index.js'; import { userStore } from '../../../entities/user/model/store.js'; import { player } from '../../../shared/player/model/store.js'; @@ -29,10 +28,8 @@ export class ArtistPage { player.setTracks(tracks); - const albumListAPI = new AlbumListAPI(this.artistId); - const albumListView = new AlbumListView(this.parent, this.artistId); - const albums = await albumListAPI.get(); - await albumListView.render(albums.slice(0, 5)); + const albumCarouselView = new AlbumCarouselView(this.parent, this.artistId); + await albumCarouselView.render(); const footPlayerView = new FooterPlayerView(this.parent); const user = userStore.storage.user; diff --git a/src/pages/more-albums/ui/MoreAlbums.js b/src/pages/more-albums/ui/MoreAlbums.js index 4726e3f..f0de908 100644 --- a/src/pages/more-albums/ui/MoreAlbums.js +++ b/src/pages/more-albums/ui/MoreAlbums.js @@ -21,6 +21,6 @@ export class MoreAlbumsPage { const albumListAPI = new AlbumListAPI(this.artistId); const albums = await albumListAPI.get(); const albumListView = new AlbumListView(this.parent, this.artistId); - await albumListView.render(albums, false); + await albumListView.render(albums); } } diff --git a/src/pages/more-artists/ui/MoreArtists.js b/src/pages/more-artists/ui/MoreArtists.js index 7ac4e81..70d1572 100644 --- a/src/pages/more-artists/ui/MoreArtists.js +++ b/src/pages/more-artists/ui/MoreArtists.js @@ -15,6 +15,6 @@ export class MoreArtistsPage { const artistListAPI = new ArtistListAPI(); const artists = await artistListAPI.get(); const artistListView = new ArtistListView(this.parent); - await artistListView.render(artists, false); + await artistListView.render(artists); } } diff --git a/src/pages/search/ui/Search.js b/src/pages/search/ui/Search.js index 34e3207..b44eb8c 100644 --- a/src/pages/search/ui/Search.js +++ b/src/pages/search/ui/Search.js @@ -44,7 +44,7 @@ export class SearchPage { } const artistListView = new ArtistListView(this.parent); - await artistListView.render(artists, false); + await artistListView.render(artists); } async handleFoundAlbums(albums) { @@ -58,7 +58,7 @@ export class SearchPage { } const albumListView = new AlbumListView(this.parent); - await albumListView.render(albums, false); + await albumListView.render(albums); } async handleFoundTracks(tracks) { diff --git a/src/widgets/albumCarousel/api/api.js b/src/widgets/albumCarousel/api/api.js new file mode 100644 index 0000000..90adfdd --- /dev/null +++ b/src/widgets/albumCarousel/api/api.js @@ -0,0 +1,46 @@ +import { API_URL } from '../../../shared/config/index.js'; +import { GET } from '../../../shared/api/index.js'; + +export class AlbumCarouselAPI { + /** + * Url path to backend api which returns albums/ + * + */ + url; + + /** + * Initializes the AlbumCarouselAPI. + * + */ + constructor(artistId = null) { + if (artistId) { + this.url = `${API_URL}/api/v1/albums/byArtistId/${artistId}`; + } else { + this.url = `${API_URL}/api/v1/albums`; + } + } + + async get() { + try { + const response = await GET(this.url); + if (!response.error) { + return response.data; + } else { + // this.displayMessage( + // messageBox, + // response.body.error || 'Не удалось загрузить музыкантов', + // 'error', + // ); + // console.error('Error during albums loading:', error); + console.log('Error during AlbumCarousel loading:'); + } + } catch (error) { + // this.displayMessage( + // messageBox, + // 'Возникла ошибка при загрузке плейлиста. Попробуйте позже.', + // 'error', + // ); + console.error(error); + } + } +} diff --git a/src/widgets/albumCarousel/index.js b/src/widgets/albumCarousel/index.js new file mode 100644 index 0000000..42886ef --- /dev/null +++ b/src/widgets/albumCarousel/index.js @@ -0,0 +1,2 @@ +export { AlbumCarouselView } from './ui/albumCarousel.js'; +export { AlbumCarouselAPI } from './api/api.js'; diff --git a/src/widgets/albumCarousel/ui/albumCarousel.hbs b/src/widgets/albumCarousel/ui/albumCarousel.hbs new file mode 100644 index 0000000..7888d88 --- /dev/null +++ b/src/widgets/albumCarousel/ui/albumCarousel.hbs @@ -0,0 +1,19 @@ +
+
+
+
+ Альбомы +
+ Показать еще +
+
+ +
+
+ +
+
+ +
+
+
diff --git a/src/widgets/albumCarousel/ui/albumCarousel.js b/src/widgets/albumCarousel/ui/albumCarousel.js new file mode 100644 index 0000000..e3c6cc7 --- /dev/null +++ b/src/widgets/albumCarousel/ui/albumCarousel.js @@ -0,0 +1,151 @@ +import { AlbumView } from '../../../entities/album/index.js'; +import { AlbumCarouselAPI } from '../api/api.js'; +import { eventBus } from '../../../shared/lib/eventbus.js'; +import template from './albumCarousel.hbs'; +import './albumCarousel.scss'; + +export class AlbumCarouselView { + /** + * The parent HTML element. + * @type {HTMLElement} + */ + parent; + + /** + * Initializes the AlbumView. + * + */ + constructor(parent, artistId = null) { + this.parent = parent ? parent : document.querySelector('#root'); + this.position = 0; + this.artistId = artistId; + } + + /** + * Renders the playlist view. + */ + async render() { + const albumCarouselAPI = new AlbumCarouselAPI(this.artistId); + let albums = await albumCarouselAPI.get(); + + const albumCarouselElement = document.createElement('div'); + albumCarouselElement.classList.add('albums'); + + let titleText; + let showMoreHref; + if (this.artistId) { + showMoreHref = `/more_albums/${"artist"}/${this.artistId}`; + titleText = "Альбомы исполнителя"; + } else { + showMoreHref = `/more_albums/popular`; + titleText = "Популярные альбомы"; + } + + albumCarouselElement.innerHTML = template({ showMoreHref }); + this.parent.appendChild(albumCarouselElement); + + const albumsBlock = document.getElementById('albums-carousel'); + Array.from(albums).forEach((album) => { + const albumCarouselElement = document.createElement('div'); + albumCarouselElement.classList.add('carousel__item'); + const albumView = new AlbumView(albumCarouselElement); + albumView.render(album); + albumsBlock.appendChild(albumCarouselElement); + }); + + await this.getElements(); + + this.onEvents(); + this.addEvents(); + this.setTitle(titleText); + } + + setTitle(titleText) { + const title = document.querySelector('.albums__recommend_text'); + title.textContent = titleText; + } + + onEvents() { + eventBus.on('carousel:next', this.handleGoNext); + eventBus.on('carousel:prev', this.handleGoPrev); + } + + offEvents() { + eventBus.off('carousel:next', this.handleGoNext); + eventBus.off('carousel:prev', this.handleGoPrev); + } + + addEvents() { + this.nextBtn.addEventListener('click', this.handleNextBtn); + this.prevBtn.addEventListener('click', this.handlePrevBtn); + + const links = this.parent.querySelectorAll('.link_more_albums'); + links.forEach((link) => { + link.addEventListener('click', (event) => this.handleLink(event)); + }); + } + + deleteEvents() { + this.nextBtn.removeEventListener('click', this.handleNextBtn); + this.prevBtn.removeEventListener('click', this.handlePrevBtn); + + const links = this.parent.querySelectorAll('.link_more_albums'); + links.forEach((link) => { + link.removeEventListener('click', (event) => this.handleLink(event)); + }); + } + + async getElements() { + this.carouselInner = document.querySelector('.carousel__inner'); + this.carouselItems = document.querySelectorAll('.carousel__item'); + this.carouselArea = document.querySelector('.carousel__area'); + this.nextBtn = document.querySelector('.carousel__button--next'); + this.prevBtn = document.querySelector('.carousel__button--prev'); + + this.itemWidth = this.carouselItems[0]?.offsetWidth ?? 0; + this.carouselAreaWidth = this.carouselArea.offsetWidth; + this.carouselInnerWidth = this.carouselInner.offsetWidth; + + this.maxPosition = -(this.carouselInnerWidth - this.carouselAreaWidth); + } + + handleLink(event) { + event.preventDefault(); + const href = event.target.getAttribute('href'); + eventBus.emit('navigate', href); + } + + handleGoNext = () => { + const remainingWidth = + this.carouselInnerWidth + this.position - this.carouselAreaWidth; + + if (remainingWidth > this.itemWidth) { + this.position -= this.itemWidth; + } else if (remainingWidth > 0) { + this.position -= remainingWidth; + } + + this.carouselInner.style.transform = `translateX(${this.position}px)`; + }; + + handleGoPrev = () => { + if (this.position < 0) { + this.position += + this.position + this.itemWidth > 0 ? -this.position : this.itemWidth; + this.carouselInner.style.transform = `translateX(${this.position}px)`; + } + }; + + handleNextBtn = () => { + eventBus.emit('carousel:next'); + }; + + handlePrevBtn = () => { + eventBus.emit('carousel:prev'); + }; + + destructor() { + this.deleteEvents(); + this.offEvents(); + } +} diff --git a/src/widgets/albumCarousel/ui/albumCarousel.scss b/src/widgets/albumCarousel/ui/albumCarousel.scss new file mode 100644 index 0000000..8637463 --- /dev/null +++ b/src/widgets/albumCarousel/ui/albumCarousel.scss @@ -0,0 +1,109 @@ +.albums { + &__container { + max-width: 1280px; + margin: 0 auto; + } + + &__block { + margin: 0 auto; + padding: 10px; + background-color: rgba(241.39, 241.39, 241.39, 0.1); + border-radius: 9px; + margin-top: 12px; + } + + &__upper_wrapper { + padding: 0 10px; + display: flex; + justify-content: space-between; + } + + &__recommend_text { + display: flex; + justify-content: space-between; + align-items: center; + color: #f1f1f1; + font-size: 24px; + font-weight: 400; + } + + &__show_more { + text-decoration: none; + color: #f1f1f1; + font-size: 24px; + + &:visited { + color: #f1f1f1; + } + + &:hover { + text-decoration: underline; + } + } + + &__list { + margin-top: 10px; + display: flex; + justify-content: space-around; + } +} + +.carousel { + &__container { + position: relative; + width: 100%; + padding: 10px 60px; + /* background-color: #eee; */ + /* border: 2px solid #ccc; */ + border-radius: 10px; + overflow: hidden; + box-sizing: border-box; + } + + &__area { + width: 100%; + overflow: hidden; + border-radius: 10px; + display: flex; + justify-content: start; + } + + &__inner { + display: flex; + /* gap: 10px; */ + transition: transform 0.5s ease; + text-align: left; + } + + &__item { + display: flex; + padding: 10px; + flex-direction: column; + align-items: center; + /* width: 210px; */ + height: fit-content; + flex-shrink: 0; + } + + &__button { + position: absolute; + top: 50%; + transform: translateY(-50%); + background-color: rgba(0, 0, 0, 0.5); + color: #fff; + border: none; + cursor: pointer; + border-radius: 50%; + width: 35px; + height: 35px; + font-size: 18px; + + &--prev { + left: 10px; + } + + &--next { + right: 10px; + } + } +} diff --git a/src/widgets/albumList/api/api.js b/src/widgets/albumList/api/api.js index dad11da..fac23bf 100644 --- a/src/widgets/albumList/api/api.js +++ b/src/widgets/albumList/api/api.js @@ -4,8 +4,12 @@ import { GET } from '../../../shared/api/index.js'; export class AlbumListAPI { url; - constructor() { - this.url = `${API_URL}/api/v1/albums`; + constructor(artistId = null) { + if (artistId) { + this.url = `${API_URL}/api/v1/albums/byArtistId/${artistId}`; + } else { + this.url = `${API_URL}/api/v1/albums`; + } } async get() { diff --git a/src/widgets/albumList/ui/albumList.hbs b/src/widgets/albumList/ui/albumList.hbs index 56ae464..ace8bd2 100644 --- a/src/widgets/albumList/ui/albumList.hbs +++ b/src/widgets/albumList/ui/albumList.hbs @@ -1,10 +1,7 @@
-
- Альбомы - {{#if showMoreHref}} - Показать еще - {{/if}} +
+ Альбомы
diff --git a/src/widgets/albumList/ui/albumList.js b/src/widgets/albumList/ui/albumList.js index 13abfc4..88cdca4 100644 --- a/src/widgets/albumList/ui/albumList.js +++ b/src/widgets/albumList/ui/albumList.js @@ -21,22 +21,19 @@ export class AlbumListView { /** * Renders the album view. */ - async render(albums, needsShowMoreHref = true) { + async render(albums) { const albumListElement = document.createElement('div'); albumListElement.classList.add('albums'); - if (needsShowMoreHref) { - let showMoreHref; - if (this.artistId) { - showMoreHref = `/more_albums/${"artist"}/${this.artistId}`; - } else { - showMoreHref = `/more_albums/popular`; - } - albumListElement.innerHTML = template({showMoreHref }); + let titleText; + if (this.artistId) { + titleText = "Альбомы исполнителя"; } else { - albumListElement.innerHTML = template({}); + titleText = "Популярные альбомы"; } + albumListElement.innerHTML = template({}); + this.parent.appendChild(albumListElement); const albumsBlock = document.getElementById('albums'); @@ -44,5 +41,12 @@ export class AlbumListView { const albumView = new AlbumView(albumsBlock); albumView.render(album); }); + + this.setTitle(titleText); + } + + setTitle(titleText) { + const title = document.querySelector('.albums__recommend_text'); + title.textContent = titleText; } } diff --git a/src/widgets/albumList/ui/albumList.scss b/src/widgets/albumList/ui/albumList.scss index f033581..a5b4c3b 100644 --- a/src/widgets/albumList/ui/albumList.scss +++ b/src/widgets/albumList/ui/albumList.scss @@ -12,7 +12,7 @@ margin-top: 12px; } - &__text { + &__recommend_text { display: flex; justify-content: space-between; align-items: center; @@ -21,23 +21,10 @@ font-weight: 400; } - &__show_more { - text-decoration: none; - color: #f1f1f1; - - &:visited { - color: #f1f1f1; - } - - &:hover { - text-decoration: underline; - } - } - &__list { margin-top: 10px; display: flex; - justify-content: flex-start; + justify-content: space-around; flex-wrap: wrap; gap: 15px; } diff --git a/src/widgets/artistCarousel/ui/artistCarousel.hbs b/src/widgets/artistCarousel/ui/artistCarousel.hbs index e5f010f..ff2d001 100644 --- a/src/widgets/artistCarousel/ui/artistCarousel.hbs +++ b/src/widgets/artistCarousel/ui/artistCarousel.hbs @@ -1,7 +1,9 @@
-
- Популярные артисты +
+
+ Популярные артисты +
Показать еще
diff --git a/src/widgets/artistCarousel/ui/artistCarousel.js b/src/widgets/artistCarousel/ui/artistCarousel.js index 5687e44..f506a45 100644 --- a/src/widgets/artistCarousel/ui/artistCarousel.js +++ b/src/widgets/artistCarousel/ui/artistCarousel.js @@ -72,7 +72,7 @@ export class ArtistCarouselView { this.nextBtn.removeEventListener('click', this.handleNextBtn); this.prevBtn.removeEventListener('click', this.handlePrevBtn); - const links = this.parent.querySelectorAll('.link'); + const links = this.parent.querySelectorAll('.link_more_artists'); links.forEach((link) => { link.removeEventListener('click', (event) => this.handleLink(event)); }); diff --git a/src/widgets/artistCarousel/ui/artistCarousel.scss b/src/widgets/artistCarousel/ui/artistCarousel.scss index 1e06983..76531f1 100644 --- a/src/widgets/artistCarousel/ui/artistCarousel.scss +++ b/src/widgets/artistCarousel/ui/artistCarousel.scss @@ -12,6 +12,12 @@ margin-top: 12px; } + &__upper_wrapper { + padding: 0 10px; + display: flex; + justify-content: space-between; + } + &__text { display: flex; justify-content: space-between; @@ -24,6 +30,7 @@ &__show_more { text-decoration: none; color: #f1f1f1; + font-size: 24px; &:visited { color: #f1f1f1; diff --git a/src/widgets/artistList/ui/artistList.hbs b/src/widgets/artistList/ui/artistList.hbs index f659533..b81c682 100644 --- a/src/widgets/artistList/ui/artistList.hbs +++ b/src/widgets/artistList/ui/artistList.hbs @@ -1,10 +1,7 @@
-
- Артисты - {{#if showMoreHref}} - Показать еще - {{/if}} +
+ Популярные артисты
diff --git a/src/widgets/artistList/ui/artistList.js b/src/widgets/artistList/ui/artistList.js index 62b4b02..51cb69d 100644 --- a/src/widgets/artistList/ui/artistList.js +++ b/src/widgets/artistList/ui/artistList.js @@ -20,16 +20,11 @@ export class ArtistListView { /** * Renders the playlist view. */ - async render(artists, needsShowMoreHref = true) { + async render(artists) { const artistListElement = document.createElement('div'); artistListElement.classList.add('artists'); - - if (needsShowMoreHref) { - let showMoreHref = `/more_artists/popular`; - artistListElement.innerHTML = template({ showMoreHref }); - } else { - artistListElement.innerHTML = template({}); - } + + artistListElement.innerHTML = template({}); this.parent.appendChild(artistListElement); diff --git a/src/widgets/artistList/ui/artistList.scss b/src/widgets/artistList/ui/artistList.scss index 8d5cbf9..38463cb 100644 --- a/src/widgets/artistList/ui/artistList.scss +++ b/src/widgets/artistList/ui/artistList.scss @@ -12,7 +12,7 @@ margin-top: 12px; } - &__text { + &__recommend_text { display: flex; justify-content: space-between; align-items: center; @@ -21,23 +21,10 @@ font-weight: 400; } - &__show_more { - text-decoration: none; - color: #f1f1f1; - - &:visited { - color: #f1f1f1; - } - - &:hover { - text-decoration: underline; - } - } - &__list { margin-top: 10px; display: flex; - justify-content: flex-start; + justify-content: space-around; flex-wrap: wrap; gap: 15px; } diff --git a/src/widgets/trackList/ui/trackList.hbs b/src/widgets/trackList/ui/trackList.hbs index f578ced..77297b1 100644 --- a/src/widgets/trackList/ui/trackList.hbs +++ b/src/widgets/trackList/ui/trackList.hbs @@ -5,9 +5,7 @@ Треки
{{#if showMoreHref}} -
- Показать еще -
+ Показать еще {{/if}}
diff --git a/src/widgets/trackList/ui/trackList.js b/src/widgets/trackList/ui/trackList.js index 8e40195..aa0b68d 100644 --- a/src/widgets/trackList/ui/trackList.js +++ b/src/widgets/trackList/ui/trackList.js @@ -87,7 +87,7 @@ export class TrackListView { } deleteEvents() { - const links = this.parent.querySelectorAll('.link'); + const links = this.parent.querySelectorAll('.link_more_tracks'); links.forEach((link) => { link.removeEventListener('click', (event) => this.handleLink(event)); }); From 47311eda1d4a1ba860e28325d757e8e5db1ea9ef Mon Sep 17 00:00:00 2001 From: Tatiana Bocharova Date: Sat, 23 Nov 2024 00:48:29 +0300 Subject: [PATCH 3/7] add modal confirm, fixes errors upload avatar --- src/entities/track/ui/track.hbs | 8 +- src/entities/track/ui/track.js | 17 ++++ src/entities/track/ui/track.scss | 13 ++++ src/pages/sign-in/ui/SignIn.js | 10 ++- src/pages/sign-in/ui/SignIn.scss | 45 ++++++++--- src/pages/sign-up/ui/SignUp.js | 6 ++ src/pages/sign-up/ui/SignUp.scss | 37 +++++++-- src/widgets/albumCard/ui/albumCard.js | 17 ++-- src/widgets/artistCard/ui/artistCard.js | 2 +- src/widgets/header/ui/Header.js | 16 +++- src/widgets/listenBlock/ui/listenBlock.js | 2 +- src/widgets/modalConfirm/index.js | 1 + src/widgets/modalConfirm/ui/modalConfirm.hbs | 11 +++ src/widgets/modalConfirm/ui/modalConfirm.js | 47 +++++++++++ src/widgets/modalConfirm/ui/modalConfirm.scss | 77 +++++++++++++++++++ src/widgets/trackList/ui/trackList.js | 4 +- src/widgets/uploadAvatar/ui/uploadAvatar.hbs | 4 +- src/widgets/uploadAvatar/ui/uploadAvatar.scss | 31 +++++++- 18 files changed, 311 insertions(+), 37 deletions(-) create mode 100644 src/widgets/modalConfirm/index.js create mode 100644 src/widgets/modalConfirm/ui/modalConfirm.hbs create mode 100644 src/widgets/modalConfirm/ui/modalConfirm.js create mode 100644 src/widgets/modalConfirm/ui/modalConfirm.scss diff --git a/src/entities/track/ui/track.hbs b/src/entities/track/ui/track.hbs index f235888..76f0cae 100644 --- a/src/entities/track/ui/track.hbs +++ b/src/entities/track/ui/track.hbs @@ -2,10 +2,16 @@
{{ name }}
-
{{ artist }}
+
+ + {{ artistName }} + +
{{ duration }}
+ diff --git a/src/entities/track/ui/track.js b/src/entities/track/ui/track.js index 259d16b..f720fa3 100644 --- a/src/entities/track/ui/track.js +++ b/src/entities/track/ui/track.js @@ -37,16 +37,33 @@ export class TrackView { addEvents() { this.trackElement.addEventListener('click', this.bindTrack); + + const links = this.trackElement.querySelectorAll('.link'); + links.forEach(link => { + link.addEventListener('click', (event) => this.handleLink(event)); + }); } deleteEvents() { this.trackElement.removeEventListener('click', this.bindTrack); + + const links = this.trackElement.querySelectorAll('.link'); + links.forEach((link) => { + link.removeEventListener('click', (event) => this.handleLink(event)); + }); } bindTrack = () => { eventBus.emit('playById', this.trackIndex); }; + handleLink(event) { + event.preventDefault(); + event.stopPropagation(); + const href = event.target.getAttribute('href') + eventBus.emit('navigate', href); + } + destructor() { this.deleteEvents(); } diff --git a/src/entities/track/ui/track.scss b/src/entities/track/ui/track.scss index 78be2f9..66e0c3a 100644 --- a/src/entities/track/ui/track.scss +++ b/src/entities/track/ui/track.scss @@ -42,6 +42,19 @@ color: #636363; font-size: 20px; font-weight: 400; + + &__artist_link { + text-decoration: none; + color: #636363; + + &:visited { + color: #636363; + } + + &:hover { + text-decoration: underline; + } + } } &:hover { diff --git a/src/pages/sign-in/ui/SignIn.js b/src/pages/sign-in/ui/SignIn.js index 88776c7..6566580 100644 --- a/src/pages/sign-in/ui/SignIn.js +++ b/src/pages/sign-in/ui/SignIn.js @@ -48,6 +48,7 @@ export class SignInPage { const password = document.querySelector('#password').value; let validationErrors = this.inputValidation(username, password); + console.log(validationErrors); if (Object.keys(validationErrors).length > 0) { this.handleSignInError(validationErrors); @@ -76,13 +77,17 @@ export class SignInPage { document.querySelector('#login__username-error').textContent = ''; document.querySelector('#login__password-error').textContent = ''; document.querySelector('#login__general-error').textContent = ''; + document.querySelector('#username').classList.remove('login__input_error'); + document.querySelector('#password').classList.remove('login__input_error'); if (error.username) { + document.querySelector('#username').classList.add('login__input_error'); document.querySelector('#login__username-error').textContent = error.username; } if (error.password) { + document.querySelector('#password').classList.add('login__input_error'); document.querySelector('#login__password-error').textContent = error.password; } @@ -93,7 +98,7 @@ export class SignInPage { } inputValidation(username, password) { - let errors = {}; + let validationErrors = {}; const usernameError = validate(username, VALIDATION_RULES.username); if (usernameError) { @@ -105,7 +110,8 @@ export class SignInPage { validationErrors.password = passwordError; } - return errors; + console.log(validationErrors); + return validationErrors; } destructor() { diff --git a/src/pages/sign-in/ui/SignIn.scss b/src/pages/sign-in/ui/SignIn.scss index 230e3be..3670f0c 100644 --- a/src/pages/sign-in/ui/SignIn.scss +++ b/src/pages/sign-in/ui/SignIn.scss @@ -59,18 +59,26 @@ &:first-child { margin-top: 0px; } + + &_error { + border: 3px solid #D64751; + } } &__input-error { - color: red; - font-size: 12px; + width: 430px; + color: #F46F77; + font-size: 16px; + font-weight: 400; margin-top: 5px; } &__general-error { - color: red; - font-size: 16px; - margin-top: 10px; + width: 430px; + color: #F46F77; + font-size: 20px; + font-weight: 400; + margin-top: 15px; text-align: center; } @@ -114,20 +122,22 @@ } @media (pointer: coarse) { - &__register_site { + &__enter_account { text-decoration: underline; } - } + } @media (max-width: 768px) { - &__input { + &__input, + &__input-error, + &__general-error { width: calc(60vw - 20px); } &__submit_btn { width: 60vw; } - + &__additional { margin-top: 25px; flex-direction: column; @@ -156,13 +166,26 @@ font-size: 14px; } + &__input, + &__input-error, + &__general-error { + width: calc(80vw - 20px); + } + &__input { - width: calc(100% - 20px); font-size: 16px; } + + &__input-error { + font-size: 14px; + } + + &__general-error { + font-size: 15px; + } &__submit_btn { - width: 100%; + width: 80vw; font-size: 18px; } } diff --git a/src/pages/sign-up/ui/SignUp.js b/src/pages/sign-up/ui/SignUp.js index 18c99ae..c07aa86 100644 --- a/src/pages/sign-up/ui/SignUp.js +++ b/src/pages/sign-up/ui/SignUp.js @@ -93,18 +93,24 @@ export class SignUpPage { document.querySelector('#register__email-error').textContent = ''; document.querySelector('#register__password-error').textContent = ''; document.querySelector('#register__general-error').textContent = ''; + document.querySelector('#username').classList.remove('register__input_error'); + document.querySelector('#email').classList.remove('register__input_error'); + document.querySelector('#password').classList.remove('register__input_error'); if (error.username) { + document.querySelector('#username').classList.add('register__input_error'); document.querySelector('#register__username-error').textContent = error.username; } if (error.email) { + document.querySelector('#email').classList.add('register__input_error'); document.querySelector('#register__email-error').textContent = error.email; } if (error.password) { + document.querySelector('#password').classList.add('register__input_error'); document.querySelector('#register__password-error').textContent = error.password; } diff --git a/src/pages/sign-up/ui/SignUp.scss b/src/pages/sign-up/ui/SignUp.scss index 9024e33..5026723 100644 --- a/src/pages/sign-up/ui/SignUp.scss +++ b/src/pages/sign-up/ui/SignUp.scss @@ -59,17 +59,25 @@ &:first-child { margin-top: 0px; } + + &_error { + border: 3px solid #D64751; + } } &__input-error { - color: red; - font-size: 12px; + width: 430px; + color: #F46F77; + font-size: 16px; + font-weight: 400; margin-top: 5px; } &__general-error { - color: red; - font-size: 16px; + width: 430px; + color: #F46F77; + font-size: 20px; + font-weight: 400; margin-top: 15px; text-align: center; } @@ -120,7 +128,9 @@ } @media (max-width: 768px) { - &__input { + &__input, + &__input-error, + &__general-error { width: calc(60vw - 20px); } @@ -156,13 +166,26 @@ font-size: 14px; } + &__input, + &__input-error, + &__general-error { + width: calc(80vw - 20px); + } + &__input { - width: calc(100% - 20px); font-size: 16px; } + + &__input-error { + font-size: 14px; + } + + &__general-error { + font-size: 15px; + } &__submit_btn { - width: 100%; + width: 80vw; font-size: 18px; } } diff --git a/src/widgets/albumCard/ui/albumCard.js b/src/widgets/albumCard/ui/albumCard.js index 080abff..d2a3ed9 100644 --- a/src/widgets/albumCard/ui/albumCard.js +++ b/src/widgets/albumCard/ui/albumCard.js @@ -32,10 +32,10 @@ export class AlbumCardView { album.image = `${S3_BUCKETS.ALBUM_IMAGES}/${album.image}`; } - const albumCardElement = document.createElement("div"); - albumCardElement.classList.add("album_card"); - albumCardElement.innerHTML = template({ album }); - this.parent.appendChild(albumCardElement); + this.albumCardElement = document.createElement("div"); + this.albumCardElement.classList.add("album_card"); + this.albumCardElement.innerHTML = template({ album }); + this.parent.appendChild(this.albumCardElement); this.playPauseBtn = document.querySelector('.buttons__listen'); this.addEvents(); @@ -44,14 +44,19 @@ export class AlbumCardView { addEvents() { this.playPauseBtn.addEventListener('click', this.handlePlayPauseBtn); - const links = this.parent.querySelectorAll('.link'); + const links = this.albumCardElement.querySelectorAll('.link'); links.forEach(link => { link.addEventListener('click', (event) => this.handleLink(event)); }); } deleteEvents() { - this.playPauseBtn.addEventListener('click', this.handlePlayPauseBtn); + this.playPauseBtn.removeEventListener('click', this.handlePlayPauseBtn); + + const links = this.parent.querySelectorAll('.link'); + links.forEach((link) => { + link.removeEventListener('click', (event) => this.handleLink(event)); + }); } handlePlayPauseBtn() { diff --git a/src/widgets/artistCard/ui/artistCard.js b/src/widgets/artistCard/ui/artistCard.js index c417100..bbcac89 100644 --- a/src/widgets/artistCard/ui/artistCard.js +++ b/src/widgets/artistCard/ui/artistCard.js @@ -45,7 +45,7 @@ export class ArtistCardView { } deleteEvents() { - this.playPauseBtn.addEventListener('click', this.handlePlayPauseBtn); + this.playPauseBtn.removeEventListener('click', this.handlePlayPauseBtn); } handlePlayPauseBtn() { diff --git a/src/widgets/header/ui/Header.js b/src/widgets/header/ui/Header.js index fd12f7d..df66e07 100644 --- a/src/widgets/header/ui/Header.js +++ b/src/widgets/header/ui/Header.js @@ -2,6 +2,7 @@ import { eventBus } from '../../../shared/lib/index.js'; import { userStore } from '../../../entities/user/model/store.js'; import { player } from '../../../shared/player/model/store.js'; import { handleLink, S3_BUCKETS } from '../../../shared/lib/index.js'; +import { ModalConfirmView } from '../../../widgets/modalConfirm/index.js'; import template from './Header.hbs'; import './Header.scss'; @@ -10,6 +11,8 @@ export class Header { constructor() { this.parent = document.querySelector('#header'); + // this.eventBus = eventBus; + // this.userStore = userStore; } render() { @@ -33,7 +36,7 @@ export class Header { if (logoutLink) { logoutLink.addEventListener('click', (event) => - this.handleSignOut(event), + this.handleSignOutBtn(event), ); } links.forEach((link) => { @@ -43,8 +46,17 @@ export class Header { eventBus.on('navigate', this.handleNavigation.bind(this)); } - async handleSignOut(event) { + handleSignOutBtn(event) { event.preventDefault(); + const modalConfirmView = new ModalConfirmView( + null, + 'Вы уверены, что хотите выйти?', + this.handleSignOut + ); + modalConfirmView.render(); + } + + async handleSignOut() { try { await userStore.signOut(); player.clearTracks(); diff --git a/src/widgets/listenBlock/ui/listenBlock.js b/src/widgets/listenBlock/ui/listenBlock.js index 5673761..7d04ec6 100644 --- a/src/widgets/listenBlock/ui/listenBlock.js +++ b/src/widgets/listenBlock/ui/listenBlock.js @@ -35,7 +35,7 @@ export class ListenBlockView { } deleteEvents() { - this.playPauseBtn.addEventListener('click', this.handlePlayPauseBtn); + this.playPauseBtn.removeEventListener('click', this.handlePlayPauseBtn); } handlePlayPauseBtn() { diff --git a/src/widgets/modalConfirm/index.js b/src/widgets/modalConfirm/index.js new file mode 100644 index 0000000..de4f521 --- /dev/null +++ b/src/widgets/modalConfirm/index.js @@ -0,0 +1 @@ +export { ModalConfirmView } from './ui/modalConfirm.js'; \ No newline at end of file diff --git a/src/widgets/modalConfirm/ui/modalConfirm.hbs b/src/widgets/modalConfirm/ui/modalConfirm.hbs new file mode 100644 index 0000000..8ffe148 --- /dev/null +++ b/src/widgets/modalConfirm/ui/modalConfirm.hbs @@ -0,0 +1,11 @@ +
+
+
+ {{ text }} +
+
+ + +
+
+
\ No newline at end of file diff --git a/src/widgets/modalConfirm/ui/modalConfirm.js b/src/widgets/modalConfirm/ui/modalConfirm.js new file mode 100644 index 0000000..433e66e --- /dev/null +++ b/src/widgets/modalConfirm/ui/modalConfirm.js @@ -0,0 +1,47 @@ +import template from './modalConfirm.hbs'; +import './modalConfirm.scss'; + +export class ModalConfirmView {; + constructor(parent, text, onConfirm, onCancel) { + this.parent = parent ? parent : document.querySelector("#root"); + this.text = text; + this.onConfirm = onConfirm; + this.onCancel = onCancel; + } + + render() { + this.modalConfirmElement = document.createElement("div"); + this.modalConfirmElement.classList.add("modal_confirm"); + this.modalConfirmElement.innerHTML = template({ text: this.text }); + this.parent.appendChild(this.modalConfirmElement); + + this.addEvents(); + } + + addEvents() { + this.confirmBtn = this.modalConfirmElement.querySelector('.modal_confirm__btn_yes'); + this.confirmBtn.addEventListener('click', this.handleConfirm.bind(this)); + + this.cancelBtn = this.modalConfirmElement.querySelector('.modal_confirm__btn_no'); + this.cancelBtn.addEventListener('click', this.handleCancel.bind(this)); + } + + handleConfirm() { + if (this.onConfirm) { + this.onConfirm(); + } + this.modalConfirmElement.remove(); + } + + handleCancel() { + if (this.onCancel) { + this.onCancel(); + } + this.modalConfirmElement.remove(); + } + + deleteEvents() { + this.confirmBtn.removeEventListener('click', this.handleConfirm.bind(this)); + this.cancelBtn.removeEventListener('click', this.handleCancel.bind(this)); + } +} diff --git a/src/widgets/modalConfirm/ui/modalConfirm.scss b/src/widgets/modalConfirm/ui/modalConfirm.scss new file mode 100644 index 0000000..dc55954 --- /dev/null +++ b/src/widgets/modalConfirm/ui/modalConfirm.scss @@ -0,0 +1,77 @@ +.modal_confirm { + &__fade { + content: ""; + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + background-color: rgba(0, 0, 0, 0.5); + z-index: 9999; + } + + &__container { + position: fixed; + top: 50%; + left: 50%; + padding: 20px; + border: 1px solid #ccc; + border-radius: 10px; + transform: translate(-50%, -50%); + background-color: #1f1f1f; + } + + &__text { + color: #f1f1f1; + font-size: 24px; + font-weight: 400; + text-align: center; + } + + &__btn_container { + margin-top: 15px; + display: flex; + justify-content: center; + gap: 15px; + } + + &__btn_yes { + margin-top: 10px; + padding: 10px; + background: rgba(241, 241, 241, 0.25);; + border-radius: 9px; + border: none; + color: #f1f1f1; + font-size: 24px; + font-weight: 400; + text-align: center; + } + + &__btn_no { + margin-top: 10px; + padding: 10px; + background: #FF5F0F; + border-radius: 9px; + border: none; + color: #f1f1f1; + font-size: 24px; + font-weight: 400; + text-align: center; + } + + @media (max-width: 768px) { + &__text, + &__btn_yes, + &__btn_no { + font-size: 19px; + } + } + + @media (max-width: 480px) { + &__text, + &__btn_yes, + &__btn_no { + font-size: 16px; + } + } +} \ No newline at end of file diff --git a/src/widgets/trackList/ui/trackList.js b/src/widgets/trackList/ui/trackList.js index aa0b68d..c017e02 100644 --- a/src/widgets/trackList/ui/trackList.js +++ b/src/widgets/trackList/ui/trackList.js @@ -29,11 +29,11 @@ export class TrackListView { * Renders the tracklist view. */ async render(tracks, needsShowMoreHref = true) { - tracks = tracks.map(({ name, artist, image, duration }) => { + tracks = tracks.map(({ name, artistName, artistID, image, duration }) => { const minutes = Math.floor(duration / 60); const seconds = duration % 60; duration = `${String(minutes).padStart(2, '0')}:${String(seconds).padStart(2, '0')}`; - return { name, artist, image, duration }; + return { name, artistName, artistID, image, duration }; }); const trackListElement = document.createElement('div'); diff --git a/src/widgets/uploadAvatar/ui/uploadAvatar.hbs b/src/widgets/uploadAvatar/ui/uploadAvatar.hbs index a41bb55..5b9afa4 100644 --- a/src/widgets/uploadAvatar/ui/uploadAvatar.hbs +++ b/src/widgets/uploadAvatar/ui/uploadAvatar.hbs @@ -3,7 +3,9 @@
Загрузка аватарки
- + Date: Sat, 23 Nov 2024 20:35:49 +0300 Subject: [PATCH 4/7] solve conflicts NM-64 --- src/entities/artist/ui/artist.scss | 71 ++++-- src/entities/track/ui/track.hbs | 2 +- src/entities/track/ui/track.scss | 149 +++++++++--- .../artistCarousel/ui/artistCarousel.scss | 221 ++++++++++++------ src/widgets/artistList/ui/artistList.scss | 59 ++++- src/widgets/listenBlock/ui/listenBlock.scss | 42 ++++ src/widgets/trackList/ui/trackList.scss | 31 +++ 7 files changed, 433 insertions(+), 142 deletions(-) diff --git a/src/entities/artist/ui/artist.scss b/src/entities/artist/ui/artist.scss index 5d3d99d..ca8b5e3 100644 --- a/src/entities/artist/ui/artist.scss +++ b/src/entities/artist/ui/artist.scss @@ -1,22 +1,57 @@ .artist { - &__img { - width: 210px; - height: 210px; - border-radius: 6px; - transition-duration: 0.5s; - transition-timing-function: ease; + &__img { + width: 210px; + height: 210px; + border-radius: 6px; + transition-duration: 0.5s; + transition-timing-function: ease; - &:hover { - transform: scale(1.1); - } - } + &:hover { + transform: scale(1.1); + } + } - &__name { - margin-top: 5px; - display: flex; - justify-content: center; - color: #f1f1f1; - font-size: 16px; - font-weight: 400; - } + &__name { + margin-top: 5px; + display: flex; + justify-content: center; + color: #f1f1f1; + font-size: 20px; + font-weight: 400; + } +} + +@media (max-width: 920px) { + .artist { + &__img { + width: 190px; + height: 190px; + } + } +} + +@media (max-width: 768px) { + .artist { + &__img { + width: 160px; + height: 160px; + } + + &__name { + font-size: 16px; + } + } +} + +@media (max-width: 480px) { + .artist { + &__img { + width: 110px; + height: 110px; + } + + &__name { + font-size: 14px; + } + } } diff --git a/src/entities/track/ui/track.hbs b/src/entities/track/ui/track.hbs index 76f0cae..acc4b7a 100644 --- a/src/entities/track/ui/track.hbs +++ b/src/entities/track/ui/track.hbs @@ -12,6 +12,6 @@
{{ duration }} - +
diff --git a/src/entities/track/ui/track.scss b/src/entities/track/ui/track.scss index 66e0c3a..a4b2a80 100644 --- a/src/entities/track/ui/track.scss +++ b/src/entities/track/ui/track.scss @@ -1,41 +1,41 @@ .track { - display: flex; - justify-content: space-between; - padding: 10px; - margin: 5px 0; - border: 1px solid #ccc; - border-radius: 10px; - background-color: #f9f9f9; - transition-duration: 0.5s; - transition-timing-function: ease; - - &__left_side { - display: flex; - align-items: center; - } + display: flex; + justify-content: space-between; + padding: 10px; + margin: 5px 0; + border: 1px solid #ccc; + border-radius: 10px; + background-color: #f9f9f9; + transition-duration: 0.5s; + transition-timing-function: ease; - &__right_side { - display: flex; - flex-direction: row; - gap: 10px; - justify-content: center; - align-items: center; - } + &__left_side { + display: flex; + align-items: center; + } - &__img { - width: 90px; - height: 90px; - } + &__right_side { + display: flex; + flex-direction: row; + gap: 10px; + font-size: 21px; + justify-content: center; + align-items: center; + } - &__info { - margin-left: 20px; - } + &__img { + width: 90px; + height: 90px; + } - &__name { - color: #1f1f1f; - font-size: 22px; - font-weight: 400; - } + &__duration_icon { + width: 25px; + height: 25px; + } + + &__info { + margin-left: 20px; + } &__artist { margin-top: 5px; @@ -56,8 +56,85 @@ } } } + + &__name { + color: #1f1f1f; + font-size: 22px; + font-weight: 400; + } - &:hover { - transform: translateX(-20px); - } + &__artist { + margin-top: 5px; + color: #636363; + font-size: 20px; + font-weight: 400; + } + + &:hover { + transform: translateX(-20px); + } +} + +@media (max-width: 768px) { + .track { + padding: 8px; + + &__img { + width: 75px; + height: 75px; + } + + &__duration_icon { + width: 22px; + height: 22px; + } + + &__name { + font-size: 20px; + } + + &__artist { + font-size: 18px; + } + + &__right_side { + font-size: 18px; + } + + &:hover { + transform: translateX(-16px); + } + } +} + +@media (max-width: 480px) { + .track { + padding: 5px; + + &__img { + width: 50px; + height: 50px; + } + + &__duration_icon { + width: 19px; + height: 19px; + } + + &__name { + font-size: 16px; + } + + &__artist { + font-size: 14px; + } + + &__right_side { + font-size: 14px; + } + + &:hover { + transform: translateX(-12px); + } + } } diff --git a/src/widgets/artistCarousel/ui/artistCarousel.scss b/src/widgets/artistCarousel/ui/artistCarousel.scss index 76531f1..ef19d85 100644 --- a/src/widgets/artistCarousel/ui/artistCarousel.scss +++ b/src/widgets/artistCarousel/ui/artistCarousel.scss @@ -1,16 +1,16 @@ .popular_artists { - &__container { - max-width: 1280px; - margin: 0 auto; - } + &__container { + max-width: 1280px; + margin: 0 auto; + } - &__block { - margin: 0 auto; - padding: 10px; - background-color: rgba(241.39, 241.39, 241.39, 0.1); - border-radius: 9px; - margin-top: 12px; - } + &__block { + margin: 0 auto; + padding: 10px; + background-color: rgba(241.39, 241.39, 241.39, 0.1); + border-radius: 9px; + margin-top: 12px; + } &__upper_wrapper { padding: 0 10px; @@ -32,78 +32,147 @@ color: #f1f1f1; font-size: 24px; - &:visited { - color: #f1f1f1; - } + &:visited { + color: #f1f1f1; + } - &:hover { - text-decoration: underline; - } - } + &:hover { + text-decoration: underline; + } + } - &__list { - margin-top: 10px; - display: flex; - justify-content: space-around; - } + &__list { + margin-top: 10px; + display: flex; + justify-content: space-around; + } } .carousel { - &__container { - position: relative; - width: 100%; - padding: 10px 60px; - /* background-color: #eee; */ - /* border: 2px solid #ccc; */ - border-radius: 10px; - overflow: hidden; - box-sizing: border-box; - } + &__container { + position: relative; + width: 100%; + padding: 0 60px; + margin: 5px 0; + /* background-color: #eee; */ + /* border: 2px solid #ccc; */ + border-radius: 10px; + overflow: hidden; + box-sizing: border-box; + } - &__area { - width: 100%; - overflow: hidden; - border-radius: 10px; - display: flex; - justify-content: start; - } + &__area { + width: 100%; + overflow: hidden; + border-radius: 10px; + display: flex; + justify-content: start; + } - &__inner { - display: flex; - /* gap: 10px; */ - transition: transform 0.5s ease; - text-align: left; - } + &__inner { + display: flex; + /* gap: 10px; */ + transition: transform 0.5s ease; + text-align: left; + } - &__item { - display: flex; - padding: 10px; - flex-direction: column; - align-items: center; - /* width: 210px; */ - height: fit-content; - flex-shrink: 0; - } + &__item { + display: flex; + padding: 0 10px; + flex-direction: column; + align-items: center; + /* width: 210px; */ + height: fit-content; + flex-shrink: 0; + } - &__button { - position: absolute; - top: 50%; - transform: translateY(-50%); - background-color: rgba(0, 0, 0, 0.5); - color: #fff; - border: none; - cursor: pointer; - border-radius: 50%; - width: 35px; - height: 35px; - font-size: 18px; - - &--prev { - left: 10px; - } - - &--next { - right: 10px; - } - } + &__button { + position: absolute; + top: 43%; + transform: translateY(-50%); + background-color: rgba(0, 0, 0, 0.5); + color: #fff; + border: none; + cursor: pointer; + border-radius: 50%; + width: 35px; + height: 35px; + font-size: 18px; + + &--prev { + left: 10px; + } + + &--next { + right: 10px; + } + } +} + +@media (max-width: 1380px) { + .popular_artists { + &__block { + width: 90%; + } + } +} + +@media (max-width: 768px) { + .popular_artists { + &__text { + font-size: 19px; + } + } + + .carousel { + &__container { + padding: 0 45px 0 35px; + } + + &__button { + width: 28px; + height: 28px; + font-size: 16px; + + &--prev { + left: 5px; + } + + &--next { + right: 5px; + } + } + } +} + +@media (max-width: 480px) { + .popular_artists { + &__text { + font-size: 16px; + } + } + + .carousel { + &__container { + padding: 0 27px 0 22px; + } + + &__item { + padding: 4px; + } + + &__button { + width: 22px; + height: 22px; + font-size: 12px; + + &--prev { + left: 0px; + } + + &--next { + right: 0px; + } + } + } } diff --git a/src/widgets/artistList/ui/artistList.scss b/src/widgets/artistList/ui/artistList.scss index 38463cb..37c692d 100644 --- a/src/widgets/artistList/ui/artistList.scss +++ b/src/widgets/artistList/ui/artistList.scss @@ -1,16 +1,16 @@ .artists { - &__container { - max-width: 1280px; - margin: 0 auto; - } + &__container { + max-width: 1280px; + margin: 0 auto; + } - &__block { - margin: 0 auto; - padding: 10px; - background-color: rgba(241.39, 241.39, 241.39, 0.1); - border-radius: 9px; - margin-top: 12px; - } + &__block { + margin: 0 auto; + padding: 10px; + background-color: rgba(241.39, 241.39, 241.39, 0.1); + border-radius: 9px; + margin-top: 12px; + } &__recommend_text { display: flex; @@ -28,4 +28,41 @@ flex-wrap: wrap; gap: 15px; } + + &__show_more { + text-decoration: none; + color: #f1f1f1; + + &:visited { + color: #f1f1f1; + } + + &:hover { + text-decoration: underline; + } + } +} + +@media (max-width: 1380px) { + .artists { + &__block { + width: 90%; + } + } +} + +@media (max-width: 768px) { + .artists { + &__text { + font-size: 19px; + } + } +} + +@media (max-width: 480px) { + .artists { + &__text { + font-size: 16px; + } + } } diff --git a/src/widgets/listenBlock/ui/listenBlock.scss b/src/widgets/listenBlock/ui/listenBlock.scss index 52cdbb5..130efb2 100644 --- a/src/widgets/listenBlock/ui/listenBlock.scss +++ b/src/widgets/listenBlock/ui/listenBlock.scss @@ -40,3 +40,45 @@ text-align: center; } } + +@media (max-width: 1380px) { + .listen { + &__block { + width: 90%; + } + } +} + +@media (max-width: 768px) { + .listen { + &__btn_img { + width: 175px; + height: 175px; + } + + &__title { + font-size: 31px; + } + + &__info { + font-size: 21px; + } + } +} + +@media (max-width: 480px) { + .listen { + &__btn_img { + width: 130px; + height: 130px; + } + + &__title { + font-size: 26px; + } + + &__info { + font-size: 18px; + } + } +} diff --git a/src/widgets/trackList/ui/trackList.scss b/src/widgets/trackList/ui/trackList.scss index 292aa75..5a436ca 100644 --- a/src/widgets/trackList/ui/trackList.scss +++ b/src/widgets/trackList/ui/trackList.scss @@ -41,3 +41,34 @@ margin-top: 12px; } } + +@media (max-width: 1380px) { + .tracks { + &__block { + width: 90%; + } + } +} + +@media (max-width: 768px) { + .tracks { + &__block { + width: 90%; + } + + &__recommend_text, + &__show_more { + font-size: 19px; + } + } +} + +@media (max-width: 480px) { + .tracks { + + &__recommend_text, + &__show_more { + font-size: 16px; + } + } +} From 5f4627ac124d90153a76579d9dd94acb1ff52687 Mon Sep 17 00:00:00 2001 From: Tatiana Bocharova Date: Sat, 23 Nov 2024 20:43:27 +0300 Subject: [PATCH 5/7] solve conflicts --- src/entities/track/ui/track.scss | 19 ++++++++++--------- src/widgets/trackList/ui/trackList.scss | 4 ---- 2 files changed, 10 insertions(+), 13 deletions(-) diff --git a/src/entities/track/ui/track.scss b/src/entities/track/ui/track.scss index 73ccce2..5189d7b 100644 --- a/src/entities/track/ui/track.scss +++ b/src/entities/track/ui/track.scss @@ -37,7 +37,6 @@ margin-left: 20px; } -<<<<<<< HEAD &__artist { margin-top: 5px; color: #636363; @@ -64,14 +63,6 @@ font-weight: 400; } -======= - &__name { - color: #1f1f1f; - font-size: 22px; - font-weight: 400; - } - ->>>>>>> develop &__artist { margin-top: 5px; color: #636363; @@ -112,12 +103,18 @@ &:hover { <<<<<<< HEAD +<<<<<<< HEAD ======= +======= +>>>>>>> 38497d5 (Done album and artist pages) transform: none; } &:active { +<<<<<<< HEAD >>>>>>> develop +======= +>>>>>>> 38497d5 (Done album and artist pages) transform: translateX(-16px); } } @@ -149,11 +146,15 @@ font-size: 14px; } +<<<<<<< HEAD <<<<<<< HEAD &:hover { ======= &:active { >>>>>>> develop +======= + &:active { +>>>>>>> 38497d5 (Done album and artist pages) transform: translateX(-12px); } } diff --git a/src/widgets/trackList/ui/trackList.scss b/src/widgets/trackList/ui/trackList.scss index 65d0f90..297ac27 100644 --- a/src/widgets/trackList/ui/trackList.scss +++ b/src/widgets/trackList/ui/trackList.scss @@ -65,10 +65,6 @@ @media (max-width: 480px) { .tracks { -<<<<<<< HEAD - -======= ->>>>>>> develop &__recommend_text, &__show_more { font-size: 16px; From f95c383c5765aa3d995f1388be08cc983115ebc3 Mon Sep 17 00:00:00 2001 From: Tatiana Bocharova Date: Sat, 23 Nov 2024 20:45:47 +0300 Subject: [PATCH 6/7] solve conflicts again --- src/widgets/albumList/ui/albumList.scss | 17 +++++++++++++++++ .../artistCarousel/ui/artistCarousel.scss | 6 ++++++ 2 files changed, 23 insertions(+) diff --git a/src/widgets/albumList/ui/albumList.scss b/src/widgets/albumList/ui/albumList.scss index e9167c5..e891bc7 100644 --- a/src/widgets/albumList/ui/albumList.scss +++ b/src/widgets/albumList/ui/albumList.scss @@ -64,5 +64,22 @@ &__text { font-size: 16px; } + } + + &__recommend_text { + display: flex; + justify-content: space-between; + align-items: center; + color: #f1f1f1; + font-size: 24px; + font-weight: 400; + } + + &__list { + margin-top: 10px; + display: flex; + justify-content: space-around; + flex-wrap: wrap; + gap: 15px; } } diff --git a/src/widgets/artistCarousel/ui/artistCarousel.scss b/src/widgets/artistCarousel/ui/artistCarousel.scss index 8551c78..fd0e78a 100644 --- a/src/widgets/artistCarousel/ui/artistCarousel.scss +++ b/src/widgets/artistCarousel/ui/artistCarousel.scss @@ -28,6 +28,12 @@ padding: 0 5px; } + &__upper_wrapper { + padding: 0 10px; + display: flex; + justify-content: space-between; + } + &__show_more { text-decoration: none; color: #f1f1f1; From 1a88c26074a4e7fa3a7bf0e9f19e2c40574923dc Mon Sep 17 00:00:00 2001 From: Tatiana Bocharova Date: Sat, 23 Nov 2024 20:48:00 +0300 Subject: [PATCH 7/7] solve conflicts again --- src/entities/track/ui/track.scss | 21 ++++----------------- 1 file changed, 4 insertions(+), 17 deletions(-) diff --git a/src/entities/track/ui/track.scss b/src/entities/track/ui/track.scss index 5189d7b..69d4993 100644 --- a/src/entities/track/ui/track.scss +++ b/src/entities/track/ui/track.scss @@ -102,19 +102,10 @@ } &:hover { -<<<<<<< HEAD -<<<<<<< HEAD -======= -======= ->>>>>>> 38497d5 (Done album and artist pages) transform: none; } &:active { -<<<<<<< HEAD ->>>>>>> develop -======= ->>>>>>> 38497d5 (Done album and artist pages) transform: translateX(-16px); } } @@ -146,15 +137,11 @@ font-size: 14px; } -<<<<<<< HEAD -<<<<<<< HEAD - &:hover { -======= - &:active { ->>>>>>> develop -======= + &:hover{ + transform: translateX(-12px); + } + &:active { ->>>>>>> 38497d5 (Done album and artist pages) transform: translateX(-12px); } }