Changed fullscreen effect on components and moved into another section
Nikan Dalvand
parent
50b9cf288c
commit
60b41c838f
|
|
@ -2,7 +2,7 @@
|
||||||
<div id="app" class="root">
|
<div id="app" class="root">
|
||||||
<DockableSidebar />
|
<DockableSidebar />
|
||||||
<div class="page-wrapper">
|
<div class="page-wrapper">
|
||||||
<router-view class="page" :class="{'fullscreen' : fullscreenStatus}"></router-view>
|
<router-view class="page"></router-view>
|
||||||
<PlayerBar class="player-bar" />
|
<PlayerBar class="player-bar" />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -31,7 +31,8 @@ $lato-font-path: '/node_modules/lato-font/fonts'
|
||||||
|
|
||||||
@include lato-include-font('normal')
|
@include lato-include-font('normal')
|
||||||
|
|
||||||
|
.root
|
||||||
|
position: relative
|
||||||
.root,.page-wrapper
|
.root,.page-wrapper
|
||||||
display: flex
|
display: flex
|
||||||
@include lato-font('normal')
|
@include lato-font('normal')
|
||||||
|
|
|
||||||
|
|
@ -1,6 +1,6 @@
|
||||||
<template>
|
<template>
|
||||||
<div>
|
<div>
|
||||||
<section class="handle" :class="{'open': menuStatus, 'fullscreen': fullscreenStatus}">
|
<section class="handle" :class="{'open': menuStatus}">
|
||||||
<div @click="toggleMenuStatus" class="icon">
|
<div @click="toggleMenuStatus" class="icon">
|
||||||
<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 384.97 384.97" style="enable-background:new 0 0 384.97 384.97;" xml:space="preserve">
|
<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 384.97 384.97" style="enable-background:new 0 0 384.97 384.97;" xml:space="preserve">
|
||||||
<g>
|
<g>
|
||||||
|
|
@ -16,8 +16,8 @@
|
||||||
</div>
|
</div>
|
||||||
<Logo :nopadding="true"/>
|
<Logo :nopadding="true"/>
|
||||||
</section>
|
</section>
|
||||||
<section class="overlay" :class="{'open': menuStatus, 'fullscreen': fullscreenStatus}" @click="toggleMenuStatus" />
|
<section class="overlay" :class="{'open': menuStatus}" @click="toggleMenuStatus" />
|
||||||
<section class="sidebar" :class="{'open': menuStatus, 'fullscreen': fullscreenStatus}">
|
<section class="sidebar" :class="{'open': menuStatus}">
|
||||||
<div class="logo-wrapper">
|
<div class="logo-wrapper">
|
||||||
<Logo class="logo" />
|
<Logo class="logo" />
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -142,7 +142,7 @@ export default {
|
||||||
methods: {
|
methods: {
|
||||||
...mapActions(['toggleMenuStatus'])
|
...mapActions(['toggleMenuStatus'])
|
||||||
},
|
},
|
||||||
computed: mapGetters(['menuStatus', 'fullscreenStatus'])
|
computed: mapGetters(['menuStatus'])
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
|
@ -208,13 +208,6 @@ section.sidebar
|
||||||
min-height: 48px
|
min-height: 48px
|
||||||
.icon
|
.icon
|
||||||
display: none
|
display: none
|
||||||
&.fullscreen
|
|
||||||
transform: translateX(-100%)
|
|
||||||
overflow-y: hidden
|
|
||||||
z-index: 1200
|
|
||||||
position: absolute
|
|
||||||
left: 0
|
|
||||||
top: 0
|
|
||||||
&.open
|
&.open
|
||||||
transform: translateX(0%)
|
transform: translateX(0%)
|
||||||
padding: 1rem 0rem 0rem 1rem
|
padding: 1rem 0rem 0rem 1rem
|
||||||
|
|
|
||||||
|
|
@ -1,37 +1,44 @@
|
||||||
<template>
|
<template>
|
||||||
<section class="player" :class="{'fullscreen' : fullscreenStatus}">
|
<section>
|
||||||
<img @load="onArtworkLoad" class="artwork" src="/static/demo/yellow.jpeg" />
|
<section class="player">
|
||||||
<div>
|
<img @load="onArtworkLoad" class="artwork" src="/static/demo/yellow.jpeg" />
|
||||||
<p class="title">Yellow</p>
|
<div>
|
||||||
<p class="artist">Rich Brian</p>
|
<p class="title">Yellow</p>
|
||||||
</div>
|
<p class="artist">Rich Brian</p>
|
||||||
<div class="visualizer">
|
</div>
|
||||||
<div id="visualizer"></div>
|
<div class="visualizer">
|
||||||
<div id="minimap" class="shade"></div>
|
<div id="visualizer"></div>
|
||||||
</div>
|
<div id="minimap" class="shade"></div>
|
||||||
<div class="duration">
|
</div>
|
||||||
<p class="currentTime progress active">00:00</p>
|
<div class="duration">
|
||||||
<p class="remainingTime">{{duration}}</p>
|
<p class="currentTime progress active">00:00</p>
|
||||||
</div>
|
<p class="remainingTime">{{duration}}</p>
|
||||||
<div class="control-buttons">
|
</div>
|
||||||
<IconButton variant="theme-icon" :click="toggleFavorite">
|
<div class="control-buttons">
|
||||||
<svg v-show="isFavorited" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M0 0h24v24H0z" fill="none"/><path class="colorable" d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/></svg>
|
<IconButton variant="theme-icon" :click="toggleFavorite">
|
||||||
<svg v-show="!isFavorited" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M0 0h24v24H0z" fill="none"/><path class="colorable" d="M16.5 3c-1.74 0-3.41.81-4.5 2.09C10.91 3.81 9.24 3 7.5 3 4.42 3 2 5.42 2 8.5c0 3.78 3.4 6.86 8.55 11.54L12 21.35l1.45-1.32C18.6 15.36 22 12.28 22 8.5 22 5.42 19.58 3 16.5 3zm-4.4 15.55l-.1.1-.1-.1C7.14 14.24 4 11.39 4 8.5 4 6.5 5.5 5 7.5 5c1.54 0 3.04.99 3.57 2.36h1.87C13.46 5.99 14.96 5 16.5 5c2 0 3.5 1.5 3.5 3.5 0 2.89-3.14 5.74-7.9 10.05z"/></svg>
|
<svg v-show="isFavorited" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M0 0h24v24H0z" fill="none"/><path class="colorable" d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/></svg>
|
||||||
</IconButton>
|
<svg v-show="!isFavorited" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M0 0h24v24H0z" fill="none"/><path class="colorable" d="M16.5 3c-1.74 0-3.41.81-4.5 2.09C10.91 3.81 9.24 3 7.5 3 4.42 3 2 5.42 2 8.5c0 3.78 3.4 6.86 8.55 11.54L12 21.35l1.45-1.32C18.6 15.36 22 12.28 22 8.5 22 5.42 19.58 3 16.5 3zm-4.4 15.55l-.1.1-.1-.1C7.14 14.24 4 11.39 4 8.5 4 6.5 5.5 5 7.5 5c1.54 0 3.04.99 3.57 2.36h1.87C13.46 5.99 14.96 5 16.5 5c2 0 3.5 1.5 3.5 3.5 0 2.89-3.14 5.74-7.9 10.05z"/></svg>
|
||||||
<IconButton variant="contained">
|
</IconButton>
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M11 18V6l-8.5 6 8.5 6zm.5-6l8.5 6V6l-8.5 6z"/><path d="M0 0h24v24H0z" fill="none"/></svg>
|
<IconButton variant="contained">
|
||||||
</IconButton>
|
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M11 18V6l-8.5 6 8.5 6zm.5-6l8.5 6V6l-8.5 6z"/><path d="M0 0h24v24H0z" fill="none"/></svg>
|
||||||
<IconButton variant="contained large" :click="togglePlay">
|
</IconButton>
|
||||||
<svg v-show="playingStatus" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M6 19h4V5H6v14zm8-14v14h4V5h-4z"/><path d="M0 0h24v24H0z" fill="none"/></svg>
|
<IconButton variant="contained large" :click="togglePlay">
|
||||||
<svg v-show="!playingStatus" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M8 5v14l11-7z"/><path d="M0 0h24v24H0z" fill="none"/></svg>
|
<svg v-show="playingStatus" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M6 19h4V5H6v14zm8-14v14h4V5h-4z"/><path d="M0 0h24v24H0z" fill="none"/></svg>
|
||||||
</IconButton>
|
<svg v-show="!playingStatus" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M8 5v14l11-7z"/><path d="M0 0h24v24H0z" fill="none"/></svg>
|
||||||
<IconButton variant="contained">
|
</IconButton>
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M4 18l8.5-6L4 6v12zm9-12v12l8.5-6L13 6z"/><path d="M0 0h24v24H0z" fill="none"/></svg>
|
<IconButton variant="contained">
|
||||||
</IconButton>
|
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M4 18l8.5-6L4 6v12zm9-12v12l8.5-6L13 6z"/><path d="M0 0h24v24H0z" fill="none"/></svg>
|
||||||
<IconButton variant="contained" :click="toggleFullscreenStatus">
|
</IconButton>
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6-6 6z"/><path d="M0 0h24v24H0z" fill="none"/></svg>
|
<IconButton variant="contained" :click="toggleFullscreenStatus">
|
||||||
</IconButton>
|
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6-6 6z"/><path d="M0 0h24v24H0z" fill="none"/></svg>
|
||||||
</div>
|
</IconButton>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
<section class="fullscreen" :class="{'active' : fullscreenStatus}">
|
||||||
|
<IconButton variant="contained" :click="toggleFullscreenStatus">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6-6 6z"/><path d="M0 0h24v24H0z" fill="none"/></svg>
|
||||||
|
</IconButton>
|
||||||
|
</section>
|
||||||
</section>
|
</section>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
|
@ -208,10 +215,6 @@ section.player
|
||||||
background-color: white
|
background-color: white
|
||||||
min-height: 4.5rem
|
min-height: 4.5rem
|
||||||
transition: height 500ms ease, min-height 500ms ease, width 500ms ease
|
transition: height 500ms ease, min-height 500ms ease, width 500ms ease
|
||||||
&.fullscreen
|
|
||||||
height: 100vh
|
|
||||||
min-height: 100vh
|
|
||||||
z-index: 1300
|
|
||||||
.control-buttons
|
.control-buttons
|
||||||
span
|
span
|
||||||
margin: 0 0.2rem
|
margin: 0 0.2rem
|
||||||
|
|
@ -248,4 +251,17 @@ section.player
|
||||||
cursor: pointer
|
cursor: pointer
|
||||||
transition: width 200ms ease
|
transition: width 200ms ease
|
||||||
height: 100% !important
|
height: 100% !important
|
||||||
|
section.fullscreen
|
||||||
|
width: 100vw
|
||||||
|
height: 100vh
|
||||||
|
position: absolute
|
||||||
|
overflow: hidden
|
||||||
|
left: 0
|
||||||
|
top: 0
|
||||||
|
background-color: white
|
||||||
|
z-index: 1400
|
||||||
|
transition: transform 500ms ease-out
|
||||||
|
transform: translate3d(0,+100vh,0)
|
||||||
|
&.active
|
||||||
|
transform: translate3d(0,0vh,0)
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue