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

use v-auto-animate small parts of the UI

Browse Source
This commit is contained in:
geoffrey45
2022-09-30 10:14:45 +03:00
committed by Mungai Njoroge
parent 52cec1d906
commit 446536f2d8
20 changed files with 37 additions and 76 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/AlbumView/Header.vue
+1 -1
View File
@@ -19,7 +19,7 @@
>
<div class="album-info">
<div class="top">
<div class="h">
<div v-auto-animate class="h">
<span v-if="album.is_soundtrack">Soundtrack</span>
<span v-else-if="album.is_compilation">Compilation</span>
<span v-else-if="album.is_single">Single</span>
src/components/BottomBar.vue
+1 -42
View File
@@ -104,7 +104,6 @@ const settings = useSettingsStore();
}
.centered {
width: 50rem;
display: grid;
align-items: center;
width: max-content;
@@ -150,8 +149,7 @@ const settings = useSettingsStore();
}
.info {
width: 30rem;
// width: 100%;
max-width: 30rem;
.with-title {
display: grid;
@@ -208,44 +206,5 @@ const settings = useSettingsStore();
display: grid;
place-content: end;
}
// width: 100%;
// .time {
// display: grid;
// grid-template-columns: repeat(3, 1fr);
// align-items: center;
// .full {
// text-align: end;
// }
// }
// .info {
// display: grid;
// grid-template-columns: max-content 1fr;
// gap: 1rem;
// img {
// height: 6rem;
// width: auto;
// }
// .tags {
// display: flex;
// flex-direction: column;
// justify-content: flex-end;
// gap: $smaller;
// .np-title {
// font-size: 1.15rem;
// font-weight: bold;
// }
// .np-artist {
// opacity: 0.75;
// font-size: 0.9rem;
// }
// }
// }
}
</style>
src/components/LeftSidebar/NP/HotKeys.vue
+1 -1
View File
@@ -3,7 +3,7 @@
<button @click.prevent="q.playPrev">
<PrevSvg />
</button>
<button @click.prevent="q.playPause">
<button v-auto-animate @click.prevent="q.playPause">
<PauseSvg v-if="q.playing" />
<PlaySvg v-else />
</button>
src/components/LeftSidebar/index.vue
+4 -4
View File
@@ -1,20 +1,20 @@
<template>
<div class="l-sidebar noscroll">
<div v-auto-animate class="l-sidebar noscroll">
<div class="withlogo">
<Logo />
<Navigation />
</div>
<NPImg v-if="settings.use_np_img" />
<NowPlayingImage v-if="settings.use_np_img" />
</div>
</template>
<script setup lang="ts">
import Navigation from "@/components/LeftSidebar/Navigation.vue";
import NPImg from "./NowPlayingImg.vue";
import NowPlayingImage from "./NowPlayingImg.vue";
import Logo from "@/components/Logo.vue";
import useSettingsStore from "@/stores/settings";
const settings = useSettingsStore();
</script>
</script>
src/components/RightSideBar/Main.vue
+1 -1
View File
@@ -1,7 +1,7 @@
<template>
<div class="r-sidebar">
<SearchInput />
<div class="r-content noscroll">
<div v-auto-animate class="r-content noscroll" >
<div class="r-dash" v-if="tabs.current === tabs.tabs.home">
<DashBoard />
</div>
src/components/RightSideBar/Queue.vue
+1 -1
View File
@@ -7,7 +7,7 @@
@mouseover="mouseover = true"
@mouseout="mouseover = false"
>
<div class="inner" v-bind="wrapperProps">
<div class="inner" v-bind="wrapperProps" >
<TrackItem
style="height: 64px"
v-for="t in tracks"
src/components/RightSideBar/Search/ArtistGrid.vue
+3 -1
View File
@@ -1,12 +1,14 @@
<template>
<div class="artists-results">
<div class="artists-results" v-auto-animate>
<div
v-auto-animate
class="search-results-grid"
v-if="album_grid == true && search.albums.value.length"
>
<AlbumCard v-for="a in search.albums.value" :key="a.albumid" :album="a" />
</div>
<div
v-auto-animate
class="search-results-grid"
v-else-if="!album_grid && search.artists.value.length"
>
src/components/RightSideBar/Search/TabsWrapper.vue
+1 -1
View File
@@ -16,7 +16,7 @@
</Teleport>
</div>
<div id="tab-content">
<div id="tab-content" v-auto-animate>
<slot />
</div>
</div>
src/components/RightSideBar/Search/TracksGrid.vue
+1 -1
View File
@@ -1,6 +1,6 @@
<template>
<div id="tracks-results" class="noscroll">
<div v-if="search.tracks.value.length">
<div v-if="search.tracks.value.length" v-auto-animate>
<TrackComponent
v-for="(track, index) in search.tracks.value"
:key="track.trackid"
src/components/RightSideBar/SearchInput.vue
+1
View File
@@ -2,6 +2,7 @@
<div class="gsearch-input">
<div id="ginner" tabindex="0" ref="inputRef">
<button
v-auto-animate
:title="
tabs.current === tabs.tabs.search ? 'back to queue' : 'go to search'
"
src/components/nav/NavBar.vue
+4 -2
View File
@@ -10,7 +10,10 @@
v-if="$route.name == Routes.album || $route.name == Routes.playlist"
:header_shown="nav.h_visible"
/>
<SettingsTitle v-if="$route.name == Routes.settings" :text="'Settings'" />
<SettingsTitle
v-if="$route.name == Routes.settings"
:text="'Settings'"
/>
<FolderTitle v-if="$route.name == Routes.folder" :subPaths="subPaths" />
<SearchTitle v-if="$route.name == Routes.search" />
<PlaylistsTitle v-if="$route.name == Routes.playlists" />
@@ -43,7 +46,6 @@ const nav = useNavStore();
const subPaths = ref<subPath[]>([]);
watch(
() => route.name,
(newRoute) => {
src/components/nav/Titles/Folder.vue
+4 -7
View File
@@ -121,13 +121,10 @@ onUpdated(() => {
}
}
// .inthisfolder > .text {
// color: #fff;
// font-weight: bold;
// background-color: $gray;
// transition: all 0.5s;
// }
.inthisfolder > .text {
background-color: $gray;
transition: all 0.5s;
}
}
}
}
src/components/shared/SongItem.vue
+1 -1
View File
@@ -12,7 +12,7 @@
<HeartSvg />
</div>
<div class="flex">
<div @click.pre@dblclick.prevent="emitUpdate" class="thumbnail">
<div v-auto-animate @click.pre@dblclick.prevent="emitUpdate" class="thumbnail">
<img
loading="lazy"
:src="imguri + track.image"