mirror of
https://github.com/Dvorinka/swingmusic-extended.git
synced 2026-06-04 12:33:03 +00:00
geoffrey45
194a615b2d
+ fix: persistent updating text on update playlist modal
+ move router routes to a separate file
+ lazy import route components
+ remove loading: lazy from songcard
+ remove unused imports on navigation component
71 lines
1.4 KiB
Vue
71 lines
1.4 KiB
Vue
<template>
|
|
<router-link :to="{ name: Routes.folder, params: { path: folder.path } }">
|
|
<div class="f-item">
|
|
<div class="icon">
|
|
<FolderSvg v-if="!folder.is_sym" />
|
|
<SymLinkSvg v-if="folder.is_sym" />
|
|
</div>
|
|
<div class="info">
|
|
<div class="f-item-text ellip">{{ folder.name }}</div>
|
|
<div class="separator no-border"></div>
|
|
<div class="f-item-count">{{ folder.trackcount }} tracks</div>
|
|
</div>
|
|
</div>
|
|
</router-link>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { Folder } from "@/interfaces";
|
|
import { Routes } from "@/composables/enums";
|
|
|
|
import FolderSvg from "@/assets/icons/folder.svg";
|
|
import SymLinkSvg from "@/assets/icons/symlink.svg";
|
|
|
|
defineProps<{
|
|
folder: Folder;
|
|
}>();
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.f-container .f-item {
|
|
height: 5rem;
|
|
display: grid;
|
|
grid-template-columns: max-content 1fr;
|
|
padding-right: 1rem;
|
|
align-items: center;
|
|
background-color: $gray3;
|
|
transition: all 0.2s ease;
|
|
border-radius: 0.75rem;
|
|
|
|
@include phone-only {
|
|
height: 4rem;
|
|
}
|
|
|
|
.icon {
|
|
margin: 0 0.75rem;
|
|
}
|
|
|
|
.info {
|
|
.f-item-count {
|
|
font-size: 0.8rem;
|
|
color: rgb(219, 217, 217);
|
|
}
|
|
|
|
.f-item-text {
|
|
text-align: left;
|
|
}
|
|
}
|
|
|
|
&:hover {
|
|
background: #0575e6;
|
|
background: linear-gradient(to top right, #021b79, #0575e6);
|
|
background-size: 105% 105%;
|
|
background-position-x: -$small;
|
|
|
|
.f-item-count {
|
|
color: #ffffff;
|
|
}
|
|
}
|
|
}
|
|
</style>
|