mirror of
https://github.com/Dvorinka/swingmusic-extended.git
synced 2026-06-03 20:13:02 +00:00
use v-auto-animate small parts of the UI
This commit is contained in:
geoffrey45
committed by
Mungai Njoroge
Mungai Njoroge
parent
52cec1d906
commit
446536f2d8
@@ -9,6 +9,7 @@
|
||||
"lint": "eslint --ext .js,.vue --ignore-path .gitignore --fix src"
|
||||
},
|
||||
"dependencies": {
|
||||
"@formkit/auto-animate": "^1.0.0-beta.3",
|
||||
"@popperjs/core": "^2.11.6",
|
||||
"@vueuse/components": "^9.2.0",
|
||||
"@vueuse/core": "^8.5.0",
|
||||
|
||||
+1
-2
@@ -8,7 +8,7 @@
|
||||
:class="{
|
||||
noSidebar: !settings.use_sidebar || !xl,
|
||||
NoSideBorders: !xxl,
|
||||
extendWidth: settings.extend_width && settings.extend_width_enabled,
|
||||
extendWidth: settings.extend_width && settings.can_extend_width,
|
||||
}"
|
||||
>
|
||||
<LeftSidebar />
|
||||
@@ -16,7 +16,6 @@
|
||||
<div id="acontent" v-element-size="updateContentElemSize">
|
||||
<router-view />
|
||||
</div>
|
||||
<!-- <SearchInput v-if="settings.use_sidebar && xl" /> -->
|
||||
<RightSideBar v-if="settings.use_sidebar && xl" />
|
||||
<BottomBar />
|
||||
</section>
|
||||
|
||||
@@ -76,11 +76,6 @@ $g-border: solid 1px $gray5;
|
||||
//reduce width to match #acontent
|
||||
width: calc(100% - 1rem);
|
||||
}
|
||||
|
||||
// show scrollbars on search page
|
||||
// .search-view {
|
||||
// margin-right: -1rem;
|
||||
// }
|
||||
}
|
||||
|
||||
#app-grid.NoSideBorders {
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
@@ -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>
|
||||
|
||||
@@ -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"
|
||||
|
||||
@@ -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"
|
||||
>
|
||||
|
||||
@@ -16,7 +16,7 @@
|
||||
</Teleport>
|
||||
</div>
|
||||
|
||||
<div id="tab-content">
|
||||
<div id="tab-content" v-auto-animate>
|
||||
<slot />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -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"
|
||||
|
||||
@@ -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'
|
||||
"
|
||||
|
||||
@@ -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) => {
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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"
|
||||
|
||||
+4
-4
@@ -1,9 +1,8 @@
|
||||
import "./assets/scss/index.scss";
|
||||
|
||||
import { createApp } from "vue";
|
||||
import { createPinia } from "pinia";
|
||||
import { autoAnimatePlugin } from "@formkit/auto-animate/vue";
|
||||
import piniaPluginPersistedstate from "pinia-plugin-persistedstate";
|
||||
|
||||
import "./assets/scss/index.scss";
|
||||
|
||||
import App from "./App.vue";
|
||||
import router from "./router";
|
||||
@@ -16,5 +15,6 @@ pinia.use(piniaPluginPersistedstate);
|
||||
app.use(pinia);
|
||||
app.use(router);
|
||||
app.directive("tooltip", vTooltip);
|
||||
app.use(autoAnimatePlugin);
|
||||
|
||||
app.mount("#app")
|
||||
app.mount("#app");
|
||||
|
||||
@@ -9,7 +9,7 @@ const extend_to_full_width: Setting = {
|
||||
type: SettingType.binary,
|
||||
source: () => settings().extend_width,
|
||||
action: () => settings().toggleExtendWidth(),
|
||||
inactive: () => !settings().extend_width_enabled,
|
||||
inactive: () => !settings().can_extend_width,
|
||||
};
|
||||
|
||||
export default [extend_to_full_width];
|
||||
|
||||
@@ -19,7 +19,7 @@ export default defineStore("settings", {
|
||||
},
|
||||
},
|
||||
getters: {
|
||||
extend_width_enabled(): boolean {
|
||||
can_extend_width(): boolean {
|
||||
return xxl.value
|
||||
},
|
||||
},
|
||||
|
||||
@@ -22,6 +22,11 @@
|
||||
minimatch "^3.0.4"
|
||||
strip-json-comments "^3.1.1"
|
||||
|
||||
"@formkit/auto-animate@^1.0.0-beta.3":
|
||||
version "1.0.0-beta.3"
|
||||
resolved "https://registry.yarnpkg.com/@formkit/auto-animate/-/auto-animate-1.0.0-beta.3.tgz#d5eb724ccb44afba9348df32ce0b8bb10037a7ee"
|
||||
integrity sha512-glsi+ytwQpxT/Ctr9GtcIfVr4dO6mJ04mQbNU8MFSdCdqMopHtyfU5Fib0+9lNFIeR0luY4/0NW95/2R5pKsag==
|
||||
|
||||
"@humanwhocodes/config-array@^0.9.2":
|
||||
version "0.9.3"
|
||||
resolved "https://registry.yarnpkg.com/@humanwhocodes/config-array/-/config-array-0.9.3.tgz#f2564c744b387775b436418491f15fce6601f63e"
|
||||
|
||||
Reference in New Issue
Block a user