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

replaced some old HTML with the right components; added quality modal functional component

Browse Source
This commit is contained in:
Roberto Tonino
2020-07-06 18:34:43 +02:00
parent 77c875d932
commit b716e89560
8 changed files with 68 additions and 68 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/css/style.css
+1 -1
View File
File diff suppressed because one or more lines are too long
public/js/bundle.js
+3 -3
View File
File diff suppressed because one or more lines are too long
src/js/App.vue
+7 -22
View File
@@ -1,31 +1,12 @@
<template> <template>
<div style="height: inherit;"> <div style="height: inherit;">
<div id="start_app_placeholder" class="loading_placeholder"> <BaseLoadingPlaceholder id="start_app_placeholder" text="Connecting to the server..." />
<span class="loading_placeholder__text">Connecting to the server...</span>
<div class="lds-ring">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</div>
<TheSidebar /> <TheSidebar />
<TheMainContent /> <TheMainContent />
<TheTrackPreview /> <TheTrackPreview />
<TheQualityModal />
<div id="modal_quality" class="smallmodal">
<!-- Modal content -->
<div class="smallmodal-content">
<button class="quality-button" data-quality-value="9">Download FLAC</button><br />
<button class="quality-button" data-quality-value="3">Download MP3 320kbps</button><br />
<button class="quality-button" data-quality-value="1">Download MP3 128kbps</button><br />
<button class="quality-button" data-quality-value="15">Download 360 Reality Audio [HQ]</button><br />
<button class="quality-button" data-quality-value="14">Download 360 Reality Audio [MQ]</button><br />
<button class="quality-button" data-quality-value="13">Download 360 Reality Audio [LQ]</button><br />
</div>
</div>
</div> </div>
</template> </template>
@@ -33,12 +14,16 @@
import TheSidebar from '@components/TheSidebar.vue' import TheSidebar from '@components/TheSidebar.vue'
import TheMainContent from '@components/TheMainContent.vue' import TheMainContent from '@components/TheMainContent.vue'
import TheTrackPreview from '@components/TheTrackPreview.vue' import TheTrackPreview from '@components/TheTrackPreview.vue'
import TheQualityModal from '@components/TheQualityModal.vue'
import BaseLoadingPlaceholder from '@components/BaseLoadingPlaceholder.vue'
export default { export default {
components: { components: {
TheSidebar, TheSidebar,
TheMainContent, TheMainContent,
TheTrackPreview TheTrackPreview,
TheQualityModal,
BaseLoadingPlaceholder
} }
} }
</script> </script>
src/js/components/BaseLoadingPlaceholder.vue
+13 -10
View File
@@ -1,6 +1,6 @@
<template> <template functional>
<div class="loading_placeholder"> <div :id="props.id" class="loading_placeholder">
<span class="loading_placeholder__text">Loading...</span> <span class="loading_placeholder__text">{{ props.text }}</span>
<div class="lds-ring"> <div class="lds-ring">
<div></div> <div></div>
<div></div> <div></div>
@@ -9,15 +9,18 @@
</div> </div>
</div> </div>
</template> </template>
<script> <script>
export default { export default {
name: 'base-loading-placeholder', props: {
// Without this empty data rollup watcher throws an error text: {
data() { type: String,
return {} required: false,
default: 'Loading...'
},
id: {
type: String,
required: false
}
} }
} }
</script> </script>
<style>
</style>
src/js/components/TheQualityModal.vue
+40
View File
@@ -0,0 +1,40 @@
<template functional>
<div id="modal_quality" class="smallmodal">
<div class="smallmodal-content">
<button class="quality-button" data-quality-value="9">Download FLAC</button>
<button class="quality-button" data-quality-value="3">Download MP3 320kbps</button>
<button class="quality-button" data-quality-value="1">Download MP3 128kbps</button>
<button class="quality-button" data-quality-value="15">Download 360 Reality Audio [HQ]</button>
<button class="quality-button" data-quality-value="14">Download 360 Reality Audio [MQ]</button>
<button class="quality-button" data-quality-value="13">Download 360 Reality Audio [LQ]</button>
</div>
</div>
</template>
<style>
.smallmodal {
display: none;
position: fixed;
z-index: 1250;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgba(0, 0, 0, 0.4);
animation-duration: 0.3s;
}
.smallmodal-content {
background-color: transparent;
margin: auto;
width: var(--modal-content-width);
position: relative;
top: 50%;
transform: translateY(-50%);
}
.smallmodal-content button {
width: 100%;
margin-bottom: 8px;
}
</style>
src/styles/scss/_middle-section.scss
-29
View File
@@ -106,21 +106,6 @@ $searchbar-height: calc(2rem + 1em);
width: var(--container-width); width: var(--container-width);
} }
/* The Modal (background) */
.smallmodal {
display: none;
position: fixed;
z-index: 1250;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgb(0, 0, 0);
background-color: rgba(0, 0, 0, 0.4);
animation-duration: 0.3s;
}
/* Modal Content */ /* Modal Content */
.smallmodal-content { .smallmodal-content {
--modal-content-width: 95%; --modal-content-width: 95%;
@@ -133,17 +118,3 @@ $searchbar-height: calc(2rem + 1em);
--modal-content-width: 70%; --modal-content-width: 70%;
} }
} }
.smallmodal-content {
background-color: transparent;
margin: auto;
width: var(--modal-content-width);
position: relative;
top: 50%;
transform: translateY(-50%);
button {
width: 100%;
margin-bottom: 8px;
}
}
src/styles/scss/base/_variables.scss
+2 -1
View File
@@ -1,4 +1,5 @@
// Breakpoints (@todo change them in more proper values) // Breakpoints
// TODO Change them in more proper values
$small: 601px; $small: 601px;
$medium: 993px; $medium: 993px;
src/styles/scss/globals/_globals.scss
+2 -2
View File
@@ -306,7 +306,7 @@ a {
display: flex; display: flex;
} }
// @todo Remove // TODO Remove
.inline-flex { .inline-flex {
display: flex; display: flex;
align-items: center; align-items: center;
@@ -316,7 +316,7 @@ a {
} }
} }
// @todo Remove // TODO Remove
.right { .right {
float: right; float: right;
} }