From 1f588c3ed85dc573fbd79b2f2f845703e75dffdd Mon Sep 17 00:00:00 2001 From: damedelion Date: Sat, 21 Dec 2024 04:43:34 +0300 Subject: [PATCH] mobile layout fix --- src/components.scss | 241 ++++++++++-------- src/entities/track/ui/track.scss | 75 +++++- src/shared/config/api.js | 8 +- src/widgets/albumCard/ui/albumCard.hbs | 21 +- src/widgets/albumCard/ui/albumCard.scss | 33 +-- src/widgets/albumList/ui/albumList.hbs | 2 +- src/widgets/albumList/ui/albumList.scss | 4 - src/widgets/artistCard/ui/artistCard.hbs | 27 +- src/widgets/artistCard/ui/artistCard.scss | 33 +-- src/widgets/artistList/ui/artistList.hbs | 2 +- src/widgets/artistList/ui/artistList.scss | 4 - src/widgets/header/ui/Header.scss | 27 +- src/widgets/playlistCard/ui/playlistCard.hbs | 24 +- src/widgets/playlistCard/ui/playlistCard.scss | 33 +-- src/widgets/playlistList/ui/playlistList.hbs | 2 +- src/widgets/playlistList/ui/playlistList.scss | 3 - 16 files changed, 297 insertions(+), 242 deletions(-) diff --git a/src/components.scss b/src/components.scss index c1e77ce..6909b3f 100644 --- a/src/components.scss +++ b/src/components.scss @@ -11,6 +11,11 @@ @media (max-width: 1380px) { width: 90%; } + + @media (max-width: 768px) { + gap: 5px; + margin: 5px auto; + } } .container { @@ -83,24 +88,52 @@ width: 180px; height: 180px; + @media (max-width: 1380px) { + width: 170px; + height: 170px; + } + @media (max-width: 1024px) { - width: 160px; - height: 160px; + width: 150px; + height: 150px; } @media (max-width: 760px) { - width: 140px; - height: 140px; + width: 120px; + height: 120px; } @media (max-width: 600px) { - width: 130px; - height: 130px; + width: 100px; + height: 100px; } @media (max-width: 480px) { - width: 120px; - height: 120px; + width: 85px; + height: 85px; + } +} + +.list { + display: grid; + grid-template-columns: repeat(6, 1fr); + margin-top: 10px; + row-gap: 10px; + + &>* { + justify-self: center; + } + + @media (max-width: 1380px) { + grid-template-columns: repeat(5, 1fr); + } + + @media (max-width: 1024px) { + grid-template-columns: repeat(4, 1fr); + } + + @media (max-width: 768px) { + grid-template-columns: repeat(3, 1fr); } } @@ -114,18 +147,18 @@ } @media (max-width: 760px) { - width: 160px; - height: 160px; + width: 150px; + height: 150px; } @media (max-width: 600px) { - width: 150px; - height: 150px; + width: 130px; + height: 130px; } @media (max-width: 480px) { - width: 140px; - height: 140px; + width: 110px; + height: 110px; } } @@ -154,112 +187,112 @@ .player_button { cursor: pointer; - + &:hover { - opacity: 0.6; + opacity: 0.6; } - } +} .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; - } - } + &__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; + } + } @media (max-width: 768px) { &__container { - padding: 0 45px 0 35px; - } + padding: 0 45px 0 35px; + } - &__button { - width: 28px; - height: 28px; - font-size: 16px; + &__button { + width: 28px; + height: 28px; + font-size: 16px; - &_prev { - left: 5px; - } + &_prev { + left: 5px; + } - &_next { - right: 5px; - } - } + &_next { + right: 5px; + } + } } @media (max-width: 480px) { &__container { - padding: 0 27px 0 22px; - } + padding: 0 27px 0 22px; + } - &__item { - padding: 4px; - } + &__item { + padding: 4px; + } - &__button { - width: 22px; - height: 22px; - font-size: 12px; + &__button { + width: 22px; + height: 22px; + font-size: 12px; - &_prev { - left: 0px; - } + &_prev { + left: 0px; + } - &_next { - right: 0px; - } - } + &_next { + right: 0px; + } + } } -} +} \ No newline at end of file diff --git a/src/entities/track/ui/track.scss b/src/entities/track/ui/track.scss index cd1112e..f9a5a4d 100644 --- a/src/entities/track/ui/track.scss +++ b/src/entities/track/ui/track.scss @@ -1,5 +1,3 @@ -$track-img-size-xl: 60px; - .track { display: flex; justify-content: space-between; @@ -13,7 +11,7 @@ $track-img-size-xl: 60px; } &__left_side { - min-width: 200px; + min-width: 150px; display: flex; align-items: center; text-overflow: ellipsis; @@ -34,19 +32,84 @@ $track-img-size-xl: 60px; width: 45px; display: flex; justify-content: center; + + @media (max-width: 1380px) { + width: 40px + } + + @media (max-width: 1024px) { + width: 36px; + } + + @media (max-width: 768px) { + width: 32px; + } + + @media (max-width: 600px) { + width: 30px; + } + + @media (max-width: 480px) { + width: 28px; + } } &__img { border-radius: 5px; - width: $track-img-size-xl; - height: $track-img-size-xl; + width: 50px; + height: 50px; + + @media (max-width: 1380px) { + width: 48px; + height: 48px; + } + + @media (max-width: 1024px) { + width: 44px; + height: 44px; + } + + @media (max-width: 768px) { + width: 40px; + height: 40px; + } + + @media (max-width: 600px) { + width: 38px; + height: 38px; + } + + @media (max-width: 480px) { + width: 36px; + height: 36px; + } } &__info { - margin-left: 20px; + margin-left: 18px; text-overflow: inherit; white-space: inherit; overflow: inherit; + + @media (max-width: 1380px) { + margin-left: 18px; + } + + @media (max-width: 1024px) { + margin-left: 16px; + } + + @media (max-width: 768px) { + margin-left: 12px; + } + + @media (max-width: 600px) { + margin-left: 10px; + } + + @media (max-width: 480px) { + margin-left: 8px; + } } &__delete-btn, diff --git a/src/shared/config/api.js b/src/shared/config/api.js index eb33217..0dbb6f4 100644 --- a/src/shared/config/api.js +++ b/src/shared/config/api.js @@ -1,22 +1,22 @@ // export const BASE_URL = "http://localhost:8080"; -export const API_USER_URL = 'http://localhost:8080'; +/* export const API_USER_URL = 'http://localhost:8080'; export const API_ALBUM_URL = 'http://localhost:8080'; export const API_ARTIST_URL = 'http://localhost:8080'; export const API_PLAYLIST_URL = 'http://localhost:8080'; export const API_TRACK_URL = 'http://localhost:8080'; export const API_GENRE_URL = 'http://localhost:8080'; export const API_CSAT_URL = 'http://localhost:8080'; -export const S3_URL = 'http://localhost:8080/storage'; +export const S3_URL = 'http://localhost:8080/storage'; */ export const BASE_URL = "https://nova-music.ru"; -/* export const API_USER_URL = 'https://nova-music.ru'; +export const API_USER_URL = 'https://nova-music.ru'; export const API_ALBUM_URL = 'https://nova-music.ru'; export const API_ARTIST_URL = 'https://nova-music.ru:'; export const API_PLAYLIST_URL = 'https://nova-music.ru'; export const API_TRACK_URL = 'https://nova-music.ru'; export const API_GENRE_URL = 'https://nova-music.ru'; export const API_CSAT_URL = 'https://nova-music.ru'; -export const S3_URL = 'https://nova-music.ru/storage'; */ +export const S3_URL = 'https://nova-music.ru/storage'; diff --git a/src/widgets/albumCard/ui/albumCard.hbs b/src/widgets/albumCard/ui/albumCard.hbs index bec5bb4..58621d6 100644 --- a/src/widgets/albumCard/ui/albumCard.hbs +++ b/src/widgets/albumCard/ui/albumCard.hbs @@ -1,15 +1,20 @@
-

Альбом

+
+

Альбом

+
-
-

{{ album.name }}

-
-

{{ album.artistName }} · {{ album.release }}

-
- +
+

{{ album.name }}

+
+
+

{{ album.artistName }} · {{ album.release }}

+
+
@@ -28,4 +33,4 @@
-
+
\ No newline at end of file diff --git a/src/widgets/albumCard/ui/albumCard.scss b/src/widgets/albumCard/ui/albumCard.scss index 26e2a5e..56029f8 100644 --- a/src/widgets/albumCard/ui/albumCard.scss +++ b/src/widgets/albumCard/ui/albumCard.scss @@ -17,6 +17,10 @@ justify-content: center; align-items: center; gap: 50px; + + @media (max-width: 1024px) { + gap: 25px; + } } &__img { @@ -28,6 +32,8 @@ display: flex; flex-direction: column; align-items: start; + gap: 15px; + color: colors.$white; } } @@ -41,19 +47,6 @@ display: flex; } - &__name { - margin-bottom: 20px; - } - - &__artist_release { - margin-bottom: 15px; - } - - &__likes, - &__listen { - margin-bottom: 10px; - } - &__buttons { display: flex; justify-content: space-around; @@ -74,6 +67,7 @@ flex-direction: column; align-items: center; justify-content: center; + gap: 5px; } } @@ -87,18 +81,5 @@ &__listen { justify-content: center; } - - &__name { - margin-bottom: 10px; - } - - &__artist_release { - margin-bottom: 8px; - } - - &__likes, - &__listen { - margin-bottom: 3px; - } } } diff --git a/src/widgets/albumList/ui/albumList.hbs b/src/widgets/albumList/ui/albumList.hbs index 2c9befa..80af90b 100644 --- a/src/widgets/albumList/ui/albumList.hbs +++ b/src/widgets/albumList/ui/albumList.hbs @@ -3,7 +3,7 @@

Альбомы

-
+
diff --git a/src/widgets/albumList/ui/albumList.scss b/src/widgets/albumList/ui/albumList.scss index ca89c64..accdd69 100644 --- a/src/widgets/albumList/ui/albumList.scss +++ b/src/widgets/albumList/ui/albumList.scss @@ -11,10 +11,6 @@ &__list { margin-top: 10px; - display: flex; - justify-content: space-around; - flex-wrap: wrap; - gap: 15px; } /* &__show_more { diff --git a/src/widgets/artistCard/ui/artistCard.hbs b/src/widgets/artistCard/ui/artistCard.hbs index e814249..9a53550 100644 --- a/src/widgets/artistCard/ui/artistCard.hbs +++ b/src/widgets/artistCard/ui/artistCard.hbs @@ -1,18 +1,22 @@
-

Исполнитель

+
+

Исполнитель

+
-
-

{{ artist.name }}

-
- {{!--

Жанры:

--}} - {{#each genres}} -

{{ this.rusName}}

- {{/each}} -
- +
+

{{ artist.name }}

+
+
+ {{!--

Жанры:

--}} + {{#each genres}} +

{{ this.rusName}}

+ {{/each}} +
+
@@ -31,5 +35,4 @@
-
- +
\ No newline at end of file diff --git a/src/widgets/artistCard/ui/artistCard.scss b/src/widgets/artistCard/ui/artistCard.scss index 2ce02c7..ec84f49 100644 --- a/src/widgets/artistCard/ui/artistCard.scss +++ b/src/widgets/artistCard/ui/artistCard.scss @@ -17,6 +17,10 @@ justify-content: center; align-items: center; gap: 50px; + + @media (max-width: 1024px) { + gap: 25px; + } } &__img { @@ -28,6 +32,8 @@ display: flex; flex-direction: column; align-items: start; + gap: 15px; + color: colors.$white; } } @@ -41,17 +47,10 @@ display: flex; } - &__name { - margin-bottom: 20px; - } - &__genres { - margin-bottom: 15px; - } - - &__likes, - &__listen { - margin-bottom: 10px; + display: flex; + justify-content: flex-start; + align-items: center; } &__buttons { @@ -74,6 +73,7 @@ flex-direction: column; align-items: center; justify-content: center; + gap: 5px; } } @@ -87,18 +87,5 @@ &__listen { justify-content: center; } - - &__name { - margin-bottom: 10px; - } - - &__genres { - margin-bottom: 8px; - } - - &__likes, - &__listen { - margin-bottom: 3px; - } } } diff --git a/src/widgets/artistList/ui/artistList.hbs b/src/widgets/artistList/ui/artistList.hbs index 9a7cb39..2922309 100644 --- a/src/widgets/artistList/ui/artistList.hbs +++ b/src/widgets/artistList/ui/artistList.hbs @@ -3,7 +3,7 @@

Популярные артисты

-
+
diff --git a/src/widgets/artistList/ui/artistList.scss b/src/widgets/artistList/ui/artistList.scss index 46e6ba6..fb32e09 100644 --- a/src/widgets/artistList/ui/artistList.scss +++ b/src/widgets/artistList/ui/artistList.scss @@ -11,10 +11,6 @@ &__list { margin-top: 10px; - display: flex; - justify-content: space-around; - flex-wrap: wrap; - gap: 15px; } /* &__show_more { diff --git a/src/widgets/header/ui/Header.scss b/src/widgets/header/ui/Header.scss index 4feed00..a2afddb 100644 --- a/src/widgets/header/ui/Header.scss +++ b/src/widgets/header/ui/Header.scss @@ -112,31 +112,40 @@ $header-img-size: 45px; } &__profile_img { - height: $header-img-size; - width: $header-img-size; + height: 40px; + width: 40px; border-radius: 100%; cursor: pointer; @media (max-width: 1023px) { - height: 40px; - width: 40px; + height: 32px; + width: 32px; } @media (max-width: 768px) { - height: 35px; - width: 35px; + height: 27px; + width: 27px; + } + + @media (max-width: 480px) { + height: 21px; + width: 21px; } } &__img_logo { - height: $header-img-size; + height: 40px; @media (max-width: 1023px) { - height: 40px; + height: 32px; } @media (max-width: 768px) { - height: 35px; + height: 27px; + } + + @media (max-width: 480px) { + height: 21px; } } diff --git a/src/widgets/playlistCard/ui/playlistCard.hbs b/src/widgets/playlistCard/ui/playlistCard.hbs index f7cfd5d..905456e 100644 --- a/src/widgets/playlistCard/ui/playlistCard.hbs +++ b/src/widgets/playlistCard/ui/playlistCard.hbs @@ -1,20 +1,24 @@
-

Плейлист

+
+

Плейлист

+
{{#if isMyPlaylist }} -
- {{/if}} +
+ {{/if}}
-
-

{{playlist.name}}

-
-

Автор: {{playlist.owner_name}}

-
- +
+

{{playlist.name}}

+
+
+

Автор: {{playlist.owner_name}}

+
+
@@ -39,4 +43,4 @@
-
+
\ No newline at end of file diff --git a/src/widgets/playlistCard/ui/playlistCard.scss b/src/widgets/playlistCard/ui/playlistCard.scss index 8dae830..e2fee02 100644 --- a/src/widgets/playlistCard/ui/playlistCard.scss +++ b/src/widgets/playlistCard/ui/playlistCard.scss @@ -17,6 +17,10 @@ justify-content: center; align-items: center; gap: 50px; + + @media (max-width: 1024px) { + gap: 25px; + } } &__column { @@ -35,6 +39,8 @@ display: flex; flex-direction: column; align-items: start; + gap: 15px; + color: colors.$white; } } @@ -48,19 +54,6 @@ display: flex; } - &__name { - margin-bottom: 20px; - } - - &__owner { - margin-bottom: 15px; - } - - &__likes, - &__listen { - margin-bottom: 10px; - } - &__buttons { display: flex; justify-content: space-around; @@ -87,6 +80,7 @@ flex-direction: column; align-items: center; justify-content: center; + gap: 5px; } } @@ -100,18 +94,5 @@ &__listen { justify-content: center; } - - &__name { - margin-bottom: 10px; - } - - &__owner { - margin-bottom: 8px; - } - - &__likes, - &__listen { - margin-bottom: 3px; - } } } diff --git a/src/widgets/playlistList/ui/playlistList.hbs b/src/widgets/playlistList/ui/playlistList.hbs index f8d4cd1..c625e89 100644 --- a/src/widgets/playlistList/ui/playlistList.hbs +++ b/src/widgets/playlistList/ui/playlistList.hbs @@ -6,7 +6,7 @@

Показать еще

{{/if}}
-
+
diff --git a/src/widgets/playlistList/ui/playlistList.scss b/src/widgets/playlistList/ui/playlistList.scss index a117c04..63b8ba3 100644 --- a/src/widgets/playlistList/ui/playlistList.scss +++ b/src/widgets/playlistList/ui/playlistList.scss @@ -11,9 +11,6 @@ &__list { margin-top: 10px; - display: flex; - justify-content: space-around; - flex-wrap: wrap; } }