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

redesign search tab switcher buttons

Browse Source 
~ imitate ubuntu-style tabbed buttons
This commit is contained in:
geoffrey45
2022-08-03 13:34:20 +03:00
parent aeb9cb1d1c
commit 2b6b4078fa
18 changed files with 138 additions and 161 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/shared/ArtistCard.vue
+4 -11
View File
@@ -1,9 +1,6 @@
<template>
<div class="xartist" :class="{ _is_on_sidebar: alt }">
<div
class="artist-image image bg-black-sm"
:style="{ backgroundImage: `url('${imguri + artist.image}')` }"
></div>
<img class="artist-image shadow-sm" :src="imguri + artist.image" alt="" />
<div>
<p class="artist-name t-center ellipsis">{{ artist.name }}</p>
</div>
@@ -38,22 +35,18 @@ defineProps<{
cursor: pointer;
.artist-image {
width: 8em;
height: 8em;
width: 8rem;
height: 8rem;
border-radius: 60%;
margin-bottom: $small;
background-size: 8rem 8rem;
background-position: center;
background-repeat: no-repeat;
transition: all 0.5s ease-in-out;
transition-delay: 0.25s;
object-fit: cover;
}
&:hover {
.artist-image {
background-position: 50% 20%;
border-radius: 20%;
background-size: 10rem 10rem;
}
}
src/components/shared/TrackItem.vue
+18 -18
View File
@@ -36,15 +36,15 @@
<script setup lang="ts">
import { ref } from "vue";
import { ContextSrc } from "../../composables/enums";
import { putCommas } from "../../composables/perks";
import trackContext from "../../contexts/track_context";
import { Track } from "../../interfaces";
import { ContextSrc } from "@/composables/enums";
import { putCommas } from "@/composables/perks";
import trackContext from "@/contexts/track_context";
import { Track } from "@/interfaces";
import { paths } from "../../config";
import useContextStore from "../../stores/context";
import useModalStore from "../../stores/modal";
import useQueueStore from "../../stores/queue";
import { paths } from "@/config";
import useContextStore from "@/stores/context";
import useModalStore from "@/stores/modal";
import useQueueStore from "@/stores/queue";
const contextStore = useContextStore();
const imguri = paths.images.thumb;
@@ -84,7 +84,7 @@ const playThis = (track: Track) => {
<style lang="scss">
.currentInQueue {
background-color: $gray3;
background: linear-gradient(37deg, $gray4, $gray3, $gray3);
}
.contexton {
@@ -93,17 +93,15 @@ const playThis = (track: Track) => {
}
.track-item {
display: flex;
display: grid;
grid-template-columns: min-content 1fr;
align-items: center;
border-radius: 0.5rem;
position: relative;
height: 4rem;
padding: 0.5rem 0.5rem 0.5rem 4rem;
text-transform: capitalize;
padding: $small 1rem;
// text-transform: capitalize;
&:hover {
cursor: pointer;
background-color: $gray4 !important;
background: linear-gradient(37deg, $gray4, $gray3, $gray3);
}
hr {
@@ -111,9 +109,11 @@ const playThis = (track: Track) => {
margin: 0.1rem;
}
// .tags {
// border: solid 1px;
// }
.album-art {
position: absolute;
left: $small;
display: flex;
align-items: center;
justify-content: center;