mirror of
https://github.com/IrosTheBeggar/mStream.git
synced 2025-10-27 07:31:02 +00:00
cleanup alpha
This commit is contained in:
IrosTheBeggar
parent
f13e208d74
commit
5aaa673db1
@ -21,19 +21,13 @@
|
||||
|
||||
<!-- Style Sheets -->
|
||||
<link rel="stylesheet" href="spa.css">
|
||||
<link rel="stylesheet" href="../assets/css/waves.css">
|
||||
<link rel="stylesheet" href="../assets/css/materialize.css">
|
||||
|
||||
<!-- JS -->
|
||||
<script defer src="spa.js"></script>
|
||||
<script defer src="index.js"></script>
|
||||
<link rel="stylesheet" href="../assets/css/waves.css">
|
||||
<script defer src="../assets/js/waves.js"></script>
|
||||
|
||||
<script src="vue3.js"></script>
|
||||
|
||||
<script src="../assets/js/lib/axios.js"></script>
|
||||
<script src="../assets/js/api.js"></script>
|
||||
<!-- <script>API.checkAuthAndKickToLogin();</script> -->
|
||||
</head>
|
||||
|
||||
<body>
|
||||
@ -136,15 +130,94 @@
|
||||
<div id="content-header" class="container">
|
||||
<h5>File Explorer</h5>
|
||||
<div id="content-header-spacer"></div>
|
||||
<svg id="sidenav-button" @click="toggleMenu" class="ham hamRotate180 ham5" viewBox="0 0 100 100" width="80">
|
||||
<svg id="sidenav-button" onclick="toggleSideMenu();" class="ham hamRotate180 ham5" viewBox="0 0 100 100" width="80">
|
||||
<path class="line top" d="m 30,33 h 40 c 0,0 8.5,-0.68551 8.5,10.375 0,8.292653 -6.122707,9.002293 -8.5,6.625 l -11.071429,-11.071429" />
|
||||
<path class="line middle" d="m 70,50 h -40" />
|
||||
<path class="line bottom" d="m 30,67 h 40 c 0,0 8.5,0.68551 8.5,-10.375 0,-8.292653 -6.122707,-9.002293 -8.5,-6.625 l -11.071429,11.071429" />
|
||||
</svg>
|
||||
</div>
|
||||
<!-- componentKey is used to force a re-render -->
|
||||
<component :is="currentViewMain">
|
||||
</component>
|
||||
|
||||
<div class="container">
|
||||
<ul class="collection">
|
||||
<li class="collection-item">Test Item</li>
|
||||
<li class="collection-item">Test Item</li>
|
||||
<li class="collection-item">Test Item</li>
|
||||
<li class="collection-item">Test Item</li>
|
||||
<li class="collection-item">Test Item</li>
|
||||
<li class="collection-item">Test Item</li> <li class="collection-item">Test Item</li>
|
||||
<li class="collection-item">Test Item</li>
|
||||
<li class="collection-item">Test Item</li> <li class="collection-item">Test Item</li>
|
||||
<li class="collection-item">Test Item</li>
|
||||
<li class="collection-item">Test Item</li> <li class="collection-item">Test Item</li>
|
||||
<li class="collection-item">Test Item</li>
|
||||
<li class="collection-item">Test Item</li> <li class="collection-item">Test Item</li>
|
||||
<li class="collection-item">Test Item</li>
|
||||
<li class="collection-item">Test Item</li> <li class="collection-item">Test Item</li>
|
||||
<li class="collection-item">Test Item</li>
|
||||
<li class="collection-item">Test Item</li> <li class="collection-item">Test Item</li>
|
||||
<li class="collection-item">Test Item</li>
|
||||
<li class="collection-item">Test Item</li> <li class="collection-item">Test Item</li>
|
||||
<li class="collection-item">Test Item</li>
|
||||
<li class="collection-item">Test Item</li> <li class="collection-item">Test Item</li>
|
||||
<li class="collection-item">Test Item</li>
|
||||
<li class="collection-item">Test Item</li> <li class="collection-item">Test Item</li>
|
||||
<li class="collection-item">Test Item</li>
|
||||
<li class="collection-item">Test Item</li> <li class="collection-item">Test Item</li>
|
||||
<li class="collection-item">Test Item</li>
|
||||
<li class="collection-item">Test Item</li> <li class="collection-item">Test Item</li>
|
||||
<li class="collection-item">Test Item</li>
|
||||
<li class="collection-item">Test Item</li> <li class="collection-item">Test Item</li>
|
||||
<li class="collection-item">Test Item</li>
|
||||
<li class="collection-item">Test Item</li> <li class="collection-item">Test Item</li>
|
||||
<li class="collection-item">Test Item</li>
|
||||
<li class="collection-item">Test Item</li> <li class="collection-item">Test Item</li>
|
||||
<li class="collection-item">Test Item</li>
|
||||
<li class="collection-item">Test Item</li> <li class="collection-item">Test Item</li>
|
||||
<li class="collection-item">Test Item</li>
|
||||
<li class="collection-item">Test Item</li> <li class="collection-item">Test Item</li>
|
||||
<li class="collection-item">Test Item</li>
|
||||
<li class="collection-item">Test Item</li> <li class="collection-item">Test Item</li>
|
||||
<li class="collection-item">Test Item</li>
|
||||
<li class="collection-item">Test Item</li> <li class="collection-item">Test Item</li>
|
||||
<li class="collection-item">Test Item</li>
|
||||
<li class="collection-item">Test Item</li> <li class="collection-item">Test Item</li>
|
||||
<li class="collection-item">Test Item</li>
|
||||
<li class="collection-item">Test Item</li> <li class="collection-item">Test Item</li>
|
||||
<li class="collection-item">Test Item</li>
|
||||
<li class="collection-item">Test Item</li> <li class="collection-item">Test Item</li>
|
||||
<li class="collection-item">Test Item</li>
|
||||
<li class="collection-item">Test Item</li> <li class="collection-item">Test Item</li>
|
||||
<li class="collection-item">Test Item</li>
|
||||
<li class="collection-item">Test Item</li> <li class="collection-item">Test Item</li>
|
||||
<li class="collection-item">Test Item</li>
|
||||
<li class="collection-item">Test Item</li> <li class="collection-item">Test Item</li>
|
||||
<li class="collection-item">Test Item</li>
|
||||
<li class="collection-item">Test Item</li> <li class="collection-item">Test Item</li>
|
||||
<li class="collection-item">Test Item</li>
|
||||
<li class="collection-item">Test Item</li> <li class="collection-item">Test Item</li>
|
||||
<li class="collection-item">Test Item</li>
|
||||
<li class="collection-item">Test Item</li> <li class="collection-item">Test Item</li>
|
||||
<li class="collection-item">Test Item</li>
|
||||
<li class="collection-item">Test Item</li> <li class="collection-item">Test Item</li>
|
||||
<li class="collection-item">Test Item</li>
|
||||
<li class="collection-item">Test Item</li> <li class="collection-item">Test Item</li>
|
||||
<li class="collection-item">Test Item</li>
|
||||
<li class="collection-item">Test Item</li> <li class="collection-item">Test Item</li>
|
||||
<li class="collection-item">Test Item</li>
|
||||
<li class="collection-item">Test Item</li> <li class="collection-item">Test Item</li>
|
||||
<li class="collection-item">Test Item</li>
|
||||
<li class="collection-item">Test Item</li> <li class="collection-item">Test Item</li>
|
||||
<li class="collection-item">Test Item</li>
|
||||
<li class="collection-item">Test Item</li> <li class="collection-item">Test Item</li>
|
||||
<li class="collection-item">Test Item</li>
|
||||
<li class="collection-item">Test Item</li> <li class="collection-item">Test Item</li>
|
||||
<li class="collection-item">Test Item</li>
|
||||
<li class="collection-item">Test Item</li> <li class="collection-item">Test Item</li>
|
||||
<li class="collection-item">Test Item</li>
|
||||
<li class="collection-item">Test Item</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div id="nav-bar">
|
||||
|
||||
@ -1,119 +0,0 @@
|
||||
const app = Vue.createApp({
|
||||
data() { return {
|
||||
currentViewMain: 'file-explorer-view'
|
||||
}},
|
||||
methods: {
|
||||
toggleMenu(event) {
|
||||
toggleSideMenu();
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
const fileExplorerView = app.component('file-explorer-view', {
|
||||
template: `
|
||||
<div class="container">
|
||||
<ul class="collection">
|
||||
<li class="collection-item">Test Item</li>
|
||||
<li class="collection-item">Test Item</li>
|
||||
<li class="collection-item">Test Item</li>
|
||||
<li class="collection-item">Test Item</li>
|
||||
<li class="collection-item">Test Item</li>
|
||||
<li class="collection-item">Test Item</li> <li class="collection-item">Test Item</li>
|
||||
<li class="collection-item">Test Item</li>
|
||||
<li class="collection-item">Test Item</li> <li class="collection-item">Test Item</li>
|
||||
<li class="collection-item">Test Item</li>
|
||||
<li class="collection-item">Test Item</li> <li class="collection-item">Test Item</li>
|
||||
<li class="collection-item">Test Item</li>
|
||||
<li class="collection-item">Test Item</li> <li class="collection-item">Test Item</li>
|
||||
<li class="collection-item">Test Item</li>
|
||||
<li class="collection-item">Test Item</li> <li class="collection-item">Test Item</li>
|
||||
<li class="collection-item">Test Item</li>
|
||||
<li class="collection-item">Test Item</li> <li class="collection-item">Test Item</li>
|
||||
<li class="collection-item">Test Item</li>
|
||||
<li class="collection-item">Test Item</li> <li class="collection-item">Test Item</li>
|
||||
<li class="collection-item">Test Item</li>
|
||||
<li class="collection-item">Test Item</li> <li class="collection-item">Test Item</li>
|
||||
<li class="collection-item">Test Item</li>
|
||||
<li class="collection-item">Test Item</li> <li class="collection-item">Test Item</li>
|
||||
<li class="collection-item">Test Item</li>
|
||||
<li class="collection-item">Test Item</li> <li class="collection-item">Test Item</li>
|
||||
<li class="collection-item">Test Item</li>
|
||||
<li class="collection-item">Test Item</li> <li class="collection-item">Test Item</li>
|
||||
<li class="collection-item">Test Item</li>
|
||||
<li class="collection-item">Test Item</li> <li class="collection-item">Test Item</li>
|
||||
<li class="collection-item">Test Item</li>
|
||||
<li class="collection-item">Test Item</li> <li class="collection-item">Test Item</li>
|
||||
<li class="collection-item">Test Item</li>
|
||||
<li class="collection-item">Test Item</li> <li class="collection-item">Test Item</li>
|
||||
<li class="collection-item">Test Item</li>
|
||||
<li class="collection-item">Test Item</li> <li class="collection-item">Test Item</li>
|
||||
<li class="collection-item">Test Item</li>
|
||||
<li class="collection-item">Test Item</li> <li class="collection-item">Test Item</li>
|
||||
<li class="collection-item">Test Item</li>
|
||||
<li class="collection-item">Test Item</li> <li class="collection-item">Test Item</li>
|
||||
<li class="collection-item">Test Item</li>
|
||||
<li class="collection-item">Test Item</li> <li class="collection-item">Test Item</li>
|
||||
<li class="collection-item">Test Item</li>
|
||||
<li class="collection-item">Test Item</li> <li class="collection-item">Test Item</li>
|
||||
<li class="collection-item">Test Item</li>
|
||||
<li class="collection-item">Test Item</li> <li class="collection-item">Test Item</li>
|
||||
<li class="collection-item">Test Item</li>
|
||||
<li class="collection-item">Test Item</li> <li class="collection-item">Test Item</li>
|
||||
<li class="collection-item">Test Item</li>
|
||||
<li class="collection-item">Test Item</li> <li class="collection-item">Test Item</li>
|
||||
<li class="collection-item">Test Item</li>
|
||||
<li class="collection-item">Test Item</li> <li class="collection-item">Test Item</li>
|
||||
<li class="collection-item">Test Item</li>
|
||||
<li class="collection-item">Test Item</li> <li class="collection-item">Test Item</li>
|
||||
<li class="collection-item">Test Item</li>
|
||||
<li class="collection-item">Test Item</li> <li class="collection-item">Test Item</li>
|
||||
<li class="collection-item">Test Item</li>
|
||||
<li class="collection-item">Test Item</li> <li class="collection-item">Test Item</li>
|
||||
<li class="collection-item">Test Item</li>
|
||||
<li class="collection-item">Test Item</li> <li class="collection-item">Test Item</li>
|
||||
<li class="collection-item">Test Item</li>
|
||||
<li class="collection-item">Test Item</li> <li class="collection-item">Test Item</li>
|
||||
<li class="collection-item">Test Item</li>
|
||||
<li class="collection-item">Test Item</li> <li class="collection-item">Test Item</li>
|
||||
<li class="collection-item">Test Item</li>
|
||||
<li class="collection-item">Test Item</li> <li class="collection-item">Test Item</li>
|
||||
<li class="collection-item">Test Item</li>
|
||||
<li class="collection-item">Test Item</li> <li class="collection-item">Test Item</li>
|
||||
<li class="collection-item">Test Item</li>
|
||||
<li class="collection-item">Test Item</li> <li class="collection-item">Test Item</li>
|
||||
<li class="collection-item">Test Item</li>
|
||||
<li class="collection-item">Test Item</li> <li class="collection-item">Test Item</li>
|
||||
<li class="collection-item">Test Item</li>
|
||||
<li class="collection-item">Test Item</li> <li class="collection-item">Test Item</li>
|
||||
<li class="collection-item">Test Item</li>
|
||||
<li class="collection-item">Test Item</li> <li class="collection-item">Test Item</li>
|
||||
<li class="collection-item">Test Item</li>
|
||||
<li class="collection-item">Test Item</li>
|
||||
</ul>
|
||||
</div>`
|
||||
});
|
||||
|
||||
const nowPlayingView = app.component('now-playing-view', {
|
||||
template: `<div class="container>CURRENTLY PLAYING</div>`
|
||||
});
|
||||
|
||||
const vm = app.mount('#content');
|
||||
|
||||
function changeView(viewName, el){
|
||||
if (vm.currentViewMain === viewName) {
|
||||
closeSideMenu();
|
||||
return;
|
||||
}
|
||||
|
||||
vm.currentViewMain = viewName;
|
||||
|
||||
const elements = document.querySelectorAll('.side-nav-item'); // or:
|
||||
elements.forEach(elm => {
|
||||
elm.classList.remove("select")
|
||||
});
|
||||
|
||||
el.classList.add("select");
|
||||
|
||||
// close nav on mobile
|
||||
closeSideMenu();
|
||||
}
|
||||
@ -2,8 +2,6 @@ document.getElementById("sidenav-cover").addEventListener("click", () => {
|
||||
toggleSideMenu();
|
||||
});
|
||||
|
||||
console.log('EFEWSEFWEF')
|
||||
|
||||
function toggleSideMenu() {
|
||||
console.log('gferg')
|
||||
document.getElementById("sidenav-cover").classList.toggle("click-through");
|
||||
@ -37,3 +35,16 @@ document.documentElement.style.setProperty('--vh', `${window.innerHeight/100}px`
|
||||
window.addEventListener("resize", () => {
|
||||
document.documentElement.style.setProperty('--vh', `${window.innerHeight/100}px`);
|
||||
});
|
||||
|
||||
|
||||
function changeView(viewName, el){
|
||||
const elements = document.querySelectorAll('.side-nav-item'); // or:
|
||||
elements.forEach(elm => {
|
||||
elm.classList.remove("select")
|
||||
});
|
||||
|
||||
el.classList.add("select");
|
||||
|
||||
// close nav on mobile
|
||||
closeSideMenu();
|
||||
}
|
||||
13412
webapp/alpha/vue3.js
13412
webapp/alpha/vue3.js
File diff suppressed because it is too large
Load Diff
Loading…
Reference in New Issue
Block a user