MirrorMirror
/
funkwhale
mirror of https://dev.funkwhale.audio/funkwhale/funkwhale.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

style(front): queue mobile player

This commit is contained in:
ArneBo 2025-02-05 22:55:50 +01:00
parent 90fd89d62f
commit cea69dc9b9
3 changed files with 31 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
front/src/components/Queue.vue
View File

@ -22,8 +22,10 @@ import PlayerControls from '~/components/audio/PlayerControls.vue'
import VirtualList from '~/components/vui/list/VirtualList.vue' import VirtualList from '~/components/vui/list/VirtualList.vue'
import QueueItem from '~/components/QueueItem.vue' import QueueItem from '~/components/QueueItem.vue'
import Button from '~/components/ui/Button.vue' import Layout from '~/components/ui/Layout.vue'
import Spacer from '~/components/ui/Spacer.vue'
import Link from '~/components/ui/Link.vue' import Link from '~/components/ui/Link.vue'
import Button from '~/components/ui/Button.vue'
import Pill from '~/components/ui/Pill.vue' import Pill from '~/components/ui/Pill.vue'
const MilkDrop = defineAsyncComponent(() => import('~/components/audio/visualizer/MilkDrop.vue')) const MilkDrop = defineAsyncComponent(() => import('~/components/audio/visualizer/MilkDrop.vue'))
@ -339,7 +341,8 @@ if (!isWebGLSupported) {
<i class="loading spinner icon" /> <i class="loading spinner icon" />
</p> </p>
</div> </div>
<div class="additional-controls desktop-and-below"> <Spacer :size="16" class="desktop-and-below" />
<Layout flex class="additional-controls desktop-and-below">
<track-favorite-icon <track-favorite-icon
v-if="store.state.auth.authenticated" v-if="store.state.auth.authenticated"
:track="currentTrack" :track="currentTrack"
@ -358,7 +361,7 @@ if (!isWebGLSupported) {
:title="labels.addArtistContentFilter" :title="labels.addArtistContentFilter"
@click="hideArtist" @click="hideArtist"
/> />
</div> </Layout>
<div class="progress-wrapper"> <div class="progress-wrapper">
<div class="progress-area"> <div class="progress-area">
<div <div
@ -391,7 +394,7 @@ if (!isWebGLSupported) {
</template> </template>
</div> </div>
</div> </div>
<player-controls class="desktop-and-below" /> <player-controls class="desktop-and-below queue-controls" />
</template> </template>
</div> </div>
<div id="queue"> <div id="queue">

3
front/src/components/audio/PlayerControls.vue
View File

@ -26,7 +26,6 @@ const labels = computed(() => ({
:aria-label="labels.previous" :aria-label="labels.previous"
round round
ghost ghost
alignSelf="center"
class="control tablet-and-up" class="control tablet-and-up"
icon="bi-skip-backward-fill" icon="bi-skip-backward-fill"
@click.prevent.stop="playPrevious()" @click.prevent.stop="playPrevious()"
@ -35,7 +34,6 @@ const labels = computed(() => ({
:title="isPlaying ? labels.pause : labels.play" :title="isPlaying ? labels.pause : labels.play"
round round
ghost ghost
alignSelf="center"
:aria-label="isPlaying ? labels.pause : labels.play" :aria-label="isPlaying ? labels.pause : labels.play"
:class="['control', isPlaying ? 'pause' : 'play', 'large']" :class="['control', isPlaying ? 'pause' : 'play', 'large']"
:icon="isPlaying ? 'bi-pause-fill' : 'bi-play-fill'" :icon="isPlaying ? 'bi-pause-fill' : 'bi-play-fill'"
@ -46,7 +44,6 @@ const labels = computed(() => ({
:aria-label="labels.next" :aria-label="labels.next"
round round
ghost ghost
alignSelf="center"
:disabled="!hasNext" :disabled="!hasNext"
class="control" class="control"
icon="bi-skip-forward-fill" icon="bi-skip-forward-fill"

31
front/src/style/components/_queue.scss
View File

@ -225,18 +225,30 @@
} }
.player-controls { .player-controls {
display: flex;
.control:not(:first-child) { .control:not(:first-child) {
margin-left: 1em; margin-left: 1em;
} }
.icon {
font-size: 1.1em;
}
button { &.queue-controls .button {
padding: 0; width: 80px !important;
height: 80px !important;
background: transparent !important;
border: none; border: none;
background-color: transparent; &:hover {
color: inherit; background: transparent;
i {
transform: scale(1.2);
}
}
&.large {
> i {
font-size: 4em;
}
}
> i {
font-size: 2em;
}
} }
} }
@ -449,6 +461,11 @@
font-size: 1.5rem; font-size: 1.5rem;
width: 54vh; width: 54vh;
max-width: 90%; max-width: 90%;
.position.bar {
position: relative;
bottom: 5px;
height: 5px;
}
} }
} }