mirror of
https://github.com/GiriNeko/YesPlayMusic.git
synced 2025-12-17 21:58:03 +00:00
fix: revert some code
This commit is contained in:
qier222
parent
6e57766433
commit
94ef0934a5
19 changed files with 54 additions and 455 deletions
|
|
@ -1,9 +1,5 @@
|
|||
<template>
|
||||
<div
|
||||
class="cover-row"
|
||||
:style="rowStyles"
|
||||
:class="{ 'without-padding': withoutPadding }"
|
||||
>
|
||||
<div class="cover-row" :style="rowStyles">
|
||||
<div
|
||||
class="item"
|
||||
v-for="item in items"
|
||||
|
|
@ -54,7 +50,6 @@ export default {
|
|||
showPlayCount: { type: Boolean, default: false },
|
||||
columnNumber: { type: Number, default: 5 },
|
||||
gap: { type: String, default: "44px 24px" },
|
||||
withoutPadding: { type: Boolean, default: false },
|
||||
},
|
||||
computed: {
|
||||
rowStyles() {
|
||||
|
|
@ -119,13 +114,6 @@ export default {
|
|||
<style lang="scss" scoped>
|
||||
.cover-row {
|
||||
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 {
|
||||
|
|
@ -155,18 +143,6 @@ export default {
|
|||
}
|
||||
}
|
||||
|
||||
@media (max-width: 800px) {
|
||||
.item {
|
||||
width: 256px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 600px) {
|
||||
.item {
|
||||
width: 192px;
|
||||
}
|
||||
}
|
||||
|
||||
.item.artist {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<nav :class="{ 'search-box-open': isSearchBoxOpen }">
|
||||
<nav>
|
||||
<div class="win32-titlebar">
|
||||
<div class="title">YesPlayMusic</div>
|
||||
<div class="controls">
|
||||
|
|
@ -51,9 +51,6 @@
|
|||
v-if="settings.showGithubIcon !== false"
|
||||
><svg-icon icon-class="github" class="github"
|
||||
/></a>
|
||||
<button-icon @click.native="toggleSearchBox()" class="search-button">
|
||||
<svg-icon icon-class="search" />
|
||||
</button-icon>
|
||||
<div class="search-box">
|
||||
<div class="container" :class="{ active: inputFocus }">
|
||||
<svg-icon icon-class="search" />
|
||||
|
|
@ -96,7 +93,6 @@ export default {
|
|||
inputFocus: false,
|
||||
langs: ["zh-CN", "en"],
|
||||
keywords: "",
|
||||
isSearchBoxOpen: false,
|
||||
windowIsMaximized: win ? win.isMaximized() : true,
|
||||
};
|
||||
},
|
||||
|
|
@ -121,9 +117,6 @@ export default {
|
|||
params: { keywords: this.keywords },
|
||||
});
|
||||
},
|
||||
toggleSearchBox() {
|
||||
this.isSearchBoxOpen = !this.isSearchBoxOpen;
|
||||
},
|
||||
windowMinimize() {
|
||||
win.minimize();
|
||||
},
|
||||
|
|
@ -158,9 +151,6 @@ nav {
|
|||
left: 10vw;
|
||||
}
|
||||
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);
|
||||
z-index: 100;
|
||||
|
|
@ -368,75 +358,9 @@ nav {
|
|||
color: var(--color-text);
|
||||
-webkit-app-region: no-drag;
|
||||
}
|
||||
@media (max-width: 400px) {
|
||||
.github {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
.search-button {
|
||||
display: none;
|
||||
-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>
|
||||
|
|
|
|||
|
|
@ -62,10 +62,7 @@
|
|||
<div class="middle-control-buttons">
|
||||
<div class="blank"></div>
|
||||
<div class="container" @click.stop>
|
||||
<button-icon
|
||||
@click.native="previous"
|
||||
:title="$t('player.previous')"
|
||||
class="auto-hide"
|
||||
<button-icon @click.native="previous" :title="$t('player.previous')"
|
||||
><svg-icon icon-class="previous"
|
||||
/></button-icon>
|
||||
<button-icon
|
||||
|
|
@ -81,7 +78,7 @@
|
|||
</div>
|
||||
<div class="blank"></div>
|
||||
</div>
|
||||
<div class="right-control-buttons auto-hide">
|
||||
<div class="right-control-buttons">
|
||||
<div class="blank"></div>
|
||||
<div class="container" @click.stop>
|
||||
<button-icon
|
||||
|
|
@ -346,18 +343,6 @@ export default {
|
|||
display: flex;
|
||||
}
|
||||
|
||||
@media (max-width: 700px) {
|
||||
.controls {
|
||||
display: flex;
|
||||
}
|
||||
.playing {
|
||||
flex: 1;
|
||||
}
|
||||
.playing .container {
|
||||
pointer-events: none;
|
||||
}
|
||||
}
|
||||
|
||||
.playing .container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
|
@ -463,20 +448,6 @@ export default {
|
|||
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 {
|
||||
// position: fixed;
|
||||
// right: 18px;
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<div class="track-list" :class="{ 'without-padding': withoutPadding }">
|
||||
<div class="track-list">
|
||||
<ContextMenu ref="menu">
|
||||
<div class="item-info">
|
||||
<img :src="rightClickedTrack.al.picUrl | resizeImage(224)" />
|
||||
|
|
@ -26,7 +26,7 @@
|
|||
>
|
||||
<div class="item" @click="addTrackToPlaylist">添加到歌单</div>
|
||||
</ContextMenu>
|
||||
<div :style="listStyles" class="track-list-inner-container">
|
||||
<div :style="listStyles">
|
||||
<TrackListItem
|
||||
v-for="(track, index) in tracks"
|
||||
:track="track"
|
||||
|
|
@ -78,6 +78,10 @@ export default {
|
|||
return []; // 'removeTrackFromPlaylist'
|
||||
},
|
||||
},
|
||||
columnNumber: {
|
||||
type: Number,
|
||||
default: 4,
|
||||
},
|
||||
highlightPlayingTrack: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
|
|
@ -86,10 +90,6 @@ export default {
|
|||
type: String,
|
||||
default: "id",
|
||||
},
|
||||
withoutPadding: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
|
|
@ -107,6 +107,7 @@ export default {
|
|||
this.listStyles = {
|
||||
display: "grid",
|
||||
gap: "4px",
|
||||
gridTemplateColumns: `repeat(${this.columnNumber}, 1fr)`,
|
||||
};
|
||||
}
|
||||
},
|
||||
|
|
@ -239,36 +240,4 @@ export default {
|
|||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.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>
|
||||
<style lang="scss" scoped></style>
|
||||
|
|
|
|||
|
|
@ -193,7 +193,6 @@ button {
|
|||
padding: 8px;
|
||||
border-radius: 12px;
|
||||
user-select: none;
|
||||
transition: all 0.3s;
|
||||
|
||||
.no {
|
||||
display: flex;
|
||||
|
|
@ -294,11 +293,6 @@ button {
|
|||
-webkit-line-clamp: 2;
|
||||
overflow: hidden;
|
||||
}
|
||||
@media (max-width: 600px) {
|
||||
.album {
|
||||
flex: 0;
|
||||
}
|
||||
}
|
||||
.time {
|
||||
font-size: 16px;
|
||||
width: 50px;
|
||||
|
|
@ -313,6 +307,7 @@ button {
|
|||
}
|
||||
|
||||
.track.focus {
|
||||
transition: all 0.3s;
|
||||
background: var(--color-secondary-bg);
|
||||
}
|
||||
|
||||
|
|
@ -359,12 +354,6 @@ button {
|
|||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
@media (max-width: 600px) {
|
||||
.actions {
|
||||
width: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.track.playing {
|
||||
background: var(--color-primary-bg);
|
||||
color: var(--color-primary);
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue