tcsenpai/swingmusic
1
0
Fork 0
mirror of https://github.com/tcsenpai/swingmusic.git synced 2025-06-09 04:35:36 +00:00
Code Issues Packages Projects Releases Wiki Activity

minor refactoring

Browse Source
This commit is contained in:
geoffrey45 2021-12-05 22:29:54 +03:00
parent 4e2d9fd1e0
commit 843bde1b7e
3 changed files with 91 additions and 92 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/App.vue
View File

@ -177,10 +177,6 @@ export default {
.collapsed #settings-button #text { .collapsed #settings-button #text {
display: none; display: none;
} }
.r-sidebar {
position: relative;
margin-bottom: 0.5em;
}
.m-np { .m-np {
position: absolute; position: absolute;
bottom: 0; bottom: 0;

32
src/assets/css/global.css
View File

@ -1,13 +1,13 @@
:root { :root {
--seperator: #ffffff46; --seperator: #ffffff46;
--green: #4AD168; --green: #4ad168;
} }
body { body {
margin: 0; margin: 0;
background: #0d0e0e; background: #0d0e0e;
color: #fff; color: #fff;
font-family: 'Helvetica Neue', sans-serif; font-family: "Helvetica Neue", sans-serif;
font-size: 1rem; font-size: 1rem;
} }
@ -44,7 +44,7 @@ a {
.l-container { .l-container {
display: grid; display: grid;
grid-template-columns: min-content 4fr 30rem; grid-template-columns: min-content 4fr min-content;
grid-template-rows: 4rem 1fr 1fr; grid-template-rows: 4rem 1fr 1fr;
grid-auto-flow: row; grid-auto-flow: row;
grid-template-areas: "l-sidebar content r-sidebar" "l-sidebar content r-sidebar" "l-sidebar content r-sidebar"; grid-template-areas: "l-sidebar content r-sidebar" "l-sidebar content r-sidebar" "l-sidebar content r-sidebar";
@ -79,8 +79,8 @@ a {
width: 250px; width: 250px;
grid-area: l-sidebar; grid-area: l-sidebar;
padding-top: 0.5rem; padding-top: 0.5rem;
margin: .5rem 0 .5rem .5rem; margin: 0.5rem 0 0.5rem 0.5rem;
border-radius: .5rem; border-radius: 0.5rem;
background-color: #131313b2; background-color: #131313b2;
transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1); transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
transition-duration: 0.3s; transition-duration: 0.3s;
@ -101,16 +101,25 @@ a {
.content { .content {
grid-area: content; grid-area: content;
border-radius: .25rem; border-radius: 0.25rem;
padding: .5rem; padding: 0.5rem;
overflow: hidden; overflow: hidden;
} }
.r-sidebar { .r-sidebar {
grid-area: r-sidebar; grid-area: r-sidebar;
border-radius: 5px; border-radius: 5px;
margin-right: .5rem; margin-right: 0.5rem;
overflow-y: auto; overflow-y: auto;
width: 30em;
position: relative;
margin-bottom: 0.5em;
}
@media (max-width: 70em) {
.r-sidebar {
display: none;
}
} }
.image { .image {
@ -125,17 +134,14 @@ a {
white-space: nowrap; white-space: nowrap;
} }
/* scrollbars */ /* scrollbars */
/* width */ /* width */
::-webkit-scrollbar { ::-webkit-scrollbar {
width: .5rem; width: 0.5rem;
} }
/* Track */ /* Track */
::-webkit-scrollbar-track { ::-webkit-scrollbar-track {
@ -143,7 +149,6 @@ a {
border-radius: 1rem; border-radius: 1rem;
} }
/* Handle */ /* Handle */
::-webkit-scrollbar-thumb { ::-webkit-scrollbar-thumb {
@ -151,7 +156,6 @@ a {
border-radius: 1rem; border-radius: 1rem;
} }
/* Handle on hover */ /* Handle on hover */
::-webkit-scrollbar-thumb:hover { ::-webkit-scrollbar-thumb:hover {

11
src/components/FolderView/SongList.vue
View File

@ -43,23 +43,22 @@ export default {
const songtitle = ref(null); const songtitle = ref(null);
const songTitleWidth = ref(null); const songTitleWidth = ref(null);
const minWidth = ref(250); const minWidth = ref(300);
const songs = Songs.songs; const songs = Songs.songs;
const resizeSongTitleWidth = () => { const resizeSongTitleWidth = () => {
songTitleWidth.value = let a = songtitle.value.clientWidth;
songtitle.value.clientWidth > minWidth.value * 4
? songtitle.value.clientWidth / 4 songTitleWidth.value = a > minWidth.value * 4 ? a / 4 : a / 3;
: (songTitleWidth.value = songtitle.value.clientWidth / 3);
}; };
onMounted(() => { onMounted(() => {
resizeSongTitleWidth(); resizeSongTitleWidth();
window.addEventListener("resize", () => { window.addEventListener("resize", () => {
resizeSongTitleWidth(); resizeSongTitleWidth();
}); });
console.log(songTitleWidth.value);
}); });
onUnmounted(() => { onUnmounted(() => {