140 lines
3.3 KiB
Vue
140 lines
3.3 KiB
Vue
<template>
|
|
<nav>
|
|
<p class="title">Music Player Randomizer</p>
|
|
<div class="navMenuWrapper">
|
|
<button class="settingsButton" @click="showSettingsModal">
|
|
Settings
|
|
</button>
|
|
<button class="statisticsButton" @click="showStatisticsModal">
|
|
Statistics
|
|
</button>
|
|
<button class="aboutButton" @click="showAboutModal">About</button>
|
|
</div>
|
|
<p v-if="!$parent.displayWhenDesktop" class="mobileMenuButton" @click="showMobileMenu">
|
|
Menu
|
|
</p>
|
|
<settingsModal ref="settingsModal"></settingsModal>
|
|
<statisticsModal ref="statisticsModal"></statisticsModal>
|
|
<aboutModal ref="aboutModal"></aboutModal>
|
|
<mobileMenu
|
|
ref="mobileMenu"
|
|
@start-sound-test="startSoundTest"
|
|
@show-settings-modal="showSettingsModal"
|
|
@show-statistics-modal="showStatisticsModal"
|
|
@show-about-modal="showAboutModal"
|
|
></mobileMenu>
|
|
</nav>
|
|
</template>
|
|
|
|
<script>
|
|
import aboutModal from "../items/aboutModal.vue";
|
|
import statisticsModal from "../items/statisticsModal.vue";
|
|
import settingsModal from "../items/settingsModal.vue";
|
|
import mobileMenu from "../items/mobileMenu.vue";
|
|
|
|
export default {
|
|
components: {
|
|
aboutModal,
|
|
settingsModal,
|
|
statisticsModal,
|
|
mobileMenu,
|
|
},
|
|
methods: {
|
|
playSelectedTrack(track) {
|
|
this.$refs.theFooter.playSpecificTrack(track);
|
|
},
|
|
scrollToBottomPlaylistHistory() {
|
|
this.$refs.playlistHistory.scrollToBottom();
|
|
},
|
|
showAboutModal() {
|
|
this.$refs.aboutModal.openModal();
|
|
},
|
|
showSettingsModal() {
|
|
this.$refs.settingsModal.openModal();
|
|
},
|
|
showStatisticsModal() {
|
|
this.$refs.statisticsModal.openModal();
|
|
},
|
|
showMobileMenu() {
|
|
this.$refs.mobileMenu.openMobileMenu();
|
|
this.showMobileMenuContent();
|
|
},
|
|
showMobileMenuContent() {
|
|
setTimeout(() => {
|
|
this.$refs.mobileMenu.openMobileMenuContent();
|
|
}, 20);
|
|
},
|
|
startSoundTest() {
|
|
this.$emit("start-sound-test");
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style scoped>
|
|
nav {
|
|
background: #333;
|
|
display: flex;
|
|
align-content: center;
|
|
align-items: center;
|
|
width: 100%;
|
|
height: 5vh;
|
|
}
|
|
|
|
.title {
|
|
color: #fff;
|
|
font-size: 2rem;
|
|
margin-left: 2vw;
|
|
font-style: normal;
|
|
}
|
|
|
|
.navMenuWrapper {
|
|
margin-left: auto;
|
|
height: 5vh;
|
|
}
|
|
|
|
.navMenuWrapper button {
|
|
background: #333;
|
|
color: #ff9c00;
|
|
font-size: 1.3rem;
|
|
outline: none;
|
|
cursor: pointer;
|
|
border: none;
|
|
border-radius: 3px;
|
|
height: 100%;
|
|
padding: 0 20px;
|
|
}
|
|
|
|
.navMenuWrapper button:hover {
|
|
background-color: #555;
|
|
}
|
|
|
|
/* Mobile */
|
|
@media only screen and (max-width: 1000px) {
|
|
nav {
|
|
justify-content: center;
|
|
height: 10vw;
|
|
}
|
|
.title {
|
|
font-size: 1.2rem;
|
|
margin: 0;
|
|
padding: 0;
|
|
width: 100%;
|
|
margin-left: 5px;
|
|
/* text-align: ; */
|
|
}
|
|
|
|
.navMenuWrapper {
|
|
display: none;
|
|
}
|
|
|
|
.mobileMenuButton {
|
|
color: white;
|
|
background: grey;
|
|
padding: 6px;
|
|
border-top-left-radius: 7px;
|
|
border-bottom-left-radius: 7px;
|
|
}
|
|
}
|
|
</style>
|