evan/deemixer
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

perf: removed TheMiddleSection component

Browse Source
This commit is contained in:
Roberto Tonino 2020-09-25 19:01:08 +02:00
parent 6ae827f6ea
commit 013fc7bca9
4 changed files with 18 additions and 48 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
public/js/bundle.js
View File

File diff suppressed because one or more lines are too long

8
src/components/App.vue
View File

@ -5,7 +5,7 @@
<div class="app-container"> <div class="app-container">
<div class="content-container"> <div class="content-container">
<TheSearchBar /> <TheSearchBar />
<TheMiddleSection /> <TheContent />
</div> </div>
<TheDownloadTab class="downlaods" /> <TheDownloadTab class="downlaods" />
</div> </div>
@ -38,24 +38,24 @@
<script> <script>
import TheSidebar from '@components/TheSidebar.vue' import TheSidebar from '@components/TheSidebar.vue'
import TheMiddleSection from '@components/TheMiddleSection.vue'
import TheTrackPreview from '@components/TheTrackPreview.vue' import TheTrackPreview from '@components/TheTrackPreview.vue'
import TheQualityModal from '@components/TheQualityModal.vue' import TheQualityModal from '@components/TheQualityModal.vue'
import BaseLoadingPlaceholder from '@components/BaseLoadingPlaceholder.vue' import BaseLoadingPlaceholder from '@components/BaseLoadingPlaceholder.vue'
import TheContextMenu from '@components/TheContextMenu.vue' import TheContextMenu from '@components/TheContextMenu.vue'
import TheDownloadTab from '@components/TheDownloadTab.vue' import TheDownloadTab from '@components/TheDownloadTab.vue'
import TheSearchBar from '@components/TheSearchBar.vue' import TheSearchBar from '@components/TheSearchBar.vue'
import TheContent from '@components/TheContent.vue'
export default { export default {
components: { components: {
TheSidebar, TheSidebar,
TheSearchBar, TheSearchBar,
TheMiddleSection,
TheDownloadTab, TheDownloadTab,
TheTrackPreview, TheTrackPreview,
TheQualityModal, TheQualityModal,
BaseLoadingPlaceholder, BaseLoadingPlaceholder,
TheContextMenu TheContextMenu,
TheContent
} }
} }
</script> </script>

15
src/components/TheContent.vue
View File

@ -1,5 +1,10 @@
<template> <template>
<section id="content" @scroll="$route.name === 'Search' ? handleContentScroll($event) : null" ref="content"> <main
id="content"
@scroll="$route.name === 'Search' ? handleContentScroll($event) : null"
ref="content"
aria-label="main content"
>
<div id="container"> <div id="container">
<BaseLoadingPlaceholder id="search_placeholder" text="Searching..." :hidden="!loading" /> <BaseLoadingPlaceholder id="search_placeholder" text="Searching..." :hidden="!loading" />
@ -21,7 +26,7 @@
exclude="" exclude=""
></router-view> ></router-view>
</div> </div>
</section> </main>
</template> </template>
<style lang="scss"> <style lang="scss">
@ -31,8 +36,9 @@
width: var(--container-width); width: var(--container-width);
} }
#content { main {
background-color: var(--main-background); background-color: var(--main-background);
padding-right: 5px;
width: 100%; width: 100%;
height: calc(100vh - 93px); height: calc(100vh - 93px);
overflow-y: scroll; overflow-y: scroll;
@ -57,7 +63,6 @@
<script> <script>
import { debounce } from '@/utils/utils' import { debounce } from '@/utils/utils'
import EventBus from '@/utils/EventBus.js'
import BaseLoadingPlaceholder from '@components/BaseLoadingPlaceholder.vue' import BaseLoadingPlaceholder from '@components/BaseLoadingPlaceholder.vue'
export default { export default {
@ -70,9 +75,7 @@ export default {
}), }),
mounted() { mounted() {
this.$root.$on('updateSearchLoadingState', loading => { this.$root.$on('updateSearchLoadingState', loading => {
console.log('yes')
this.loading = loading this.loading = loading
console.log('no')
}) })
this.$router.beforeEach((to, from, next) => { this.$router.beforeEach((to, from, next) => {

33
src/components/TheMiddleSection.vue
View File

@ -1,33 +0,0 @@
<template>
<main id="main_content" aria-label="content">
<TheContent />
<!-- <BaseLoadingPlaceholder id="search_placeholder" text="Searching..." :hidden="true" /> -->
</main>
</template>
<style lang="scss" scoped>
#main_content {
background-color: var(--main-background);
min-width: 10px;
// margin-left: 48px; // $sidebar-width
// width: calc(100% - #{$sidebar-width});
// flex: 1;
width: 100%;
height: 100%;
}
</style>
<script>
import TheContent from '@components/TheContent.vue'
import BaseLoadingPlaceholder from '@components/BaseLoadingPlaceholder.vue'
export default {
components: {
TheContent,
BaseLoadingPlaceholder
}
}
</script>
<style>
</style>