pvb3xqpfw
/
YepMusic
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

fix: revert some code

Browse Source
master
qier222 4 years ago
parent 6e57766433
commit 94ef0934a5
No known key found for this signature in database
GPG Key ID: 9C85007ED905F14D
19 changed files with 54 additions and 455 deletions
Show Stats Download Patch File Download Diff File

38
public/index.html
Unescape View File

@ -1,23 +1,25 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="referrer" content="no-referrer" />
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1" />
<link rel="icon" href="<%= BASE_URL %>favicon.ico" />
<title><%= htmlWebpackPlugin.options.title %></title>
</head>
<body> <head>
<noscript> <meta charset="utf-8" />
<strong <meta http-equiv="X-UA-Compatible" content="IE=edge" />
>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work <meta name="referrer" content="no-referrer" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="icon" href="<%= BASE_URL %>favicon.ico" />
<title>
<%= htmlWebpackPlugin.options.title %>
</title>
</head>
<body>
<noscript>
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work
properly without JavaScript enabled. Please enable it to properly without JavaScript enabled. Please enable it to
continue.</strong continue.</strong>
> </noscript>
</noscript> <div id="app"></div>
<div id="app"></div> <!-- built files will be auto injected -->
<!-- built files will be auto injected --> </body>
</body>
</html> </html>

24
src/App.vue
Unescape View File

@ -91,15 +91,6 @@ export default {
--color-navbar-bg: rgba(255, 255, 255, 0.86); --color-navbar-bg: rgba(255, 255, 255, 0.86);
--color-primary-bg-for-transparent: rgba(189, 207, 255, 0.28); --color-primary-bg-for-transparent: rgba(189, 207, 255, 0.28);
--color-secondary-bg-for-transparent: rgba(209, 209, 214, 0.28); --color-secondary-bg-for-transparent: rgba(209, 209, 214, 0.28);
--main-content-padding-x: 10vw;
--main-content-padding: 0 var(--main-content-padding-x);
}
@media (max-width: 1336px) {
:root {
--main-content-padding-x: 5vw;
}
} }
[data-theme="dark"] { [data-theme="dark"] {
@ -126,18 +117,27 @@ input {
} }
body { body {
background-color: var(--color-body-bg); background-color: var(--color-body-bg);
margin: 0;
} }
html { html {
overflow-y: overlay; overflow-y: overlay;
min-width: 340px; min-width: 768px;
overscroll-behavior: none;
} }
main { main {
max-width: 100vw;
margin-top: 84px; margin-top: 84px;
margin-bottom: 96px; margin-bottom: 96px;
padding: {
right: 10vw;
left: 10vw;
}
}
@media (max-width: 1336px) {
main {
padding: 0 5vw;
}
} }
select, select,

26
src/components/CoverRow.vue
Unescape View File

@ -1,9 +1,5 @@
<template> <template>
<div <div class="cover-row" :style="rowStyles">
class="cover-row"
:style="rowStyles"
:class="{ 'without-padding': withoutPadding }"
>
<div <div
class="item" class="item"
v-for="item in items" v-for="item in items"
@ -54,7 +50,6 @@ export default {
showPlayCount: { type: Boolean, default: false }, showPlayCount: { type: Boolean, default: false },
columnNumber: { type: Number, default: 5 }, columnNumber: { type: Number, default: 5 },
gap: { type: String, default: "44px 24px" }, gap: { type: String, default: "44px 24px" },
withoutPadding: { type: Boolean, default: false },
}, },
computed: { computed: {
rowStyles() { rowStyles() {
@ -119,13 +114,6 @@ export default {
<style lang="scss" scoped> <style lang="scss" scoped>
.cover-row { .cover-row {
display: grid; display: grid;
padding: var(--main-content-padding);
max-width: calc(100vw - var(--main-content-padding-x));
overflow-x: scroll;
}
.cover-row.without-padding {
padding: 0;
} }
.item { .item {
@ -155,18 +143,6 @@ export default {
} }
} }
@media (max-width: 800px) {
.item {
width: 256px;
}
}
@media (max-width: 600px) {
.item {
width: 192px;
}
}
.item.artist { .item.artist {
display: flex; display: flex;
flex-direction: column; flex-direction: column;

78
src/components/Navbar.vue
Unescape View File

@ -1,5 +1,5 @@
<template> <template>
<nav :class="{ 'search-box-open': isSearchBoxOpen }"> <nav>
<div class="win32-titlebar"> <div class="win32-titlebar">
<div class="title">YesPlayMusic</div> <div class="title">YesPlayMusic</div>
<div class="controls"> <div class="controls">
@ -51,9 +51,6 @@
v-if="settings.showGithubIcon !== false" v-if="settings.showGithubIcon !== false"
><svg-icon icon-class="github" class="github" ><svg-icon icon-class="github" class="github"
/></a> /></a>
<button-icon @click.native="toggleSearchBox()" class="search-button">
<svg-icon icon-class="search" />
</button-icon>
<div class="search-box"> <div class="search-box">
<div class="container" :class="{ active: inputFocus }"> <div class="container" :class="{ active: inputFocus }">
<svg-icon icon-class="search" /> <svg-icon icon-class="search" />
@ -96,7 +93,6 @@ export default {
inputFocus: false, inputFocus: false,
langs: ["zh-CN", "en"], langs: ["zh-CN", "en"],
keywords: "", keywords: "",
isSearchBoxOpen: false,
windowIsMaximized: win ? win.isMaximized() : true, windowIsMaximized: win ? win.isMaximized() : true,
}; };
}, },
@ -121,9 +117,6 @@ export default {
params: { keywords: this.keywords }, params: { keywords: this.keywords },
}); });
}, },
toggleSearchBox() {
this.isSearchBoxOpen = !this.isSearchBoxOpen;
},
windowMinimize() { windowMinimize() {
win.minimize(); win.minimize();
}, },
@ -158,9 +151,6 @@ nav {
left: 10vw; left: 10vw;
} }
backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px);
border-bottom: 1px solid transparent;
transition-property: padding-bottom, border-bottom;
transition-duration: 0.4s;
background-color: var(--color-navbar-bg); background-color: var(--color-navbar-bg);
z-index: 100; z-index: 100;
@ -368,75 +358,9 @@ nav {
color: var(--color-text); color: var(--color-text);
-webkit-app-region: no-drag; -webkit-app-region: no-drag;
} }
@media (max-width: 400px) {
.github {
display: none;
}
}
.search-button { .search-button {
display: none; display: none;
-webkit-app-region: no-drag; -webkit-app-region: no-drag;
} }
@media (max-width: 600px) {
.search-button {
display: flex;
}
}
}
@media (max-width: 600px) {
.right-part {
flex: 0;
}
}
@media (max-width: 800px) {
.navigation-links > a {
margin: 4px;
}
}
@media (max-width: 700px) {
.navigation-buttons {
display: none;
}
}
@media (max-width: 600px) {
nav.search-box-open {
padding-bottom: 36px;
border-bottom-color: var(--color-secondary-bg-for-transparent);
}
.search-box {
display: block;
position: fixed;
top: 56px;
left: 16px;
right: 16px;
.container {
width: 100%;
opacity: 0;
height: 0;
overflow: hidden;
transition-property: height, opacity;
transition-duration: 0.4s;
.input {
width: 100%;
}
}
}
[data-electron-platform-win32="yes"] {
.search-box {
// Add more 20px to top for title bar
top: calc(56px + 20px);
}
}
nav.search-box-open .container {
opacity: 1;
height: 32px;
}
} }
</style> </style>

33
src/components/Player.vue
Unescape View File

@ -62,10 +62,7 @@
<div class="middle-control-buttons"> <div class="middle-control-buttons">
<div class="blank"></div> <div class="blank"></div>
<div class="container" @click.stop> <div class="container" @click.stop>
<button-icon <button-icon @click.native="previous" :title="$t('player.previous')"
@click.native="previous"
:title="$t('player.previous')"
class="auto-hide"
><svg-icon icon-class="previous" ><svg-icon icon-class="previous"
/></button-icon> /></button-icon>
<button-icon <button-icon
@ -81,7 +78,7 @@
</div> </div>
<div class="blank"></div> <div class="blank"></div>
</div> </div>
<div class="right-control-buttons auto-hide"> <div class="right-control-buttons">
<div class="blank"></div> <div class="blank"></div>
<div class="container" @click.stop> <div class="container" @click.stop>
<button-icon <button-icon
@ -346,18 +343,6 @@ export default {
display: flex; display: flex;
} }
@media (max-width: 700px) {
.controls {
display: flex;
}
.playing {
flex: 1;
}
.playing .container {
pointer-events: none;
}
}
.playing .container { .playing .container {
display: flex; display: flex;
align-items: center; align-items: center;
@ -463,20 +448,6 @@ export default {
margin-left: 16px; margin-left: 16px;
} }
@media (max-width: 700px) {
.controls {
grid-template-columns: repeat(2, 1fr);
}
.middle-control-buttons {
justify-content: flex-end;
margin-left: auto;
}
.auto-hide,
.blank {
display: none;
}
}
// .lyrics-button { // .lyrics-button {
// position: fixed; // position: fixed;
// right: 18px; // right: 18px;

47
src/components/TrackList.vue
Unescape View File

@ -1,5 +1,5 @@
<template> <template>
<div class="track-list" :class="{ 'without-padding': withoutPadding }"> <div class="track-list">
<ContextMenu ref="menu"> <ContextMenu ref="menu">
<div class="item-info"> <div class="item-info">
<img :src="rightClickedTrack.al.picUrl | resizeImage(224)" /> <img :src="rightClickedTrack.al.picUrl | resizeImage(224)" />
@ -26,7 +26,7 @@
> >
<div class="item" @click="addTrackToPlaylist">添加到歌单</div> <div class="item" @click="addTrackToPlaylist">添加到歌单</div>
</ContextMenu> </ContextMenu>
<div :style="listStyles" class="track-list-inner-container"> <div :style="listStyles">
<TrackListItem <TrackListItem
v-for="(track, index) in tracks" v-for="(track, index) in tracks"
:track="track" :track="track"
@ -78,6 +78,10 @@ export default {
return []; // 'removeTrackFromPlaylist' return []; // 'removeTrackFromPlaylist'
}, },
}, },
columnNumber: {
type: Number,
default: 4,
},
highlightPlayingTrack: { highlightPlayingTrack: {
type: Boolean, type: Boolean,
default: true, default: true,
@ -86,10 +90,6 @@ export default {
type: String, type: String,
default: "id", default: "id",
}, },
withoutPadding: {
type: Boolean,
default: false,
},
}, },
data() { data() {
return { return {
@ -107,6 +107,7 @@ export default {
this.listStyles = { this.listStyles = {
display: "grid", display: "grid",
gap: "4px", gap: "4px",
gridTemplateColumns: `repeat(${this.columnNumber}, 1fr)`,
}; };
} }
}, },
@ -239,36 +240,4 @@ export default {
}; };
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped></style>
.track-list {
--col-num: 4;
padding: var(--main-content-padding);
.track-list-inner-container {
grid-template-columns: repeat(var(--col-num), 1fr);
}
}
.track-list.without-padding {
padding: 0;
}
@media (max-width: 800px) {
.track-list {
--col-num: 3;
padding: var(--main-content-padding);
}
}
@media (max-width: 700px) {
.track-list {
--col-num: 2;
}
}
@media (max-width: 550px) {
.track-list {
--col-num: 1;
}
}
</style>

13
src/components/TrackListItem.vue
Unescape View File

@ -193,7 +193,6 @@ button {
padding: 8px; padding: 8px;
border-radius: 12px; border-radius: 12px;
user-select: none; user-select: none;
transition: all 0.3s;
.no { .no {
display: flex; display: flex;
@ -294,11 +293,6 @@ button {
-webkit-line-clamp: 2; -webkit-line-clamp: 2;
overflow: hidden; overflow: hidden;
} }
@media (max-width: 600px) {
.album {
flex: 0;
}
}
.time { .time {
font-size: 16px; font-size: 16px;
width: 50px; width: 50px;
@ -313,6 +307,7 @@ button {
} }
.track.focus { .track.focus {
transition: all 0.3s;
background: var(--color-secondary-bg); background: var(--color-secondary-bg);
} }
@ -359,12 +354,6 @@ button {
justify-content: flex-end; justify-content: flex-end;
} }
@media (max-width: 600px) {
.actions {
width: auto;
}
}
.track.playing { .track.playing {
background: var(--color-primary-bg); background: var(--color-primary-bg);
color: var(--color-primary); color: var(--color-primary);

26
src/views/album.vue
Unescape View File

@ -276,7 +276,6 @@ export default {
display: flex; display: flex;
width: 78vw; width: 78vw;
margin-bottom: 72px; margin-bottom: 72px;
padding: var(--main-content-padding);
.info { .info {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@ -331,29 +330,6 @@ export default {
} }
} }
@media (max-width: 600px) {
.playlist-info {
width: calc(100vw - 2 * var(--main-content-padding-x));
padding: var(--main-content-padding);
display: block;
.cover {
display: flex;
justify-content: center;
align-items: center;
}
.info {
margin-top: 24px;
margin-left: 0;
.title {
font-size: 48px;
}
}
}
}
.explicit-symbol { .explicit-symbol {
opacity: 0.28; opacity: 0.28;
color: var(--color-text); color: var(--color-text);
@ -369,7 +345,6 @@ export default {
font-size: 12px; font-size: 12px;
opacity: 0.48; opacity: 0.48;
color: var(--color-text); color: var(--color-text);
padding: var(--main-content-padding);
div { div {
margin-bottom: 4px; margin-bottom: 4px;
} }
@ -388,7 +363,6 @@ export default {
opacity: 0.88; opacity: 0.88;
color: var(--color-text); color: var(--color-text);
margin-bottom: 20px; margin-bottom: 20px;
padding: var(--main-content-padding);
} }
} }
.description-fulltext { .description-fulltext {

34
src/views/artist.vue
Unescape View File

@ -4,7 +4,7 @@
<div class="head"> <div class="head">
<img :src="artist.img1v1Url | resizeImage(1024)" /> <img :src="artist.img1v1Url | resizeImage(1024)" />
</div> </div>
<div class="info"> <div>
<div class="name">{{ artist.name }}</div> <div class="name">{{ artist.name }}</div>
<div class="artist">{{ $t("artist.artist") }}</div> <div class="artist">{{ $t("artist.artist") }}</div>
<div class="statistics"> <div class="statistics">
@ -253,7 +253,6 @@ export default {
align-items: center; align-items: center;
margin-bottom: 26px; margin-bottom: 26px;
color: var(--color-text); color: var(--color-text);
padding: var(--main-content-padding);
img { img {
height: 192px; height: 192px;
width: 192px; width: 192px;
@ -290,37 +289,12 @@ export default {
} }
} }
@media (max-width: 600px) {
.artist-info {
display: block;
.head {
display: flex;
justify-content: center;
align-items: center;
}
.info {
margin-top: 24px;
}
.name {
font-size: 36px;
}
img {
margin: 0;
}
}
}
.section-title { .section-title {
font-weight: 600; font-weight: 600;
font-size: 22px; font-size: 22px;
opacity: 0.88; opacity: 0.88;
color: var(--color-text); color: var(--color-text);
margin-bottom: 16px; margin-bottom: 16px;
padding: var(--main-content-padding);
padding-top: 46px; padding-top: 46px;
display: flex; display: flex;
@ -335,11 +309,6 @@ export default {
.latest-release { .latest-release {
color: var(--color-text); color: var(--color-text);
padding: var(--main-content-padding);
.section-title {
padding-left: 0;
padding-right: 0;
}
.release { .release {
display: flex; display: flex;
} }
@ -374,7 +343,6 @@ export default {
.popular-tracks { .popular-tracks {
.show-more { .show-more {
display: flex; display: flex;
padding: var(--main-content-padding);
button { button {
padding: 4px 8px; padding: 4px 8px;

1
src/views/artistMV.vue
Unescape View File

@ -81,7 +81,6 @@ export default {
h1 { h1 {
font-size: 42px; font-size: 42px;
color: var(--color-text); color: var(--color-text);
padding: var(--main-content-padding);
.avatar { .avatar {
height: 44px; height: 44px;
margin-right: 12px; margin-right: 12px;

34
src/views/explore.vue
Unescape View File

@ -20,7 +20,7 @@
</div> </div>
</div> </div>
<div class="panel" v-bind:class="{ show: showCatOptions }"> <div class="panel" v-show="showCatOptions">
<div class="big-cat" v-for="bigCat in allBigCats" :key="bigCat"> <div class="big-cat" v-for="bigCat in allBigCats" :key="bigCat">
<div class="name">{{ bigCat }}</div> <div class="name">{{ bigCat }}</div>
<div class="cats"> <div class="cats">
@ -174,23 +174,6 @@ export default {
}, },
}, },
activated() { activated() {
var updatePanelHeight = () => {
var panelChildren = this.$el.getElementsByClassName("panel")[0].children;
this.$el.style.setProperty(
"--explore-panel-children-height",
`${
Math.abs(
panelChildren[0].getBoundingClientRect().y -
(panelChildren[panelChildren.length - 1].getBoundingClientRect()
.y +
panelChildren[panelChildren.length - 1].clientHeight)
) + 16
}px`
);
};
window.addEventListener("load", updatePanelHeight);
window.addEventListener("resize", updatePanelHeight);
this.loadData(); this.loadData();
}, },
beforeRouteUpdate(to, from, next) { beforeRouteUpdate(to, from, next) {
@ -210,12 +193,10 @@ export default {
h1 { h1 {
color: var(--color-text); color: var(--color-text);
font-size: 56px; font-size: 56px;
padding: var(--main-content-padding);
} }
.buttons { .buttons {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
padding: var(--main-content-padding);
} }
.button { .button {
user-select: none; user-select: none;
@ -245,19 +226,8 @@ h1 {
margin-top: 10px; margin-top: 10px;
background: var(--color-secondary-bg); background: var(--color-secondary-bg);
border-radius: 10px; border-radius: 10px;
padding: 0 8px; padding: 8px;
margin: var(--main-content-padding);
color: var(--color-text); color: var(--color-text);
height: 0;
opacity: 0;
overflow: hidden;
transition: all 0.3s;
&.show {
height: var(--explore-panel-children-height);
opacity: 1;
padding: 8px;
}
.big-cat { .big-cat {
display: flex; display: flex;

1
src/views/home.vue
Unescape View File

@ -152,7 +152,6 @@ export default {
font-size: 28px; font-size: 28px;
font-weight: 700; font-weight: 700;
color: var(--color-text); color: var(--color-text);
padding: var(--main-content-padding);
a { a {
font-size: 13px; font-size: 13px;
font-weight: 600; font-weight: 600;

14
src/views/library.vue
Unescape View File

@ -39,7 +39,6 @@
:id="likedSongsPlaylist.id" :id="likedSongsPlaylist.id"
dbclickTrackFunc="playPlaylistByID" dbclickTrackFunc="playPlaylistByID"
:columnNumber="3" :columnNumber="3"
:withoutPadding="true"
/> />
</div> </div>
</div> </div>
@ -356,7 +355,6 @@ h1 {
color: var(--color-text); color: var(--color-text);
display: flex; display: flex;
align-items: center; align-items: center;
padding: var(--main-content-padding);
.avatar { .avatar {
height: 44px; height: 44px;
margin-right: 12px; margin-right: 12px;
@ -375,7 +373,6 @@ h1 {
.section-one { .section-one {
display: flex; display: flex;
margin-top: 24px; margin-top: 24px;
padding: var(--main-content-padding);
.songs { .songs {
flex: 7; flex: 7;
margin-top: 8px; margin-top: 8px;
@ -384,16 +381,6 @@ h1 {
} }
} }
@media (max-width: 800px) {
.section-one {
display: block;
.songs {
margin-top: 20px;
margin-left: 0;
}
}
}
.liked-songs { .liked-songs {
flex: 3; flex: 3;
margin-top: 8px; margin-top: 8px;
@ -473,7 +460,6 @@ h1 {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
margin-bottom: 24px; margin-bottom: 24px;
padding: var(--main-content-padding);
} }
.tabs { .tabs {

1
src/views/loginUsername.vue
Unescape View File

@ -106,7 +106,6 @@ export default {
.login { .login {
display: flex; display: flex;
color: var(--color-text); color: var(--color-text);
padding: var(--main-content-padding);
} }
.title { .title {

4
src/views/mv.vue
Unescape View File

@ -146,13 +146,11 @@ export default {
background: transparent; background: transparent;
overflow: hidden; overflow: hidden;
max-height: 100vh; max-height: 100vh;
margin: var(--main-content-padding);
} }
.video-info { .video-info {
margin-top: 12px; margin-top: 12px;
color: var(--color-text); color: var(--color-text);
padding: var(--main-content-padding);
.title { .title {
font-size: 24px; font-size: 24px;
font-weight: 600; font-weight: 600;
@ -177,8 +175,6 @@ export default {
font-weight: 600; font-weight: 600;
color: var(--color-text); color: var(--color-text);
opacity: 0.88; opacity: 0.88;
padding: var(--main-content-padding);
margin-bottom: 8px;
} }
} }

122
src/views/playlist.vue
Unescape View File

@ -135,22 +135,8 @@
</h1> </h1>
</div> </div>
<div class="search-box">
<div class="container" :class="{ active: inputFocus }">
<svg-icon icon-class="search" />
<div class="input">
<input
v-model="playlistKeyword"
:placeholder="inputFocus ? '' : $t('playlist.search')"
@focus="inputFocus = true"
@blur="inputFocus = false"
/>
</div>
</div>
</div>
<TrackList <TrackList
:tracks="filteredTracks" :tracks="tracks"
:type="'playlist'" :type="'playlist'"
:id="playlist.id" :id="playlist.id"
:extraContextMenuItem=" :extraContextMenuItem="
@ -316,8 +302,6 @@ export default {
tracks: [], tracks: [],
loadingMore: false, loadingMore: false,
lastLoadedTrackIndex: 9, lastLoadedTrackIndex: 9,
playlistKeyword: "",
inputFocus: false,
}; };
}, },
created() { created() {
@ -344,22 +328,6 @@ export default {
this.playlist.id !== this.data.likedSongPlaylistID this.playlist.id !== this.data.likedSongPlaylistID
); );
}, },
filteredTracks() {
return this.tracks.filter(
(song) =>
song.name
.toLowerCase()
.includes(this.playlistKeyword.toLowerCase()) ||
song.al.name
.toLowerCase()
.includes(this.playlistKeyword.toLowerCase()) ||
song.ar.find((artist) =>
artist.name
.toLowerCase()
.includes(this.playlistKeyword.toLowerCase())
)
);
},
}, },
methods: { methods: {
...mapMutations(["appendTrackToPlayerList"]), ...mapMutations(["appendTrackToPlayerList"]),
@ -406,11 +374,6 @@ export default {
this.lastLoadedTrackIndex = data.playlist.tracks.length - 1; this.lastLoadedTrackIndex = data.playlist.tracks.length - 1;
if (this.playlist.trackCount > this.tracks.length) { if (this.playlist.trackCount > this.tracks.length) {
window.addEventListener("scroll", this.handleScroll, true); window.addEventListener("scroll", this.handleScroll, true);
window.addEventListener(
"input",
this.handleSearch,
this.playlistKeyword
);
} }
return data; return data;
}) })
@ -421,11 +384,11 @@ export default {
} }
}); });
}, },
loadMore(loadNum = 50) { loadMore() {
let trackIDs = this.playlist.trackIds.filter((t, index) => { let trackIDs = this.playlist.trackIds.filter((t, index) => {
if ( if (
index > this.lastLoadedTrackIndex && index > this.lastLoadedTrackIndex &&
index <= this.lastLoadedTrackIndex + loadNum index <= this.lastLoadedTrackIndex + 50
) )
return t; return t;
}); });
@ -452,15 +415,6 @@ export default {
this.loadMore(); this.loadMore();
} }
}, },
handleSearch() {
if (
this.lastLoadedTrackIndex + 1 === this.playlist.trackIds.length ||
this.loadingMore
)
return;
this.loadingMore = true;
this.loadMore(this.playlist.trackIds.length - this.lastLoadedTrackIndex);
},
openMenu(e) { openMenu(e) {
this.$refs.playlistMenu.openMenu(e); this.$refs.playlistMenu.openMenu(e);
}, },
@ -498,8 +452,7 @@ export default {
<style lang="scss" scoped> <style lang="scss" scoped>
.playlist-info { .playlist-info {
display: flex; display: flex;
margin-bottom: 40px; margin-bottom: 72px;
padding: var(--main-content-padding);
.info { .info {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@ -558,25 +511,6 @@ export default {
} }
} }
@media (max-width: 600px) {
.playlist-info {
width: calc(100vw - 2 * var(--main-content-padding-x));
display: block;
.cover {
display: flex;
justify-content: center;
align-items: center;
}
.info {
margin-top: 24px;
margin-left: 0;
.title {
font-size: 48px;
}
}
}
}
.special-playlist { .special-playlist {
margin-top: 192px; margin-top: 192px;
margin-bottom: 128px; margin-bottom: 128px;
@ -645,54 +579,6 @@ export default {
} }
} }
.search-box {
display: flex;
justify-content: flex-end;
margin-bottom: 10px;
-webkit-app-region: no-drag;
padding: var(--main-content-padding);
.container {
display: flex;
align-items: center;
height: 32px;
background: var(--color-secondary-bg-for-transparent);
border-radius: 8px;
width: 200px;
}
.svg-icon {
height: 15px;
width: 15px;
color: var(--color-text);
opacity: 0.28;
margin: {
left: 8px;
right: 4px;
bottom: 4px;
}
}
input {
font-size: 16px;
border: none;
background: transparent;
width: 96%;
font-weight: 600;
margin-top: -1px;
color: var(--color-text);
}
.active {
background: var(--color-primary-bg-for-transparent);
input,
.svg-icon {
opacity: 1;
color: var(--color-primary);
}
}
}
.gradient-test { .gradient-test {
background-image: linear-gradient(to left, #92fe9d 0%, #00c9ff 100%); background-image: linear-gradient(to left, #92fe9d 0%, #00c9ff 100%);
} }

11
src/views/search.vue
Unescape View File

@ -13,7 +13,6 @@
:columnNumber="3" :columnNumber="3"
:items="artists.slice(0, 3)" :items="artists.slice(0, 3)"
gap="34px 24px" gap="34px 24px"
:withoutPadding="true"
/> />
</div> </div>
@ -31,7 +30,6 @@
:columnNumber="3" :columnNumber="3"
subTextFontSize="14px" subTextFontSize="14px"
gap="34px 24px" gap="34px 24px"
:withoutPadding="true"
/> />
</div> </div>
</div> </div>
@ -43,7 +41,7 @@
$t("home.seeMore") $t("home.seeMore")
}}</router-link></div }}</router-link></div
> >
<TrackList :tracks="tracks" type="tracklist" :withoutPadding="true" /> <TrackList :tracks="tracks" type="tracklist" />
</div> </div>
<div class="music-videos" v-show="musicVideos.length > 0"> <div class="music-videos" v-show="musicVideos.length > 0">
@ -53,7 +51,7 @@
$t("home.seeMore") $t("home.seeMore")
}}</router-link></div }}</router-link></div
> >
<MvRow :mvs="musicVideos.slice(0, 5)" :withoutPadding="true" /> <MvRow :mvs="musicVideos.slice(0, 5)" />
</div> </div>
<div class="playlists" v-show="playlists.length > 0"> <div class="playlists" v-show="playlists.length > 0">
@ -70,7 +68,6 @@
:columnNumber="6" :columnNumber="6"
subTextFontSize="14px" subTextFontSize="14px"
gap="34px 24px" gap="34px 24px"
:withoutPadding="true"
/> />
</div> </div>
@ -218,10 +215,6 @@ export default {
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.search {
padding: var(--main-content-padding);
}
.section-title { .section-title {
font-weight: 600; font-weight: 600;
font-size: 22px; font-size: 22px;

1
src/views/searchType.vue
Unescape View File

@ -140,7 +140,6 @@ export default {
h1 { h1 {
margin-top: -10px; margin-top: -10px;
margin-bottom: 28px; margin-bottom: 28px;
padding: var(--main-content-padding);
color: var(--color-text); color: var(--color-text);
span { span {
opacity: 0.58; opacity: 0.58;

1
src/views/settings.vue
Unescape View File

@ -460,7 +460,6 @@ export default {
.settings { .settings {
display: flex; display: flex;
justify-content: center; justify-content: center;
padding: var(--main-content-padding);
} }
.container { .container {
margin-top: 24px; margin-top: 24px;

Write Preview
Loading…
Cancel
Save