104 lines
2.7 KiB
Vue
104 lines
2.7 KiB
Vue
<template>
|
|
<div class="theMainDiv">
|
|
<div class="mainFirstRow">
|
|
<currently-playing></currently-playing>
|
|
<inspiration-window></inspiration-window>
|
|
</div>
|
|
<div class="mainSecondRow">
|
|
<playlist-history
|
|
ref="playlistHistory"
|
|
@play-selected-track="playSelectedTrack"
|
|
></playlist-history>
|
|
<players-window
|
|
@play-welcome-sound="playWelcomeSound"
|
|
@play-match-point-sound="playMatchSound"
|
|
@play-winning-sound="playWinningSound"
|
|
></players-window>
|
|
</div>
|
|
<extra-buttons
|
|
v-if="$parent.displayWhenDesktop"
|
|
@start-sound-test="startSoundTest"
|
|
></extra-buttons>
|
|
<the-footer
|
|
ref="theFooter"
|
|
@scroll-to-bottom-playlist-history="scrollToBottomPlaylistHistory"
|
|
></the-footer>
|
|
<!-- <the-footer ref="theFooter"></the-footer> -->
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import currentlyPlaying from "../items/CurrentlyPlaying.vue";
|
|
import inspirationWindow from "../items/InspirationWindow.vue";
|
|
import playersWindow from "../items/playersWindow.vue";
|
|
import playlistHistory from "../items/playlistHistory.vue";
|
|
import extraButtons from "../items/extraButtons.vue";
|
|
import theFooter from "./TheFooter.vue";
|
|
|
|
export default {
|
|
components: {
|
|
currentlyPlaying,
|
|
playersWindow,
|
|
playlistHistory,
|
|
inspirationWindow,
|
|
extraButtons,
|
|
theFooter,
|
|
},
|
|
methods: {
|
|
playSelectedTrack(track) {
|
|
this.$refs.theFooter.playSpecificTrack(track);
|
|
},
|
|
scrollToBottomPlaylistHistory() {
|
|
this.$refs.playlistHistory.scrollToBottom();
|
|
},
|
|
startSoundTest() {
|
|
this.$refs.theFooter.startSoundTest();
|
|
},
|
|
playWelcomeSound() {
|
|
this.$refs.theFooter.playWelcomeSound();
|
|
},
|
|
playMatchSound() {
|
|
this.$refs.theFooter.playMatchSound();
|
|
},
|
|
playWinningSound() {
|
|
this.$refs.theFooter.playWinningSound();
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style scoped>
|
|
.theMainDiv {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
width: 100%;
|
|
}
|
|
|
|
.mainFirstRow {
|
|
display: flex;
|
|
flex-wrap: nowrap;
|
|
width: 100%;
|
|
margin: 0.5vw;
|
|
}
|
|
.mainSecondRow {
|
|
display: flex;
|
|
flex-wrap: nowrap;
|
|
width: 100%;
|
|
margin: 0 0.5vw;
|
|
}
|
|
|
|
@media only screen and (max-width: 1000px) {
|
|
.mainFirstRow {
|
|
margin: 0;
|
|
margin-top: 0.5vw;
|
|
}
|
|
.mainSecondRow {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
width: 100%;
|
|
margin: 0;
|
|
margin-top: 0.5vw;
|
|
}
|
|
}
|
|
</style>
|