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

Changed MusicBox to circular shape and made the visualizer responsive

pull/17/head
Nikan Dalvand 2019-07-24 21:10:41 +04:30
parent 9aecf4395b
commit f345ebd82c
2 changed files with 9 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/renderer/components/MusicBox.vue
View File

@ -26,7 +26,7 @@ export default {
div.music-box div.music-box
width: 140px width: 140px
img img
border-radius: 4px border-radius: 100%
width: 100% width: 100%
height: auto height: auto
box-shadow: 0px 10px 60px -2px rgba(0,0,0,0.60) box-shadow: 0px 10px 60px -2px rgba(0,0,0,0.60)
@ -36,6 +36,7 @@ div.music-box
white-space: nowrap white-space: nowrap
overflow: hidden overflow: hidden
margin: 0.5rem 0 margin: 0.5rem 0
text-align: center
&.title &.title
font-size: .9rem font-size: .9rem
&.artist &.artist

11
src/renderer/layouts/PlayerBar.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<section> <section class="player">
<img class="artwork" src="/static/demo/artwork.jpg" /> <img class="artwork" src="/static/demo/artwork.jpg" />
<div> <div>
<p class="title">Perfidia</p> <p class="title">Perfidia</p>
@ -24,7 +24,8 @@ export default {
barHeight: 1, barHeight: 1,
barGap: null, barGap: null,
autoCenter: true, autoCenter: true,
height: 64 height: 64,
responsive: true
}) })
wavesurfer.load('/static/demo/music.mp3') wavesurfer.load('/static/demo/music.mp3')
wavesurfer.on('ready', function () { wavesurfer.on('ready', function () {
@ -34,8 +35,8 @@ export default {
} }
</script> </script>
<style lang="sass" scoped> <style lang="sass">
section section.player
display: flex display: flex
align-items: center align-items: center
border-top: 1px solid rgba(0,0,0,0.1) border-top: 1px solid rgba(0,0,0,0.1)
@ -52,4 +53,6 @@ section
.visualizer .visualizer
flex-grow: 1 flex-grow: 1
height: 64px height: 64px
wave
overflow-x: hidden !important
</style> </style>