TDvorak/swingmusic-extended
1
0
Fork 0
mirror of https://github.com/Dvorinka/swingmusic-extended.git synced 2026-06-04 12:33:03 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

minor UI fixes

Browse Source
This commit is contained in:
geoffrey45
2022-05-07 19:33:54 +03:00
parent fb67f568ad
commit f913e59103
19 changed files with 37 additions and 63 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/App.vue
+3 -3
View File
@@ -80,6 +80,7 @@ app_dom.addEventListener("click", (e) => {
cursor: pointer;
}
}
.logo {
height: 4.5rem;
width: 15rem;
@@ -94,10 +95,9 @@ app_dom.addEventListener("click", (e) => {
}
.content {
width: 100%;
padding: 0 $small;
display: grid;
grid-template-rows: 1fr;
margin-top: $small;
overflow: auto;
padding-right: $small !important;
}
</style>
src/assets/css/global.scss
-1
View File
@@ -133,7 +133,6 @@ a {
.content {
grid-area: content;
overflow: hidden;
padding: 0;
max-width: 1504px;
src/assets/icons/4dots.svg
-3
View File
@@ -1,3 +0,0 @@
<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M14 10.8945C16.1182 10.8945 17.8496 9.1543 17.8496 7.03613C17.8496 4.92676 16.1182 3.18652 14 3.18652C11.8643 3.18652 10.1328 4.92676 10.1328 7.03613C10.1328 9.1543 11.8643 10.8945 14 10.8945ZM14 9.26855C12.7344 9.26855 11.7588 8.29297 11.7588 7.03613C11.7588 5.78809 12.7344 4.77734 14 4.77734C15.248 4.77734 16.2324 5.78809 16.2324 7.03613C16.2324 8.29297 15.248 9.26855 14 9.26855ZM7.61035 17.5039C9.71973 17.5039 11.46 15.7637 11.46 13.6455C11.46 11.5361 9.71973 9.7959 7.61035 9.7959C5.47461 9.7959 3.74316 11.5361 3.74316 13.6455C3.74316 15.7637 5.47461 17.5039 7.61035 17.5039ZM20.4072 17.5039C22.5166 17.5039 24.2568 15.7637 24.2568 13.6455C24.2568 11.5361 22.5166 9.7959 20.4072 9.7959C18.2715 9.7959 16.54 11.5361 16.54 13.6455C16.54 15.7637 18.2715 17.5039 20.4072 17.5039ZM7.60156 15.8779C6.34473 15.8779 5.36035 14.9023 5.36035 13.6455C5.36035 12.3975 6.34473 11.3867 7.60156 11.3867C8.8584 11.3867 9.84277 12.3975 9.84277 13.6455C9.84277 14.9023 8.8584 15.8779 7.60156 15.8779ZM20.3984 15.8779C19.1416 15.8779 18.1572 14.9023 18.1572 13.6455C18.1572 12.3975 19.1416 11.3867 20.3984 11.3867C21.6553 11.3867 22.6396 12.3975 22.6396 13.6455C22.6396 14.9023 21.6553 15.8779 20.3984 15.8779ZM14 24.1133C16.1182 24.1133 17.8496 22.3643 17.8496 20.2549C17.8496 18.1455 16.1182 16.4053 14 16.4053C11.8643 16.4053 10.1328 18.1455 10.1328 20.2549C10.1328 22.3643 11.8643 24.1133 14 24.1133ZM14 22.4873C12.7344 22.4873 11.7588 21.5117 11.7588 20.2549C11.7588 19.0068 12.7344 17.9961 14 17.9961C15.248 17.9961 16.2324 19.0068 16.2324 20.2549C16.2324 21.5117 15.248 22.4873 14 22.4873Z" fill="#F2F2F2"/>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 1.7 KiB

src/assets/icons/_search.svg
-1
View File
@@ -1 +0,0 @@
<svg fill="#ffffff" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" width="48px" height="48px"><path d="M 20.5 6 C 12.509634 6 6 12.50964 6 20.5 C 6 28.49036 12.509634 35 20.5 35 C 23.956359 35 27.133709 33.779044 29.628906 31.75 L 39.439453 41.560547 A 1.50015 1.50015 0 1 0 41.560547 39.439453 L 31.75 29.628906 C 33.779044 27.133709 35 23.956357 35 20.5 C 35 12.50964 28.490366 6 20.5 6 z M 20.5 9 C 26.869047 9 32 14.130957 32 20.5 C 32 23.602612 30.776198 26.405717 28.791016 28.470703 A 1.50015 1.50015 0 0 0 28.470703 28.791016 C 26.405717 30.776199 23.602614 32 20.5 32 C 14.130953 32 9 26.869043 9 20.5 C 9 14.130957 14.130953 9 20.5 9 z"/></svg>
Side by Side

Before

Width:  |  Height:  |  Size: 663 B

src/assets/icons/expand.svg
+3
View File
@@ -0,0 +1,3 @@
<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M19.6514 13.6543C19.6426 13.3467 19.5283 13.083 19.291 12.8457L12.4531 6.15723C12.251 5.96387 12.0137 5.8584 11.7236 5.8584C11.1348 5.8584 10.6777 6.31543 10.6777 6.9043C10.6777 7.18555 10.792 7.44922 10.9941 7.65137L17.1465 13.6543L10.9941 19.6572C10.792 19.8594 10.6777 20.1143 10.6777 20.4043C10.6777 20.9932 11.1348 21.4502 11.7236 21.4502C12.0049 21.4502 12.251 21.3447 12.4531 21.1514L19.291 14.4541C19.5371 14.2256 19.6514 13.9619 19.6514 13.6543Z" fill="#F2F2F2"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 585 B

src/assets/icons/menu.svg
-5
View File
@@ -1,5 +0,0 @@
<svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M4.6875 5.625H25.3125V7.5H4.6875V5.625Z" fill="#FFE5E5"/>
<path d="M4.6875 14.0625H25.3125V15.9375H4.6875V14.0625Z" fill="#FFE5E5"/>
<path d="M4.6875 22.5H25.3125V24.375H4.6875V22.5Z" fill="#FFE5E5"/>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 313 B

src/assets/icons/mix.svg
-1
View File
@@ -1 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48"><circle cx="8" cy="3" r="2" fill="#50e6ff"></circle><path fill="#50e6ff" d="M39,12c-0.083,0-0.167-0.01-0.25-0.031l-31-8C7.215,3.83,6.894,3.285,7.032,2.75 S7.714,1.894,8.25,2.031l31,8c0.535,0.139,0.856,0.684,0.718,1.219C39.852,11.701,39.446,12,39,12z"></path><path fill="#0078d4" d="M42,10h-7v30h7c1.105,0,2-0.895,2-2V12C44,10.895,43.105,10,42,10z"></path><path fill="#199be2" d="M35,10H6c-1.105,0-2,0.895-2,2v26c0,1.105,0.895,2,2,2h29V10z"></path><radialGradient id="~~qg2HuBG5nUKPwm5_K0xa" cx="39.5" cy="35" r="4" gradientUnits="userSpaceOnUse"><stop offset="0"></stop><stop offset=".1" stop-opacity=".9"></stop><stop offset="1" stop-opacity="0"></stop></radialGradient><circle cx="39.5" cy="35" r="4" fill="url(#~~qg2HuBG5nUKPwm5_K0xa)"></circle><circle cx="39.5" cy="34.5" r="2.5" fill="#fff"></circle><radialGradient id="~~qg2HuBG5nUKPwm5_K0xb" cx="39.5" cy="16" r="3" gradientUnits="userSpaceOnUse"><stop offset="0"></stop><stop offset=".1" stop-opacity=".9"></stop><stop offset="1" stop-opacity="0"></stop></radialGradient><circle cx="39.5" cy="16" r="3" fill="url(#~~qg2HuBG5nUKPwm5_K0xb)"></circle><circle cx="39.5" cy="15.5" r="1.5" fill="#50e6ff"></circle><radialGradient id="~~qg2HuBG5nUKPwm5_K0xc" cx="39.5" cy="22" r="3" gradientUnits="userSpaceOnUse"><stop offset="0"></stop><stop offset=".1" stop-opacity=".9"></stop><stop offset="1" stop-opacity="0"></stop></radialGradient><circle cx="39.5" cy="22" r="3" fill="url(#~~qg2HuBG5nUKPwm5_K0xc)"></circle><circle cx="39.5" cy="21.5" r="1.5" fill="#50e6ff"></circle><circle cx="19" cy="23" r="1" fill="#184f85"></circle><circle cx="22" cy="17" r="1" fill="#184f85"></circle><circle cx="22" cy="29" r="1" fill="#184f85"></circle><circle cx="19" cy="19" r="1" fill="#184f85"></circle><circle cx="19" cy="31" r="1" fill="#184f85"></circle><circle cx="19" cy="27" r="1" fill="#184f85"></circle><circle cx="25" cy="23" r="1" fill="#184f85"></circle><circle cx="25" cy="19" r="1" fill="#184f85"></circle><circle cx="25" cy="27" r="1" fill="#184f85"></circle><circle cx="22" cy="21" r="1" fill="#184f85"></circle><circle cx="22" cy="25" r="1" fill="#184f85"></circle><circle cx="28" cy="21" r="1" fill="#184f85"></circle><circle cx="28" cy="25" r="1" fill="#184f85"></circle><circle cx="16" cy="29" r="1" fill="#184f85"></circle><circle cx="16" cy="17" r="1" fill="#184f85"></circle><circle cx="13" cy="23" r="1" fill="#184f85"></circle><circle cx="13" cy="27" r="1" fill="#184f85"></circle><circle cx="13" cy="19" r="1" fill="#184f85"></circle><circle cx="16" cy="25" r="1" fill="#184f85"></circle><circle cx="16" cy="21" r="1" fill="#184f85"></circle><circle cx="10" cy="25" r="1" fill="#184f85"></circle><circle cx="22" cy="33" r="1" fill="#184f85"></circle><circle cx="25" cy="31" r="1" fill="#184f85"></circle><circle cx="28" cy="29" r="1" fill="#184f85"></circle><circle cx="16" cy="33" r="1" fill="#184f85"></circle><circle cx="13" cy="31" r="1" fill="#184f85"></circle><circle cx="10" cy="29" r="1" fill="#184f85"></circle><circle cx="10" cy="21" r="1" fill="#184f85"></circle></svg>
Side by Side

Before

Width:  |  Height:  |  Size: 3.0 KiB

src/assets/icons/more.svg
+4 -2
View File
@@ -1,3 +1,5 @@
<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M19.6514 13.6543C19.6426 13.3467 19.5283 13.083 19.291 12.8457L12.4531 6.15723C12.251 5.96387 12.0137 5.8584 11.7236 5.8584C11.1348 5.8584 10.6777 6.31543 10.6777 6.9043C10.6777 7.18555 10.792 7.44922 10.9941 7.65137L17.1465 13.6543L10.9941 19.6572C10.792 19.8594 10.6777 20.1143 10.6777 20.4043C10.6777 20.9932 11.1348 21.4502 11.7236 21.4502C12.0049 21.4502 12.251 21.3447 12.4531 21.1514L19.291 14.4541C19.5371 14.2256 19.6514 13.9619 19.6514 13.6543Z" fill="#F2F2F2"/>
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="7.04999" cy="12.0498" r="1.25" fill="white"/>
<circle cx="12.05" cy="12.0498" r="1.25" fill="white"/>
<circle cx="17.05" cy="12.0498" r="1.25" fill="white"/>
</svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 585 B

After

Width:  |  Height:  |  Size: 273 B

src/assets/icons/next (1).svg
-4
View File
@@ -1,4 +0,0 @@
<svg width="300" height="300" viewBox="0 0 300 300" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x="209" y="44" width="64" height="212" rx="32" fill="white"/>
<path d="M177.783 124.852C195.445 136.743 195.445 162.735 177.783 174.625L71.7533 246.003C51.8259 259.418 25 245.139 25 221.117V78.3604C25 54.3382 51.8259 40.0591 71.7533 53.4741L177.783 124.852Z" fill="white"/>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 387 B

src/assets/icons/options.svg
-5
View File
@@ -1,5 +0,0 @@
<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M8 18C9.10457 18 10 17.1046 10 16C10 14.8954 9.10457 14 8 14C6.89543 14 6 14.8954 6 16C6 17.1046 6.89543 18 8 18Z" fill="white"/>
<path d="M16 18C17.1046 18 18 17.1046 18 16C18 14.8954 17.1046 14 16 14C14.8954 14 14 14.8954 14 16C14 17.1046 14.8954 18 16 18Z" fill="white"/>
<path d="M24 18C25.1046 18 26 17.1046 26 16C26 14.8954 25.1046 14 24 14C22.8954 14 22 14.8954 22 16C22 17.1046 22.8954 18 24 18Z" fill="white"/>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 532 B

src/components/FolderView/FolderList.vue
+2
View File
@@ -31,5 +31,7 @@ const props = defineProps({
display: grid;
grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
gap: $medium;
border-bottom: 1px solid $gray3;
padding-bottom: .55rem;
}
</style>
src/components/PlaylistView/Header.vue
-1
View File
@@ -70,7 +70,6 @@ function showDropdown(e: any) {
grid-template-columns: 1fr;
height: 16rem;
position: relative;
margin-top: $small;
border-radius: 0.75rem;
color: $white;
background-color: transparent;
src/components/contextMenu.vue
+1 -1
View File
@@ -82,7 +82,7 @@ const context = useContextStore();
width: 1.5rem;
position: absolute;
right: 0;
background-image: url("../assets/icons/more.svg");
background-image: url("../assets/icons/expand.svg");
}
.children {
src/components/nav/NavBar.vue
+12 -7
View File
@@ -8,11 +8,6 @@
<div class="info">
<div class="title" v-if="$route.name == 'Playlists'">Playlists</div>
<div class="folder" v-else-if="$route.name == 'FolderView'">
<div class="play">
<PlayBtnRect />
</div>
<Option v-if="$route.name === 'FolderView'" />
<div class="fname">
<div class="icon image"></div>
<div class="ellip">
@@ -27,6 +22,7 @@
<Loader />
</div>
<div class="right">
<div class="more image"></div>
<Search />
</div>
</div>
@@ -35,9 +31,7 @@
<script setup>
import NavButtons from "./NavButtons.vue";
import Loader from "../shared/Loader.vue";
import PlayBtnRect from "../shared/PlayBtnRect.vue";
import Search from "./Search.vue";
import Option from "../shared/Option.vue";
</script>
<style lang="scss">
@@ -85,6 +79,7 @@ import Option from "../shared/Option.vue";
align-items: center;
padding-right: $small;
gap: 0.25rem;
margin-left: $smaller;
.icon {
width: 1.5rem;
@@ -106,6 +101,16 @@ import Option from "../shared/Option.vue";
width: 100%;
display: flex;
gap: $small;
.more {
width: 2.25rem;
aspect-ratio: 1;
height: 100%;
background-color: $gray5;
background-image: url("../../assets/icons/more.svg");
transform: rotate(90deg);
border-radius: $small;
}
}
}
</style>
src/components/nav/Search.vue
-1
View File
@@ -23,7 +23,6 @@
border: none;
padding: $small;
width: 100%;
min-width: 24rem;
color: $white;
font-size: 1rem;
src/views/AlbumView.vue
+3 -3
View File
@@ -41,12 +41,12 @@ onBeforeRouteUpdate(async (to) => {
.al-view {
height: calc(100% - 1rem);
overflow: auto;
margin: $small $small;
margin: $small;
margin-right: 0;
scrollbar-width: none;
.songs {
padding: $small;
min-height: calc(100% - 32rem);
min-height: calc(100% - 31.5rem);
}
&::-webkit-scrollbar {
src/views/FolderView.vue
+2 -17
View File
@@ -1,11 +1,7 @@
<template>
<div id="f-view-parent" class="rounded">
<div id="f-view-parent">
<div id="scrollable" ref="scrollable">
<FolderList :folders="FStore.dirs" />
<div
class="separator"
v-if="FStore.dirs.length && FStore.tracks.length"
></div>
<SongList :tracks="FStore.tracks" :path="FStore.path" />
</div>
</div>
@@ -19,7 +15,6 @@ import SongList from "@/components/FolderView/SongList.vue";
import FolderList from "@/components/FolderView/FolderList.vue";
import useFStore from "../stores/folder";
import state from "../composables/state";
import useLoaderStore from "../stores/loader";
const loader = useLoaderStore();
@@ -42,9 +37,7 @@ onBeforeRouteUpdate((to) => {
<style lang="scss">
#f-view-parent {
position: relative;
padding: 0 $small 0 $small;
overflow: hidden;
margin: $small;
padding: 0 0 0 $small;
margin-top: $small;
.h {
@@ -53,17 +46,9 @@ onBeforeRouteUpdate((to) => {
}
}
// #f-view-parent .fixed {
// position: absolute;
// height: min-content;
// width: calc(100% - 1rem);
// top: 0.5rem;
// }
#scrollable {
overflow-y: auto;
height: calc(100% - $small);
padding-right: $small;
scrollbar-color: grey transparent;
@include phone-only {
src/views/PlaylistView.vue
+5 -6
View File
@@ -38,17 +38,16 @@ const playlist = usePTrackStore();
<style lang="scss">
.playlist-view {
height: calc(100% - 0rem);
margin: 0 $small;
overflow: auto;
padding-bottom: $small;
scrollbar-width: none;
height: calc(100% - 0.5rem);
margin-top: $small;
margin-left: $small;
// border: solid 1px;
&::-webkit-scrollbar {
display: none;
}
.songlist {
padding: $small;
min-height: calc(100% - 32rem);
}
}