nikan
/
jukebox
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge branch 'development' of github.com:nikandlv/jukebox into development

pull/22/head
Nikan Dalvand 2019-07-26 19:50:28 +04:30
parent ff20b7b668 c47f8cb090
commit b5e5a8e80f
3 changed files with 41 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/renderer/components/Badge.vue
View File

@ -18,7 +18,7 @@ export default {
// base styles // base styles
width: 1rem width: 1rem
height: 1rem height: 1rem
background-color: #336cfb background-color: #0076F9
display: flex display: flex
justify-content: center justify-content: center
align-items: center align-items: center

22
src/renderer/components/Button.vue
View File

@ -29,13 +29,13 @@ export default {
box-sizing: border-box box-sizing: border-box
outline: unset outline: unset
&--contained &--contained
background-color: #336cfb background-color: #0076F9
color: white color: white
font-weight: 600 font-weight: 600
&:hover &:hover
background-color: lighten(#336cfb,5) background-color: lighten(#0076F9,5)
&:focus,&:active &:focus,&:active
background-color: darken(#336cfb,5) background-color: darken(#0076F9,5)
svg svg
width: 14px width: 14px
@ -54,26 +54,26 @@ export default {
background-color: rgba(0,0,0,.15) background-color: rgba(0,0,0,.15)
&--raised &--raised
background-color: #336cfb background-color: #0076F9
color: white color: white
font-weight: 600 font-weight: 600
box-shadow: 0 .3rem .7rem rgba(#336cfb , .5) box-shadow: 0 .3rem .7rem rgba(#0076F9 , .5)
&:hover &:hover
background-color: lighten(#336cfb,5) background-color: lighten(#0076F9,5)
&:focus,&:active &:focus,&:active
background-color: darken(#336cfb,5) background-color: darken(#0076F9,5)
&--outlined &--outlined
background-color: white background-color: white
border: 1px solid #336cfb border: 1px solid #0076F9
svg svg
fill: #336cfb fill: #0076F9
&:focus,&:active &:focus,&:active
background-color: darken(#336cfb,5) background-color: darken(#0076F9,5)
color: white color: white
svg svg
fill: white fill: white
&:hover &:hover
background-color: #336cfb background-color: #0076F9
color: white color: white
svg svg
fill: white fill: white

35
src/renderer/components/ListItem.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<li> <li :class="{ 'active': active === true }" @click="toggleActive">
<div class="song"> <div class="song">
<img :src="item.artwork" alt="Artwork"> <img :src="item.artwork" alt="Artwork">
{{item.title}} {{item.title}}
@ -16,9 +16,22 @@
</template> </template>
<script> <script>
export default { export default {
name: 'ListItem', name: 'ListItem',
props: ['item'] props: ['item'],
data () {
return {
active: false
}
},
methods: {
toggleActive () {
this.active = !this.active
}
}
} }
</script> </script>
@ -29,12 +42,25 @@ li
display: flex display: flex
justify-content: space-between justify-content: space-between
margin-bottom: .6rem margin-bottom: .6rem
padding: .4rem .8rem
border-radius: .5rem
&.active
background-color: #0076F9
color: white
box-shadow: 0px 3px 5px -1px rgba(0,0,0,0.2), 0px 6px 10px 0px rgba(0,0,0,0.14), 0px 1px 18px 0px rgba(0,0,0,0.12)
div.song div.song
display: flex display: flex
align-items: center align-items: center
flex: 1 0 50% flex: 1 0 50%
img
width: 4rem
height: 4rem
margin-right: .6rem
border-radius: 50%
div.artist div.artist
display: flex display: flex
align-items: center align-items: center
@ -46,10 +72,5 @@ li
justify-content: center justify-content: center
flex: 1 0 15% flex: 1 0 15%
img
width: 4rem
height: 4rem
margin-right: .6rem
border-radius: 10rem
</style> </style>